Digitales Buch

Die erste Aufgabenstellung sah die Gestaltung der Digitalfassung eines Buches vor. Diese sollte exemplarisch anhand von mehreren Screens in zwei verschiedenen Formaten – horizontal: 1024 x 768 px (XGA) und vertikal: 240 x 320 px (QVGA) – umgesetzt werden. Der konzeptionelle Schwerpunkt lag hier auf dem Navigationskonzept, das in beiden Formaten funktional sein sollte. Der gestalterische Schwerpunkt lag auf dem Einsatz der Screentypografie. Mit andern Worten lag die Herausforderung darin, ein einheitliches Konzept für beide Formatgrößen zu Entwickeln.

Die Bearbeitung der Aufgabe sollte in einem Zweierteam stattfinden. Meine ausgeloste Teampartnerin wurde Vanessa Schmitt. Nach der Sichtung unterschiedlicher Bucharten, entschieden wir uns für „50 Photo Icons. Die Geschichte hinter den Bildern“ von Hans-Michael Koetzle im Taschen Verlag. Das Buch behandelt berühmte Aufnahmen, die Fotograf*innen hinter der Kamera und die Entstehungskontexte der Bilder. In seinem Aufbau hat das Buch Nachschlagecharakter und folgt keinem streng linear aufgebauten Textfluss.

Hinsichtlich der Arbeitsteilung verständigten sich Vanessa und ich schon zu Beginn darauf, dass wir uns jeweils ein Format zur Ausarbeitung vornehmen. So kümmerte sich Vanessa überwiegend um das QVGA-Format und ich mich um das XGA-Format. Als nächsten Schritt einigten wir uns auf das Programm Sketch zwecks technischer Umsetzung. Es war uns beiden sehr wichtig das gleiche Programm zu benutzen, um Kompatibilitätsfehler im Arbeitsprozess zu vermeiden und sich gänzlich auf die Inhalte konzentrieren zu können. Als Vorbereitung auf den eigenen Arbeitsprozess schauten wir uns gemeinsam Umsetzungen der Aufgabe aus den vorangegangenen Semestern auf incom an. Mithilfe dieser Mini-Analyse konnten wir den ungefähren Komplexitätsgrad der Umsetzung besser einschätzen.

Typografie

Einer der wichtigsten gemeinsamen Arbeitsschritte war die Auswahl der Typografie. Mit dem theoretischen Vorwissen, dass der gekonnte Umgang mit Schrift eine Grundkompetenz der Gestaltung ist und sich dieses Können in der Disziplin Interface vor allem im Umgang mit Screentypografie äußert, begaben wir uns auf die anspruchsvolle Suche. Dabei war es uns wichtig, nicht nur der technischen Anforderung der Schriftauswahl gerecht zu werden, sondern auch der inhaltlichen Komponente, d.h. die Typografie sollte darüber hinaus mit dem Inhalt des Buches harmonieren.

Auf der Plattform Google Fonts entschieden wir uns schließlich für die „Open Sans“ von Steve Matteson. Die Schrift gefiel uns beiden in ihrem schlichten und gleichzeitig charmanten Charakter. Wichtig war auch, dass die Schrift gut ausgearbeitet war und insgesamt zehn Schnitte zur Verfügung standen. Mir persönlich ist diese Eigenschaft besonders wichtig gewesen, da ich im Innenteil des Buches keine Schriften miteinander mischen wollte, weil ich hierfür noch kein gutes Auge habe. Einzig auf der Startseite entschieden wir uns den Untertitel in der „Athelas“ von TypeTogether zu setzen und hier eine minimale Schriftenmischung auszuprobieren. Unserer Meinung nach passte die Athelas mit ihren ausgeprägten Serifen und weichen Übergängen in den Strichstärken innerhalb einzelner Buchstaben gut zum „Extra Bold“ Schnitt der serifenlosen Open Sans.

Gestaltung Desktopversion (XGA)

Bereits beim Layouten der Titelseite fiel mir auf, dass das Verlagslogo – der Schriftzug „TASCHEN“ – ein geeignetes Element darstellte, anhand dessen eine Strukturierung der Inhalte vorgenommen werden konnte. Aufgrund dieser Erkenntnis baute ich die Navigation oben rechts vom Logo auf. Die Position des Logos und der Navigation ist dabei auf jeder Unterseite identisch. Auf der Seite mit dem Inhaltsverzeichnis positionierte ich die Such- und Filterfunktion auf der ungefähr gleichen Breite wie das Logo, sodass die Navigationselemente im visuellen Sinne vom Logo aus ihren Ursprung nehmen.

Hinsichtlich der Farbe fiel die Entscheidung das Orange des Originals beizubehalten, da die digitale Version möglichst den Charakter des analogen Vorbildes beibehalten sollte. Ich setzte das Orange in der Navigation als Auszeichnungsfarbe ein, um den User*innen zu signalisieren, wo sie sich gerade befinden.

Die größte Herausforderung für mich war die Wahl der Schriftschnitte und –größe für die einzelnen Textelemente einer jeden Seite. Ich orientierte mich bei der Auswahl viel am Original und an meinen minimalen Vorkenntnissen aus dem Layout-Unterricht; d.h. ich ließ mich von der Frage leiten: Was sollen die User*innen als Erstes lesen, was als Zweites, wie ist die Informationshierarchie? Um eine gute Lesbarkeit zu gewährleisten habe ich abschließend den Flattersatzausgleich auf jeder Seite händisch nachbearbeitet.

Gestaltung Appversion (QVGA)

Bei der Umsetzung der Appversion lag der Fokus vor allem auf der optimalen Nutzung der Platzökonomie. Außerdem ging es darum, die formal-ästhetische Sprache in das kleine(re) Format zu übertragen. Dies wurde dadurch umgesetzt, dass das Orange als Auszeichnungsfarbe und die Schriftschnitte für einzelne Informationselemente beibehalten wurden. Vanessa hatte früh die Idee die Appversion an Instagram anzulehnen. So verlagerte sich die Navigation in dieser Version nach unten, ausgestattet mit den üblichen Icons, die einen hohen Wiedererkennungswert haben.

Die Schriftgröße musste hier so gewählt werden, dass sie trotz der niedrigen Auflösung noch gut lesbar blieb. Hier folgten wir Prof. Müllers Tipp, den Screen in Originalgröße in Sketch anzulegen und dann hinein zu zoomen, um zu schauen, ob die Punzen noch klar zu erkennen sind oder bereits „zumatschen“. Abschließend wurde der Flattersatz auch hier manuell nachjustiert.

Key Learnings

Für mich war dies die allererste praktische Aufgabe im Fach Interfacedesign. Sowohl die konkrete Ausarbeitung als auch die Arbeit im Team führten bei mir zu vielen Aha-Momenten, für die ich sehr dankbar bin. In der Ausarbeitung war es Prof. Müllers Feedback, das Layout zu „konstruieren, nicht einfach herumschieben“. Vanessas Herangehensweise á la: „Na klar, ’n Grid, hier guck mal“ – klick; war für mich herausfordernd und faszinierend zugleich. Ihre absolut furchtlose Art Gestaltung einfach anzufangen hat tiefen Eindruck auf mich hinterlassen.

Klangbild

Bei der zweiten Aufgabenstellung ging es darum, einen Klang zu visualisieren. Über das Losverfahren bekam jeder von uns eine „akustische Begebenheit“, die inhaltlich-visuell interpretiert werden sollte. Die einzige Vorgabe, der zeitliche Ablauf sollte für die Betrachter*innen nachvollziehbar sein.

Herangehensweise

In der Aufnahme #37 hört man, wie sich eine Person langsam durch einen urbanen Raum bewegt. Man hört ab und zu die leisen Schritte, vor allem aber hört man die Umgebung: Abendgeräusche, wie das Zirpen der Zikaden und das Quaken der Frösche, das Rauschen der Stadt, vorbeifahrende Motorräder. Aus dem Hintergrund steigt – erst noch leise – Musik auf, die Live-Performance eines Duetts. Die Stimmen werden lauter dann wieder leiser, es wird geklatscht, bis am Ende der Aufnahme die zwei Stimmen zu einer verschmelzen und alles um sich kraftvoll übertönen.

In der Vorbereitung für die Klangvisualisierung zeigte uns Prof. Müller das Making Of Video der Chemical Brothers zu „Star Guitar“. Das kurze Video hat mir sehr geholfen, mir den Arbeitsprozess zur Umsetzung dieser Aufgabe vorzustellen. Es zeigte auf, dass der Prozess nicht sofort (ästhetisch-ansprechend) visuell war, sondern dem Ganzen ein analytischer Teil vorausging. Nach der Empfehlung eines Kommilitonen lud ich mir daher zuerst das Musikprogramm „Audacity“ herunter, ein Tool mit dem man Tonaufnahmen gut analysieren kann. Danach schnitt ich mir die zwei Minuten lange Aufnahme so zurecht, wie ich dachte, dass die Visualisierung am Besten klappen könnte. In Word hielt ich als nächsten Schritt schriftlich alle Klangereignisse der Aufnahme fest sowie deren genauen Zeitpunkt; also z.B. 0:17 Sek – Frosch, Quak. Diese stellenweise trockene Datenaufarbeitung war ein unabdingbarer Teil des gesamten Gestaltungsprozesses.

Umstzungsidee #1 – Processing

Inspiriert von der simplen Aussage „Interface = Computer // Design = Gestaltung“ aus der Mini-Vorlesung und motiviert durch erste rudimentäre Programmiererfolge aus dem „Processing for Designers“ Kurs, verfolgte ich in meinem ersten Versuch die Umsetzung in Processing. Die Idee war, einzelne akustische Ereignisse aus der Aufnahme nach und nach in Processing ausgeben zu lassen, in der visuellen Form, die ich dafür bestimme. So sollten z.B. das Quaken, Zirpen und Brummen des Motorrads in Typografie ausgegeben werden und die beiden Stimmen des Duetts als vibrierende, glühende Kreise, während das Stadtrauschen sich als white noise über das gesamte Bild legen sollte. Nach dem Feedback von Prof. Müller, dass es allerdings auch darum gehe „ein schönes Bild“ zu produzieren, musste ich einsehen, dass meine Processing-Kenntnisse, noch bei weitem nicht ausreichend waren.

Umsetzungsidee #2 – Klangteppich

Bei der Analyse der Aufnahme war mir bereits aufgefallen, dass es sehr schwer ist, ein akustisches Ereignis auf nur eine Sekunde festzulegen. Die Klänge und Geräusche vermischten sich durchgehend miteinander und verwebten sich ineinander. Aus dieser Beobachtung entwickelte ich das Konzept eines Klangteppichs. Da meine zugeschnittene Aufnahme 72 Sekunden lang war, legte ich in Adobe Photoshop eine 720 px breite Datei an. In der für das westliche Auge klassischen Leserichtung von links nach rechts begann ich nun die einzelnen Klangereignisse in der Fläche zu positionieren. Zum einen um das Vermischen der Klänge miteinander visuell zu übertragen, zum anderen der reinen Ästhetik willen, entschied ich mich die unterschiedlichen Farben mit einem Verlauf ineinander übergehen zu lassen. Hierbei nehmen die Stimmen als Verlaufsflächen den meisten Platz ein, da sie stets präsent sind und sich nur langsam aus dem Hintergrund nach vorne arbeiten. Geräusche wie das Quaken und Zirpen habe ich in schärfer abgetrennten Linien dargestellt, da diese Klangereignisse sehr kurz sind. Das Rauschen, das sich überall in der Aufnahme findet, außer wenn die Stimmen abwechselnd ihren Höhepunkt erreichen, habe ich horizontal in den Klangteppich eingewebt. Es beginnt mal abrupt von links nach rechts, mal löst es sich leise aus dem Hintergrund rauscht und verschwindet wieder. Das Ende der Aufnahme mündet in einem lauten und leidenschaftlichen Duett aus Frauen- und Männerstimme, wofür ich subjektiv eine pink-rote Mischfarbe gewählt habe (Frauenstimme: Pink // Männerstimme: Rot).

Key Learnings

Für mich, einem höchst unmusikalischen Menschen, war die Aufgabe eine tour de force; ich hatte noch nie zuvor mit Audioelementen als Teil eines Gestaltungsprozesses gearbeitet. Abschließend kann ich jedoch sagen, dass ich froh bin diese Erfahrung aktiv gemacht zu haben. Vor allem bin ich froh, so früh im Studium gelernt zu haben, dass Sound ein fester Bestandteil eines ganzheitlichen Interfacedesigns ist. Erstaunt war ich über den Umsetzungsprozess an sich – nie hätte ich gedacht, dass man sich so intensiv zwei Wochen lang mit 72 Sekunden beschäftigen kann (und muss). Aus dem Leistungssport kannte ich den Spruch „Stunden für Sekunden“ und nach der Bearbeitung dieser Aufgabe hatte ich nun auch ganz persönlich eine emotionale Begriffsebene zu dieser Beschreibung.

Graphical User Interface

In der Aufgabe zum Graphical User Interface (GUI) sollte eine Inspirations-App entwickelt werden. Die App hatte zum Ziel, Designer*innen in der Ideenfindung und der Generierung von Entwürfen zu unterstützen. Konzeptionell konnten dabei sowohl assoziative als auch strukturelle und systematische Ansätze verfolgt werden. Formal-ästhetisch sollte ein Entwurf erarbeitet werden, der den üblichen UI-Standards (iOS // Android) entspricht, gleichzeitig jedoch auch eigene Elemente beinhaltet. Abschließend sollte zusätzlich zum Entwurf der einzelnen App-Screens ein übersichtlicher Flowchart entwickelt werden.

Die Bearbeitung dieser Aufgabe sollte ebenfalls in einem Zweierteam stattfinden. Meine diesmal ausgeloste Teampartnerin wurde Zinan Zhang. Im ersten Gespräch klärten wir zunächst unsere technischen Gegebenheiten uns stellten fest, dass wir plattformübergreifend würden arbeiten müssen, nämlich zwischen Sketch (Mac) und Adobe XD (Windows). Dieser Umstand war nicht ideal und er konnte auch nicht gänzlich zufriedenstellend von uns gelöst werden.

Herangehensweise

Nach der Diskussion mehrerer Ansätze und Ideen entschieden wir uns für die Gestaltung einer App im Stil von Apple iOS. Das Konzept unserer App „Drawing Spots“ sah vor, dass die App Gestalter*innen dabei hilft, gute Orte zum Zeichnen zu finden, abhängig vom Wetter, Budget, Mobilität und Motivwahl. Wir schauten uns mehrere Arbeiten aus den vorangegangenen Kursen auf incom an und hielten erste Skizzen zur eigenen Idee fest.

Vor der ersten Iterationsphase haben wir keine iOS UI Elemente in unseren Entwürfen verwendet und uns allein auf die Ausarbeitung des Konzepts fokussiert. Dieser Umstand führte dazu, dass wir bei der detaillierten Ausarbeitung der Screens in Zeitnot gerieten und wichtiger noch, notwendige Änderungen, die sich aus den Detailansichten ergaben, nicht gebührend berücksichtigen konnten.

Unser größtes Problem war das Onboarding in dieser kartenbasierten App. Wie konnten wir uns von der Logik von Google Maps und Apples UI Kit noch lösen? Was genau sollte und konnte noch unser eigener Anteil sein? Denn bereits bei der Wahl der Typografie (San Francisco), Farbe (System Green: #4CD964) und der einzelnen Bedienelemente haben wir uns gänzlich nach dem iOS UI Kit 11 gerichtet. Im Minimalkonsens einigten wir uns auf die Benutzung eigener Icons auf der Startseite und einer leichten Bildbearbeitung, die das Ziel der App – gute Orte zum Zeichnen zu finden – visuell unterstützte, indem das Bild halb Foto, halb Zeichnung wurde.

Key Learnings

Nach unserer beider Empfinden, sowohl von Zinan als auch mir selbst, steht das Ergebnis der visuell umgesetzten App in keinem Verhältnis zu der von uns investierten Zeit und Kraft. Als wichtige Erkenntnis nehme ich mit, dass das Konzept sowie der Flowchart unbedingt vor der detaillierten Umsetzung feststehen müssen. Andernfalls gerät die Arbeit zu einem enormen Kraftaufwand, alle Screens noch einmal neu gestalten zu müssen. Meine Arbeit mit dem Thema „Prototyping“ am IDL hilft mir in dieser Hinsicht sehr weiter.

Nichtsdestotrotz kann ich persönlich sagen, dass mir inhaltlich gerade diese Aufgabe am meisten Spaß gemacht hat. Mir gefallen die Rahmenbedingungen, der vorgegebenen iOS UI Elemente und der pragmatische Ansatz, User*innen führen zu wollen, um ein bestimmtes Ziel zu erreichen. Gerne möchte ich im weiteren Verlauf des Studiums mehr zu diesem Gebiet von Interfacedesign erfahren.

1000 Worte

In der letzten Aufgabe sollte ein komplexer Sachverhalt in einem Schaubild dargestellt werden. Darüber hinaus durften keinerlei Text oder Zahlen zum Einsatz kommen und der Sachverhalt musste möglichst klar kommuniziert werden. Man sollte sich also die Kraft des Visuellen zu eigen machen und den Betrachter*innen den Inhalt möglichst intuitiv und schnell erschließbar präsentieren.

Herangehensweise

Bei der Auswahl des Themas habe ich mich zunächst für die japanische Teezeremonie entschieden. Der sehr stark ritualisierte Vorgang der Teezubereitung und des Teetrinkens schien mir hinreichend komplex.

Nach der schriftlichen Fixierung der einzelnen Schritte und der Recherche bereits verfügbarer Illustrationen im Internet, kam ich zu dem Schluss, dass ich die Illustrationen selbst erstellen musste. Nachdem ich probeweise einige Teeutensilien in Adobe Illustrator erstellt hatte, war mir klar, dass ich das Thema einschränken muss, da ich sonst den engen Zeitrahmen nicht würde halten können. Aus diesem Grund entschied ich mich nur einen groben Ablauf der Zeremonie darzustellen und fotografierte meinen Freund Schritt für Schritt bei der Zubereitung eines Matcha (Tees) zu Hause. Das Feedback von Prof. Müller in der ersten Iterationsrunde war jedoch, dass der Prozess so „zu linear“ sei und Komplexität fehle.

Vor diesem Hintergrund ergänzte ich in der zweiten Ausarbeitungsphase die Orientierung der Teezeremonie an den vier Jahreszeiten und die besondere Ansprache bestimmter Sinne während einer klassischen Teezeremonie. So werden z.B. sowohl die Teeschale als auch die dazu gereichte Süßigkeit von der Jahreszeit abhängig ausgesucht. Die Teeschale wird, nachdem der Tee vollständig ausgetrunken ist, in die Hand genommen, umgedreht und betrachtet, um kontemplativ ihre Schönheit zu bewundern, wobei sowohl der Seh- als auch der Tastsinn angesprochen werden; in der Darstellung mit Icons angedeutet.

Der Verzicht auf Text fiel mir bei der Aufgabe leichter als der Verzicht auf Zahlen, denn ohne Zahlen konnte ich weder eine genaue Angabe zur Temperatur des Teewassers machen, noch dazu, dass man die Teeschale zu einem bestimmten Zeitpunkt einmal um 360° Grad drehen muss. Eine Problematik, die sich am Ende mit Hilfe von Dampfschwaden und einem Pfeil erstaunlich leicht lösen ließ.

Umsetzung

Die technisch-visuelle Umsetzung dieser Aufgabe war für mich eine große Herausforderung. Noch nie zuvor habe ich so viele aufeinander abgestimmte Illustrationen erstellen müssen. Das digitale Zeichnen mithilfe eines Zeichentablets von Wacom gestaltete sich ebenfalls anstrengender und aufwendiger als geschätzt. Ich bin mir auch jetzt ziemlich sicher, dass die Farbflächen in Illustrator eher nicht mit dem Buntstift-Tool ausgemalt werden ;). Eine einheitliche und bewusst gesteuerte Stilentwicklung der Illustrationen wurde schnell von mir aufgegeben, da sich selbst das schlichte Nachzeichnen eines Gegenstandes, sowie die Abstimmung seiner Konturstärken mit dem nächsten Objekt mich voll und ganz in Anspruch nahmen. Das Layout der einzelnen Elemente zueinander – in Größe, Aufbau und Entfernung – wollte ebenfalls lange nicht gelingen. Erst durch ein gemeinsames Betrachten und Brainstormen mit einer Kommilitonin ergab sich die endgültige Kreisform.

Key Learnings

Im Nachhinein bin ich mit der Wahl meines Themas nicht zufrieden, da sich mir durch die Auseinandersetzung mit dem Thema inhaltlich nichts Neues erschlossen hat. Hätte ich die Möglichkeit diese Aufgabe noch einmal zu machen, würde ich lieber ein technisches Thema umsetzen. Ein sehr positives Learning aus dieser Aufgabe war, dass YouTube eine großartige Lernplattform für technisch-visuelle Tutorials ist.

Fazit zum Kurs

Der „Basics Interface“ Kurs hat mir persönlich sehr gut gefallen. Ich mochte sowohl die Unterrichtsstruktur mit der strengen Zeiteinteilung als auch die ausgesuchten Inhalte. Der Kurs bot meiner Meinung nach einen guten Einstieg in die Disziplin Interface.

Durch die kontinuierliche Bearbeitung der vier unterschiedlichen Aufgaben und die dazugehörigen Iterationsschleifen, bleibt mir besonders der Prozess des Gestaltens in Erinnerung. Für mich war es immer wieder beeindruckend zu sehen, wie aus einfachsten Kritzeleien Konzepte und konkret ausgearbeitete Screens werden. Aus meinem Erststudium kannte ich die Arbeit an Texten: Stichpunkte, Notizen, Cluster, Teilsätze, Absätze und dann ein ganzer Fließtext, bevor es in die stilistische Arbeit geht ;). Bis zum „Basics Interface“ Kurs konnte ich diesen Prozess nicht auf das visuelle Arbeiten in der Gestaltung übertragen und habe erst jetzt das Gefühl, eine erste Ahnung davon bekommen zu haben. Für diese Erkenntnis bin ich aufrichtig dankbar.