(1. FS) Basics Interface 17|2

1. Digitales Buch

Der Umgang mit Typografie stellt eine wesentliche Grundkompetenz aller Designdisziplinen dar. Jede Disziplin hat dabei ihre eigne Spezifik. Kommunikationsdesign: Plakat- Buch- und Zeichengestaltung. Produktdesign: Ausstellungs- und Industriedesign. Und im Interfacedesign spielt eben die Verwendung von Typografie unter den Bedingungen des Bildschirms eine große Rolle. (Prof. Boris Müller)

Aufgabenstellung:

Es soll eine digitale Fassung Ihres Lieblingsbuches gestaltet werden. Das Buch kann ein Roman, ein Sach-, Koch- oder Fachbuch, oder auch ein Gedichtband sein. (Keine Comics!) Die digitale Fassung des Buches soll exemplarisch anhand von mindestens vier Screens in zwei verschiedenen Formaten vorgestellt werden - mindestens zwei horizontale Screens im Format von 1024 x 768 Pixeln (XGA) und mindestens zwei vertikale Screens im Format von 240x320 Pixeln (QVGA). Die Screens sollen nicht nur die Inhalte des Buchs wiedergeben, sondern sollen auch das Navigationskonzept verdeutlichen, mit dem die Inhalte des digitalen Buches erschlossen werden können. Lesbarkeit und Klarheit der Darstellung sind die wichtige Kriterien bei der Bearbeitung der Aufgabe. Die Aufgabe soll in Zweierteams bearbeitet werden.

Verlauf:

Mein Projektpartner und ich haben uns für ein Kochbuch entschieden, da uns der praktische Aspekt an einer digitalen Version eines Kochbuches sehr gefiel. Unsere Wahl fiel auf „Käts Studentenküche“.

Wir hatten sehr viele nützliche Ideen wie einen Mengenrechner & Sprachsteuerung, die wir gerne in das digitale Kochbuch mit eingebracht hätten. Allerdings mussten wir nach einer Woche feststellen, dass in dieser Aufgabe nur die Typografie, das Ausrichten am Raster, sowie die Navigation im Vordergrund stehen, nicht aber hilfreiche Features.

In der zweiten und dritten Woche konzentrierten wir uns also vollends auf die visuelle Umsetzung des digitalen Buches und haben unser Interaktionskonzept auf das Minimalste heruntergebrochen. Wir einigten uns bei den Farben für das Interface auf jene, die das Buch schon von vornherein mitbrachte, also auf rot, beige und weiß.

Was mir bei der Gestaltung wichtig war: Frische, knackige und natürliche Farben machen Lust auf Essen. Dies und andere Elemente, die einen an das Essen und Kochen erinnern, wollte ich daher auch in dem Digitalen Buch darstellen. Mit einer Kombination aus den Originalbildern vom Buch und skeumorphistischen Elementen wie Holz, Ziegelsteine, Früchte, Kräuter etc. versuchte ich sowohl nahe am Thema Kochen zu bleiben, als auch den Leser auf spielerische Art und Weise Lust auf das Kochen zu machen.

Mit der Zeit ergaben sich jedoch leider kleinere Schwierigkeiten. Mein Gruppenpartner und ich hatten zwei völlig unterschiedliche visuelle Vorstellungen im Bezug auf Typografie, weitere Farben und Darstellung von Elementen. Er mochte es sehr minimalistisch & komplett flat und ich auf Grund des Themas „Kochen“ sehr bunt. Letztlich glaube ich aber, dass es beim einen zu viel und beim anderen zu wenig war.

Zur Navigation: • Eingangs sieht man das Originalcover und die Inhaltsangabe, die eigentlich auf der Rückseite steht. • Es gibt ein erstes Tutorial zum Navigieren durch das Buch. Hierbei unterscheidet sich das Navigationskonzept nicht außerordentlich von gängigen Apps und digitalen Büchern. Wie bei einem normalen Buch swiped man von rechts nach links, um auf die nächste Seite zu gelangen und umgekehrt auch wieder zurück. Um schneller zu blättern, kann man sich das Drop-Down-Menü vom oberen Bildschirmrand herunterziehen und an den Bildern horizontal gleitend swipen oder an den aufgeführten Punkten touchen, um schneller in ein Kapitel zu gelangen. • Das Rezept liest man, indem man hoch- und herunterscrollt. Dies kann man im Vollbildmodus tun (durch einmaliges Tippen auf den Bildschirm) oder sogar in einer Doppelblatt Ansicht (durch Drücken des Buch-Buttons an der Leiste oben links).

Zur Typografie: • Wir haben uns bei den Überschriften für eine vintage-artige Schrift (Hand TypeWriter) entschieden, da diese dem Leser ein „handmade“-Gefühl vermittelt und dies passt somit gut zum Thema Kochen. • Für alle Textblöcke haben wir uns für eine Schrift entschieden, die möglichst gut leserlich ist (Neutra Text TF im Rezept & Akzidenz Grotesk BQ im Vorwort). • Die Schriftblöcke und Elemente haben wir an einem Raster ausgerichtet.

Fazit: Die Arbeit mit Sketch war im Grunde sehr einfach und hat mir wirklich viel Spaß gemacht. Dennoch war die Umsetzung durch unterschiedliche Vorstellungen zweier Personen schon eine große Herausforderung. Am Ende waren wir beide leider nicht ganz so überzeugt von unserem Ergebnis. Heute kann ich sagen: „Weniger ist mehr.“

Ergebnis:

XGA (1024x768)

(QVGA) 240x320

2. Klangbilder (Narratives in Time and Space)

Die Beziehung zwischen Klängen und Bildern ist notwendigerweise will- kürlich. Es gibt kein festes Bezugssystem, das einem ermöglichen würde, ein Klangerlebnis einer räumlichen Struktur zuzuordnen. Dennoch ist die Zuordnung von Klängen zu Bildern eine der zentralen Kulturleistungen der Menschheit. Denn nur so konnten Laute aufgezeichnet und Schriften entwickelt werden. Diese Beziehung beschränkt sich aber nicht nur auf Sprache. Auch in der Musik ist die Frage nach der Notation von zentraler Bedeutung. Weiterhin gibt es auch besondere Buchstabensysteme, wie z.B. das Morse-Alphabet, bei dem die Zuordnung von akustischen und graphischen Zeichen sehr eng ist. Darüber hinaus hat die Beziehung zwischen Klang und Bild auch immer die bildende Kunst beschäftigt. (Prof. Boris Müller)

Aufgabenstellung:

Es soll eine aufgezeichnete akustische Begebenheit in einem Zeitraster visualisiert werden. Der zeitliche Ablauf der Begebenheit soll also für den Betrachter nachvollziehbar sein. Das Format der Visualisierung kann frei gewählt werden. Die Audio-Dateien für die akustischen Begebenheiten werden im Kurs zufällig verteilt und sind offen für inhaltliche und visuelle Interpretation.

Verlauf:

Mir wurde der Klang #26 zugeteilt, auf dem Schritte, Kieselknirschen und das Zwitschern von Vögeln zu hören waren. Ich assoziierte damit sofort einen Spaziergang im Wald und freute mich auf die Aufgabe, empfand es dennoch als eine besonders große Herausforderung dies zu visualisieren, da mein Know-How mit grafikgenerierender Software bis zu dem Zeitpunkt noch mäßig bis nicht vorhanden waren.

Erste Darstellungsideen:

Ich versuchte es zunächst mit Adobe Illustrator, merkte aber schnell, dass mein Vorhaben, viele kleine Geräusche dreidimensional mit dieser Software darzustellen, zum scheitern verurteilt war, da a) es nicht gut aussah und b) ich mich auch nach etlichen Tutorials damit einfach sehr schwer tat. Daher entschied ich mich nach einiger Zeit doch dazu es mit einem Programm (Fusion 360) zu versuchen, das zwar eher für Produktdesign ausgelegt ist, ich jedoch damit zumindest schon einige Erfahrungen sammeln konnte, auf Grund eines CAD Kurses, den ich in diesem Semester belegt habe.

Hierzu dachte ich, es wäre ganz schlau, wenn man die Audio-Datei in die DAW Pro Tools importiert und an jedem Schrittgeräusch einen Schnitt und Markierung setzt, damit ich später an diesen Stellen genau ablesen kann, wo ein Körper in Fusion 360 zu erstellen ist. Ich machte also einen Screenshot von der bearbeiteten Spur, lud diesen in Photoshop hoch, um daraus einen Kreis zu formen, sowie 7-sekündige Zeitsequenzen zu markieren und nutzte dies dann als Vorlage in Fusion 360.

Ich merkte jedoch schnell, dass ich zwar die Schritte festgehalten habe, nicht aber die Intensität und Tonhöhe der Schritte. Also musste ich doch noch einmal alles einzeln heraushören. Ich zog mir mit der DAW (diesmal Logic Pro X) die Höhen der Vögel heraus, entfernte weitestgehend Störgeräusche bzw. Rauschen, machte die Schritte lauter und hörte mir im ständigen Loop einzelne Sequenzen an. Damit war ich dann die darauffolgenden Wochen erst einmal bedient.

Da ich wie schon erwähnt mit dem Klang einen Spaziergang durch den Wald assoziierte, wollte ich diesen Gedanken auch irgendwie grafisch aufgreifen - davor in Illustrator durch eine grüne Hintergrundfarbe und hier in Fusion, da sich die Gelegenheit aufgrund der Kreisform und den Zeitsequenzen ergab, in Form eines Baumstamms.

Die Idee kam allerdings nicht so gut an. Es sollte wohl alles abstrakter und minimalistischer sein. Daher entschied ich mich für ein klassisches schwarz-weiß. Außerdem wollte ich nun, dass es dann die Form eines Windspiels hat.

Schwarz sind hierbei die Schritte und das durch sie erzeugte Knirschen der Kieselsteine. Weiß ist das Zwitschern der Vögel. Betrachtet man es von unten, so kann man im Uhrzeigersinn lesen, an welchen Stellen Schritte und Vögel zu hören sind. Die Durchmessergrösse der Körper lassen Aussagen über die Tonlänge treffen. Betrachtet man das Objekt von der Seite, so ist das Windspiel zu erkennen. Die Länge der Röhren (Schritte) und Halbröhren (Vögel) kennzeichnen die Lautstärke. Ihre vertikale Position kennzeichnen die Tonhöhe.

Fazit: Die Umsetzung des Projektes war eine echte Geduldsprobe und hat sehr viel Zeit in Anspruch genommen. Dadurch habe ich aber unglaublich viel über das Programm gelernt und mit dem Ergebnis bin ich durchaus zufrieden.

Ergebnis:

3. Graphical User Interface (GUI)

Spätestens seit der Einführung des Apple Macintosh stellt die Kombination aus Fenstern, Maus und Icons das zentrale Interaktionsformat mit Computern dar. Die Gestaltung einer grafischen Benutzerschnittstelle hat zum Ziel, den Nutzern die Möglichkeit zu geben, ihre Vorhaben reibungslos und fehlerfrei zu realisieren. Die Grundlage für die Gestaltung eines Interfaces bilden standardisierte Steuerelemente wie z.B. Buttons oder Scrollbalken. Je nach Anforderungen an die GUI können und müssen jedoch auch eigene z.T. Anwendungsspezifische Steuerelemente konzipiert und entworfen werden. (Prof. Boris Müller)

Aufgabenstellung:

Es soll eine Inspirations-App für das iPhone realisiert werden. Die App soll also eine Gruppe von Designern / Entwicklern bei der Generierung von Ideen, Einfällen und Entwürfen unterstützen. Dabei können assoziative Ansätze genauso verfolgt werden wie strukturelle und systematische. Die genauen Funktionalitäten können in der Konzeptphase entwickelt werden. Es sollen mindestens vier Screens präsentiert werden - gern auch mehr. Das Ziel ist, einen Entwurf zu erarbeiten, der sowohl den üblichen UI- Standards (iOS oder Android / Material Design) entspricht, aber trotzdem individuelle Züge trägt. Es ist sinnvoll, sich für den Entwurf auf eine Bildschirm-Auflösung festzulegen. Zusätzlich zum Entwurf soll ein Programmablaufplan (Bewegungspfade durch die App) skizziert werden. Die Aufgabe soll in Zweierteams bearbeitet werden.

Verlauf:

Wir haben uns relativ schnell auf die Idee meines Gruppenpartners geeinigt. Hierbei sollte die App eine Inspirationsquelle und gleichzeitig Kommunikations- und Koordinationsplattform für Projektarbeiten in Gruppen sein. Erste Ideen und Leitfaden haben wir in einem persönlichen Gespräch festgehalten. Die App soll enthalten: • Suchmaschine durch Hashtags oder Browser • Gruppen-/Projektarbeit • Teilen und Besprechen von eigenen Ideen & Inspirationsquellen wie Links, Bilder, Sounds

Es kamen die Weihnachtsferien und lange Krankheit dazwischen, weswegen wir alles Weitere mit Dropbox Paper und per Videochat besprochen haben. Im Grunde waren wir beide sehr motiviert und haben parallel ziemlich viel Liebe & Arbeit in die Umsetzung des Projektes gesteckt, merkten dann aber, dass die Zeit leider etwas knapp wurde. Schließlich wussten wir nicht wie wir unsere Resultate zu einem gemeinsamen visuellen Ergebnis formen sollten. Daher haben wir uns in der letzten Woche dazu entschieden, die Projekte einzeln vorzustellen.

Meine ersten Skizzen:

Ich habe die App insbesondere unter dem Aspekt der Sortierung und Verwaltung von Links & Dateien konzipiert, da ich (und scheinbar auch viele andere) im Alltag das Problem haben, dass ich meine Inspirationsquellen im Netz suche und die Tabs einfach offen lasse, wenn sie mir gefallen, ich sie demnächst weiterlesen oder für Projekte ansammeln und teilen möchte. Irgendwann hat man dann einen Haufen offener Tabs, wodurch man leicht den Überblick verliert. Durch einen eigenen Account in der App und der Separierung zwischen Privat und Community, lassen sich private Interessen und Projektarbeiten leichter managen. Im Grunde wollte ich eine App gestalten, die eine Mischung aus Google (Suchmaschinenfunktion), Youtube (das Anlegen von eigenen privaten & öffentlichen Foldern), Facebook (das Teilen, Bewerten und Besprechen von Links und Dateien) und Instagram (das interessenorientierte Stöbern und die Navigationsleiste) ist.

Zu Anfang bestand die App namens Linkdrop noch aus einem Browser. Die Idee wurde allerdings nach Rücksprache mit meinem Gruppenpartner verworfen, da sonst alles zu überladen wirkte. Daher sollte die App nun lediglich über eine Suchfunktion per Hashtags verfügen. Darüberhinaus verfügt die App über einen Suchverlauf, Suchfilter, diverse Ansichtsoptionen und einem „Screenfreeze“, der den aktuellen Screen einfriert, sodass man später genau an dieser Stelle weiterlesen kann. Weitere Funktionen können aus dem Programmablauf (siehe Ergebnis) entnommen werden.

Gestaltung: Ich habe mich in Sachen Schrift (SF Pro Display), Icons und Buttons zwar genau am iOS Material Design orientiert, wollte es aber mit Absicht nicht 1 zu 1 wie Instagram oder Appstore aussehen lassen, da die App für mich sonst einfach uninteressant und langweilig wie alle anderen gewirkt hätte. Ich dachte es würde reichen, wenn man derzeitig dominierende Darstellungen wie den verschwommenen Hintergrund, bunte Farbverläufe und abgerundete Icons & Buttons verwendet, damit es den üblichen iOS Material Design UI-Standards entspricht. Dass die App letztlich nicht in weiß und mit schattierten Bildern, wie auch den Titeln in SF Pro Display (Bold) daher kam, sah ich als die in der Aufgabenstellung erwähnte Freiheit an, der App „individuelle Züge“ zu verleihen, hehe ^^'

Fazit: Dieses Mal habe ich mit Adobe Experience Design (XD) gearbeitet und muss sagen, es hat mir sehr viel mehr Spaß gemacht als mit Sketch, da es flüssiger und intuitiver ist. Mit meinem Ergebnis bin ich eigentlich sehr zufrieden, weiß aber, dass es mehr nach Appstore aussehen sollte :D

Ergebnis:

4. 1000 Worte

Ein Interface hat immer die Aufgabe, abstrakte Vorgänge verständlich und bedienbar zum machen. Dazu müssen die Funktionsmechanismen eines Computers klar kommuniziert werden und oftmals auch Analogien aus der Alltagswelt gefunden werden, die dabei helfen, die Funktionen zu kommunizieren. So hat sich in den letzten Jahren die »Schreibtischme- tapher« etabliert, die das Dateisystem eines Computers für die Nutzer leichter verständlich machen soll. Es bleibt aber immer die Frage, wie man Dinge kommuniziert, ohne dabei Text zu verwenden. Dies ist nicht nur wichtig im Hinblick auf die Internationalisierung von Interfaces. Vielmehr kann eine visuelle Darstellung einen Sachverhalt deutlicher und schneller kommunizieren als ein ausführlicher Text. Ein gutes visuelles Interface ermöglicht Nutzern also die Interaktionsmöglichkeiten schnell zu erfassen. (Prof. Boris Müller)

Aufgabenstellung:

Es soll ein komplexer Sachverhalt gesucht und in einem Schaubild oder in einem interaktiven Film dargestellt werden. Die Darstellung darf keinerlei Text enthalten. Der Sachverhalt soll möglichst deutlich und klar kommuniziert werden. Bei der Auswahl eines Themas sollte drauf geachtet werden, dass das Thema hinreichend komplex ist. Naturwissenschaftliche Themen sind z.B. gut geeignet. Es können aber auch Alltagsthemen genommen werden wie z.B. die Zubereitung eines Essens.

Verlauf: Vor dieser Aufgabe hatte ich den größten Respekt, da ich mir vorgenommen habe, sie dieses Mal wirklich mit Adobe Illustrator umzusetzen. Ich habe mich für die sehr umstrittene und dennoch wichtige Theorie der „Psychosexuellen Entwicklung“ nach Sigmund Freud entschieden. Worum geht es in dieser Theorie? Einen guten Überblick verschafft: https://de.wikipedia.org/wiki/Infantile_Sexualit%C3%A4t -> Phasen der psychosexuellen Entwicklung. Seine Theorien gehörten in meiner Ausbildung (Sozialassistentin) zur Grundlehre im Fach Psychologie und Sozialpädagogik. Ich empfand es immer als sehr schade, dass es zu diesem Thema keine Infografik im Internet gibt. Daher sah ich dies als eine gute Gelegenheit.

Erste Skizzen & Umsetzung in Illustrator:

Ich wusste von Anfang an wie ich den Phasenverlauf umsetzen wollte. Als Erstes sollte Freud zu sehen sein, der über seine Theorien der Psychosexuellen Entwicklung nachgrübelt. Ich tat dies, damit jeder weiß, dass es sich hierbei nur um ein Gedankenkonstrukt handelt, das einst von ihm stammte. Als Nächstes sollten dann die fünf Phasen auffallen, die im Gegensatz zu allen anderen Objekten auf dem Bild umkreist sind. Somit lässt sich eine Gemeinsamkeit und Geschlossenheit erkennen. Aus den Phasen mündet jeweils ein eigener Pfad, der der Phase zugehörig signifikante Merkmale aufzeigt, und ein anderer dickerer Pfad, der zur nächsten Phase führt bis sie irgendwann alle durchlaufen sind. Ich habe mich dazu entschieden alles auf eine amüsante Art und Weise darzustellen, da ich die Information gerne an Emotionen knüpfe, damit sie besser gespeichert werden. Außerdem macht es auch einfach mehr Spaß, sich solch eine Grafik anzuschauen.

Farben: Die Gedankenblase sollte so hell sein, dass sie als solche zu erkennen ist und dennoch die Person wiederspiegeln, um die es in den Gedanken geht. Und zwar der kleine Junge, der zu einem Mann heranreift und dabei verschiedene Phasen durchläuft, in denen immer ein bestimmtes Körperteil sexuell im Fokus steht. Da es um die infantile, also kindliche Sexalität geht, wählte ich die Farbe baby-blau. Die anderen Farben, die das Auge durch das Bild leiten sollten, orientierte ich auch an dieser Farbe. So wählte ich für die Phasen und dünnen Pfeile ein passendes türkis und für die dicken Pfeile, die zur nächsten Phase zeigen, ein sanftes senfgelb. Der Hintergrund sollte schwarz-grau sein, um die Vergänglichkeit der Theorie Freuds darzustellen, da es mittlerweile viele weitere Theorien gibt. Zudem achtete ich darauf, nicht zu viele Signalfarben wie rot oder extrem knallige Farben zu verwenden, welche zu sehr die Aufmerksamkeit auf sich lenken würden oder gar missverständlich wirken könnten.

Bildschirmfoto 2018-01-26 um 16.08.53.png

Technik: Nach einigen Tutorials hatte ich schließlich den Dreh heraus. Ich merkte, dass Kreise und Quadrate die Hauptformen sind, mit denen sich alles Mögliche konstruieren lässt. Diese Schlüsselerfahrung war für mich sehr aufschlussreich und wichtig. Nun war für mich nicht mehr die Software die Schwierigkeit, sondern mein Vorhaben, die vielen kleinen Bilder und Geschichten in der vorgegebenen Zeit rechtzeitig umzusetzen.

Fazit: Diese Aufgabe hat mich extrem gefordert und gefördert und dafür bin ich sehr dankbar. Auch stellte sich heraus, dass die Angst etwas nicht umsetzen zu können meist größer ist als die Hürde selbst. Letztlich hat mir das Arbeiten mit Illustrator sehr viel Spaß gemacht und ein kleiner Workflow hat sich etabliert.

Hier noch einmal ein paar kleine Infos zu Freud: