Digitales Buch

Im Interfacedesign spielt die Verwendung von Typografie unter den Bedingungen des Bildschirms eine große Rolle. 

Wir hatten die Aufgabe, unser Lieblingsbuch in digitaler Fassung zu gestalten. Dabei war es egal, welches Buch es ist, also z. B. Sach-, Koch-, Fachbuch, Roman oder Gedichtsammlung, Hauptsache es ist kein Comic. Da diese Aufgabe sich größtenteils auf die Typografie und den Text bezieht, wären Bildergeschichten nicht so optimal zur Übung.

Es sollten mindestens 4 Screens in 2 verschiedenen Formaten vorgestellt werden: mind. 2 horizontale Screens im Format von 1024 × 768 Pixeln (XGA) und mind. 2 vertikale im Format von 240 × 320 Pixeln (QVGA). 

Die Klarheit der Darstellung und die Lesbarkeit der Texte waren hier besonders wichtig. 

Mir kam bei dieser Aufgabe direkt das Buch „Der kleine Prinz“ von Antoine de Saint-Exupéry in den Kopf. Eine zweite Gruppe nahm dasselbe Buch, die Ergebnisse waren aber natürlich unterschiedlich.

Das waren meine ersten Skizzen, welche ich dann meinem Teampartner gezeigt habe. Ich hatte wirklich schon eine interaktivere Vision für diese Aufgabe, aber da es doch zu kompliziert wäre, haben wir uns dagegen entschieden. Außerdem mussten wir uns hierbei wirklich auf das Wesentliche konzentrieren, und zwar auf die Auflösung des Textes und die Verteilung innerhalb der Seite mit den verschiedenen Bildern aus dem Buch. 

Zur Erstellung der Screens haben wir Figma benutzt. Zum Glück hatte ich durch den Crashkurs von Malte in der Erstiwoche schon erste Berührungen damit, aber trotzdem war es schwierig, sich da alleine zurechtzufinden..

Das waren meine ersten Entwürfe, die ich vor dem Kurs präsentiert habe. Es musste vieles verbessert werden, vor allem die Lesbarkeit der kleinen Version. 

Ein paar Feedbackrunden und Vorträge später, waren das hier meine finalen Ergebnisse. Diese sind auch keinesfalls perfekt, aber trotzdem hat mir die Aufgabe Spaß gemacht. Der Umgang mit Typografie ist ein Skill, welchen man unbedingt beherrschen sollte, wenn man Interfaces erstellt!

Graphical User Interface - Designer App

Die Grundlage für die Gestaltung eines Interfaces bilden standardisierte Steuerelemente, damit sich die User schneller einarbeiten können, weil sie diese möglicherweise schon aus anderen Programmen kennen. Trotzdem muss man manchmal neue, spezifische Icons einführen, wenn eine bestimmte Aufgabe damit vollbracht werden muss. 

Auf Grundlage dessen hatten wir die Aufgabe, eine App für iOS oder Android zu entwickeln, welche die alltägliche Arbeit von Designern erleichtern soll. Diese sollte dabei nicht zu kompliziert, sondern fokussiert sein.

In Partnerarbeit musste eine statische Screen-Sequenz entworfen werden, woran sich die Bewegungspfade durch die App ableiten lassen sollten und zusätzlich dazu noch ein sogenannter Programmablaufplan, um es noch näher zu verdeutlichen.

Meine erste Idee war es eine To-do-App zu entwickeln, mit verschiedenen Funktionen, z. B. mit Timer bzw. Pomodoro Timer (dargestellt als Tomate), einem Logbuch, um die vorherigen Aufgaben nochmal nachzuschlagen und dadurch den Fortschritt zu sehen und die Aufgaben sollten sich dabei automatisch nach der Wichtigkeit sortieren.

Erklärung: Man schreibt seine To-do's einfach erstmal auf (ähnlich wie bei „Notion“) und tippt auf das Ausrufezeichen, um wichtige Aufgaben durch erneutes Tippen zu markieren. Wenn man auf „sort“ geht, sortieren sich die wichtigsten To-do's nach oben und eine Checkbox erscheint neben allen Aufgaben. Erledigte Aufgaben werden durchgestrichen und mit einem grünen Haken markiert.

Ganz oben in der „Goal“ Zeile kann man sein größeres Ziel für den Tag, Woche etc. eintragen und bei Vollendung dessen, wird eine Belohnungsanimation abgespielt.

Durch das Anlegen eines Projektes kann man dort spezifische Aufgaben notieren und hat nicht alles auf einem Platz. 

Zurückblickend darauf muss ich sagen, dass sich die Logik aus einigen Frames nicht ganz ableiten lässt bzw., dass ich eine App vielleicht mit einer Website verwechselt habe, weil ich im Menü auch eine Art Impressum habe..

Noch dazu sieht das alles nicht ganz ästhetisch aus und nicht wirklich wie eine App. Das alles aber waren ja natürlich meine ersten, richtigen Frames in Figma, also sollte man das nicht so kritisch sehen.

Diese Frames sind während der Teamarbeit entstanden und sehen auf jeden Fall iOS konformer aus. Ich habe extra die iOS Guidelines überflogen und die „Macintosh Interface Guidelines“ von 1992 gelesen, welche gut und verständlich geschrieben sind, kann ich sehr empfehlen!

Diese Entwürfe sind noch nicht ganz ausgreift und die Farben bei den To-do's sind stark und könnten ablenken. 

In den finalen Entwürfen sind die viel dezenter:

Das interessante hier war das neue Element, was wir eingeführt haben. Damit meine ich den Slider für die Priorität. Er soll ungefähr so funktionieren: 

Wenn man den Slider antippt, erschein so ein typischer „color-picker-Kreis“ und man kann den gewünschten Farbton durch Verschieben auswählen. Dann wird der Farbton als dezenter, kleiner Punkt bei der zugehörigen To-do angezeigt. 

Die Skala hat zwar diese unterschiedlichen Farbabstufungen, teilt diese jedoch nach dem bekannten Farbschema (rot = höchste Priorität, gelb = mittlere Priorität, grün = kleinste Priorität) ein, ist also in gedachte Sektionen unterteilt. 

Wenn man mit dem Finger den gewünschten Farbton auswählt, wird geschaut, in welcher Sektion man sich grob befindet und der Algorithmus sortiert dann die Aufgaben nach dem schon genannten Prinzip. 

Das erstmal zum theoretischen Ablauf. Ob das wirklich funktionieren kann, ist noch nicht klar, aber es ist auf jeden Fall ein interessantes Element.

Die Frames sollten zeigen, wie man ein Projekt anlegt und diesen Prozess zu durchdenken, war viel schwieriger, als ich dachte. 

Generell war diese Aufgabe echt fordernd und ich habe viel gelernt, auch im Umgang mit Figma. Die Guidelines waren eine gute Hilfe und an sich musste man sich nicht viel Neues ausdenken, weil das meiste schon da war. Trotzdem musste man sich die Architektur der App vorstellen und sie würdig präsentieren. Probleme hatte ich auch im Umgang mit dem iOS Layout, weil ich Android nutze und mich da erstmal einarbeiten musste.

Sonst war es eine interessante Aufgabe, mit ein paar echt guten Designer Apps.

1000 Worte Infografik

Eine Informationsgrafik ist ein besonderer Typ von Bild, welcher Ästhetik mit Rationalität verbindet und dabei Sachverhalte vermittelt. Im Interfacedesign spielt die visuelle Organisation von Daten, Informationen und Interaktionen eine große Rolle und das trifft auf grafische Benutzerschnittstellen, als auch auf Datenvisualisierungen zu.

Wir sollten in Einzelarbeit zu einem relativ komplexen Sachverhalt eine Informationsgrafik erstellen, welcher dabei deutlich und klar kommuniziert wird. Man konnte natürlich verschiedene Themen aus dem naturwissenschaftlichen Bereich nehmen, oder etwas Alltägliches, wie z. B. die Visualisierung eines Rezeptes o. ä.

Das ironische dabei war, dass die Grafik keinerlei Text oder Zahlen enthalten durfte und nur auf Bildern basieren sollte, also das komplette Gegenteil vom Titel!

Schnell war mir klar, dass ich irgendetwas mit Essen machen will, weil Essen einfach toll ist. Das Thema, welches mir dazu einfiel, ging um die Veränderung traditioneller japanischer Gerichte durch den westlichen Einfluss.

Meine erste Skizze enthält nicht so viele Informationen, denn ich habe hier hauptsächlich die Gerichte gezeichnet. Der Aspekt der Gesundheit, welchen ich reinnehmen wollte, lässt sich hier nicht ganz ableiten. 

Ich wollte aufzeigen, dass durch die westliche Öffnung des Landes mehr tierische Produkte in den Gerichten benutzt wurden und dass das mit gesundheitlichen Folgen verbunden war. Diesen Aspekt habe ich später komplett weggelassen, weil die Grafik sonst zu überfüllt und kompliziert geworden wäre.

Nach der Feedbackrunde habe ich die komplette Ausrichtung der Seite nochmal überdacht und habe eine horizontale Grafik in Figma erstellt, was ganz ok dafür geeignet war. Das habe ich eher auf die schnelle erstellt, um zu schauen, wie es so wirkt, wenn ich Fotos benutze. 

Die kleinen Symbole habe ich auch erstmal zufällig gewählt, was natürlich ein bisschen unsauber und nicht einheitlich aussieht.

Nach weiterem Feedback habe ich Anpassungen, Farbänderungen und Anordnungen gemacht und die Symbole durch Emojis ersetzt, welche ich von Emojipedia (Vorschlag von Sophie S.) benutzt habe. 

Ich habe den Stil/Kategorie „Openmoji“ genommen, weil diese Emojis minimalistisch waren und meiner Meinung nach gut zum Thema passten. Leider deckte diese Bibliothek nicht alle Zutaten ab, also musste ich ein paar selber zeichnen.

Dies habe ich auch unnötig kompliziert in Figma (!) gemacht und benutzte dazu Vektorgrafik. 

Auf den ersten Blick kann man meine Emojis zum Glück nicht direkt erkennen. Das wären nämlich einmal der Ketchup, das Curry-Pulver, die Worcester Sauce und die Ramen-Nudeln.

Die Anordnung der Emojis ist eher zufällig entstanden, denn ich habe da einfach beschlossen, auf der linken Seite alle tierischen Produkte zu zeigen und auf der rechten Seite alle pflanzlichen bzw. zusätzlichen Komponenten.

Die schwarze, durchgehende Mittellinie stellt einfach eine Trennlinie dar und keinen Zeitstrahl. Diesen Aspekt habe ich auch ausgelassen. 

Ich habe versuch alles systematisch, grafisch und simpel anzuordnen, für eine klarere Struktur.

Ich habe versucht so gut es geht den Stil von Openmoji nachzuahmen. Bei der Worcester Sauce habe ich noch verschiedene Varianten ausprobiert, damit es klarer wird, um was es sich handelt. Leider war das Symbol darauf auf der Grafik zu klein und ich beschloss es komplett wegzulassen und es schlichter zu halten. 

Auch wenn es durchaus fummelig war, diese Emojis zu erstellen, hatte ich trotzdem Spaß dabei! Das Ergebnis kann sich auch sehen lassen. 

Beim Feedback wurde mir gesagt, dass ich die Symbole vielleicht größer hätte machen können, weil sie eigentlich das fast interessanteste an der Grafik sind.

Diese Aufgabe war mit Abstand die spannendste von allen und erzeugte so viele unterschiedliche und einzigartige Ergebnisse! 

Hier konnte man sich wirklich kreativ ausleben und unter Beachtung der Regel (keine Zeichen zu benutzten) wurde daraus noch eine fordernde Aufgabe.

Fazit

Der Kurs bot mir wirklich einen guten Einblick in die Arbeit eines Interfacedesigners und die vielen Komponenten, die man da beachten muss. 

Was ich bis jetzt noch nicht erwähnt habe, war auch der ausgiebige Exkurs in die Typografie. Dabei habe ich vieles gelernt, vor allem bezogen auf Bildschirme und Pixel. Es muss vieles beachtet werden, damit es im Endeffekt ansprechend und scharf aussieht. 

Die Welt der Typografie eröffnete sich mir durch diesen Kurs und ich bin gespannt, noch viel mehr darüber zu lernen!

Das pacing (also das Tempo/Fortschritt) des Kurses war auch fantastisch! Jede Woche gab es eine Feedbackrunde, wo man seine Ergebnisse vorstellen musste und die der anderen betrachten konnte. Die Kritik des Professors war sachlich und reflektiert und es wurde mit jeder Veranstaltung besser und fühlte sich belohnend an.

Nach dem Feedback hat man sich ganz und gar nicht schlecht gefühlt      o. ä., sondern hatte meistens die Motivation sein Projekt zu verbessern und die Vorschläge umzusetzen. Die Vorträge waren auch alle informativ und unterhaltsam, man hatte oft etwas zu lachen.

Alles in einem ist das ein Kurs, welchen ich für jeden empfehlen kann! Egal ob für KD, PD und natürlich ID, denn es ist wichtig die Substanz zu verstehen, mit der wir Tag täglich konfrontiert werden. 

Jemand muss sie doch gestalten.