Aufgabe 01: Digitales Buch

Bei dieser Aufgabe sollten wir in Zweiergruppen ein Buch unserer Wahl auf die zwei vorgegebenen Bildschirmgrößen 1024px × 768px und 240px × 320px übertragen.

Wahl des Buches & Herausforderung

Wir haben das Buch »Warhol«, eine Biografie über das Leben von Andy Warhol, von Klaus Honnef gewählt.

Die Herausforderung bestand darin, die Texte und Bilder sinnvoll auf den ungewöhnlichen Bildschirmformaten zu arrangieren um eine adäquate Visuelle Hierarchie und Lesbarkeit zu gewährleisten.

Erster Entwurf

Bei unserem Entwurf haben wir uns zunächst mit der Anordnung der wichtigsten Elemente, Fotos, Überschrift und Text sowie die Navigation Gedanken gemacht. Wir haben uns dazu entschieden, den Inhalt in den Vordergrund zu stellen und die Navigation auf eine Scrollbar zu reduzieren

Zweiter Entwurf

Zu unserem ersten Entwurf hatten wir, basierend auf dem Feedback, die Anzahl der Schrifarten von drei auf eine reduziert, sowie den „Nebel“ als affordace zum Scrollen und die verschiedenen Grautöne der Textfelder weggelassen, um sowohl die visuelle Geschlossenheit zu erhöhen, als auch die Unruhe zu minimieren.

 
Schnell haben wir zudem gemerkt, dass es manchmal sinnvoller ist Dinge wegzulassen, statt das Interface zu überfrachten. Deswegen haben wir die horizontale Scrollbar in ihrer Gestaltung noch mehr reduziert, ind dem wir beispielsweise Kapitelnamen weggelassen haben.

Außerdem haben wir noch eine  zurückhaltende Toolbar mit Buttons zur Navigation und zur Kontrolle des Readers hinzugefügt

Finaler Entwurf

Beim finalen Entwurf haben wir eine Seite mit einer Kapitelübersicht, zur Navigation auf Kapitelebene, hinzugefügt, wobei jedes Kapitel eine eigene Schriftart und Farbgebung erhalten hat, die sich auch in den Kapitelseiten widerspiegelt.
Mit dieser Gestaltung wollten wir uns an der farbenfrohen und kontrastreichen Pop Art orientieren, ohne jedoch die Nutzbarkeit durch eine zu hohe visuelle Unruhe zu beeinträchtigen.

Außerdem haben wir noch entscheidendes Feedback zu dem fehlerhaften Textsatz und dem mangelhaften Label des Zurückbuttons bekomen und daraufhinüberarbeitet.

Aufgabe 02: Graphical User Interface (GUI)

Bei dieser Übung sollten wir eine App gestalten, die Designer:innen bei ihrer Arbeit hilft und dabei auf den Human Interface Guidelines (HIG) von Apple oder Googles Material Design System basiert

Idee

Wir haben uns dabei für eine App entschieden, mit der man Texte, die man im Alltag sieht, einscannen kann, um dann die Schriftart in Erfahrung zu bringen. Außerdem kann man sich eine Sammlung von Schriftarten anlegen und dann harmonische Kombinationen mit anderen Schriftarten ausprobieren.

Erster Entwurf

Beim ersten Entwurf haben wir zunächst versucht die Grundstruktur der App zu skizzieren. Hierbei haben wir erst mit Wireframes gearbeitet um verschiedene Layoutvarianten zu testen.
Nachdem wir den Aufbau festgelegt hatten, haben wir erste Farben und Buttons hinzugefügt.

Zweiter Entwurf

Für den zweiten Entwurf haben wir unsere App den Human Interface Guidedlines und vor allem der neuen Liquid Glass Designsprache von Apple angepasst. 

Für die Auflistung von Schriftarten auf der ››Home‹‹ und ››Collection‹‹ Seite haben wir die offizielle Listen-Komponente von Apple eingeführt

Außerdem haben wir die Scan Funktion komplett überarbeitet, um besser zu signalisieren welche Typefaces auf einem Scan erkannt wurden. Letztlich haben wir noch die Funktion des Kombinierens verschiedener Schriftarten hinzugefügt.

Dritter Entwurf

Für den dritten Entwurf haben wir noch einmal Feedback zu einigen zentralen Bereichen unserer App erhalten. Am schwersten viel es uns dabei, zwischen unseren eigenen Komponenten und den HIG Komponenten abzuwägen. Letztendlich haben wir uns dazu entschieden alle eigenen Komponenten, wie die Buttons, über Bord zu werfen und, wo möglich, ausschließlich Apple Komponenten zu verwenden. 

Zudem haben wir den Scan-, Collection-, und Combinationbereich nochmal strukturell überarbeitet.

 
Beim Scan haben wir eine Vorschau hinzugefügt, die es dem:der Nutzer:in erlaubt, zu erkennen, welche Inhalte gescannt werden.

 
Die Collection haben wir mithilfe einer Segmented-Control in einen Bereich für Typefaces und einen für Scans unterteilt um die Navigation grundlegend zu vereinfachen. Für einen effizienteren Suchvorgang haben wir außerdem eine Such- und eine Filterfunktion hinzugefügt.

 
Bei den Combination Tab haben wir uns von dem blauen Segment als Vorschau getrennt, da es visuell zu dominant war und eine hohe Unruhe verursacht hat. Stattdessen fungiert die Vorschau nun selbst als Auswahl, indem zwischen Karten mit den jeweiligen Schriftarten per Swipe-Geste gewechselt werden kann. Außerdem werden die letzten Kombinationen nun ebenfalls leicht zugänglich angezeigt.

Feinschliff

Basierend auf dem Feedback des letzten Termins haben wir noch einige Dinge wie z.B. das Entfernen des Profil Icons, die Korrektur des Scan-Previews und die Überarbeitung des Button bei den Combinatons umgesetzt, wodurch das visuelle Erscheinungsbild unserer App nochmal geschlossener und runder geworden ist.

Aufgabe 03: 1000 Worte

Bei der Aufgabe „1000 Worte” ging es um das Erstellen einer Infografik, die einen komplexen Sachverhalt erklärt, ohne dabei Worte oder Zahlen zu verwenden.

Idee

Ich habe mich dazu entschieden, den Ablauf der Bundestagswahl als Infografik darzustellen, da mir die Regelung und die aus ihr entstehenden Abhängigkeiten komplex genug erschienen und ich es für wichtig erachte, über diese aufzuklären.

Erster Entwurf

Zunächst habe ich mir die verschiedenen Schritte von der Wahl mit Erst- und Zweitstimme bis zu der Zusammensetzung des Bundestages aufgeschrieben. Dabei ist mir aufgefallen, dass es sinnvoll ist die Vorgänge, die in jedem Wahlkreis stattfinden, zu gruppieren und beispielhaft an einem Wahlkreis darzustellen. Im zweiten Schritt stelle ich die Abläufe dann auf Bundesebene dar.

Zweiter Entwurf

Beim zweiten Entwurf habe ich zuerst eine visuelle Segementierung vorgenommen, um die Abfolge und Zusammengehörigkeit der einzelnen Schritte klarer erkennbar zu machen. Ich habe auch die Regelung zur Deckung der von einer Partei erworbenen Direktmandate durch Zweitstimmen hinzugefügt, die durch den Wegfall von Überhangs- und Ausgleichsmandaten im Zuge der letzten Wahlrechtsreform entstanden ist. Außerdem habe ich, basierend auf dem Feedback zum ersten Entwurf, die Anordnung der Elemente, vor allem Deutschlandkarte und Wahlzettel im Wahlkreissegment verändert, sowie ein icon für den Bundestag hinzugefügt.

Finaler Entwurf

In dieser Iteration habe ich mich, aufgrund des gegebenen Feedbacks, vor allem um Visuelle Klarheit gekümmert und der Infografik damit den Feinschliff verpasst. So habe ich zum Beispiel Farben und Linienstärken vereinheitlicht, sowie die Darstellung des Parlaments im letzten Schritt so überarbeitet, dass es aus Symbolen der Abgeordneten besteht, und der Zusammenhang somit klarer erkennbar ist.

Reflexion

Insgesamt war der Kurs, durch die Kombination von fundierten theoretischem Input und praktischen Übungen, für mich ein sehr guter Einstieg ins Interfacedesignstudium. Vor allem das Feedback von Boris und der gegenseitige Austausch hat mich oft zum Nachdenken angeregt und letztendlich weitergebracht. Ich habe das Gefühl, dass dieser Kurs mit seinen Themen und Methoden ein gutes Fundament für den weiteren Studienverlauf bietet. Ich freue mich auf alle weitern ID-Kurse!