Screendesign

Aufgabe

Ein Screendesign für ein Buch entwickeln. Schwierigkeit war es, die Möglichkeiten und Einschränkungen des Screendesigns im Vergleich zum Printdesign zu erkennen. Das Design sollte für die Auflösungen 1024 x 768 px (XGA) und 240 x 320 px (QVGA) gestaltet werden.

Ich habe diese Aufgabe mit Sabrina Hartwig bearbeitet. 

Unser Buch

Ich habe mich mit Sabrina für das Buch »Gemalte Schriftzeichen – 214 chinesische Schriftzeichen vom Bild zum Begriff« entschieden, in welchem es um die Geschichte und Entwicklung chinesischer Schriftzeichen geht, um ihre Bedeutung und darum, wie sie gezeichnet werden.

Gestaltung

Die Seite sollte nicht durch unnötige Buttons oder Steuerelemente vom Content ablenken. Deshalb haben wir nicht mit Weißraum gespart, der ein ausgewogenes und nicht überfrachtetes Gesamtbild erzeugt. Wir wollten die Schriftzeichen in unserem Design verarbeiten und damit eine intuitive Navigation ermöglichen, deshalb finden sie sich dort auch wieder. Farblich haben wir uns am Rot des Buches orientiert und es mit hellen sowie dunklen Grautönen kombiniert. Die Hauptnavigation findet im Kopfbereich Platz.

Eine Standardseite ist in zwei Spalten eingeteilt: Links steht Text, während rechts Bilder, sowie genauere Definitionen oder ähnliches, platziert sind. Wir hatten auch die Idee, dass der Leser sich dort bestimmte Textabschnitte durch Markieren merken kann.

Typografie

Ursprünglich war eine Serifenschrift geplant, allerdings wäre das auf der kleinen Auflösung (QVGA) kaum lesbar geworden. Deshalb entschieden wir uns schlussendlich für Adelle Sans, die unserer ursprünglichen Auswahl recht nahe kommt und zudem auf beiden Auflösungen gut lesbar ist. Die Überschriften sind in Abril Text gesetzt, die mit der Adelle Sans gut harmoniert und klassisch wirkt. Bilder befinden sich im Design der hohen Auflösung (XGA) in der rechten Spalte und Text in der linken, sodass der Lesefluss nicht gestört wird.

240 x 320 px (QVGA)

Die kleine Auflösung kommt der größeren Version sehr nahe. Aus Platzgründen wurden hier fast alle Elemente untereinander angeordnet und die Navigation befindet sich unter einem Hamburgermenü.

Graphical User Interface: Inspirationsapp

Aufgabe

Ein Interface für eine Inspirationsapp entwickeln, das sich an die UI-Guidelines von iOS (bzw. Android) hält. Ich habe dafür mit Elsa Woelk zusammengearbeitet.

Konzept und Idee

Unser Konzept ist eine App, mit der ein Gestalter schnell Fonts entdecken kann. Er kann dabei entweder mit einer Tinder-ähnlichen swipe-Funktion  Schriften finden, oder nach Kategorien Vorschläge erhalten bzw. nach spezifischen Fonts suchen.

Die App merkt sich zu jeder Schrift nicht nur Namen, sondern auch den Preis, das Format, weitere Eigenschaften sowie beschreibende Adjektive.

Der Nutzer soll aus einem großen Katalog eine Schrift nach seinen Vorstellungen finden können, ohne dabei nach Konzepten wie Klassifizierung vorsortieren zu müssen oder etliche Font-Webseiten durchsuchen zu müssen.

Gestaltung

Wir haben uns farblich für verschiedene, neutrale Grautöne und einem Orange-Ton entschieden. Durchweg wird bei der Gestaltung nicht mit Weißraum gespart, um einen leichten und modernen Eindruck zu erzeugen. Das Design, inklusive der Icons und Typografie, orientiert sich an den Human Interface-Guidelines von Apple für iOS. 

Bedienung

-> Swipe

Öffnet der Nutzer die App das erste Mal, wird ihm eine zufällige Font angezeigt, ohne, dass er etwas eingeben muss. Sucht er nach etwas anderem, streicht er die Karte nach links und ihm wird eine andere Schrift vorgeschlagen. Streicht er hingegen nach rechts, erscheint eine ähnliche. Der Sinn ist, dass die angezeigte Schrift nach und nach genauer dem Wunsch des Nutzers entspricht. Über einen Reset-Knopf kann der Nutzer die Suche zurücksetzen.

Alternativ lassen sich auch über einen Filter bestimmte Voreinstellungen treffen: z. B. nur Webfonts oder nur Klassizistische Antiqua.

Jede Font kann favorisiert werden. Außerdem gibt es unter dem Suchen-Tab nicht nur eine Suche, sondern auch Font-Vorschläge nach Kategorien oder etwa Anlässen.

Probleme

Ein Problem war die Doppeldeutigkeit des Daumen-Buttons, auch im Bezug auf den Herz-Button. Das Herz steht für das Favorisieren, während man mit dem Daumen bestimmt, ob man nach einer ähnlichen Schrift oder nach einer anderen sucht. Außerdem ist das Herz sowohl „favorisieren“ als auch der „Favoriten“-Tab. Also musste dies gestalterisch über verschiedene Hierarchien verdeutlicht werden.

Ergebnis

Hinweis: Seit der finalen Präsentation haben wir noch, basierend auf der Kritik, einige Verbesserungen vorgenommen:

Flowchart

1000 Worte

Aufgabe

Einen Sachverhalt, Ablauf o. ä. durch ein Schaubild darstellen, ohne dabei Wörter zur Beschreibung zu verwenden.

Umsetzung und Hintergrund

Mein Schaubild zeigt Marie Kondos KonMari-Methode. Im Zentrum des Schaubilds steht die Frage „Does it spark Joy?“. KonMari stellt sie, um zu entscheiden, ob sie ein bestimmtes Objekt behält oder nicht. Wichtig ist ihr die persönliche Beziehung zu einem Objekt; sie lässt es an, um zu entscheiden, was es für sie bedeutet und sie bedankt sich, bevor sie es entsorgt (bzw. spendet).

Ich habe versucht, die wichtigsten Stufen der Aufräummethode grafisch darzustellen. Dazu gehört neben der Entscheidungsfrage beispielsweise, dass sie alle Kleidungsstücke auf einen Haufen wirft und sie später nach Art und Weise (wie der Farbe oder dem Muster) sortiert, oder, dass sie jedem Objekt sofort seinen Platz gibt.

Gestaltung

Während ich mein Schaubild anfangs noch isometrisch darstellen wollte, habe ich schlussendlich mit kleinen zweidimensionalen Symbolen gearbeitet. Diese wirken ordentlich und simpel, was der KonMari-Methode inhaltlich nahe kommt. Insgesamt erscheint das Schaubild damit aufgeräumt.

Fazit

Der Kurs war ein sehr vielseitiger Einstieg in die Welt des Interface Designs. Durch die Kombination aus Vorlesungen (u. a. zu Screendesign oder der Geschichte des Interfaces) und wöchentlichen Feedbackrunden konnte ich recht schnell sehr viel lernen. 

Auch, dass die ersten beiden Aufgaben in Partnerarbeit zu erledigen waren, hat mir persönlich dabei geholfen, die Arbeiten und Ideen aus einer anderen Perspektive zu betrachten und andere Einflüsse zuzulassen. Vielleicht hätte ich mir teilweise gewünscht, in die Prozesse, gerade in Hinsicht auf UX, noch tiefer einsteigen zu können, aber ich denke, dass sich dafür in meinem Studium noch genügend Zeit finden wird. 

Ich kann eigentlich jedem, der Design studiert, diesen Kurs empfehlen..