Projekt #1: Digitales Buch

Die erste Aufgabe war es ein Buch in digitalen Layouts umzusetzen. Dazu wurden zwei Screenformate vorgegeben: 1024 x 768px (sehr altes iPad) und 240 x 320px (altes Nokia/Smartwatch). Fokus lag neben dem Layout auch besonders auf der Typographie und dem Umgang mit Schrift auf (kleinen) Bildschirmen.
Da in digitalen Interfaces die Typographie den Hauptbestandteil ausmacht, ist es sehr wichtig mit Schrift umgehen zu können, um eine strukturierte, übersichtliche Bedienoberfläche zu erstellen.
Die Aufgabe habe ich zusammen mit Anastasiia bearbeitet. WIr haben uns für das Buch „Generative Design“ von Asterios Agkathidis entschieden. In dem Buch geht es um generative Formfindungsprozesse für architektonische Werke.

Bilder des Original

Schriftart

In unseren ersten Entwürfen haben wir uns stark an den originalen Schriftarten im Buch orientiert. Nach einigen Experimenten haben wir zuerst Poppins für Text und Unterüberschriften genutzt um der im Buch verwendeten geometrischen Schriftart nahe zukommen. Für Oberüberschriften die League Gothic in Großbuchstaben, die Schriftart ist von Haus aus sehr hoch, eng, und relativ fett.
Schließlich sind wir für den Flusstext bei IBM Plex Sans gelandet, da diese weniger perlt, weniger Raum einnimmt und auch auf kleineren, geringer aufgelösten Displays noch gut funktioniert und lesbar ist. Bei den Überschriften haben wir uns zu Space Grotesk um entschieden. Space Grotesk macht im Gegensatz zu League Gothic einen charakteristischeren, weniger minimalistisch-stelzigen Eindruck, der auch aus einem generativen Designprozess heraus entwickelt worden könnte.

Navigation

Im Gegensatz zur Schrift, die sich zwischen den beiden Formaten nur in Größe unterscheidet gibt es für die jeweiligen Displaygrößen andere Navigationskonzepte: Für das große Screenformat haben gibt es eine permanent sichtbare Sidebar in der die Kapitelüberschriften angezeigt werden. Durch klick auf eine der Überschriften werden drunter die Unterüberschriften eingeblendet. Wird eine nun eine der Unterschriften angewählt, springt der Text im Hauptfenster direkt dort hin. Prinzipiell kann aber auch einfach von oben nach unten durch das Buch gescrollt werden. Eine permanente Sidebar ist für ein mini Display natürlich keine Option. Allgemein ist es schwierig dort Navigations UI-Elemente unterzubringen, die nicht mit dem Inhalt interferieren. Deshalb haben wir uns dafür entschieden eine gesten-basierte Navigation zu implementieren, die beim ersten Öffnen kurz erklärt wird.

Farben

Die App ist nur für ein helles Theme designed worden. Um das Lesen angenehmer zu machen, haben wir den Hintergrund einen papierlich-beigen, warmen Hintergrund gegeben. Im Großformat gibt es einen zusätzlichen dunkleren Beigeton hinter der Sidebar, der zusätzliche Separation schafft. Für das Kleinformat habe ich mich in der letzten Version dazu entschieden, das Beige etwas zu verweißlichen um den Kontrast zu erhöhen und das Design etwas moderner wirken zu lassen. Der Text ist größtenteils schwarz gehalten, nur Bildbeschreibungen sind grau um sie in der Aufmerksamkeitshierachie zurückzustellen ohne etwa auf eine noch kleinere Schriftart ausweichen zu müssen.

Schriftsatz

Jegliche Schrift ist linksbündig. Das große Format gibt dem Inhalt einen Weite von etwa 60 Schriftzeichen bis zum Zeilenumbruch, um eine gute Lesbarkeit zu gewährleisten, bei der nicht aus der Zeile gerutscht wird und auch der nächste Zeilenanfang gut gefunden werden kann. So bleibt auch genügend Raum übrig um die permanente Seitenleiste zu rechtfertigen. Dazu beträgt die Zeilenhöhe etwa das 1,5-fache der Schriftgröße. Genauso bei dem kleineren Format. Dort kommt die Inhaltweite trotz weniger Rand und kleinerer Schriftart noch auf etwa 40 Zeichen. So kann der Text trotz häufigerer Zeilensprünge noch recht angenehm gelesen werden.

Abbildungen

In dem Buch kommen Abbildungen sowohl einzeln als auch in Clustern vor. Zuerst haben wir uns auf die einzelnen Abbildungen konzentriert. Im kleinen Design gibt es eine Preview des Bildes, das unter dem entsprechenden Textparagraphen eingefügt wird, mit Bildtitel und Beschreibung rechts neben dem Bild. Bei anklicken der Abbildung wird das Bild voll auf dem Bildschirm angezeigt, nur mit Titel und Beschreibung, sowie Schließkreuz darunter. Bildcluster haben ein passendes Layout, mit mehreren Bildern neben und übereinander. Unter dem Cluster befindet sich die zugehörige Beschreibung. Auch hier können einzelne Bilder zur Vergrößerung angeklickt werden.

Designsprache

Nachdem wir in den ersten Versuchen mit etwas komplexeren Elementen wie mehreren z-Ebenen, Schatten, Scrollbalken, Karten, Kästen und Rundungen experimentiert haben, ist die letzte Version recht heruntergebrochen. Separation finden hauptsächlich durch Raum und Texthierarchie statt, es gibt nur vereinzelt klare, durchgezogene Trennlinien.

Ornamente

Rein ästhetische Abbildungen sind auf Titelblatt sowie Seiten zu finden, die ein neues Kapitel einleiten. Dort sind nur Überschrift und eine passende, etwas transparente Abbildung zu sehen. Außerdem eine übergroße Zahl, die das jeweilige Kapitel anzeigt. Desweiteren spannen die Kapitelzahlen in der Inhaltsübersicht über zwei Zeilen, dieser kniff spielt auf die sehr großen Zahlen an, die auch im Original zu finden sind. Außerdem machen sie das (im Großformat) allzeit präsente Inhaltsverzeichnis ein wenig interessanter und weniger platt.

Alle Screens

In Originalgröße:

- Erst 240 x 320px

- Dann 1024 x 768px

Projekt #2: GUI

Aufgabe war es, eine App zu entwickeln, die einem Designsystem mit entsprechenden Human Interface Guidelines folgt. Mein Mitstreiter Guolong und ich entschieden uns eine Android App zu designen die den Material You Design Guidelines folgt.

About

Die App sollte in irgendeiner Weise Designer*innen behilflich sein. Wir entschieden uns (wie die meisten anderen auch), eine Inspirations-Sammel Applikation zu machen. Der Flow den wir uns ausgedacht haben, sieht vor zuerst eine Fotoaufnahme von dem Objekt zu machen, dass mensch sammeln möchte. Dann wird ein Modus ausgewählt, der dabei Hilft einen speziellen Aspekt aus dem Bild herauszuarbeiten. Die Modi vorgesehen waren: - Prototype: Ein Objekt kann aus dem Bild herausgewählt werden und der Hintergrund wird entfernt. Titel, Beschreibung und Versionsnummer können hinzugefügt werden. - Sketch: Ein Zeichnung kann entweder in eine Vektorgraphik konvertiert werden oder geschärft werden um eine bessere Erkennbarkeit und Weiterverwendung zu gewährleisten. - Colors: Farben können aus dem Bild herausgepickt werden, oder auf dem Bild basierend eine Farbpalette generiert werden. - Layout and Typography: Schriftarten können erkannt werden und Layouts herausgearbeitet werden. - Insights: Bild wird gespeichert und kann kommentiert werden. Letztendlich haben wir aufgrund von Zeit und Arbeitsaufwand nur den Flow für die Farbauswahl durchgearbeitet. Wenn der Modus ausgewählt wurde und das Bild entsprechend bearbeitet wurde kann die Inspiration in einem Projekt gespeichert werden. Nun kann entweder ein neuer Modus ausgewählt werden und das Bild wieder bearbeitet werden oder zurück zur Startseite gekehrt werden. Von dort aus kann nicht nur die Kamera gestartet werden, um eine neue Inspiration einzufangen, sondern auch die Projekte gebrowst, alle gespeicherten Inspirationen durchsucht und gefiltert werden. Weiterhin können andere Personen zu den Projekten eingeladen werden, um Zusammenarbeit möglich zu machen.

Anfang

Nachdem wir erarbeitet hatten, wohin es mit unserer App gehen soll, war jedenfalls ich erstmal überfordert wie ich auch mit einfachen Szenarien wie Foto aufnehmen oder Modus auswählen umgehen soll. Was ist die beste Möglichkeit Buttons anzuordnen? Sind Buttons überhaupt das richtige UI-Element? Wohin sollte was platziert werden und wie groß? Daher habe ich von einigen Screens erstmal verschiedenste Varianten ausprobiert.

Erste Flows

Als sich bei mir der Nebel etwas gelichtet hatte, wie mit bestimmten Screen-Situationen umgegangen werden sollte, ging es darum erste detailliertere Benutzungsabläufe zu entwerfen, wie ein*e User*in unsere App bedienen könnte.

Komponenten

Für die meisten Komponenten konnten wir einfach auf die von Google erstellte Library zurückgreifen und diese mit wenigen Anpassungen per drag and drop nutzen. Für einige Elemente mussten wir diese aber stärker abändern oder Neue erstellen, um unseren Anforderungen gerecht zu werden.

Theme und Farben

Wir hatten begonnen die App in einem dunklen Theme zu designen, was allerdings den Gestaltungsprozess nicht vereinfachte und vor allem zu Problemen bei den Projektpräsentationen am Beamer führte. Daher habe ich zwischendurch begonnen alle verwendeten Farben mit dem Figma-Plugin Material Theme Builder zu verlinken, das es ermöglicht das Farbdesign mit Auswahl einer Farbe oder Bildes auf Knopfdruck abzuändern. Somit war es mit relativ wenig Aufwand verknüpft, dass Theme zu einem hellen zu wechseln und sogar mit verschiedenen Farbvarianten und Akzenten herumzuspielen.

Navigationskonzept

In der nächsten Version haben wir einen App-übergreifenden Flow gestaltet, der klar stellen sollte wie unsere App bedient werden kann. Außerdem haben wir Screens hinzugefügt, die zeigen wie die Projekte und Inspirationen gemanagt werden.

Screens der letzten Version

Projekt #3: 1000 Worte

Die Letzte Aufgabe war die, mit der ich am meisten gestruggelt habe. Aufgrund mangelnder Graphikdesign-Skills als auch Zeit am Semesterende bin ich nicht wirklich zufrieden mit der letzten Version der Infographik. Das Informationsbild durfte keinerlei Text enthalten und soll einen komplexen Sachverhalt darstellen. Ich entschied mich zu versuchen die Funktionen des Ökosystems Boden zu illustrieren.

Die bunten Punkte sollen jeweils Wasser, Schadstoffe, Nährstoffe und Biomaterial darstellen.

Im Boden werden Schadstoffe gefiltert, Wasser gespeichert und ins Grund- bzw. Tiefenwasser geführt, Biomaterial zu Nährstoffen abbgebaut und Nährstoffe konzentriert und anderen Lebewesen verfügbar gemacht.