Aufgabe 1: digitales Buch

Aufgabenstellung:

In dieser Aufgabe sollte eine digitale Fassung eines Buches gestaltet werden, das Screen-Design sollte hierbei für zwei unterschiedliche Bildschirmgrößen ausgestaltet werden (240 x 320px und 1024 x 768px).
Ich habe das Projekt zusammen mit Jonathan Carl bearbeitet.

Idee: 

Jonathan hatte relativ schnell die Idee, das Kochbuch „Jerusalem“ von Yotam Ottolenghi und Sami Tamimi zu digitalisieren. Es bietet einen Einblick in eine Vielzahl von traditionellen Gerichten und zeigt die kulinarische Vielfalt Israels.

Umsetzung:

Die größte Herausforderung bei der Gestaltung bestand darin, den Scharm und die Haptik des original Buches beizubehalten. Aus diesem Grund entschieden wir uns dafür, mit grafischen Elementen des Buchcovers zu arbeiten. Für die Umsetzung haben wir neben Photoshop, das Prototyping-Tool Figma benutzt, da wir so gemeinsam in Echtzeit an dem Screen-Design arbeiten konnten.

Ergebnis 1024 x 768 Pixel (XGA)

Ergebnisse 240 x 320 (QVGA)

Aufgabe 2: Graphical User Interface (GUI)

Aufgabenstellung:

Bei der zweiten Aufgabe sollte ein Interface für eine Inspirationsapp gestaltet werden. Wichtig war hierbei die Einhaltung der UI-Guidelines von iOS bzw. Android. Bei dieser Aufgabe habe ich zusammen mit Melvin-Eli Urulu gearbeitet.

Idee:

Melwin und ich haben uns die App mit dem Titel „Patch Brain“ ausgedacht. Hintergrund der App ist, dass viele analoge Synthesizer und Modular Systeme keine Funktionen zum Speichern von Einstellungen (Patches / Presets) bieten. Wir wollten Musikern und Synthesizer-Fans eine Plattform bieten, um ihre Soundkreationen in Form von Fotos speichern und kategorisieren zu können. Zur besseren Organisation der einzelnen Patches können diese neben Name und Beschreibung auch mit Audioaufnahmen und Tags versehen werden. Dem Nutzer ist dabei freigestellt, ob er seine Kreationen mit der Patch Brain Community teilen möchte oder nicht, andere Nutzer haben dann die Möglichkeit, den Sound zu favorisieren und die Einstellungen auf eigene Synthesizer des gleichen Typs zu „patchen“.

Umsetzung:

Bei der Umsetzung des Android Prototyps entschieden wir uns für die Richtlinien der Designsprache „Material Design“. Besonders wichtig war es uns, die App so funktional wie möglich zu halten, ohne überflüssige Features und ohne verwirrender Menüführung. Auch bei dieser Aufgabe wurde Figma als Prototyping-Tool benutzt.

Ergebnis:

Aufgabe 3: Klangbild

Aufgabenstellung:

Für diese Aufgabe wurde uns ein zufälliger Klang zugewiesen, der zuvor von anderen Studierenden des Kurses aufgezeichnet wurde. 
Das Ziel war es, diesen Klang in einem Zeitraster visual darzustellen und die Begebenheiten des Klanges für den Betrachter nachvollziehbar zu machen. Das Format der Visualisierung und die inhaltliche Interpretation wurden bei der Aufgabe uns überlassen.

Idee:

Zuerst kam mir die Idee, diese Aufgabe als interaktive Anwendung umzusetzen. Dafür wollte ich ein Partikelsystem mit der Gameengine Unity entwickeln, das sich durch den Betrachter in Form und Darstellung in Echtzeit verändern lässt. Leider ist aus dieser ersten Idee nicht mehr als ein erster Prototyp geworden, aus zeitlichen Gründen entschied ich mich dann für einen anderen Ansatz.

Umsetzung:

Zuerst entwickelte ich eine Animation, die auf die verschiedenen Klangereignisse der Aufnahme reagiert, auf Basis dieserer Animation fügte ich dann nach und nach weitere visuelle Elemente ein. Für die Umsetzung habe ich eine Vielzahl von verschiedenen Programme und Workflows benutzt, hier einige davon:

- Blender 3D 
- Animation Nodes Plugin (Blender)
- Photoshop
- Illustrator
- After Effects

Making Of:

Ergebnis:

Aufgabe 4: Tausend Worte

Aufgabenstellung:

In der letzten Aufgabe sollte ein komplexer Sachverhalt in einem Schaubild festgehalten werden, dabei sollte möglichst ohne Text und Zahlen gearbeitet werden.

Idee:

Nach anfänglichen Entscheidungsschwierigkeiten entschied ich mich dafür, den typischen Aufbau einer Dreipunkt Ausleuchtung für Interviewsituationen visuell dazustellen.

Umsetzung:

Bei der Umsetzung war es mir wichtig, so viele Informationen wie möglich zu vermitteln, ohne das ganze Überladen aussehen zu lassen. Das Poster soll die folgenden Inhalte vermitteln: Lichtposition, Lichtwinkel, Lichthöhe, Lichtqualität (weiches oder hartes Licht), Auswirkungen auf Konturen im Gesicht und die Aufbau Reihenfolge. Diese Aufgabe habe ich mit Adobe Illustrator umgesetzt.

Erster Entwurf:

Ergebnis:
Ich habe das Schaubild überarbeitet, um auf die Piktogramme verzichten zu können und um die kreisförmige Darstellung von oben zu übernehmen.

Fazit

Für mich war der Kurs eine sehr gute Gelegenheit, einige Einblicke in das Themengebiet des Interface Designs zu bekommen. Besonders gut haben mir die klare Strukturierung des Kursverlaufs und die abwechslungsreichen Aufgabenstellungen gefallen. Das konstruktive Feedback bei Zwischenpräsentationen hat mir sehr dabei geholfen, meine gestalterischen Fähigkeiten weiter zu verbessern. 

Ich kann den Kurs wirklich weiterempfehlen.