01. Digitales Buch

Die erste Aufgabe bestand darin, eine digitale Fassung unseres Lieblingsbuches in Teamarbeit zu gestalten. Die Bildschirmgröße wurde mit einem kleinen Format (240px x 320px) und einem mittelgroßen Format (1024px x 768px) vorgegeben. Pro Format sollten wir mindestens vier Screens gestalten. Die Bearbeitung der typografischen Elemente stand bei dieser Aufgabe im Vordergrund.

Mein Teampartner war Till Kufus. Zusammen entschieden wir uns für das Buch Home-Made Europe von Vladimir Arkhipov. Das Buch beinhaltet eine Sammlung von selbst angefertigten Gegenständen, die von verschiedenen Menschen aus Europa gebaut wurden. Die Kapitel sind nach Ländern sortiert, indem die Gegenstände und die Hersteller kurz vorgestellt werden. Dazu gibt es immer ein Foto vom Objekt mit einer kurzen Textbeschreibung.

Wir entschieden uns, das schlichte Design des Buches bei unserer digitalen Fassung beizubehalten und auch dieselbe Aufteilung des Inhaltsverzeichnis zu übernehmen. Nach Ländern sortiert, erscheint eine Übersicht von Bildern der handgefertigten Gegenstände. Klickt man auf ein Bild, wird man zu der Textbeschreibung mit weiteren Informationen zum Objekt, weitergeleitet. Man hat die Möglichkeit, dieses nun wieder zu schließen oder runter zu scrollen und nach weiteren Gegenstände zu stöbern. Feine Linien helfen dem Leser zu verstehen, wo die Informationen zu einem Gegenstand enden. Für die Orientierung des Nutzers ist das Inhaltsverzeichnis in der Navigationsleiste auf der rechten Seite zu finden. Durch die Bolden Schriftschnitte kann man erkennen, in welchem Abschnitt man sich gerade befindet. Man kann gezielte Kapitel in der Navigationsleiste auswählen oder einfach chronologisch durch das Buch durchscrollen. Bei dem kleineren Screen mussten wir aus Platzgründen das Inhaltsverzeichnis und den Inhalt separat halten. So gelangt man zuerst zum Inhaltsverzeichnis und kann dort gezielt die Kapitel auswählen. Erst dann gelangt man zu den Bildern und Textinformationen.

Für die Typografie wählten wir zuerst die Avenir und die Baskerville Schrift. Nach der ersten Zwischenpräsentation wurde dann aber schnell klar, dass man die Serifenschrift schwer lesen kann und sie auf dem kleineren Screen kaum noch erkennbar ist. So gestalteten wir die Typographie strikt mit der serifenlosen Schrift Avenir. Durch ihren neutralen Charakter ist sie unauffällig und lässt den Textinhalten den Vortritt.

Aufgaben Fazit

Diese Aufgabe zeigte mir, wie viel man bei der Screen-Typografie beachten muss. Ich fühle mich nun sicherer in der Auswahl von Schriften auf verschiedenen großen Formaten. Es war spannend zu lernen, dass viele Schriften, die beim Print gut funktionieren, auf dem Screen weniger gut wirken oder schlecht zu lesen sind. Der Input zu dieser Aufgabe war eine gute Ergänzung zu dem Grundlagen Typografiekurs und dem Typedesign Kurs.

Ergebnis für das Format 1024px x 768px

Ergebnis für das Format 240px x 320px

02. Graphical User Interface (GUI)

Auch die zweite Aufgabe sollte in einem Zweierteam bearbeitet werden. Hierbei sollten wir uns eine Inspirations-App für Designer ausdenken. Wichtig war es, eine Balance zwischen den OS-Standards und unserer eigenen Gestaltungsideen zu finden. Im Vordergrund sollte hier die Interaktion des Users mit der App stehen.

In Zusammenarbeit mit Chiara Tilgen entschieden wir eine App zu gestalten, bei der man Inspirationen aus der Natur finden kann. Dabei hat der Nutzer die Möglichkeit im Hauptmenü zwischen verschiedenen Kategorien wie Grünpflanzen, Blumen, Bäumen, Obst und Gemüse zu wählen. In jeder Kategorie findet man ein breites Spektrum an verschiedenen Pflanzen. Sobald man eine gezielte Pflanze auswählt, findet man nicht nur allgemeine Informationen, sondern auch welches Design- und Kunstwerk bereits durch diese Pflanze inspiriert worden ist. Die Design- und Kunstwerke sind in verschiedenen Kategorien wie Fotografie, Malerei, Installationen u.s.w. aufgeteilt. Auf diese Weise hat man die Möglichkeit, sich in vielen verschiedenen Bereichen inspirieren zu lassen. Man lernt viel über die Natur und auch über verschiedene Künstler und deren Arbeiten.

Über die Tab Bar kann man aber auch gezielt nach einem bestimmten Designer oder einer bestimmten Kategorie suchen. Unter dem Menüpunkt Collection kann man seine Inspirationen sammeln und in verschiedenen Ordnern zusammenstellen.

Wir hielten uns strikt an die Guidlines von iOS, da bei uns beiden noch keine großen Vorkenntnisse in der Gestaltung von Apps vorhanden waren. Wir wollten uns lieber erst intensiv mit den vorhandenen Richtlinien eines der Operating Systems beschäftigen, bevor wir eigene Elemente konzipieren. So bekam man ein gutes Gefühl für die richtige Anordnung und Wahl der Schriftgrößen und den einheitlichen Gestaltungsstil von iOS.

Bei der Gestaltung entschieden wir uns gegen die Verwendung von Farben, da die Bilder in der Inspirations-App im Vordergrund stehen sollen. Diese sollen genügend Weißraum bekommen, damit die vielen verschieden Farben der Bilder keine Unruhe aufkommen lassen. Für den Text entschieden wir uns für die Schrift Fira Sans um uns minimal von dem iOS-Stil abzuheben, bei den Überschriften blieben wir bei der Standard iOS Font SF Pro Text.

Aufgaben Fazit 

Ich bin mit dem Ergebnis unserer App sehr zufrieden. Wir konnten uns schnell auf ein Thema einigen und auch wenn wir zuerst verschiedene Vorschläge zu der Gestaltung hatten, konnten wir uns gut arrangieren und abstimmen. Es half mir im Team zu arbeiten, da so zwei Leute gleichzeitig einen Blick auf die GUI hatten und man die Verständlichkeit und Funktionalität der App besser prüfen konnte. Ich hatte große Freude an dieser Aufgabe und es war eine gute Übung um sich mit den Guidelines von iOS vertraut zu machen.

03. 1000 Worte

Bei dieser Aufgabe sollte in Einzelarbeit ein komplexer Sachverhalt in einem Schaubild dargestellt werden. Die Schwierigkeit lag darin ohne Wörter und Zahlen zu kommunizieren. Wichtig war es also, die Grafiken so selbsterklärend wie möglich zu gestalten.

Die schwierigste Aufgabe war es für mich ein geeignetes Thema zu finden. Ich entschied mich zuerst eine Anleitung der Karateprüfung für den gelben Gurt zu gestalten. Dafür wollte ich auf der linken Seite die erforderten Techniken illustrieren und auf der rechten Seite anhand einer Grafik mit Fußabdrücken zeigen, in welche Richtung der Prüfling laufen muss. Lange hielt ich an der Idee fest, bis ich merkte, dass die vielen Fußabdrücke eher verwirrend als eindeutig auf den Betrachter wirken.

Ich überlegte mir ein neue Idee und entschied mich ein aktuelles Umweltthema zu visualisieren. Ich wollte die Meeresverschmutzung aufgrund von Plastik thematisieren. Bei der Zwischenpräsentation bekam ich das Feedback, mein Thema noch weiter einzugrenzen, da bis dahin noch nicht klar wurde, was meine genaue Aussage sein soll.

Ich probierte mein Thema genauer zu definieren und beschränkte mich auf die Mikroplastik-Problematik. Durch mein Schaubild wollte ich zeigen, wie Mikroplastik entsteht, in die Meere gelangt und letztendlich wieder von uns aufgenommen wird. Bei meiner Recherche fand ich es besonders spannend zu sehen, dass einer der größten Verursacher für die Entstehung von Mikroplastik, der Abrieb von Autoreifen und das Waschen von Textilkleidung ist. Bis dahin war mir nur bewusst, dass Plastikmüll nach einer gewissen Zeit in den Meeren zu Mikroplastik zerfällt. In meiner finalen Darstellung, wählte ich also drei verschiedene Beispiele, die zu den größten Verursachern der Entstehung von Mikroplastik zählen.

Aufgaben Fazit

Die letzte Aufgabe war eine große Herausforderung für mich, doch durch das hilfreiche Feedback im Kurs gut lösbar. Bis jetzt hatte ich noch keine eigenen Grafiken illustriert und hatte große Schwierigkeiten einen einheitlichen grafischen Stil zu finden. Ebenfalls sind meine Kenntnisse in Adobe Illustrator und Sketch noch gering, weshalb das Zeichnen am Computer viel Zeit in Anspruch nahm. Aufgrund der freien Themenwahl fiel es mir besonders schwer ein Thema auszusuchen. Das Kursfeedback und das befragen von Außenstehenden war sehr hilfreich, da jemand der nicht mit der Thematik vertraut ist, nochmal eine andere Sicht auf das Schaubild hat. Für die Gestaltung verwendete ich Sketch.

Finales Ergebnis

Kurs Fazit und Ausblick

Rückblickend auf das Semester kann ich sagen, dass ich einen tollen ersten Eindruck in viele Bereiche des Interface Designs bekommen habe. Innerhalb des Kurses bekommt man ein konstruktives Feedback und kann dieses dann gezielt bei seinen Aufgaben anwenden. Es war schön, seine eigenen Fortschritte im Laufe des Kurses zu sehen. Durch die Feedbackrunden bei den Zwischenpräsentationen, konnte man seinen Blick für eine gute Screengestaltung schulen. Durch die vielfältigen Übungen, konnte man sich in verschiedenen Bereichen der Gestaltung des Interfaces ausprobieren und ich habe sehr viel aus diesem Kurs mitnehmen können.

Die Arbeit mit Sketch macht mir Spaß und ich würde gerne im Laufe meines Studiums noch weitere Interface Design Kurse belegen. Ich denke, dies ist sinnvoll, da ich auch im Bereich Kommunikationsdesign immer wieder mit der Gestaltung von digitalen Oberflächen zu tun haben werde. Spätestens bei dem Erstellen meiner eigenen Website, werde ich froh sein, auf das Gelernte aus den Interface Kursen zurückgreifen zu können. Gern würde ich mich in Zukunft auch mit den Basics des Programmierens auseinandersetzen. Für ein reines Interfacestudium fehlt mir allerdings der analoge Anteil, der mir im Kommunikationsdesign ebenfalls große Freude bereitet.