No 25 — Red? Green? Blue!

Die visuelle Sprache von Compass

Die Inhalte in den Mittelpunkt stellen — die Erkenntnisse der Zielgruppenanalyse haben einen zentralen Anspruch an die visuelle Sprache von Compass und insbesondere der App bereits vorweggenommen.

Unaufdringlich soll sie sein, sich dezent im Hintergrund halten, auf Schmuck verzichten. Compass verspricht einen schnellen, unkomplizierten Zugang zu Inhalten, zu individuell generierten Routen — das Interface Design löst diesen Anspruch auch in der direkten Kommunikation mit dem Nutzer ein, verzichtet auf Schnörkel. Platz für Schmuck ist sowieso rar, die Bildschirmfläche von mobilen Endgeräten begrenzt.

Eine Anlehnung an die Schweizer Grafik, an das Werk Josef Müller-Brockmanns, ist erkennbar: klares Raster, feste Hierarchien, wenig Schriftmischung.

Logo

Bereits das Logo vereint viele dieser Aspekte in einem einzigen Zeichen: unaufgeregt, simpel, direkt. Die Vernetzung mit anderen Fahrern, das gemeinsame Erstellen von Routen, die COoperation stehen im Vordergrund — und rücken auch im Bildzeichen in den direkten Fokus.

Die Vernetzung mit anderen Fahrern, das gemeinsame Erstellen von Routen stehen im Vordergrund.

Entfernt erinnert die runde Grundform selbst an einen Kompass — doch erste Assoziationen von Betrachtern sind breit gestreut: manch einer sieht den Wechsel zwischen Mond und Sonne und damit einen Tagesablauf, ein anderer Autoreifen in der Perspektive, wieder andere meinen einen Prozess zu erahnen, vom Halben zum Ganzen, von einzelnen Inhalten zu einer vollständigen Route. Und so lässt das Logo Raum für individuelle Ideen, für die persönliche Inspiration — ohne dabei vage zu bleiben.

Die Compass App Icons für iOS

Logo Prozess
Die Entwicklung eines repräsentativen Logos für Compass begleitete beinahe den gesamten Umsetzungsprozess der mobilen Applikation — und führte letztlich zu einem ganzen Katalog an unterschiedlichen Varianten. Der Schwerpunkt auf einem möglichst simplen Zeichen war von Anfang an gesetzt — und auch die Farben standen recht früh im Prozess fest. Und so unterscheiden sich die Entwürfe zwar in ihrer visuellen Ausprägung, teilen aber eine gemeinsame inhaltliche Basis — wenig verwunderlich, sollen doch alle die Grundidee von Compass widerspiegeln: schneller, umkomplizierter Zugang zu individuell generierten Routen.

Einblick in den Entwurfsprozess des Compass Logos

Farbe

Oberster Anspruch bei der Erarbeitung des Farbkonzepts war es, einen Primärton zu definieren, der sich als Signalfarbe klar von den übrigen Inhalten abhebt und zentrale Interaktionselemente somit unmissverständlich kenntlich macht.
Die Compass App ist geprägt von Fotos und Videos, von visuellen Inhalten aller Art. Und so ist es auch keine Überraschung, dass natürliche Farbtöne — Grau, Braun, Grün, Blau — die visuelle Erscheinung dominieren.

Der gewählte Primärton setzt einen klaren Kontrapunkt, bewegt sich in den Extremen des RGB-Farbraums und grenzt sich visuell stark von den geteilten Inhalten der Nutzer ab

Der gewählte Primärton setzt hierzu einen klaren Kontrapunkt, bewegt sich in den Extremen des RGB-Farbraums und grenzt sich visuell stark von den geteilten Inhalten der Nutzer ab. 
Blau wirkt sachlich, klar und direkt — Assoziationen, die auch mit Compass in Verbindung gebracht werden sollen. Ein erhöhter Rotanteil beugt dabei einem allzu technisch kühlen Charakter vor.

Der Farbton leuchtet, zieht den Blick auf sich und ist somit perfekt zur Hervorhebung wichtiger interaktiver Elemente geeignet. 
Gedruckt ist die Farbe dabei nur schwer wiederzugeben — ein Aspekt, der den digitalen Fokus von Compass unterstreicht.

Das finale Farbkonzept

Begleitet wird Blau-Violett von einem hellen Mintgrün — wiederum ein Kontrast, der den digitalen Charakter im Detail bricht und als dezente Hervorhebungsfarbe für Abschnitte innerhalb der App fungiert. Ein tiefes Schwarz sowie einige sekundäre Grautöne ergänzen das Gesamtbild und helfen, eine klare Hierarchie innerhalb der Applikation aufzubauen. Oberstes Ziel auch hier: eine schnörkellose, direkte Ansprache und größtmöglicher Kontrast.

Hierarchische Ordnung
Farben tragen nicht nur dazu dabei, Interaktionselemente klar kenntlich zu machen, sondern helfen auch, unterschiedliche Inhaltstypen voneinander abzugrenzen. So werden Einstellungen und Overlays grundsätzlich grau hinterlegt, Intros zentraler Bereiche wie Explore, Search oder Profile zeichnen sich durch einen mintfarbenen Hintergrund aus und die Routengenerierung wird durch den flächigen Einsatz von Blau zusätzlich hervorgehoben.

Hierarchisierung der Inhaltsbereich durch unterschiedliche Farbgebung

Typografie

Die typografische Ebene führt die Ansprüche aus den vorangegangenen Abschnitten konsequent fort. Zum Einsatz kommt Maison Neue, eine sachliche Serifenlose des Züricher Büros Milieu Grotesque. Die visuelle Erscheinung: unaufgeregt und schnörkellos. In den Details: feine Zitate traditioneller Schweizer Typografie.

Doch die Wahl hatte neben ästhetischen auch funktionale Beweggründe. Maison Neue weist eine vergleichsweise geringe Laufweite auf — und eignet sich somit perfekt für die begrenzte Fläche eines Smartphone-Bildschirms.

Zusätzlich unterstützen die ausgeprägte x-Höhe sowie die daraus resultierende Großzügigkeit der Punzen die Lesbarkeit auch in kleinen Schriftgraden. Und der stark definierte vertikale Aufbau aller Zeichen sorgt zusätzlich dafür, dass das zugrundeliegende Pixelraster jedweder digitalen Anwendung bestmöglich eingehalten wird und keine wichtigen Schriftdetails verloren gehen.

Doch auch hier hören die Vorteile noch nicht auf: Maison Neue kommt in gleich 40 unterschiedlichen Schriftschnitten daher. Und auch wenn davon letztendlich nur fünf zum Einsatz kamen: Die feinen Abstufungen sowie der zusätzliche Mono Schriftschnitt erlauben es, sehr genau auf unterschiedliche Anforderungen und Abbildungsgrößen einzugehen. So wurden beispielsweise Medium- sowie Demi-Schnitte genutzt, um über verschiedene Schriftgrößen hinweg ein ähnliches Graubild zu erzielen¹.

Erste Ansätze
So sachlich und reduziert war der Schrifteinsatz dabei nicht von Beginn an. Gerade in den ersten Wochen der Umsetzungsphase gab es Versuche mit weitaus expressiveren Schriftmischungen. So sollte ursprünglich Noe Display zum Einsatz kommen. »When letters are large, there is room for them to wave their own peculiar flag, to project their personal voice at full volume«², heißt auf der Seite der Schriftengestalter Schick Toikka. Nicht unbedingt die beste Wahl, wenn eigentlich die Inhalte selbst im Mittelpunkt stehen sollen. Und so wurde die Sekundär- letztlich zur Primär-Schrift, so hielt Maison Neue auch in den Überschriften Einzug.

Gerade zu Beginn des dritten Semesters war die Schriftmischung betont expressiver

Und diese sind nach wie vor prominent inszeniert — dank grafischer Ruhe in der Schriftgestaltung aber weniger aufgeregt und aggressiv. Die großen, meist mehrzeiligen Überschriften schaffen Ruhezonen, bieten Orientierung, leiten ein — und schaffen durch ihren konsistenten Einsatz einen wichtigen visuellen Baustein für alle Inhaltsbereiche.

Die konsistente Inszenierung der Überschriften hält unterschiedliche Bereiche optisch zusammen

Icons

Die Icons der Compass App lassen sich in drei Kategorien einteilen: Interaction, Inline und Support. Die Gruppen eint dabei eine ähnliche gestalterische Philosophie — Schwerpunkt auf dem rechten Winkel, hoher Kontrast — unterscheiden sich jedoch in Strichstärke und Detailgrad.

Interaction
Hauptsächlich in der Navigation Bar — sprich im oberen Display-Bereich neben dem Titel — anzutreffen, weist die erste Kategorie mit Abstand den größten Umfang auf. Ihr Anspruch: Aktionsmöglichkeiten ohne textlichen Zusatz leicht verständlich darstellen. Dementsprechend simpel ist auch die grafische Ausarbeitung: gleichbleibende Strichstärke, schwarz, Verzicht auf unnötige Schnörkel.

Eine Auswahl an Icons aus der Interaction-Kategorie

Inline
Inline-Icons bieten kontextuelle Informationen auf der Meta-Ebene — beispielsweise um auf einen geteilten Beitrag aufmerksam zu machen oder anzuzeigen, dass eine Route mit anderen Nutzern geteilt wurde.

Inline-Icon weist auf geteilten Beitrag hin

Support
Icons der Support-Kategorie haben nur einen einzigen Zweck: Einen textlichen Sachverhalt visuell zu unterstützen und dadurch die Bedienung zu vereinfachen. In der aktuell ausgearbeiteten Fassung kommt dieser Icon-Typ allein in den Filteroptionen zum Einsatz.


Bilder

Wenig bis gar keinen Einfluss kann die visuelle Gestaltung auf die Bilder innerhalb der Anwendung nehmen. Durchweg aus nutzergenerierten Inhalten zusammengestellt, muss bei Foto- beziehungsweise Videostrecken prinzipiell mit allen stilistischen Ausprägungen gerechnet werden — ein weiterer Grund, warum sich die Marke Compass meist dezent im Hintergrund hält.

Einziger Eingriff seitens der Anwendung: Visuelle Inhalte können nur in fest definierten Seitenverhältnissen im Hoch- und Querformat sowie als Quadrat geteilt werden. Diese Einschränkung soll insbesondere im Explore-Bereich nebeneinander angeordnete Inhalte horizontal auf eine Linie bringen und so optische Ruhe gewährleisten. 

Anfangs gab es auch Versuche, Bilder mit Duplex-Effekten zu versehen und so eine größere visuelle Eigenständigkeit über die Anwendung hinweg zu erzielen (siehe Abbildung weiter oben). Problematisch hierbei: Nutzergenerierte Inhalte hätten grafisch verändert werden müssen — eine visuelle Spielerei ohne wirklichen Mehrwert die unter Umständen sogar auf Kosten der Nutzbarkeit gegangen wäre.


Raster

8-spaltiges Grundraster

Die gesamte Compass App baut auf einem 8-spaltigen, vertikalen Raster sowie einem 5 Punkt Basis-Gitter auf. So kann inhaltsübergreifend ein einheitlicher vertikaler Rhythmus gewährleistet werden.

Die horizontale Ausrichtung der Inhalte folgt weniger strengen Regeln und muss sich ausschließlich dem 5 Punkt-Rhythmus beugen. Einzige Ausnahme: Die erste Grundlinie steht — soweit möglich — grundsätzlich erst bei 105 Punkt. Eine Maßnahme, die mehr visuellen Raum für die Navigation und damit eine klarere Trennung zum darunter folgenden Inhalt mit sich bringt.

Motion

Die dritte Prototyping-Phase brachte eine weitere wichtige Komponente in den Designprozess ein: Bewegung. Die Compass App orientiert sich dabei an den Grundsätze der Material Design Guidelines. Auch wenn es sich genau genommen um ein Framework handelt, das ausschließlich für Android-Anwendungen konzipiert wurde, lassen sich einzelne Elemente auch problemlos Ökosystem-übergreifend nutzen. Die zentrale Aussagen dabei:

All action takes place in a single environment. Objects are presented to the user without breaking the continuity of experience even as they transform and reorganize.³

Und dieses Grundprinzip findet sich auch in der Compass App überall wieder, verbindet unterschiedliche Bereiche sinnvoll miteinander. Die genauen Bewegungsabläufe orientieren sich in Geschwindigkeit und Beschleunigung dabei am iOS-Standard und müssten für eine mögliche Android-App entsprechend angepasst werden.

Animationen und Übergänge innerhalb der Compass App

Erwartungskonformität

Die schriftliche Masterthesis hatte das Dilemma bereits vorweggenommen, hatte den Konflikt zwischen einem eigenständigen visuellen Markenbild und den Ansprüchen an die Usability einer App eingehend besprochen.⁴

Besonders relevant dabei: Die sogenannten UI Patterns. »Sie stellen erprobte Lösungen für Interaktionsprobleme dar und helfen als solche, erwartungskonform zu gestalten. Die Interaktionsdauer bei mobilen Anwendungen ist meist sehr kurz — umso besser, wenn der Nutzer bekannte Muster vorfindet.«⁵

Sowohl Apple als auch Google haben ihre eigenen Kataloge vorgefertigter Komponenten für die Gestaltung von User Interfaces. Und ja: Im Detail bringt das Implementieren dieser Muster entscheidende Vorteile bei der Nutzbarkeit mit sich. Doch mit Blick auf ein möglichst eigenständiges Erscheinungsbild, auf eine individuelle Markenidentität sollten die Vorgaben stets kritisch geprüft werden.

In der Folge orientiert sich die Compass App zwar an Apples Human Interface Guidelines, folgt ihnen aber nicht streng. Das Ergebnis: Eine Anwendung, die den Nutzer einerseits in einer gewohnten Umgebung empfängt, ihn aber andererseits durch neue grafische Ansätze überrascht.

Gegenüberstellung der Tab Bar — links Compass, rechts die Empfehlung seitens Apple
Gegenüberstellung einzelner Listenelemente — links Compass, rechts die Empfehlung seitens Apple
Gegenüberstellung der Navigation Bar — links Compass, rechts die Empfehlung seitens Apple

Gestaltungsvarianten

Um zum Abschluss noch einen tieferen Einblick in den grafischen Entwurfprozess sowie die Variantenbildungen zu geben, folgen nun einige Konzeptansätze in loser Reihenfolge. Wer mehr zur eigentlichen Umsetzung der Applikation erfahren möchte, der findet im Beitrag Going Circles nähere Informationen.


¹
vgl. Beinert, Wolfgang (2016): Grauwert. URL: www.typolexikon.de/grauwert. Zuletzt aufgerufen am 7. Juni 2017
²
Schick Toikka (2016): Noe Display. URL: www.schick-toikka.com/noe-display. Zuletzt aufgerufen am 23. Mai 2017
³
Google Inc (2017): Principles. URL: https://material.io/guidelines/#introduction-goals. Zuletzt aufgerufen am 9. Juni

vgl. Schlosser, Alexander (2017): Die Obsoleszenz visueller Markenführung. Masterthesis. Luzern (Schweiz)

ebd. S. 20