1. Digitales Buch

Aufgabe

In der ersten Aufgabe galt es zuerst zweier Teams zu bilden, ein Buch frei auszuwählen und dieses als digitales Buch zu entwerfen. Der Schwerpunkt bei dieser Aufgabe lag auf Screentypografie. Die Lesbarkeit stand hier im Fokus. Dazu gestalten wir zwei Bildformate, horizontal 1024 x 768 px (XGA) und vertikal 240 x 320 px (QVGA).

Buchauswahl 

Carl Linz und ich hatten schnell ein Buch gefunden: »Gemalte Schriftzeichen – 214 chinesische Schriftzeichen vom Bild zum Begriff«. Das Buch ist aufgeteilt in zwei Bereiche: geschichtliche Entstehung chinesischer Schrift sowie Entwicklung der einzelner (214) Schriftzeichen. 

Ideen & Skizzen

Zuerst fertigten wir Skizzen an, um unsere verschiedenen Ideen auf Papier zu bringen. Wir konzentrierten uns dabei auf das QVGA und verbanden es mit klassischen Funktionen aus dem Smartphone. Wichtig war uns, dass das Buch sich gut durchlesen lässt und wenig ablenkt. Ebenso wichtig war uns die Navigation. Eine schnelle Steuerung durch die Schriftzeichen sollte intuitiv und schnell möglich sein.

Prototypen

Mit dem neuen Feedback stellten wir uns grundlegende Fragen zum Aufbau, Farben und dem Schwerpunkt Typografie. Dazu sammelten wir alles in einer Adobe Xd Cloud-Datei. Bei unserem Treffen festigten wir dann unsere Ideen und formten daraus den ersten Prototypen, dabei konzentrierten wir uns zuerst auf das XGA Format. Unseren Prototypen erstellten wir mithilfe des Programmes »Adobe Xd«.

1024 x 768 px (XGA)

Um einen edlen und schönen Look zu kreieren, nutzten wir viel weiße Fläche. Die Seite sollte sich angenehm lesen lassen und dabei möglichst wenig ablenken. Wir entschieden uns für die Font »Abril Text« von TypeTogether. Diese erinnerte uns an die Schrift die Serifen-Schrift, die schon im Buch benutzt wurde, nur dass »Abril Text« besser auf dem Bildschirm funktioniert. Wir bedienten uns der verschiedenen Schnitte und Größen, um Textelemente voneinander zu trennen. Außerdem wählten wir eine Akzentfarbe Rot aus, die ebenfalls im Buch benutzt wurde. Sie sollte einzelne Elemente hervorheben und das Design etwas auflockern. Alle Bilder, die normalerweise im Fließtext auftauchten, haben wir auf die rechte, freie Seite verschoben, damit der Lesefluss nicht gestört wird. Genauso konnten einzelne Textpassagen markiert und gespeichert werden, dies passiert auch auf der rechten Seite des XGA Formates.

240 x 320 px (QVGA)

Im QVGA-Format, haben wir vieles versucht zu implementieren. Allerdings stellte uns dieses Hochformat vor eine neue Herausforderung. Für den Fließtext entschieden wir uns für eine Font, die bei dem geringen Format, 240 x 320 px, gut leserlich ist und auch mit »Abril Text« harmoniert. Die Wahl fiel auf »Adelle Sans« von TypeTogether. Bei der Headline sind wir bei »Abril Text« geblieben. Wir passten die neue Schriftart auch für das XGA Format an. Durch den geringen Platz mussten wir einige Elemente umstellen. Das Menü versteckt sich nun hinter einem klassischen Hamburgermenü. Die Ankernavigation setzten wir an den Anfang des Textes. Beim Scrollen bleibt diese oben stehen, sodass man beim Lesen weiterhin schnell durch die Kapitel steuern kann.

Lernings

Da ich schon Erfahrung in Screendesigns vorzuweisen hatte, fiel mir die Aufgabe nicht ganz so schwer. Deswegen konzentrierte ich mich hier eher auf die Wahl der Schrift. Es war spannend, zu sehen, wie viel Vorsicht dabei auf dem QVGA-Format geboten ist.

2. Graphical User Interface (GUI)

Aufgabe

Die nächste Aufgabe bestand darin, eine Inspirationsapp für Designer zu schaffen. Dabei sollten wir uns, bei Bedarf, die UI-Standards zur Hilfe nehmen und eigene Design-Ideen daraus entwickeln.

Ideen und Skizzen

Sandra Fischer und ich hatten für unsere Inspirationsapp praktischerweise eine ähnliche Idee. Wir trafen uns und fertigten ein Moodboard an. Wir merkten schnell, dass unsere Ideen viel Luft nach oben hatten. So notierten wir alles und fertigten dazu kleine Skizzen an. Beim ersten Feedback stellten wir schnell fest, dass die App zwar auf Anklang fand, aber wir für eine App zu viele Funktionen geplant hatten.

Prototypen

Wir konzentrierten uns schließlich auf die Funktionen, die wir als Designer wirklich benötigen würden und bei anderen Apps vermisst hatten. Auf Text wollten wir größten teils verzichten, weil uns die schnelle Bedienung in der App wichtig war. Dazu erstellten wir ein Onboarding, damit alle Funktionen nach Anmeldung erklärt werden und so der Nutzer einen Überblick über alle Bereiche bekommt. Wir achteten auch darauf, dass sich die App so intuitiv wie möglich steuern lässt und man bereits erlernte Funktionen kaum verändert. Dazu teilten wir uns die Aufgabe ein, dass Sandra in »Sketch« das Onboarding entwarf und ich die App in »Adobe Xd« arbeiten konnte. Wir sprachen uns dazu immer wieder ab.

Die App

Die Startseite dient zur Inspiration. Es lässt sich endlos nach unten scrollen. Für jedes Bild wurden unterschiedliche Farben definiert. Außerdem kann man auch nur Farben ohne Bild darstellen. Als Spielerei bestimmten wir auch eine »Farbe des Tages«. Die Bilder wurden von dem Nutzer oder von anderen Nutzern öffentlich geteilt. Farbkarten und Bilder können favorisiert werden. Diese werden dann im eigenen Profil gelistet und gespeichert. Unter »deine Galerie« befinden sich alle Bilder, denen man selbst Farben zugeordnet hat. Diese sind nicht öffentlich. »Materialfarben« sind schon vordefinierte Farben vom System. Eine weitere Spielerei haben wir noch eine Seite, wo Zufallsfarben generiert werden können.

Learnings

Hierbei hatte ich wieder den Vorteil, dass ich mich zuvor viel mit App-Design beschäftigt hatte und mir die Aufgabe nicht ganz so schwerfiel. Trotzdem fand ich den Ansatz gut, erst einmal bestehende UI-Standards zu nutzen und daraus dann etwas Eigenes zu entwickeln, zuvor setzte ich vieles eher intuitiv ein.

3. 1000 Worte

Aufgabe

Die letzte Aufgabe sollte einen komplexen Sachverhalt darstellen. Es durfte dabei weder Text noch Zahlen verwendet werden. Alles sollte mithilfe von Grafiken kommuniziert werden.

Idee & Skizzen

Diese Aufgabe bereitete mir einige Schwierigkeiten. Ich konnte mich nicht gut auf ein Thema festlegen, wodurch ich viele Skizzen für verschiedenste Prozesse erstellte. Schließlich entschied ich mich dafür, die Pflege einer Clivia Pflanze und deren Vermehrung in einem Prozess darzustellen.

Herangehensweise

Genaugenommen wollte ich eine Pflegeanleitung und einen Prozess darstellen. Bei der Vorstellung meines Themas merkte ich schnell, dass mir dieser Umstand noch nicht ganz bewusst war, was ich im Detail abbilden wollte. Nach Längerem experimentieren, entschloss ich mich dazu, einen Kreislauf nachzustellen. Die Pflegeanleitung fügte ich diesem Kreislauf hinzu und hatte somit beides verbunden. Im Grunde genommen ging es darum, aus einer bestehenden Pflanze eine weitere zu bekommen.

Entwicklung

Bei meiner Abbildung wollte ich mich an einen verspielten und zwei dimensionalen Look bedienen. Ich legte hier einen besonderen Wert auf die Farben, die alle harmonieren sollten. Außerdem entwarf ich alle Grafiken eigenständig. Dadurch, dass ich leider recht spät zu dieser Idee kam, fehlte mir dadurch leider eine Feedbackrunde, um Fehler auszugleichen, weswegen ich dies nachträglich erledigte.

Learnings

Wenn ich versucht hätte, im ersten Schritt meine Idee abzubilden, wären mir meine Problematiken schon früher klar gewesen. Ich habe zu viel Energie in das finden eines Themas gesteckt und weniger in den Prozess. Ich habe lange gebraucht einen einheitlichen Look zu finden, der mir auch gefällt und dadurch ebenfalls viel Zeit verspielt. Ich finde jedoch, dass sich der Aufwand gelohnt hat, auch wenn sich dadurch einige Fehlerchen eingeschlichen haben.

Fazit

Für mich war der Kurs »Basic Interface« ein hervorragender Auftakt in das Studium. Obwohl ich einiges an Erfahrung mitbrachte, konnte viele neue Inspirationen gewinnen. Mir gefiel besonders, die Unterrichtsstruktur. Zuerst das Thema mit einer Präsentation einleiten, dann das gemeinsame Feedback und das abschließende Feedback. Dieser Erkenntnisgewinn führte dazu, dass ich meine Projekte stetig verbessern konnte und mir immer Lust auf mehr gemacht haben. 

Insgesamt bin ich nun motiviert noch tiefer in die Materie einzudringen und mein hier erlangtes Wissen, weiter zu vertiefen und anzuwenden.