Fingerübungen

Übung 1: Gestaltung eines Wikipedia-Eintrags (Font: IBM Plex)

Übung 2: Rekonstruktion eines bestehenden UI (Font: Inter UI)

Übung 3: Gestaltung eines eBooks (Font: Exo, Bungee)

Semesterprojekt

Als Abschluss des Kurses galt es die letzten drei Semesterwochen eine bestehende Anwendung in einem typografischen Redesign zu optimieren. Dabei habe ich mich für 1Password für Windows 10 entschieden – ursprünglich eine MacOs-Anwendung, die auf andere Systeme portiert wurde.

Dies ist die Bearbeitungs-Ansicht eines Datensatzes mit Passwortgenerator im 1Password unter Windows. Die Lesbarkeit der Navigationspunkte ist suboptimal, aufgrund schwacher Kontraste und geringer Schriftgröße. Das restliche Interface ist lesbar, aber verwendet etwas lieblos gestaltete UI-Elemente: darin finden sich eine Vielzahl von Schriftgrößen und -farben, seltsame Abstände, viele Grautöne, unklare Icon-Buttons und etwas betagte GNOME-Symbole für Einträge.

Im ersten Schritt habe ich das Interface mit Hauptaugenmerk auf den Schrifteinsatz vereinheitlicht. Die Gestaltung orientiert sich stark an den Universal Windows Platform Human Interface Guidelines und nutzt standardisierte Elemente für Eingabefelder, Buttons etc. 

Das gesamte Layout basiert nun auf einem einheitlichen Grundlinienraster. Typographisch kommt die Systemschrift Segoe UI zum Einsatz (Consolas für das Passwort-Feld) – auch die erhöhte, besser lesbare Schriftgröße entstammt den Systemstandards. 

Die überarbeitete Version wirkt aufgeräumter und durch erhöhte Kontraste und Schriftgrößen hat sich die Lesbarkeit alle Elemente verbessert.

Im nächsten Schritt wollte ich die Gestaltung wieder weiter von den UWP Systemstandards entfernen und habe mich an einem Dark Mode des Interfaces versucht. Eine dunkle Gestaltung birgt mit Fokus auf Lesbarkeit erhöhte Schwierigkeiten, da höhere Kontraste notwendig sind – nicht nur über Helligkeitswerte, sondern auch ein breiterer Schriftduktus hilft dabei, dass Schriften auf dunklem Hintergrund nicht wegbrechen.

Ein schönes Detail, welches beim Vorlesen oder Abtippen von Passwörtern enorm hilfreich ist, ist die Farbgestaltung der Passwortzeichen je nach Zeichentyp (Unterscheidung in Buchstaben, Zahlen, Sonderzeichen).

Dies dunkle Variante hat sich jedoch schleichend immer weiter weg von 1Password entwickelt. Da die grau-in-graue Desktopanwendung von 1Password wenig Gestaltungsansätze ableiten lies, habe ich mich noch einmal von der Webseite inspirieren lassen, welche mit einer klaren, frischen und freundlichen Blau-Weiß-Kombination daher kommt.

Der finalen Version sieht man weiterhin ihren Ursprung in den UWP Guidelines an – durch die Farbgestaltung und kleine Anpassungen wie z.B. abgerundete Ecken erhält die Gesamterscheinung einen eigenen Charakter und fühlt sich nicht mehr nach den Systemeinstellungen an.

Als Schrift kommt hauptsächlich Fira Sans zum Einsatz, für das Password wird die Schrift Fira Mono aus der selben Familie verwendet.

Die Schriftfarben sind nie schwarz oder weiß, sondern stets eine Blauabstufung, damit sie sich besser in das Gesamtbild einfügen.

Als weiteren Gestaltungsgrundsatz habe ich mir vorgenommen, so wenig Linien und Rechtecke zu verwenden, wie möglich. So sind z.B. Listeneinträge nicht durch Linien getrennt, sondern nur durch Abstände.

Durch die Vereinheitlichung und Orientierung an Systemstandards wird auch endlich klar, was ein Eingabefeld ist, und was nicht.

Sämtliche Icons wurden als Vektoren nachgezogen und erscheinen nicht mehr wie verschwommene Pixelgrafiken. Die Symbole der Listeneinträge wurden stark vereinfacht und setzen auf eine Signalfarbe, um die Wahrnehmung zu vereinfachen. 

Das Grundlinienraster sorgt für Aufgeräumtheit und einen vertikalen Rhythmus.

Und besonders wichtig: Unterstützung für Emojis.

Einzig die Farbgestaltung ist im Vergleich zur Web-Landingpage noch nicht ganz on point, da in Anlehnung an den „Milchglas-Effekt“ Farbverläufe zum Einsatz kommen.

Anwendungsbeispiel: Detailansicht eines Eintrags

Nicht eindeutige Icon-Buttons wurden entweder durch Schrift ersetzt oder um ein Label ergänzt (z.B. „Menü“, „Copy“).

Anwendungsbeispiel: Browser Extension Chrome

Hier habe ich die neuen Gestaltungsprinzipien auf das bestehende Fenster angewendet. Ein schönes Detail ist die „1“-Notification im Extention Icon, die den Nutzer darauf hinweist, dass ein Eintrag für die aktuelle URL existiert.