Aufgabe 1: Digitales Buch
Die Einführungsaufgabe bestand zunächst daraus, in Gruppen von 2 ein von uns gewähltes Buch in digitale Form umzusetzen. Der Rahmen dafür war jeweils 2 Screens in jeweils Großformat (1024x768px) und Kleinformat (240x320px). Hauptziel der Aufgabe war es, die Lesbarkeit und Klarheit des Inhalts, sowie auch die Art der Anwendung und Navigation entsprechend dargestellt wird.
Dafür haben wir uns gemeinsam für das Buch „Simple“ von Ottolenghi entschieden. Es handelt sich dabei um ein Kochbuch, welches, wie der Name schon sagt, simple Rezeptideen aufbereitet. Dementsprechend gestaltet sich auch das Design des Buches.
In diesem Buch haben wir uns auf ein Rezept geeinigt, welches wir präsentieren wollten und den Workload aufgeteilt.
Für das kleine Format haben wir uns als Referenz ein Smartphonebildschirm vorgestellt, auf welchem man scrollt und mit den Elementen interagiert.
Im Vordergrund lag dann natürlich die Lesbarkeit und Schriftauswahl, um die Nutzererfahrung zu optimieren.
Im ersten Schritt ging es darum, die Schrift zu wählen und die Titel, Bilder und Texte in einer sinnvollen Hierarchie und Reihenfolge anzuordnen. Wir haben uns wir das Buch für die Gill Sans entschieden. Zusätzlich haben wir noch Bilder und Symbolik angewendet, um zum Beispiel anzugeben, was für Eigenschaften ein Rezept hat. Oben rechts befindet sich ein Menüzeichen, welches ganz passend zum Thema symbolisch als Messer und Löffel dargestellt ist. Diesen kann man anklicken, um auf den Content-Screen zuzugreifen, und Rezepte auszuwählen. Im Hintergrund habe ich als visuellen Reiz noch passend zum Buch die Zitrone konstruiert und hinzugefügt.
Mangel war in dieser Variante hauptsächlich die Lesbarkeit der Schrift. Außerdem können die Screens als sehr visuell überlastend vernommen werden, also wurde für die finale Abgabe getweaked und bearbeitet.
Für die letzte Aufgabe wurde sichergestellt, dass die Schrift lesbar ist. Um den Platz für den Text gewährleisten zu können, haben wir einige der visuellen Elemente entfernt und ein eher schlichteres Design umgesetzt, welches dem Titel des Buches wohl besser passen dürfte.
Für die Orientierung an der Scrollmechanik habe ich an der rechten Seite die Zitrone als Scrollbar eingesetzt, um dem doch sehr eintönigen Text einen leichten Akzent zu verleihen.
Das Menü ist nun rechts angeordnet, um das Klicken nicht zu weit weg zu verbauen. Auch dieser Screen durfte einen gelben Akzent genießen, um die Tabauswahl zu verdeutlichen.
Letztlich wurde der Menü-Button zu Messer und Gabel, die erst nebeneinander liegen, abgeändert. Bei Auswahl des Buttons gelingt man dann in das Chaptermenü, in welcher der Button zu einer überkreuzten Form des Bestecks animiert wird.
Im Großformat haben wir uns ca. an einen Laptopbildschirm orientiert. In diesem war es ein bisschen einfacher, die Schrift lesbarer zu machen. Aus diesem Grund lag die Schwierigkeit darin, die Mechaniken und Hierarchien der verschiedenen Elemente zu bearbeiten.
Dazu haben wir uns sehr stark an das eigentliche Buch angelehnt. Zur Navigation haben wir auf der linken Seite die verschiedenen Sektionen, die bei Klick dann etwa eine Subsection mit den verschiedenen Rezepten öffnen.
Auf der ersten Seite werden die nötigen Zutaten aufgeführt. Grund dafür ist bei beiden Varianten, dass die Zutaten oftmals das Erste ist, worauf viele Menschen schauen, wenn sie ein neues Rezept suchen oder wenn sie einkaufen möchten. Unter der Zutatenliste befindet sich ein Zitat, welches die Bedeutung des Gerichts beschreibt.
Beim Scrollen bewegt sich dann lediglich die rechte Seite des Screens, d.h. das Bild ist statisch. Dies dient zur visuellen Referenz für diejenigen, die wissen möchten, wie es beim Kochen aussehen soll.
Der Status des Scrollens wir rechts durch eine Scrollbar gekennzeichnet.
Nun ging es darum, Kleinigkeiten zu tweaken, um eine gewisse Harmonie zwischen Groß- und Kleinformat zu gewähren.
Im letzten Schritt ging es lediglich darum die Schriften einheitlicher zu machen, also wurde die vorherige Lora ebenfalls zur Gill Sans geändert und bekommt in Kombination mit der kleinen Version einen gewissen Einklang.
Außerdem wurde der Rahmen für die Zutatenliste zu einem leichten Grau geändert. Dadurch gewinnt sie um Einiges an Harmonie mit dem Rest des Screens.
Aufgabe 2: Graphical User Interface (GUI)
Für das zweite Projekt sollten wir eine an Designer gerichtete App entwickeln. Wir haben uns in diesem Fall für eine Art Plugin für Design- und Bearbeitungsprogramme entschieden, die es vereinfachen sollte, besonders Anfängern sich die Shortcuts für bestimmte Befehle einzuprägen.
Dies sollte in eine Art Verlauf oder Protokoll ablaufen, in welcher der Aktions- und Bearbeitungsverlauf aufgenommen wird und unmittelbar daneben der exakte Shortcut für den Befehl aufgeführt wird.
Sollte man sich einen Shortcut besonders gerne merken wollen, kann man diesen markieren und speichern.
Eine zusätzliche Funktion ist es außerdem, Befehlen, die keinen Shortcut besitzen einen zuzuweisen.
Ziel dieser Aufgabe war es hauptsächlich, uns mit den Guidelines und Mitteln der diversen User Interfaces zu beschäftigen und diese korrekt im eigenen Format anzuwenden.
Prinzipiell hatten wir uns erst darauf geeinigt, dass das Plugin als Floating Application im Programm schweben zu lassen, sodass man es je nach Bearbeitungsstand verschieben kann.
Die Hauptelemente sind das Protokoll und das Panel für die gespeicherten Befehle, die immer sichtbar sind. In der Suchleiste kann man zusätzlich einen bestimmten Befehl suchen und hinzufügen und in der Navigationsleiste hatten wir anfangs noch ein Menü zur Auswahl von Anwendungen zwischen denen man wechseln konnte, um die verschiedenen Shortcuts einzusehen.
Was wir bei der ersten Umsetzung schnell erkannt hatten ist, dass die Navigationsleiste sehr schwer mit den Guidelines von Apple zu vereinen sind. Aus diesem Grund haben wir es entfernt und haben uns darauf geeinigt, dass man die jeweiligen Shortcuts mit Öffnung der Anwendung einsehen kann.
Eine zusätzliche Korrigierung bestand in der Farbwahl des Plugins, da sie aufgrund ihrer Nonkonformität mit den Guidelines weniger wir eine Applikation für Apple aussieht, sondern mehr von einem Drittanbieter.
Die neue Variante ist sehr stark vereinfacht und durfte näher an den Guidelines orientiert sein. Zudem haben wir uns vom Konzept des schwebenden Fensters verabschiedet, und uns dafür entschieden, dass das Plugin einfach an das jeweilige Programm anheftet und parallel zur Bearbeitung läuft.
Außerdem kann man nun die gespeicherten Shortcuts in Ordnet einteilen, sodass man sie für bestimmte Prozesse wiederfinden kann.
In der letzten Abgabe ging es nun um die Optimierung und Darstellung der Aktionen. So läuft eine Vielzahl an Aktionen über den rechten Mausklick, um ein weiteres Fenster zu öffnen oder ein direkter linker Mausklick auf Symbole, Buttons oder Suchleisten.
Aufgabe 3: 1000 Worte
Die letzte und finale Aufgabe des Kurses bestand darin, eine Infografik zu einem von uns gewählten Thema zu erarbeiten. Schwierigkeit der Aufgabenstellung bestande darin, keine Schrift anwenden zu dürfen.
Ich habe mich für die Zubereitung vom japanischen Nationalgericht Ramen entschieden. Dafür habe ich die jeweiligen Zutaten grafisch erstellt und diese zum zentralen Gericht geführt. Damit sollte vermittelt werden, welche Zutaten zur Zubereitung von Teilen des Gerichts (Z.B. Brühe, Fleisch) dazugehören.
Die zentrale Grafik habe ich als Explosionszeichnung umgesetzt. Damit sollten die einzelnen Bestandteile von Ramen gespalten und als einzelne Elemente dargestellt werden.
Dann habe ich die Zutaten gezeichnet und koloriert, um der ganzen Infografik eine Vibranz zu verleihen.
Zusätzlich wurde zu den Zutaten selbst noch eine visuelle Beschreibung zur Zubereitung der Bestandteile hinzugefügt. So sieht man z.B. dass die Brühe für 12 Stunden (dargestellt durch die Uhr) köcheln soll.
Als Idee habe ich dann versucht, optionale Toppings darzustellen, die man zusätzlich zum Basisrezept hinzufügen könnte. Durch die Platzierung entstanden dann das Problem, dass die Explosionszeichung dezentralisiert wurde und das möchten wir natürlich nicht.
Als letzten Verbesserungsversuch habe ich dann die jeweiligen Schritte in Leserichtung angeordnet, d.h. dass die Zutaten ganz außen liegen und dann nach innen gelesen wird. Außerdem habe ich die Boxen und geometrischen Elemente entfernt um den organischen Formen der Zutaten und der Explosionszeichnung gerecht zu werden. Dies verleiht der Grafik auch einen gewissen Free Floating Aspekt.
Persönliche Erkenntnisse
Der Kurs hat mir im Großen und Ganzen wirklich viel Spaß gemacht, vor allem weil dies im Semester der einzige studiengangspezifische Kurs war und ich dadurch recht viele Eindrücke in zukünftige Projekte bekommen habe. Boris hat uns interaktiv die grundlegenden Prinzipien des Designs von Benutzeroberflächen, wie Schrift, Hierarchie und Richtlinien vermittelt und durften diese für uns anwenden.
Eine Regel, die er uns nahegebracht haben dürfte ist, dass es grundlegend kein richtig oder falsch gibt. Man hat sehr viel Bewegungsfreiheit bei der Gestaltung, sofern die Benutzerfreundlichkeit und Verständnis gegenüber dem Betrachter gewährleistet wird.
Interface Basics hat mir vorerst eine sehr gute Basis für zukünftige Projekte geboten und ich freue mich, dieses Wissen später für mich anwenden zu dürfen.
