1 Abstract

2 Haltung

3 Thesen

4 Hintergrund

4.1 Digitalisierung

Digitale Produkte sind nutzerzentrierter

Die Digitalisierung ermöglicht heute das Anbieten neuer Services in Form von Software und Automatisierung, die in erster Linie auf Nutzerbedürfnissen basieren. Zum einen vereinfachen digitale Services bekannte Dienstleistungen aus der analogen Welt und sind daher in der Lage, diese günstiger und aufwandsloser anzubieten. Uber vermittelt durch sein Angebot beispielsweise private Pendelfahrer mit potenziellen Taxi-Kunden; private ›Mitfahrgelegenheiten‹ unterliegen in vielen Ländern anderen Bestimmungen und können daher wesentlich günstiger angeboten werden. Zum anderen bedienen digitale Dienstleistungen aber auch neu erkannte Bedürfnisse und bieten weitreichende Lösungen für eine Branche. AirBnB erkannte z.B., dass viele Menschen nicht in sterilen Hotels wohnen, sondern sich auch in ihrem Urlaub wie zu Hause fühlen möchten: die Geschäftsidee beruht darauf, dass lehrstehende Privatwohnungen für Menschen aus aller Welt ein zu Hause sein können.1 Nutzerzentrierte Gestaltung, Service Design und Design Thinking sind relativ neue und populäre Disziplinen, die eines gemein haben: sie beschäftigen sich intensiv mit dem Menschen und suchen in der Regel nach einfachen, aber individuellen Lösungen.

Während Marken früher oft für ein Produkt standen, stehen digitale Marken heute mit zunehmender Digitalisierung meist für einen Service 2: Automarken bieten heute beispielsweise nicht nur Autos an, sondern auch Carsharing-Modelle (Mercedes, bmw), Sportartikel-Hersteller bieten digitale Personal Trainer als Ergänzung zu ihren Produkten (adidas miCoach).3 Teilweise sind aber bereits überwiegende Teile großer Branchen digitalisiert: die Angebote vieler Banken (z. B. Sparkasse) haben sich vor allem im Endkundengeschäft zunehmend in die digitalen Medien verlagert, manche Banken sind sogar reine Digitalunternehmen (N26). Dieser Trend dürfte sich in Zukunft noch auf einige Branchen ausweiten.

Eine digitale Marke muss also als Berührungspunkt zwischen Dienstleistung und Konsument verstanden werden. Dieser Berührungspunkt ist heute oft eine visuelle Nutzeroberfläche – in dem sich die Marke und deren Werte widerspiegeln sollte.4 Dabei gilt es jedoch, den Grundsatz zu berücksichtigen, dass im digitalen Produktdesign immer die Nutzbarkeit des Prozesse und damit die Erfahrung des Verbrauchers im Vordergrund stehen. Dienstleistungen sind auf Bedürfnisse zugeschnitten und besitzen somit abhängig von Kontext und Nutzer völlig verschiedene Anforderungen von Produkt zu Produkt.

Digitale Medien sind vielfältiger

Steve Jobs verbildlichte die Nützlichkeit des Computers für den Menschen mit »The Computer should be a bicycle for our mind«.5 Die fortschreitende Digitalisierung begreift den Computer immer mehr in diesem Sinne; als befähigende Erweiterung unseres Intellektes – eine Erweiterung wie es das Fahrrad für unsere Beine darstellt. Um dies zu erreichen, wird der Computer immer nahtloser in unseren Alltag integriert. Wir waren noch nie so sehr von Computern umgeben wie heute; in unterschiedlichsten Größen und Formen, ausgestattet mit auditiven und visuellen Nutzeroberflächen, vom niederkomplexen lcd bis zum 30„ Retina Multitouch Display.

Corporate Design beruhte früher unter anderem auf der Berechenbarkeit der zu gestaltenden Medien, sodass ein präzises, aber starres Regelwerk üblicherweise eine gute Lösung darstellte, um hohe Konsistenz zu erzielen. Digitale Nutzeroberflächen müssen nicht nur in vielen, sondern auch in relativen, responsiven Größen (Web, Smartphones) gedacht werden. Unter Umständen muss ein Erscheinungsbild auch auf den wenigen Quadratzentimetern einer SmartWatch funktionieren oder gar in Formen, die heute vielleicht noch gar in unserem Alltag integriert sind (Augmented Reality, Virtual Reality …).6 Der Umgang mit diesen Anforderungen verlangt ein gewisses Maß an Flexibilität und Adaptierbarkeit und damit auch das Lockern von Regeln.

Zwar sind Nutzeroberflächen in visueller Form momentan die Regel, jedoch bieten rein sprachliche Interfaces – wie man es von Apples Siri oder Amazons Echo kennt – mit zunehmender Reife riesiges Potenzial. Denkt man beispielsweise an die Bedienung eines In-Car Interfaces, dürfte Sprachsteuerung eine wichtige Rolle spielen, lenkt sie den Fahrer doch visuell nicht vom Autofahren ab. Es bildet sich also momentan eine neue Dimension, wie der Mensch eine Anwendung steuern und wie er damit mit dem Absender der Anwendung kommunizieren kannn. Für eine Marke als Absender ist diese Art der Kommunikation von Relevanz, denn mit einer eindeutigen Bestimmung von Tonalität und Sprache kann auch Wiedererkennbarkeit erzeugt werden. Erscheinungsbilder sollten unter Umständen auch über das Visuelle hinaus gedacht werden.

Digitale Märkte sind dynamischer

Die Digitalisierung verursacht in nahezu allen Lebensbereichen bedeutende Veränderungen. Es entstehen neue Formen des Arbeitens, neue Formen der Zusammenarbeit (bmw & Mercedes kooperieren im Carsharing), vor allem aber erscheinen tagtäglich neue Technologien, welche Beweglichkeit und schnelles Handeln von Anwender und Erbringer verlangen.

Während früher das Abwenden von einer Marke oft mit der Anschaffung eines neuen Produktes verbunden war, ist es heute ein Leichtes, zum Produkt / zur Anwendung eines Mitbewerbers zu wechseln. Eine Entscheidung kann einfacher und kostengünstiger revidiert werden, sobald der Nutzer unzufrieden ist oder ein besseres, zeitgemäßeres Angebot auf den Markt erscheint.

Es ist noch nie so leicht gewesen, ein Produkt auf den Markt zu bringen, sobald eine Nische gefunden wurde. Gleichzeitig war es aber auch noch nie so einfach, die Idee eines Konkurrenten zu kopieren und innerhalb weniger Tage verbessert auf den Markt zu bringen.

Diese Erkenntnisse lassen zwei Schlussfolgerungen zu: erstens ist mit der ständigen Weiterentwicklung digitaler Anwendungen auch digitales »Corporate Design kein statischer Prozess mehr, sondern eine Zustandsbeschreibung«; digitale Marken sind »Always Beta«, stellt Jochen Rädeker von Strichpunkt fest.7 Eine Marke muss also genau wie eine Applikation ständig weiterentwickelt und gepflegt werden – sonst läuft sie Gefahr, überholt zu werden. Auch Michael Grübbeling sieht Corporate Design mittlerweile im Projektgeschäft angekommen,8 müssen hier doch – zumindest bezogen auf einzelne Teile einer Identität – Entscheidungen getroffen werden. Zweitens ergibt sich eine höhere Notwendigkeit nach Abgrenzung, die sich nicht nur visuell in einem Produkt widerspiegeln muss, sondern auch in der Qualität der angebotenen Dienstleistung. Denn während ein Service an sich einfach zu kopieren ist, bietet das wie ein entscheidendes Abgrenzungspotenzial.

Digitale Nutzeroberflächen sind interaktiver

Die Digitalisierung etablierte mit dem Interface ein Medium im Alltag der Menschen, welches völlig neue Anforderungen und Funktionalitäten mit sich bringt. Während alle vorher üblichen, meist analogen Berührungspunkte häufig statisch und linear funktionierten, bieten Nutzeroberflächen eine neue Dimension: es gibt dem Nutzer die Möglichkeit, mit einem Medium und damit mit dem Absender – der Marke – an sich unmittelbar zu interagieren. Was früher ein einseitiger Monolog der Marke war, ist dadurch mehr und mehr ein beidseitiger Dialog zwischen Nutzer und Marke geworden.9

Interaktivität und Animation geben Berührungspunkten mehr Emotionalität und lassen Dienstleistungen zu einer emotionalen Begegnung mit der Marke werden. Idealerweise entstehen dabei von Verlässlichkeit und positiven Überraschungen geprägte Beziehungen. Dabei steht das Gesamterlebnis und die Nutzerfreundlichkeit im Fokus. Interaktionen und Animationen können nicht nur ein Erlebnis prägen, sondern leisten vor allem auch funktionale Dienste. Sie erleichtern einerseits die Nutzerführung, andererseits können sie durch kluge Lösungen für Begeisterung und Wow-Effekte sorgen (Shazam Button, Wischgeste von Tinder).

Neben dem Anbieten einer Dienstleistung an sich geht es auch maßgeblich darum, wie ein Nutzer diese Dienstleistung wahrnimmt. Ähnlich der analogen Welt: es gibt zwar viele Friseure, man wählt jedoch den aus, bei dem man insgesamt zufrieden ist – und dabei spielt nicht immer ausschließlich der Haarschnitt eine Rolle, sondern auch die Persönlichkeit des Friseurs oder die Atmosphäre im Salon.

Neben visueller Konsistenz sollte deshalb auch immer das Nutzererlebnis ein Hauptantrieb einer digitalen Identität sein. Es geht darum, klar zu definieren: wie kommuniziert eine Marke mit seinen Nutzern und wie erleben die Menschen die Marke auf einer emotionaleren Ebene? 10 Dabei sind neben Ästhetik auch Nutzerfreundlichkeit, Interaktivität, Tonalität und Animationen prägende Faktoren für eine ganzheitliche Begegnung.

Digitales Design ist diverser

Die Komplexität interaktiver Nutzeroberflächen erforderte eine Spezialisierung der Designdisziplinen. Alleine digitale Gestaltung unterscheidet sich in zahlreiche Spezialisierungen; zu den gängigsten zählen heute User Experience Design, Service Design, Interaction Design und Visual Design. Die Grenzen sind in der Regel fließend. Ein Visual Designer ist Experte für grafische Nutzeroberflächen. Ein Service Designer kennt Nutzerbedürfnisse und gestaltet Prozesse. Und auch ein Interaktionsgestalter ist Experte für Funktionalität und besitzt selten umfangreiche Kenntnisse für Identität.

Wenn ein Gestalter einen Flyer für eine große Marke umsetzen wollte, benötigte er auch früher schon ein gewisses Verständnis für Markengestaltung im Allgemeinen und für die Gestaltung einer Marke an sich. Das allgemeine Markenverständnis erhielt der Gestalter oft in seiner Ausbildung oder im Studium. Die digitalen Gestaltungsdisziplinen werden heute aber bereits hoch spezialisiert ausgebildet und besitzen daher oft nur Verständnis für ihr Fach. Das Verständnis für die zu gestaltende Marke erhält der ausführende Gestalter üblicherweise in Form eines Handbuches und Richtlinien. Diese Regeln und Richtlinien müssen nun aber auch von Gestaltern ›fachfremder‹ Disziplinen verstanden werden und sich nicht zuletzt in die Gestaltungsrichtlinien und -musterv von Nutzeroberflächen einfügen können.

4.2 Medien – analog und digital

4.3 Nutzerzentrierte Gestaltung

4.3.1 Service Design: Gestalten von Prozessen

Die Disziplin Service Design kann eher der Corporate Identity als dem Corporate Design zugeordnet werden. Inwiefern die Gestaltung eines Prozesses an sich die Wahrnehmung der Marke beeinflussen kann, lässt sich an einem Beispiel verdeutlichen.

Dazu betrachten wir ein Angebot der Sparkasse und von Paypal, genauer gesagt untersuchen wir eine der Kerndienstleistungen, die beide Unternehmen bieten: das Überweisen von Geld. Der Prozess der beiden Anbieter von Anfang bis Ende in Einzelschritte zerlegt:

Sparkasse

1. Applikation öffnen und mit Fingerabdruck verifizieren.
2. Konto auswählen.
3. Überweisung auswählen.
4. Name eingeben.
5. IBAN eingeben.
6. Betrag eingeben.
7. ›Senden‹ drücken.
8. PushTAN Applikation öffnen.
9. langes Passwort bestehend aus Buchstaben, Ziffern und Sonderzeichen eingeben.
10. TAN merken.
11. Applikation wechseln.
12. TAN manuell eingeben.
13. Senden.

Paypal

1. Applikation öffnen und mit Fingerabdruck verifizieren
2. ›Geld senden‹ drücken
3. Kontakt aus Liste wählen oder E-Mail-Adresse eingeben
4. Betrag eingeben
5. Senden.

Als gute User Experience gilt, was der Nutzer auf möglichst angenehme Weise erreichen kann. Grundgedanke ist es, immer so nützlich und dabei so aufwandslos wie möglich für die Benutzer zu sein.

Führt ein Nutzer regelmäßig Überweisungen durch und muss er entsprechend häufig die genannten Einzelschritte ausführen, spielt auch die Gestaltung des Ablaufs eine wichtige Rolle für die Nutzerbindung. Ist die Nutzererfahrung in der Ausführung einer Funktion positiv, schlägt sich das auch positiv auf das Verhältnis zwischen Nutzer und Marke aus. Das Nutzererlebnis entspricht dem Markenerlebnis.

Zieht man nun außerdem in Betracht, dass die Funktion eine der Kernfunktionen der Sparkassen App darstellt und dass die App für die Sparkasse einen der wichtigsten Berührungspunkte mit der Marke darstellt, wird die Wichtigkeit eines solchen Prozesses deutlich. Dabei ist die Funktion nur ein Feature, welches viele Applikationen und Marken bieten. Das Angebot einer Funktion wird dabei vom Nutzer für selbstverständlich angesehen – die Differenzierung zwischen einzelnen Dienstleistern entsteht jedoch in der Ausgestaltung dieses Features. Dabei spielt zum einen die Aufwandslosigkeit eine wichtige Rolle, je nach Produkt kann aber auch ein spielerischer Umgang eine positive Nutzererfahrung prägen.

Auch die Sparkasse hat diese Potenziale erkannt. Sie bietet zum einen mit Kwitt eine eigene Funktion in ihrer App als auch eine eigene Applikation namens Yomo. Beide haben neben anderen Features auch das Ziel, den Überweisungsprozess zu vereinfachen – insgesamt sind diese Versuche jedoch noch als nicht ausgereift anzusehen, werden sie doch hauptsächlich als Kopien von Paypal und N26 wahrge.ommen.

4.3.2 Design Patterns und Richtlinien

Um einen Nutzer auf möglichst aufwandslose Weise zum Ziel zu leiten, helfen dem Gestalter verschiedene Richtlinien, welche Ratschläge für die Gestaltung von Nutzeroberflächen und wiederkehrende Problemstellungen bereit halten. Man kann dabei grundsätzlich zwischen zwei Arten von Richtlinien unterscheiden:

1. Plattformbasierte Interface Guidelines - iOS: Human Interface Guidelines (HIG). - Android: User Interface Guidelines. - Design Systeme, die auf konsistente Gestaltung abzielen (z. B. Google Material).

2. Plattformunabhängige Interaction Design Patterns - bieten Lösungen für wiederkehrende Probleme, sowohl strukturell, gestalterisch als auch prozessorientiert - gängige Gesten auf interaktiven Touchoberflächen - typischer Aufbau einer Website, auf dem z. B. Templates beruhen (Wordpress, Squarespace)

Richtlinien und ihr Wert

Im Allgemeinen haben alle Richtlinien gemein, dass sie versuchen, eine standardisierte Lösungsgrundlage für wiederkehrende Gestaltungsprobleme zu schaffen. Richtlinien bieten damit erprobte Konzepte und basieren auf den Gewohnheitsmustern der Nutzer; sei es hinsichtlich visueller Gestaltung, der Anordnung von Elementen oder in Bezug auf die Informationsarchitektur. Neben der einfachen Reproduzierbarkeit von Lösungen und dem damit verbundenen Sparen von Zeit, zielen sie darauf ab, eine intuitive Nutzung eine Produktes zu garantieren – wobei in diesem Falle intuitiv ist, was ein Nutzer bereits erlernt hat.

Als Gestalter von Nutzeroberflächen ist es deshalb wichtig, dass man mit den gängigen Richtlinien vertraut ist, denn sie bieten als erprobte Lösungen elementare Grundlagen für die Gestaltung von Nutzeroberflächen. Sämtliche Leitlinien bieten sowohl dem Nutzer als auch dem Gestalter Halt, indem sie bereits Erlerntes wiederholen und nicht ständig das Rad neu erfinden. Der Nutzer kann beim ersten Verwenden eines Produktes auf Erlerntes zurückgreifen, orientiert sich schnell und ist in der Lage, es unmittelbar zu nutzen – denn er sieht Gewohntes und fühlt sich zu Hause.3

1. Plattformbasierte Richtlinien

Plattformen wie Android oder iOS besitzen für die Entwicklung von Applikationen innerhalb ihres Ökosystems eigene Guidelines und Konventionen. Dabei basieren die Konventionen zum einen auf produktspezifischen Eigenheiten der Plattformen: während beispielsweise ein Zurück-Button in die Smartphones integriert ist, die Android bespielt, muss dieser in die Nutzeroberflächen der iPhone-Applikationen integriert werden. Apple rät dazu, den Button immer oben links zu platzieren und darüber hinaus nicht mit dem Wort ›Zurück‹ zu versehen, sondern vielmehr immer ausdrücklich das Ziel zu nennen, z. B. ›Übersicht‹.

Zum anderen müssen diese Richtlinien aber auch als eigene Corporate Design Guidelines der Plattformen gesehen werden, denn sie fußen darauf, auf eine gewisse visuelle Konsistenz abzuzielen, um die Wiedererkennbarkeit und damit die Marke des Betriebssystems an sich zu stärken. Entwickelt man also eine Applikation für eine spezielle Plattform kann die eigene Marke schnell mit der jeweiligen Marke der Plattform in Konflikt treten.

Es gilt die Richtlinien der Plattformen mit der eigenen Identität in Einklang zu bringen. Hierbei ist es nützlich, die Richtlinien der Betriebssysteme differenziert zu betrachten: Zum einen bestehen sie aus Empfehlungen bezüglich Interaktionsgesten oder der Platzierung von Objekten, zum anderen behandeln sie die visuelle Gestaltung dieser Objekte.

Visuelle Vorgaben Besonders rein visuelle Parameter wie Schrift oder Farbe bieten demnach auf einfachste Weise relativ großen Spielraum, um seine eigene Identität in eine Nutzeroberfläche zu integrieren ohne in einen großen Konflikt mit der Nutzbarkeit eines Interfaces zu geraten. Zwar halten die jeweiligen Plattformen auch für diese Elemente eigene Angebote zur Wahl von Schrift, Farbpalette und Iconset bereit, jedoch leisten diese in der Regeln keine grundlegenden Dienste zur Nutzbarkeit verglichen mit der Platzierung eines Elementes und dem Ort, an dem ein Nutzer eine Information oder den Auslöser einer speziellen Aktion zu finden gewohnt ist.

Vorgaben Interaktion Die Platzierung von Interaktionselementen oder spezielle Gesten bieten hingegen verglichen mit der visuellen Ausarbeitung weniger Spielraum. Sie können und sollten zwar hinterfragt werden, mit ihnen sollte allerdings nur mit guter Begründung gebrochen werden.

Eine Ausnahme stellt beispielsweise der Safari-Browser auf dem iPhone dar. Eine Actionbar (die aus Interaktionselementen bezüglich des aktuellen Screens besteht) kann ein iOS-Nutzer – statt wie gewohnt oben – unter Umständen auch an einer anderen Stelle wiederfinden: da Adresszeilen in Desktop-Browsern immer oben platziert sind, räumt Apple dafür in der iOS-Version des Safari-Browsers diesen Raum frei und setzt die Actionbar an den unteren Rand des Bildschirms. Hierbei überwog das Gewohnheitsmuster des Nutzers vom Desktop-Computer, sodass dieses die Richtlinien der Plattform schlug. An diesem Beispiel kann man vor allem erkennen, dass man allgemeinen Interaktionsmustern mehr Bedeutung zukommen lassen sollte als plattformspezifischen. Grundsätzlich sollte immer abgewogen werden, ob ein Bruch mit den Richtlinien der jeweiligen Plattform die Nutzbarkeit verbessert – im Zweifel sollte man auf die Gewohnheitsmuster der Nutzer zurückgreifen.

2. Allgemeine Interaktionsmuster

Während plattformbasierte Interface-Guidelines Teile eines Ökosystems darstellen, sind Interaction Design Patterns allgemeiner Natur. Sie beziehen sich vor allem auf die Strukturierung von Inhalten oder Interaktionsgesten. Folgende Muster sind z. B. für den Aufbau von Websites zum Standard geworden:

die Navigation einer Website befindet sich am oberen Rand auf mobilen Geräten findet man sie hingegen oft hinter einem Burger-Icon um einen Nutzer auf einer Website abzuholen, wird er von einem sogenannten Hero Image oder einem Slider begrüßt darunter findet er oft zwei-, drei- oder mehrspaltige Teaser, die ihm verschiedene inhaltliche Einstiege ermöglichen

Die folgende Beispiele fußen auf genau diesen Prinzipien, gleiches trifft auf einen Großteil von Webseiten zu. Auf diesen Mustern basieren auch gängige Templatesysteme wie man sie von z. B. Wordpress kennt. Sie verwerten Altbewährtes wieder und sind so als eine Art Standardisierung von Informationsstruktur und im Falle von Templates auch von Design zu sehen. Positiv formuliert bieten sie solide Lösungen, negativ formuliert wirken sie wiederkehrend und ­generisch.

Der Standardisierung gegenüber steht die Individualisierung der Marke. Identität und Charakterbildung besitzen von Natur aus den Anspruch, individuell zu sein und sich von anderen Absendern zu differenzieren. Es muss also eine Lösung gefunden werden, die die beiden Ansprüche von Marke und Nutzeroberfläche – Individualität und Nutzbarkeit – in Einklang zu bringen.

Balance aus Vertrautem und Überraschungen Um ein gutes Nutzererlebnis zu erzielen, sollte grundsätzlich bei der Gestaltung von Nutzeroberflächen immer ein gesundes Verhältnis aus Gewohntem und Überraschendem herrschen. Dabei kann man die Einhaltung von Mustern als Gewohnheitsteil betrachten, während der Markenteil für Überraschungen sorgen kann.

Gefahr & Potenzial eines Regelbruchs

Es ist wichtig, dass man Regeln und Muster nicht nur wegen des Anders-Seins bricht, sondern ausschließlich mit guter Begründung und Nutzen.

Das Smashingmagazine hielt bei der Neugestaltung der Webseite die oben genannten gängigen Muster nicht ein: Titel stehen unterhalb und rechts neben dem Artikelbeginn, stattdessen stehen Autor und sein großes Portrait über dem Artikel und dominieren das Gesamtbild. Das hat dramatische Auswirkungen hinsichtlich Inhalt, Orientierung und Nutzerführung: die Seite wirkt mehr wie ein Profil eines Autors als ein Artikel, die Raumaufteilung verwirrt in der Blick- führung des Nutzers.

Quartz und seine Tochter Quartzy brechen hingegen elegant mit den Regeln: auf der Startseite wird der Hauptartikel und dessen Hero­image gestalterisch abgewandelt und weitere Teaserelemente werden leicht nach oben verschoben. Es handelt sich also nur um minimale Verschiebungen der Inhaltsbereiche und Anpassungen des Seiten­kopfs – Diese Veränderung im Detail macht jedoch die Seite maßgeblich aus, gibt den beiden Absendern einen wiedererkennbaren Charakter und stiftet Identität, womit auch eine außergewöhnliche Nutzererfahrung ermöglicht wird.

Nachteile

Der erfolgreiche Einsatz von Design Patterns kann dazu verleiten, altbewährte Lösungen als Garant für gutes Design anzusehen, sodass Designer und Entwickler dazu neigen, »möglichst viele bekannte Muster zu verwenden und dabei übersehen, dass in ihrem Fall vielleicht eine elegantere Lösung ohne den Einsatz von Mustern möglich wäre. Entwurfsmuster garantieren nicht, dass der Entwurf gut ist. Insofern ist die Anwendung zu vieler oder ungeeigneter Entwurfsmuster ein Antimuster.« 14 Orientiert man sich also zu stark an standardisierten Mustern, kann dies zur Folge haben, dass bessere Lösungen verkannt werden oder ein Produkt schlicht als langweilig betrachtet wird.

Beispiel Coca Cola

Betrachtet man beispielsweise die Corporate Website von Coca Cola, unterscheidet sie sich strukturell und auch in der Gestaltung kaum von gängigen Website-Templates: Hero-Slider, darunter diverse ein-, zwei- und dreispaltige Teaser im Wechsel und so weiter. Die Website ist an sich eine solide Seite, sie kommuniziert Inhalte angemessen, im Sinne eines Interfaces funktioniert sie so wie sie es soll, im Sinne der Marke sendet sie durch die Farbe Rot und die Bildwelt eindeutige Sig­nale als Absender – im Sinne einer außergewöhnlichen Begegnung mit ihr lässt sie jedoch in Struktur und Gestaltung an Individualität vermissen.

Am Beispiel der Website von Coca Cola lassen sich zwei wichtige Dinge beobachten.

1. Mithilfe einfacher Mittel lässt sich der Absender einer Marke in bestehende Design Muster integrieren kann. Ein Nutzer wird den Absender der Seite zweifelsfrei aufgrund der Kombination aus Farbe und Bildwelt als Coca Cola identifizieren können. Wir stellen fest, dass ein gutes, digitales Corporate Design genau dazu in der Lage sein muss: sich mühelos in gängige Strukturen zu integrieren.
2. Die Website arbeitet strukturell ausschließlich mit gängigen Mustern; vermutlich hätte man sie genau so auch mithilfe eines Template-Systems erstellen können – sie ist gewöhnlich. Im Sinne eines außergewöhnlichen Nutzererfahrung und damit Begegnung mit der Marke Coca Cola bietet die Website jedoch wenig Potenzial, im Kopf der Menschen hängenzubleiben. Im Falle von Coca Cola ist dies wohl auch vollkommen ausreichend, denn die Website soll hauptsächlich Inhalte kommunizieren, ist nicht zentraler Berührungspunkt und formt daher auch nicht die Marke.

Dieser Anspruch muss also sicherlich nicht bei der Gestaltung jeder Benutzeroberfläche oberste Priorität besitzen. Man muss sich allerdings immer wieder im Klaren sein, dass es schwierig ist, ein Erlebnis zu kreieren, welches aus der Masse heraussticht, wenn man sich ausschließlich an solchen Mustern orientiert.

Schlussfolgernd kann man festhalten, dass es eine Art Gratwanderung ist, welches Verhältnis aus Vertrautem und Überraschendem der Nutzeroberfläche und dem Markenerlebnis angemessen ist. Dazu ist es wichtig, dass man vor allem seine Zielgruppe kennt und weiß, was man ihr zumuten kann. Man sollte sich außerdem vergegenwärtigen, was zur Identität der Marke passt: zu einem designaffinen, coolen Start-Up wie Spotify passt eher etwas Außergewöhnliches als zu einem Traditionsunternehmen wie Birkenstock. Und zu guter letzt muss die Art der Gestaltung vor allem dem zu kommunizierenden Inhalt angemessen sein.

Auswirkungen

Man kann vermuten, dass in Richtlinien und Gewohnheitsmustern eine große Ursache liegt, dass viele Nutzeroberflächen und Internetseiten so an Charakter und Eigenständigkeit vermissen lassen. »Zurecht« könnte man auf der einen Seite sagen, denn man möchte weder Nutzbarkeit noch die einfache Informationsvermittlung negativ beeinflussen. Das ist richtig; in einer Vielzahl der Fälle möchte man auch nicht mehr erreichen. Auf der anderen Seite muss man aber auch feststellen, dass vielen Websiten einfach der Mut fehlt, seinen Nutzern etwas Ungewöhnliches zuzutrauen und somit auch die Chance nicht nutzen, als Absender hängenzubleiben – denn das ist das Ziel, einer prägnanten Marke. Für viele Absender besteht immenses Potenzial, eine durch Überraschung und Vertrautem geprägte, positive Begegnung zu gestalten.

Sowohl Plattform-Richtlinien als auch Interaction-Patterns schränken darüber hinaus rein gestalterisch ein, denn im Zweifel schlagen sie die visuellen Regeln einer Marke. Mit diesen Einschränkungen muss sich eine Marke arrangieren und entsprechend flexibel zeigen.

4.3.3 Kontext schlägt Konsistenz

Jedes Angebot ist spezialisiert

Die Gestaltung digitaler Angebote besitzt von Produkt zu Produkt – ja sogar teilweise von Screen zu Screen innerhalb einer Nutzeroberfläche – wechselnde nutzer- und kontextbezogene Anforderungen.

Die Zeit hat die Diversität seiner Zielgruppe erkannt und das damit verbundene Verlangen nach vielfältigem Inhalt ausgemacht. Anstatt die Inhalte unter nur einer Marke zu publizieren, werden sie in verschiedenen Formaten aufbereitet. Was sich inhaltlich unterscheidet, soll sich auch äußerlich ausdrücken. Während z. B. Zeit Online informativ und substanziell berichtet, erzählt Zeit Campus seine Geschichten emotional und überraschend – das schlägt sich auch in dem jeweiligen Erscheinungsbild nieder und gewährt entsprechenden Gestaltungsspielraum. Gleichzeitig besitzt das gesamte Medienspektrum gewisse Markensignaturen als Konstanten, die die unterschiedlichen Angebote trotzdem als Zeit identifizierbar machen und Vertrauen vermitteln. Gestaltungsraster, reduzierte Formensprache und Typografie bilden den Kern der Marke, mit dem flexibel gearbeitet und der gegebenenfalls um weitere Elemente ergänzt werden kann. Zeit Online verfolgt somit eine Mischung aus Dachmarkenstrategie und Mehrmarkenstratgie: die Marken unterscheiden sich teils deutlich voneinander, besitzen aber trotzdem verbindende Glieder. Ze.tt ist hingegen ein Sonderfall im Medienspektrum der Zeit: die Plattform soll ein deutlich jüngeres Publikum ansprechen und ist deshalb visuell abgegrenzt vom Rest der Familie. Ähnliche Anforderungen nach Flexibilität und Anpassbarkeit der Marke lassen sich in einer Vielzahl von digitalen Angeboten wiederfinden. Das News Portal Quartz besitzt eine jüngere Tochter Quartzy, Uber führt neben der Hauptapplikation auch UberX, UberBlack und UberTaxi. Auch die zahlreichen Apps der Sparkasse dürften in dem ein oder anderen Anwendungsfall ein etwas variiertes Erscheinungsbild verdienen, um sich der gewünschten Zielgruppe angemessen zu präsentieren.

Im Analogen finden wir eine ähnliche Handhabung bei der Kommunikation verschiedener Marken. Die Produkte von Nivea unterscheiden sich zum einen von Produkt zu Produkt, zum anderen aber auch nach Produktsparte: die Bodylotionen sind miteinander verwandt und auch die Men-Sparte besitzt eine eigene Formensprache. Sie unterscheiden sich teilweise recht deutlich vom Rest des Angebots – trotzdem gelingt es dem Erscheinungsbild mithilfe von simplen Maßnahmen einheitlich wahrgenommen zu werden.

Ebenso weist der Markenauftritt von Volkswagen ähnliche flexible Eigenschaften auf: »Während Volkswagen in Deutschland eher als Familienmarke wahrgenommen wird, zeigt der ›freche Europäer‹ in den usa seine unangepasste und aggressivere Seite« kann man im Fontblog dazu lese.5 Der Auftritt des Unternehmens passt sich also auch unterschiedlichen Anforderungen an – nur sind sie in diesem Fall kulturell und marktbedingt.

Die Anforderung nach adaptierbaren Erscheinungsbildern ist also keine neue digitale Herausforderung. Durch die starke Fokussierung auf Nutzer und Verwendungskontext im Digitalen kann man jedoch sagen, dass sich diese Herausforderung auf das Kleine – auf beinahe jedes Produkt – verlagert hat, sodass Marken, die digitale Angebote besitzen, häufiger in der Lage sein müssen, sich wandelbar und gleichzeitig doch konsistent zu präsentieren. Auch BMW vollzog zuletzt ein Rebranding, unter anderem mit dem Ziel, »ein adaptierbares Markenerlebnis zu kreieren, welches mit mehr Menschen in vielen vertrauten Weisen kommunizieren kann«.6 Dies drückt sich vor allem in einem freieren Umgang mit Farbe aus, behält jedoch das für bmw typische Rasterprinzip bei.

Nutzbarkeit schlägt Konsistenz

Man kann festhalten, dass ein zeitgemäßes Erscheinungsbild ein gewisses Maß an Flexibilität und Gestaltungsspielraum gewähren sollte, um sich verschiedener Kontexte und Anforderungen adäquat anzupassen zu können.

Eine Marke darf nicht so starr definiert sein, dass sie gängige Richtlinien und Nutzungsmuster beeinflusst oder die Ausgestaltung eines Services einengt. Sie sollte vielmehr dazu in der Lage sein, sich in diese Richtlinien nahtlos zu integrieren. Denn nicht die Marke, sondern Nutzer und Nutzbarkeit stehen im Interface Design immer im Vordergrund. Wo bereits Konventionen und Gewohnheiten die Ausgestaltung lenken und somit (mit gutem Grund) einschränken, sollten also weitere Beschränkungen durch z.B. ausgemessene Abstände und Größen im Corporate Design unbedingt vermieden werden.

Starre Regelwerke, wie man es bisher von Corporate Design Manuals kannte, zielen auf höchste visuelle Konsistenz ab. Totale Konsistenz – wenn auch immer noch wünschenswert – kann jedoch nicht mehr der einzige Hauptantrieb einer digitalen Marke sein, denn unterschiedliche Kontexte, Nutzungsszenarien und ein gutes Nutzererlebnis schlagen im Zweifel immer visuelle Konsistenz.

Stark vereinfacht gesagt: Was nützt eine Corporate Design konforme Platzierung des Logos in der linken oberen Ecke, wenn iPhone Nutzer dort immer den ›Zurück‹-Button tätigen möchten? Solche Richtlinien beschränken nicht nur die Gestaltung des Services, sondern – viel schlimmer – können eine schlechte Nutzererfahrung verursachen, welche ein Nutzer negativ mit der Marke assoziieren könnte.7

Damit eine Marke in der Lage ist, diese Anforderungen zu unterstützen, muss sie sich von starren, dogmatischen visuellen Richtlinien, wie es in bisherigen Manuals üblich war, lösen. Gleichzeitig darf eine Marke nicht verwässern und muss wiedererkennbar bleiben.

5 Markensignaturen

5.1 Logo

In analogen Medien – vor allem in Werbung und Außendarstellung – spielt das Logo eine zentrale Rolle, da es als eigenständiges Zeichen die Marke repräsentiert. In manchen interaktiven Medien ist es dagegen häufig zum App Icon verkommen, in der Applikation an sich kommt es häufig nur auf dem Startbildschirm zum Einsatz bzw. findet darin oft auch gar keinen Platz mehr, insbesondere auf kleinen Nutzeroberflächen wie einer SmartWatch. Auf Webseiten kann es zwar fixiert platziert werden und besitzt damit die Möglichkeit, immer im Sichtfeld des Nutzers zu sein; falls diese Option jedoch nicht genutzt wird, ist es zügig aus dem Blick des Anwenders gescrollt. Vor allem gilt dies für responsive Webseiten, auf denen ein fixiertes Logo in kleineren, mobilen Größen wertvollen Platz einnehmen könnte. Da das Logo hier also seltener Verwendung findet, verliert es an Bedeutung als Markensignatur. Man könnte so weit gehen zu sagen, dass in Nutzeroberflächen nicht mehr das Logo als Kernmerkmal einer Marke verstanden werden sollte – die Marke sollte sich daher verstärkt auch in seinen anderen Komponenten deutlich wiederfinden und Haltung zeigen.

Eine Parallele zum Analogen, z. B. zur Broschur, kann hier aller­- dings gezogen werden: ist das Logo nur auf dem Titel platziert, müssen im Innenteil andere Markensignaturen eine Marke als Absender kennzeichen.

Der Wert des Logos Für das Logo bedeutet dies jedoch nicht, dass es für die Marke an Bedeutung verloren hat. Es besitzt vor allem seine Wichtigkeit in der Außendarstellung wie z. B. in der Werbung und als Repräsentant einer Marke. Verwendet ein Nutzer schließlich eine digitale Anwendung der Marke, ist es weder für ihn noch für die Marke unbedingt von Mehrwert, das Logo ständig im Blick zu haben – er weiß in der Regel, dass er entsprechende Applikation gerade verwendet. Parallelen könnte man zur Nutzung eines Autos ziehen: der Fahrer weiß in der Regel, das er z.B. in einem Mercedes sitzt, vor allem aber sollten ihm dies anderen Gestaltungskomponenten vermitteln, die er sehen oder auch fühlen kann.

Logozitate Betrachtet man die Eingangs analysierten Marken, so fällt auf, dass einige Unternehmen ihre Bild- oder Wortmarke in verschiedenen Markensignaturen ihres Erscheinungsbildes zitieren: Nivea nutzt sowohl die Kreisform als auch die Spitzen aus der Wortmarke in ihrer Markenschrift und lässt das Logo allgegenwärtig wirken. Auch die ­Sparkasse verwertet die Münze aus dem Logo, um Piktogramme zu individualisieren, erzählt dadurch sogar kleine Geschichten (›Investiere in ein Eigenheim‹) und stiftet somit auf simple Weise Identität. Eine andere Möglichkeit wäre außerdem gewesen, die abgerundeten Ecken der Sparbüchse als Formensprachen im Corporate Design zu zitieren. Auch Swisscom nutzt das Logo als zentrales Gestaltungsmotiv, es unterscheidet sich jedoch insbesondere in der Komplexität der Anwendung, sodass es schwieriger erscheint, im Digitalen Kontrolle darüber zu bewahren.

5.2 Fotografie und Bildwelt

Fotografie und Bildwelt einer Marke können in analogen Medien eine bedeutende Rolle spielen. Bilder emotionalisieren, stellen oft Eindeutiges dar und erzählen Geschichten. Sie sind vor allem in der Lage, unmittelbar zu wirken und sind daher in der Werbung von immenser Bedeutung. Die Darstellung der Bildwelt ist im Analogen durch Fotograf und Gestalter völlig kontrollier- und beeinflussbar.

In vielen digitalen Plattformen ist die Bildwelt dagegen nur eingeschränkt bis gar nicht zu kontrollieren. Man muss hier zwischen zwei Sorten von Bildern differenzieren: erstens kommen Bilder zum Einsatz, die von den Autoren von z. B. Websites oder Applikationen bestimmt werden, zweitens gibt es Bilder, die von den Nutzern selbst generiert werden.

Werfen wir einen Blick auf einige Beispiele. In den Angeboten von Zeit Online werden die Fotografien von Online-Redaktion oder Autor dem Artikel entsprechend gewählt, weshalb eine einheitliche Bildsprache fast unmöglich zu bestimmen ist – dafür ist die inhaltliche Varianz eines Newsportals zu umfangreich. Zwar legt die Zeit einen leichten Schwarz-Transparenz-Verlauf über den unteren Teil der Bilder, aber nicht mit dem Ziel, Bilder zu vereinheitlichen, sondern um in der Lage zu sein, Titel darauf zu platzieren und genügend Kontrast zu garantieren.

Vereinheitlichung und Konsistenz durch Effekte Einen ­ähnlichen Effekt nutzt die Sparkasse – jedoch um ihre Bildwelt zu individualisieren: ein leichter, radialer, roter Verlauf liegt auf den Fotografien. Der Verlauf wirkt wie ein Gegenlichtpunkt und vereinheitlicht die Bilder effektiv. Diese Technik funktioniert auch hervorragend in digitalen Anwendungen und kann durch cms oder css automatisch generiert werden, sodass die Bilder vorher nicht unbedingt durch eine Bildbearbeitung gehen müssen. Ähnliche vereinheitlichende Effekte können Farbanpassungen (Graustufen, Sepia, …), Bildformate oder auch Überlagerungen wie Gitter – siehe bullseye- magazine.eu – erzielen. Stehen Bilder im Fokus eines Erscheinungsbildes oder verwendet ein Nutzeroberfläche großflächige Fotografien, können solche Effekte aufgrund ihrer Präsenz durchaus identitätsstiftende Wirkung schaffen – und Charaktereigenschaften eines Motivs entwickeln.

Ebay arbeitet in der Werbung mit einer Bildwelt, die vor allem Menschen darstellt; auf der Plattform und in den Applikationen begegnen dem Nutzer jedoch hauptsächlich die Produktfotos der anderen Anbieter – und diese sind nicht immer von hoher Qualität. Hier kann es also einfach zu einer großen Differenz kommen. AirBnB sah sich mit ähnlichen Problemen konfrontiert, weshalb es heute seinen Nutzern einen kostenlosen Fotoservice anbietet, um sein Portal und dessen Inserate mit qualitativ hochwertigen Fotos zu bestücken. Das ist wahrscheinlich sehr kostspielig, im Falle von AirBnB wurde aber ein wichtiges Nutzerbedürfnis bedient, sodass die Maßnahme schließlich ein erfolgsentscheidender Faktor gewesen ist.1

5.3 Schrift und Typografie

Typografie und ihr Wert

Schrift spielt schon immer eine Rolle bei der Entwicklung von Corporate Design und Design Systemen. Lizenzsicherheit und finanzielle Aspekte sind oft ausschlaggebende Argumente für eine Marke, sich für eine eigene Hausschrift zu entscheiden. Die finanziellen Argumente dürften heute sogar noch schwerer ins Gewicht fallen, sind Webfont- und besonders App-Lizenzen doch deutlich teurer als eine einfache Desktopnutzung.

Die Vorteile von Schrift als Brandingelement an sich sind im Digitalen kaum verändert: sie funktioniert medienübergreifend, ist ohnehin allgegenwärtig, und kann recht mühelos auf sämtliche Kontaktpunkte einer Marke angewandt werden.2 Schrift und Typografie können als kleinster, gemeinsamer Nenner eines jeden visuellen Mediums betrachtet werden.

Im Digitalen

Als Träger der Information spielt Schrift insbesondere im Interface Design die zentrale Rolle. Während Farbe und andere Elemente durchaus austauschbar sind, funktionieren die wenigsten Nutzeroberflächen ohne Text. Schrift ist zudem das Bedienelement, mit dem ein Nutzer am häufigsten in Kontakt tritt.3 Durch den Bedeutungszuwachs von Digitalen Medien und Nutzeroberflächen in unserem Alltag haben sich somit auch die Vorteile von Schrift verstärkt.

Die Gestaltung von Text bietet daher Potenzial in zweierlei Hinsicht: zum einen, um unmittelbar die Funktionalität eines Produktes und damit auch die Nutzbarkeit zu optimieren, zum anderen, um ihm eine angemessene, ästhetische Form zu geben. Typografie verleiht dem Inhalt und dem Absender – der Marke – einen Charakter.

Schrift als Brandingelement

Wie Schrift wirkt Jan Hendrik Weber, Type Director bei Monotype, vergleicht die Schrift mit dem menschlichen Gesicht (engl. Typeface): formal gesehen haben alle sieben Milliarden Gesichter auf der Welt den gleichen Aufbau, sie unterscheiden sich jedoch signifikant im Detail und formen somit das individuelle Aussehen.4 Ähnlich verhält es sich mit dem Aussehen einer Schrift: sie ist ein – verglichen mit z. B. Farbe – komplexes Element, dessen Wirkung sich sehr im Detail formt. Diese Subtilität hat zur Folge, dass sie vom durchschnittlichen Nutzer (einem untrainiertem Auge) nur unterschwellig wahrgenommen wird.5

Ein entscheidender Unterschied zum Gesicht besteht jedoch darin, dass Menschen Schriften nicht so genau betrachten wie sie es mit einem Gesicht tun – und deshalb selten in der Lage sind, sie eindeutig zu beurteilen und zu reproduzieren. So besteht der große Nachteil darin, dass der Wert von Schrift aufgrund ihrer unterschwelligen Wirkung schwer messbar ist. Erik Spiekermann sagt bspw. in Bezug auf die Schrift der Deutschen Bahn, kein Laie wisse, dass alle Texte des Unternehmens aus einer Schriftfamilie stammen, auf Nachfrage könne der Laie dies jedoch durchaus erkennen.6 Ein Nutzer wird also sehr selten bewusst eine Marke mit einer bestimmten Schrift in Verbindung bringen können so wie er es z. B. mit einer bestimmten Farbe kann: ­Telekom Pink, Post Gelb.

Was Schrift für Identität leisten kann Einen Vorteil in der Subtilität sieht Stefan Hauser, Partner bei Hauser Lacour: »Oft weist [der Inhalt einer Marke] Widersprüche auf […]. Mit ihrer Subtilität ist Typografie ideal, um Widersprüche im Markenbild, wie etwa ›traditionell, aber modern‹, darzustellen und zugleich zusammenzuhalten«.7 Hier leistet die Metapher zum menschlichen Gesicht weiterhin ihren Dienst: auch ihm können verschiedene Ausdrücke gleichzeitig zugewiesen werden, wenn auch für den Betrachter schwer greifbar, warum dies so ist. Im Gegensatz zu dieser Komplexität, sagt Stefan Hauser weiter, seien andere Elemente eines Corporate Design, z. B. Fotografie, eher dafür geeignet sind, eindeutige Sachen zu kommunizieren.

Stefan Hauser deutet damit auch an, dass Schrift vor allem in der Lage ist, die Gesamtanmutung eines Erscheinungsbildes in eine bestimmte Richtung zu lenken und ihm ein zusätzliches Merkmal zu verleihen. Tauscht man beispielsweise in der Kommunikation von Mercedes die Titelschrift mit einer serifenlosen Schrift, wird deutlich, was sie für die Marke leistet: sie lenkt die Persönlichkeit entsprechend der Markenattribute in Richtung Klassik, Eleganz und Luxus.

Das Potenzial

»If an existing typeface does the job, there is no reason to make a new one.« Erik van Blockland

Auch wenn einige Unternehmen Corporate Schriften verwenden, schöpfen viele Marken nicht das Potenzial voll aus, sich wirklich eine eigene Schrift anfertigen zu lassen. Jochen Rädeker von Strichpunkt etwa spricht von »kleinen Stolpersteinen«, die in ein Design eingebaut werden sollten, um sich zu differenzieren und den einen Absender vom anderen unterscheidbar zu machen.

Neutrale Schriftarten Betrachtet man beispielsweise die Schriften von Sparkasse oder eBay, kann man sie zwar durchaus als gelungene, ästhetische und zeitgemäße Schriften bezeichnen. Sie lassen jedoch Eigenheiten und damit Wiedererkennung vermissen. Man könnte sogar so weit gehen zu sagen, die beiden Schriften seien so neutral gestaltet, dass es beim reinen Betrachten der Schrift schwerfällt, dem Absender dahinter eigene Charakteristika zuzuordnen. Stefan Hauser relativiert dies jedoch: »Je nach Inhalt und Zielsetzung können auch neutrale Fonts wunderbar funktionieren. Zum Beispiel, wenn sich eine Marke als cool positionieren will – wobei ›cool‹ für mich eine positive Form von ›neutral‹ ist.«9 Es kann also unter Umständen den Markenwerten angemessen erscheinen, eine neutrale Schriftart einzusetzen; dann verlangt die Gestaltung im Sinne der Differenzierung jedoch andere charakteristische Markensignaturen. Betrachtet man die App-Beispiele der vorherigen Doppelseite, wird deutlich, was eine neutrale Schrift dennoch in der Lage ist zu leisten: sie kann in einer bekannten Umgebung eine vertraute Atmosphäre erzeugen.

Eigenheiten Die YouTube Sans kann für (große) ›Stolpersteine‹ als exemplarisches Beispiel dienen: wenn auch handwerklich nicht sauber umgesetzt und bei Schriftgestaltern heiß diskutiert, zeigt die Schrift von YouTube deutliche Eigenheiten auf, die unverkennbar sind. Ob diese nicht etwas über das Ziel hinausschießen und ob sie die Werte und den Charakter der Marke widerspiegeln, bleibt diskussionswürdig; Identität stiftet sie sicherlich. Erik Spiekermann beschreibt die Gestaltung von Schriften für Marken dann auch als »schmalen Grat zwischen gewohnt und gewagt« 10, spielt Schrift doch eine in erster Linie funktionale Rolle, über die ein Nutzer nicht zu oft stolpern möchte. Seine Schriftfamile für die Deutsche Bahn (zusammen mit Christian Schwartz, Tal Lemming) kann so auch als gutes Beispiel für subtiles Branding durch Schrift angeführt werden, die neben einer konsequenten Farbgebung zentrales Element der Marke ist. Schaut man sich die db Headline genauer an, sind es neben den ungewöhnlichen Zahlen wohl die Kombination aus Kontrast und kurvigen Strichenden, die die Eigenheiten der Schrift ausmachen – wahrlich keine Charakteristika, an die sich ein durchschnittlicher Bahn-Kunde später erinnern wird – und doch prägt sie das Erscheinungsbild der Bahn. Genauso subtil wie Schrift wirkt, ist eben auch ihre Gestaltung. Als Schriftentwerfer benötige man somit auch grundlegendes Verständnis von Marken, Corporate Design und Differenzierung, so Erik Spiekermann weiter.

Die Gestaltung einer Schrift für eine Identität muss also über die reine Ästhetik hinausgehen; idealerweise steckt hinter ihr eine Idee, sodass Anmutung und Kurven aus gut definierten Markenwerten geformt und abgeleitet werden. Gleichzeitig soll sie aber auch ein Differenzierungsmerkmal darstellen.

Schrift als Gestaltungsmotiv

Weiter ist es davon abhängig, wie ein Erscheinungsbild aufgebaut ist und den Umgang mit Schrift regelt: steht dieser mit großflächiger Typografie im Fokus, kann auch die Schriftart an sich einen wiedererkennbaren Nutzen leisten – es muss sich jedoch um eine außergewöhnliche Schrift handeln, damit ein untrainiertes Auge diese wieder erkennen kann. Ist die Typografie groß und ungewöhnlich, grenzt sie manchmal daran, als Gestaltungsmotiv zu fungieren. Die Volksbühne machte eine Zeit lang beispielsweise von gebrochenen Schriften Gebrauch, die neben verschiedener Neonfarben als zentrales Gestaltungselement fungierten. Die Identität der Schmuckmanufaktur Schmuque spielt zum Teil immens mit einer Abwandlung der Schrift Boutique: je nach Anwendung ist diese sogar kaum noch lesbar: was die Identität dominiert, sind neben der Schrift vor allem die daraus resultierenden Linien.

Aus dem Interface

Schrift spielt in Interfaces in erster Linie eine funktionale Rolle. Bevor man sich mit formal ästhetischen Aspekten auseinandersetzen kann, sollte vorher analysiert werden, für welche typografischen Anwendungsbereiche sie optimiert sein soll, denn Schriften für lange Fließtexte besitzen andere Anforderungen als solche für Poster.

Zwar steht und fällt ein Erscheiungsbild nicht mit den folgenden vermeintlichen Details, sie leisten jedoch manchmal einen entscheidenden Beitrag zu guter Nutzbarkeit und hoher Qualität.

Aus der Historie

Während gedruckter Text über Jahrhunderte verfeinert wurde, ist digitale Typografie noch recht jung. Aus der Historie können Interfacedesigner lernen, dass ein und dieselbe Schrift für verschiedene Textgrößen optimiert wird, um Lesbarkeit zu optimieren. Um so kleiner dabei der Text, um so offener und breiter sollten Buchstabenformen sein, das Gewicht sollte etwas kräftiger gewählt und der Buchstabenabstand minimal breiter sein. Separat geschnittene Schriftgrößen im Bleisatz waren früher gängige Praxis und korrigierten auch rein optische Unterschiede, die aufgrund des Größenunterschieds auftreten.11 Apple machte sich dieses Wissen 2014 mit Einführung der San Francisco in iOS 9 wieder zunutze: Text über 20 px verwendet die sf Display, darunter liegende Schriftgrößen nutzen die sf Text, besonders kleiner Text auf einer AppleWatch ist in der sf Compact gesetzt. Dabei ist das besondere, dass Entwickler und Designer sich nicht selbst um die Auswahl der Schrift kümmern müssen – das System entscheidet es für sie automatisch.

» Good typography does not look nice to please type nerds. Primarily, well set type reads well. It captivates, leads along, and doesn’t let you escape: it creates continuity.« Oliver Reichenstein

Gerade in Extremfällen wie z. B. bei einem InCar Interface oder bei der Navigation auf SmartWatches, ist die Optimierung auf gute Lesbarkeit elementar. Die Anforderungen sind in etwa vergleichbar mit denen von Wegeleitsystemen: der Nutzer besitzt in der Regel nur wenige Millisekunden, um ein Wort oder eine Zahl zu erfassen; dabei machen die Offenheit von Formen (e, o, …) und klare Buchstabenunterscheidungen (i, I, l …) einen messbaren Unterschied. Auch bei der Gestaltung von gröber aufgelösten Bildschirmen ist die Verwendung von optimierten Schriftgraden ratsam.

Da jedoch nicht immer ein solcher Aufwand betrieben werden kann, kann es auch durchaus Sinn ergeben, zwei Schriften miteinander zu kombinieren oder sich einer ganzen Schriftfamilie (s. Deutsche Bahn) zu bedienen. Während dabei die eine Dienste für Wiedererkennbarkeit und Emotion leistet, optimiert die andere Lesbarkeit.

5.4 Farbe

Die Vorteile von Farbe für Erscheinungsbilder von Marken liegen auf der Hand: Farbe ist ein vergleichsweise simples Element, sie wirkt unmittelbar, wird von Menschen schnell verstanden und löst vielschichtige Emotionen aus. Farbe ist also ein einfaches Mittel, um einen Absender vom anderen zu unterscheiden. Aufgrund ihrer Einfachheit gehört Farbe damit wohl zu den stärksten und offensichtlichsten Signalen, die eine Marke senden kann. Sie stimuliert die menschlichen Sinne am unmittelbarsten und bleibt deshalb effektiv haften.

»Es heißt: Bilder sagen mehr als tausend Worte. Wenn man so will, ist eine Fläche mit einer Farbe bereits ein Bild, das unzählige Assoziationen erzeugt«12 schreibt Achim Schaffrinna auf seinem Blog Designtagebuch. Dem ist zuzustimmen, wobei man hier nochmal differenzieren kann: obwohl ein Bild auch eine hohe Emotionskraft besitzt, wirkt es doch oft für eine ganz bestimmte eindeutige Sache, da es in der Regel doch einen präzisen Sachverhalt darstellt: die Emotion beim Betrachter wird relativ präzise gelenkt. Eine Farbfläche ist im Vergleich zu Bildern dagegen wesentlich niederkomplexer und besitzt mehr Abstraktionskraft und wirkt dadurch emotional noch stärker – sowohl bewusst als auch unterbewusst.

Bedeutungszuweisungen von Farben

Aufgrund ihrer Einfachheit und der damit verbundenen Abstraktion löst Farbe Emotionen aus, die abhängig von Kulturkreis, Betrachtungskontext und Erfahrungswerten des Betrachters oft in gegensätzliche Richtungen interpretiert werden können.

Dabei spielen sowohl primitive Reize aus einem in Millionen von Jahren geformten evolutionären Instinkt ein große Rolle, aber auch Gelerntes aus dem individuellen Alltag. Menschen verbinden beispielsweise aufgrund ihrer Erfahrungen aus der Natur die Farbe Gelb mit der Sonne. Warnschilder sind in unserer Gesellschaft häufig auf gelbem Grund gedruckt – deshalb können Menschen je nach Kontext auch Gefahr assozieren. Braun gilt als ländlich, wird mit Erde und Wald assoziiert, im politischen Kontext ist die Farbe eng mit dem Nationalsozialismus in Deutschland verbunden. Am deutlichsten werden die gegensätzlichen Werte wohl anhand der Farbe Rot: sie steht für Liebe, aber auch für Aggression – und diese Interpretationen können wiederum von Kultur zu Kultur variieren. Man kann vor allem zwischen einfachen und abstrakteren Farbassoziationen unterscheiden: einerseits steht Blau für den Himmel, andererseits steht Blau auch für einen abstrakten Wert wie Vertrauen.

Bedeutung für eine Marke

Um von den Vorteilen vom Wert einer Farbe an sich zu profitieren, muss man sich als Marke also immer bewusst sein, in welchem Kontext man sich selbst bewegt, in welchem man ein Produkt positionieren möchte und wer die angesprochenen Zielgruppen sind. Mit Farbe kann man also durch gezielten Einsatz bewusste und unterbewusste Emotionen auslösen.

Eine davon unabhängige, entscheidende Rolle für ein Erscheinungsbild spielt Farbe jedoch als Differenzierungsmerkmal.

Farbe als Abgrenzung und Wiedererkennung

Aufgrund ihrer unmittelbaren Wirkung bleiben Farben auch einfacher im Bewusstsein der Menschen haften. Sie sind aufgrund ihrer Einfachheit das Erste, was eine Person mit einer Marke wieder verknüpfen kann. Dies gelingt um so besser, um so konsequenter der Einsatz ist. Achim Schaffrina bezeichnet diese konsequente Nutzung gar als »Werbe-Penetration«, die nötig erscheint, um die Farbe in den Köpfen der Menschen einzupflanzen.

Gute Beispiele hierfür stellen Coca Cola, Milka oder die Telekom dar (s. nächste Seite). Während Milka und Telekom für sich jeweils eine eindeutige Nischenfarbe finden konnten, gelang Coca Cola diese eindeutige Zuweisung dank einer jahrzehntelangen, kontinuierlichen, intensiven Nutzung der Farbe. Durch das Finden einer Farbnische besitzen Milka und die Telekom gegenüber Coca Cola den großen Vorteil, dass sie sehr eindeutig nur anhand ihrer jeweiligen Markenfarbe erkennbar sind. Um Coca Cola zu erkennen, braucht es noch ein weiteres Element seiner Markensignaturen. Ergänzt man beispielsweise eine rote Fläche mit dem bekannten weißen Coca Cola Band (s. Gestaltungsmotive S. xx), lässt sich der Absender der Marke eindeutig identifizieren. Dies bedeutet allerdings nicht, das Coca Cola ein schwaches Branding besitzt, vielmehr soll hiermit der große Wert einer einzelnen, eindeutigen Markenfarbe hervorgehoben werden.

Eine einzelne Farbe zu finden, die sich noch keine Marke zu Nutze gemacht hat, scheint heute jedoch fast unmöglich. Es bedarf einer Kombination aus mindestens zwei, wenn nicht gar mehreren Farben. Man sollte allerdings versuchen, so wenig Farben wie nötig zu verwenden, denn es scheint, als würde mit jeder zusätzlichen Farbe die Aufnahme und Reproduzierbarkeit komplexer.

Bei der Definition der Markenfarben spielt somit die Analyse der Mitbewerber eine elementare Rolle, um beurteilen zu können, ob man sich eindeutig durch Farbe abgrenzen kann. Dabei ist vor allem die Abgrenzung innerhalb einer Branche und zur direkten Konkurrenz wichtig.

Auch lohnt es sich, einen Blick auf weniger beliebte Farben und Farbkombinationen (DHL) zu werfen. Dass Milka seine Schokolade mit der Farbe Lila eindeutig positionieren und abgrenzen konnte, lag vermutlich ganz einfach daran, dass Lila eine eher unbeliebte Farbe ist und deshalb noch nicht für ein anderes Unternehmen im Einsatz war. Die Entscheidung, Lila als Identitätsfarbe zu wählen, kann also als gewagter Schritt verstanden werden – der sich aber eindeutig auszahlt.

Zusätzlich kann eine Differenzierung durch Gewichtung und Verteilung der Farbverhältnisse erreicht werden. Nebenstehendes Beispiel zeigt die Farbverteilung der Marken Langenscheidt, Ikea und fdp. Obwohl die drei Marken Gelb-Blau als Kombination gewählt haben, kann man aufgrund der unterschiedlichen Nutzung (und der Farbtöne) doch recht gut erkennen, welche Marke welche ist.

Signalwirkung von Farbe

Für die Auffälligkeit einer Marke ist außerdem die Signalkraft einer Farbe entscheidend. Signalfarben wie Rot und Gelb wirken wesentlich auffälliger auf das menschliche Auge. Dem gegenüber stehen neutralere Farben wie z. B. Blau.

Grundsätzlich kann man festhalten, dass gesättigte, knallige Farben mehr nach Aufmerksamkeit schreien als zurückgenommene Pastellfarben. Während erstere als penetrant wahrgenommen werden können, besteht bei letzteren die Gefahr, übersehen zu werden. Pastelltöne sind außerdem schwerer zu differenzieren und können daher vom menschlichen Gehirn auch nicht so eindeutig aufgenommen und wiedererkannt werden wie gesättigte Farben.13 Gesättigte Farben sind somit als eindeutige Identifikation einer Marke besser geeignet. Sie besitzen zudem den Vorteil, dass sie im bunten Alltag – z. B. im Stadtverkehr – mehr aus der Masse herausstechen.

Farbe in Nutzeroberflächen

Durch den Bedeutungszuwachs von digitalen Medien hat sich auch etwas hinsichtlich der Verwendung von Farbe verändert. Dies betrifft zum einen das darstellbare Farbspektrum, zum anderen, wie man in Nutzeroberflächen Farben anwendet.

Farbraum Gestaltet man ein Corporate Design, welches über sämtliche Plattformen farbkonsistent darstellbar sein soll, muss man insbesondere beachten, dass sich im Digitalen der zur Verfügung stehende Farbraum verändert hat. Der rgb-Farbraum ist dem Druck insgesamt überlegen, kann aber einige Neonfarben nicht darstellen und Veredelungen wie z. B. Gold nur simulieren. Betrachtet man nebenstehende Abbildung wird zudem deutlich, dass die Schnittmenge zwischen den Farbräumen insgesamt kleiner geworden ist.

Rot ist nicht gleich Rot Zusätzlich muss man berücksichtigen, dass beinahe jedes Display und auch Browser ein und denselben Farbcode unterschiedlich darstellt. Zwar gibt es ›websichere‹ Farben, Monitorkalibrierung und andere Hilfsmittel – Was hilft es jedoch, wenn ich als Gestalter einen kalibrierten Monitor besitze, ich damit aber nur einen sehr geringen Teil der Nutzer darstelle?

Farbe ist funktional

Interaktivität und Hervorherbung Farbe stellt im Digitalen einen funktionalen Nutzen dar. Betrachten wir die digitalen Komponenten von z. B. Nivea oder Mercedes fällt auf, dass die Farbpalette jeweils um einen zusätzlichen Ton erweitert wird. Die Ursache liegt darin, dass Interaktivität und Call-To-Actions eindeutig gekennzeichnet werden müssen. Wenn im Erscheinungsbild von Nivea alles Blau ist, kann Blau die Leistung also nicht mehr erbringen, sodass ein Orange als Komplementärfarbe für Hervorhebungen und Interaktivität eingesetzt wird.

Farbaufteilung und -verhältnis

Darüber hinaus leistet Farbe einen Dienst für die Nutzerführung, sie kann komplexe Inhalte strukturieren und schärft die Navigation.

Eine eindeutige Aufteilung der Farbverhältnisse scheint im Digitalen schwerer zu handhaben. Aufgrund von z. B. dynamischer Inhalte und durch das ständige Verändern des sichtbaren Bereichs durch Scrollen variiert auch die Farbaufteilung. Eine Konstante stellt dabei die Navigation dar, die eindeutig vom inhaltlichen Bereich zu trennen ist. Was z. B. die Aufteilung der Farbkachel von Facebook ausmacht, ist hauptsächlich die Navigation. Ähnliches lässt sich auf vielen Websiten wie z. B. des Duden und der Sparkasse beobachten und findet sich ähnlich auch in Applikationen wieder. Wenige Absender trauen es sich, eine vollständige Nutzeroberfläche auf z. B. roten Grund zu setzen, nur um die Farbe im Sinne der Marke zu stärken. Zu Recht – würde weißer oder schwarzer Text auf rotem Untergrund ein angenehmes Leseerlebnis doch negativ beeinflussen.

5.5 Gestaltungsmotive

Als Gestaltungsmotiv werden in diesem Kapitel visuelle Elemente wie Formen, Linien, Muster und ähnliches verstanden, welche die Formensprache eines Erscheinungsbildes definieren.

Eine Form für sich kann ein starkes visuelles Identitätsmerkmal darstellen, welches in Kombination mit Farbe und Schrift die Wiedererkennbarkeit einer Marke auszeichnen kann. In der Wahrnehmungshierarchie des Menschen steht z.B. eine prominent eingesetzte Form vermutlich unter der Farbe, kann jedoch eine Identität mitprägen.

Vereinfacht gesagt handelt es sich z. B. um eine profane Gestaltungsentscheidung wie z. B.: ist meine Marke rund, gerade oder eckig? Verwende ich Flächen oder Linien?

Was eine Form leistet Semantisch gesehen kann eine Form die Komposition eines Formates bestimmten, Inhalte organisieren, verschiedene Bereiche voneinander abgrenzen und Hervorherbungen ermöglichen. Sie kann außerdem als Trägerfläche dienen, um Vorder- und Hintergrund voneinander zu trennen.14 Die Art der Verwendung und die daraus resultierende Prominenz des Gestaltungsmotiv bestimmt zum einen die Relevanz für ein Erscheinungsbild, zum anderen kann die Formensprache ein Mittel sein, um Konsistenz sowohl im großen Bild als auch im Detail zu erzeugen.

Formenfindung

Ein Motiv kann seinen Ursprung in verschiedenen Quellen haben. Man kann grundsätzlich zwischen Gegenständlichkeit und Assoziationsfeldern unterscheiden.

Unterschiedliche Thematiken lassen aus verschiedenen Gesichtspunkten Formassoziationen zu: geht es z. B. um Fußball, könnte man aus dem Ball einen Kreis ableiten, aus der Bemusterung klassischer Bälle ein 5-Eck, gleichzeitig aber auch aus den Linien des Spielfeldes ein Rechteck oder aus dem Fußballtor ein Rechteck in bestimmten Proportionen. Gleichzeitig zeichnet die Flugkurve eines Balles eine Parabel, die sich in der Gestaltung widerspiegeln könnte.

Manche Motive können so realitätsnah sein, dass ein Betrachter immer wieder den Gegenstand in der Form erkennt – die Silhouette der Coca Cola Flasche besitzt diese Qualität. Das Ribbon Band als zweites Gestaltungsmotiv von Coca Cola besitzt dagegen eine höheres Maß an Abstraktion, jedoch kann man noch recht eindeutig eine schwappende Flüssigkeit in ihm sehen.

Der Kreis im Erscheinungsbild von Nivea (s. S. xx) hat zwar seinen Ursprung in der runden Dose der Basiscreme von Nivea, der Kreis ist aber eine simple Grundform, sodass sich vieles in ihn hineininterpretieren ließe.

Gestaltungsmotive und Formen können darüber hinaus narrative Qualitäten besitzen: durch das Kombinieren eines Kreises mit Piktogrammen baut die Sparkasse eine Referenz zu ihrem Logo auf, in dem der Kreis eine Münze darstellt, die in eine Sparbüchse gesteckt wird. Platziert man nun die Münze über ein Haus, über schüttelnde Hände oder einen Schulranzen, erzählt dies verschiedene Geschichten: investiere in dein Haus, investiere in Partnerschaft, investiere in Bildung. Das Motiv vereint Gegenständlichkeit und Assoziation: ein Schulranzen ist in seiner Darstellung ein Rucksack, in seinem Wert steht er aber sinnbildlich für Bildung.

Ähnliches gilt für die Übersetzung von Markenwerten: ›Dynamisch‹ kann etwas schräg gestelltes sein, aber auch ein einfacher Pfeil. Das Ribbon Band von Coca Cola vermittelt neben seiner bildlichen Assoziation auch Dynamik, was in seiner Form begründet ist.

In der Nutzeroberfläche

Beim Betrachten der eingangs aufgeführten Beispiele in Bezug auf Formensprache, fallen zwei Dinge auf:

1. Verwendet ein Erscheinungsbild ein Motiv und/oder eine eindeutige Formensprache, intensiviert dies die Signalwirkung der Marke und verleiht dem Corporate Design mehr Wiedererkennungswert.
2. Die Diskrepanz in der Qualität von Gestaltungsmotiven fällt zwischen Digitalem und Analogen wohl am größten aus: Gestaltungsmotive, die im analogen Erscheinungsbild eine tragende Rolle spielen, finden in Nutzeroberflächen oft gar keine oder nur eine bedingte, gehemmte Anwendung.

Am auffälligsten ist diese Diskrepanz wohl bei Swisscom (s. S. xx). Die Wellenformen aus dem Logo stellen in Kombination mit den Farben Rot und Blau das zentrale Element in den analogen Medien dar. Sie sind der Protagonist der Marke, bestimmen die Formensprache maßgeblich und zitieren das Logo großformatig. Sie bieten Umsetzungsmöglichkeiten in hoher Varianz, sodass sie sich in alle Formate inte­grieren lassen.

Was im Analogen hervorragend anwendbar ist, funktioniert im Digitalen scheinbar überhaupt nicht. Die Wellenformen verschwinden fast gänzlich und mit ihnen auch die Strahlkraft der beiden Farben.

Das Erscheinungsbild von Nivea hingegen sticht positiv heraus, betrachtet man die Verwendung des Kreises. Worin liegt der Unterschied zwischen den Motiven und worin könnte die Ursache liegen, dass ein starkes Motiv im Digitalen keine Anwendung findet?

Grafisch betrachtet unterscheiden sich die beiden Gestaltungsmotive vor allem in ihrer Komplexität und der damit verbundenen Handhabung, was zu drei Schlussfolgerungen führt:

1. Analoge Formate sind statisch und können somit in ihrer Gestaltung präzise geplant werden. Die Gesamtkomposition wird von einem Gestalter bestimmt, welcher in der Lage ist, komplexe Formen zu kontrollieren. Im Digitalen sind weder Formatgrößen und Inhaltsmengen definiert, noch ist präzise vorhersehbar, wie diese sich durch Interaktivität verändern. Es muss eine regelbasierte, reproduzierbare Lösung gefunden werden, die in Abhängigkeit zu dynamischen Inhalten und Formaten steht. Die Kombination der beiden Wellenformen ist dafür zu komplex. Es ist sicherlich nicht unmöglich, sie in eine interaktive, dynamische Gestaltung zu integrieren, doch erfordert dies sowohl eine zeitintensive Auseinandersetzung mit den technischen Anforderungen als auch ein tieferes Verständnis für die Formen im Sinne der Marke.
2. Man könnte die Wellenformen außerdem als reines, visuelles Ornament betrachten – zumindest, wenn man auf Inhalt und Funktionalität fokussiert ist. Die wesentliche Funktion des Gestaltungsmotives von Swisscom besteht in einem der Marke dienenden: sie stiftet Identität. Besitzt man kein umfassendes Verständnis für eine Marke und ist ein Medium visuell, inhaltlich oder funktionell überladen, erscheint ein solches Motiv als erster Streichkandidat, um Nutzbarkeit zu optimieren.
3. Dem gegenüber stehen niederkomplexe, grafische Formen wie es der Kreis von Nivea ist. Der eindeutige Vorteil des Motivs liegt in seiner Anwendbarkeit: Nivea ist rund – mit dem Kreis lässt sich also eine Formensprache definieren. Die Form lässt sich vergleichsweise aufwandslos in funktionale Elemente integrieren, sodass die grafische Form vieler Bedienelemente wie Buttons, Tags oder Regler aus der Kreisform abgeleitet werden können. Zwar handelt es sich bei dieser Integration im Wesentlichen nur um Details, doch bilden diese in der Summe eine konsistente Formensprache, die das Erscheinungsbild von Nivea mit dominiert.

5.6 Interaktion und Animation

Interaktionen und Animationen sind eng miteinander verzahnte Parameter im Interfacedesign, welche deshalb gemeinsam betrachtet werden sollten. Die Integration von Animationen werden immer mehr zu einem wichtigen Bestandteil in der Gestaltung grafischer Nutzeroberflächen, gibt das Interface dem Nutzer durch Animationen doch visuelles Feedback auf dessen getätigte Interaktionen und erklärt die Veränderungen, welche durch diese in der Nutzeroberfläche entstanden sind.15

Gute Interaktionen zeichnen sich häufig dadurch aus, dass der Nutzer auf sie angemessenes, visuelles Feedback erhält, um zu verstehen, was er durch sie auslöst. Dieses Feedback sind in Nutzeroberflächen häufig animierte Übergänge, die die Veränderung in der Nutzeroberfläche erklären. Die Windows UX Design Guidelines schreiben Animationen somit auch immensen Wert zu und erklären sie als »effektives Mittel, um Informationen visuell zu vermitteln, welche ansonsten erklärenden Text benötigten oder welche vom Nutzer übersehen worden wären«.16

Als Beispiel dafür lässt sich die Löschfunktion in Apples iOS Version von Mail heranziehen. Hat ein Nutzer eine E-Mail gelesen, drückt er auf die Mülltonne in der Mitte der unteren Leiste und startet damit die Aktion: darauf hin ›fällt‹ das Lesefenster der E-Mail in den Mülleimer. Die Applikation erklärt dem Nutzer somit durch diese visuelle Rückmeldung, dass die E-Mail in den Papierkorb ›geworfen‹ wurde. Das textliche Äquivalent zu dieser animierten Rückmeldung wäre »In den Papierkorb verschoben« und beanspruchte ebenfalls seinen Platz in der Nutzeroberfläche. Visuelle Rückmeldungen sind effizienter und eleganter, da schneller wahrnehmbar.

Microinteractions

Dan Saffer nennt eine Aktion wie diese ›Microinteraction‹. Er beschreibt Microinteractions als »Produktmomente, die sich um einen einzelnen Anwendungsfall drehen und eine kleine Funktion ausführen, welche lediglich einen Zweck besitzt.«17 Wir sind demnach vor allem im Digitalen von Microinteractions allgegenwärtig umgeben. Sie existieren sowohl in als auch um ein Feature herum: das Lautlosschalten eines Telefons, das Öffnen einer Applikation, das Bewerten einer Applikation, das Bestätigen einer Statusnachricht, das Verändern der Lautstärke beim Musikhören.

Den Microinteractions gegenüber stehen Features, von welchen sie sich sowohl in Größe als auch Umfang unterscheiden. Features sind eher komplex, bedienen mehrere Use Cases, beanspruchen deshalb mehr Zeit und Aufmerksamkeit. Microinteractions sind dagegen niederkomplex, flüchtig und sollten nahezu aufwandslos ausführbar sein. Ein Musikplayer ist ein Feature, die Lautstärke ändern ist eine Microinteraction.18

Sie sind also die funktionalen, interaktiven Details eines Produktes, welche einerseits unspektakulär und vergesslich, aber andererseits auch angenehm und begeisternd sein können. Microinteractions bedienen Aktionen, von denen der Nutzer selbstverständlich erwartet, dass sie funktionieren. Sie werden deshalb häufig übersehen oder nicht wahrgenommen bis etwas schiefläuft – oder außergewöhnlich gut. Und hier sitzt das Potenzial, welches eine Marke zu ihrem Vorteil nutzen kann.

Gerade in umkämpften Märkten sind Microinteractions von besonderer Bedeutung: bieten mehrere Unternehmen das gleiche oder ein zumindest sehr ähnliches Produkt an, bieten sie Potenziale, ein Differenzierungsmerkmal auszumachen.

Das gilt im Digitalen wie im Analogen: der Musikplayer ist in seinem im mentalen Modell ein Hifi-Verstärker. Alle Verstärker leisten im Prinzip das Gleiche: sie spielen Musik. Vergleicht man nun zum Beispiel einzelne Bedienelemente miteinander, fällt jedoch z. B. auf: ein Lautstärkeregler ist nicht gleich ein Lautstärkeregler. Er kann sich in seiner Materialität unterscheiden: besteht er aus Plastik oder aus Metall? Er kann sich unpräzise und knarrend drehen, unauffällig und solide – oder er kann sich auch geschmeidig, subtil, präzise und fein aufgerastert drehen. Diese und weitere Faktoren können ein Gefühl von z. B. Wertigkeit vermitteln und somit in der Lage sein, ein Produkt von seiner Konkurrenz unterscheidbar zu machen.

Signature Interactions

Gelingt es einem Produkt, sich durch Microinteractions so stark zu differenzieren, dass sie stellvertretend für das Produkt selbst stehen, können sie eine Signature Interaction darstellen, welche Teil einer Markenidentität werden kann. Der Like-Button, das Daumen-Icon und auch das Wort ›Like‹ an sich sind so eng mit der Marke Facebook verknüpft, dass man diese Elemente auch mit der ihr assoziiert, selbst wenn sie uns in einem anderen Kontext begegnen. Der Swoosh-Sound, welcher nach Absenden einer E-Mail ertönt, ist eng mit Apple verknüpft. Der Klang der Stimme von »Sie haben Post« / »You’ve got mail« ertönt nur durch Lesen und auch Jahre nach erfolgreichen Zeiten von aol immer noch in den Köpfen.

Für Apple war eine Microinteraction nicht nur Differenzierungsmerkmal, sondern auch Erfolgsgarant: das ClickWheel des iPod ermöglichte eine solch aufwandslose Bedienung des MP3-Players, dass es zum Markenzeichen des Produkts wurde und den Erfolg des Gerätes maßgeblich mitprägte.

Denkt man an die Applikation Tinder, verbinden die meisten Menschen mit ihr als allererstes die Wischinteraktion – noch bevor sie an Farbe oder andere visuelle Markensignaturen denken.

Animationen

Die Bedeutung von Animationen nahm vor allem durch das Aufkommen von Smartphone und Touchscreen in den letzten Jahren enorm zu, sodass sie heute als essenzieller Teil des Interfacedesigns betrachtet werden.19

Auch in Realität erscheint und verschwindet nichts plötzlich. »Nutzeroberflächen fühlen sich natürlich an, wenn sie zügig und reaktionsschnell, unmittelbar und höchst angenehm reagieren«.20 Zwar sind Nutzer durch jahrelange Abstinenz von Animationen daran gewohnt, dass Pop-Ups aufspringen oder Listen unter einem Menüpunkt aus dem Nichts erscheinen. Dies bedeutet jedoch nicht, dass sie es erwarten würden oder dass es in vielen Situationen weniger verwirrend und holprig ist.21 Um eine flüßige Interaktion zwischen Mensch und Maschine zu ermöglichen, helfen dabei vor allem Animationen mit wohl überlegtem Timing.

Während im Analogen häufig Haptik und Materialität einen produktspezifischen Unterschied ausmachen können, sind es im Digitalen neben Klang insbesondere visuelle Animationen. Rückmeldungen auf Interaktionen sind in Nutzeroberflächen häufig animiert und somit in eine Funktion an sich integriert.

Animationen sind funktional

Animationen können der Nutzeroberfläche unterschiedliche, funktionale Nutzen bringen, welche sich vor allem in folgende Zwecke unterscheiden lassen:

• Animationen geben dem Nutzer Feedback auf Interaktionen
• Animationen erregen Aufmerksamkeit und lenken den Blick des Nutzers
• Animationen können zur Unterhaltung dienen
• Animationen können Dinge erfahrbar machen und erklären 22
• Animationen können den Nutzer beim Navigieren helfen
• Animationen fördern Kontinuität und Fluss 23

Feedback auf Interaktion Grundsätzlich kann verschiedenstes Feedback auf Interaktionen animiert werden und somit eine inhaltliche Veränderung kennzeichnen und erklären. Das kann das Löschen einer E-Mail sein, aber auch das einfache Herunterfahren einer Unternavigation bei Click auf einen Hauptnavigationspunkt, um dessen Zugehörigkeit zu verdeutlichen.

Aufmerksamtkeit lenken Das menschliche Auge reagiert höchst empfindlich auf Bewegung – insbesondere in einer statischen Umgebung. In Nutzeroberflächen wird deshalb häufig Bewegung eingesetzt, um die Aufmerksamkeit des Nutzers auf etwas zu lenken, was er ansonsten vielleicht übersehen würde. Animation ist zur Hervorhebung von Inhalten und Elementen noch geeigneter als Farbe – vor allem in einer oft farbenreichen Umgebung wie in Nutzeroberflächen.

Instagram machte den Nutzer bei Einführung einer neuen Funktion durch eine minimale Animation winziger Punkte aufmerksam, dass es sich bei dem Bild, was er gerade betrachtet, nicht um ein einzelnes, sondern um eine Kollektion handelt. Beim Scrollen durch den Feed werden zwei oder mehr Punkte (je nach Bildanzahl) mit einer einfachen Rechts-Links-Bewegung um wenige Pixel animiert. Wegen der minimalen Animationsdistanz nimmt der Nutzer die Bewegung so wahr, dass er den Hinweis gerade noch so bemerkt – dabei ist die Animation jedoch so zurückhaltend, dass sie bei ständiger Nutzung nicht weiter auffällt.

Unterhaltung Animationen können in manchen Situationen als Unterhaltung dienen oder spielerischen Charakter besitzen. Ein Ladebalken kann auf verschiedenste Art animiert werden und dabei einerseits informativen Nutzen über den Fortschritt des Ladevorgangs bieten und andererseits auch die Wartezeit verkürzen, indem er z. B. humorvoll animiert ist.

Facebook bietet seinen Nutzern im Messenger eine animierte Interaktion mit dem Like-Daumen: der Nutzer kann seine Zustimmung zeigen, indem er den Daumen in verschiedene Größen ›aufbläst‹. Dazu drückt man unterschiedlich lange auf den Like-Button – der Clou: es gibt eine Maximalgröße, bei welcher der Daumen ›platzt‹.

Erfahrbar machen und erklären Animationen befähigen außerdem, Dinge erfahrbar zu machen und zu erklären. Auf der Produktseite des Apple MacBook Pro kann der Betrachter durch Herunterscrollen der Seite die Touchbar des Laptops steuern und erhält somit einen Eindruck, wie diese funktioniert.24

Apple nutzt Animationen häufig, um seine Produktpräsentationen reichhaltiger und intensiver zu gestalten und den Betrachter zu beeindrucken. Beim Scrollen durch die verschiedenen Produktseiten begegnen dem Nutzer immer wieder Animationen, die er in der Regel durch Scrollen selbst steuern kann: Geräte drehen sich um die eigene Achse und bewegen sich mit einem Parallax-Effekt schwebend durch den Raum,25 bei anderen Produktfotos zoomt man vom Detail heraus auf das Foto, um die Größe des Gerätes zu veranschaulichen,26 wieder andere Animationen zerlegen das Gerät in seine Einzelteile.27 Das beeindruckt einerseits durch die Präsenz der Bewegung, andererseits erklärt es aber auch das Produktdesign der Geräte: der Betrachter kann sie sich z. B. von allen Seiten anschauen oder den technischen Aufbau ansehen.

Navigation Animationen und Übergänge können elementare Dienste in der Nutzerführung leisten. So werden Seitenübergänge in iOS-Applikation von rechts nach links animiert, sobald man in der Informationsarchitektur eine Ebene tiefer gelangt; drückt man zurück und geht wieder eine Ebene höher, animiert sich der Seitenübergang entsprechend von links nach rechts. Auch das Öffnen einer App auf dem iPhone wird durch einen großzügigen Zoom auf das App Icon animiert: der Nutzer ›fliegt‹ gefühlt in die Welt der Applikation hinein.

Animationen können auch das Wechseln inhaltlicher Sektionen kennzeichnen: ein Tutorial auf Tympanus.net veranschaulicht, wie unterschiedliche Inhaltsbereich miteinander animiert verknüpft werden können.28 Man kann in der Trennung der Inhalte eine deutliche Analogie zum Umblättern von Seiten in Büchern erkennen.

Animationen als Markensignatur

Es fällt auf, dass in den eingangs diskutierten Beispielen keine Marke Gebrauch von spezifischen Interaktionen oder Animationen macht, was zur Konsequenz hat, dass sämtliche Marken in ihren digitalen Medien statisch auftreten. Vergleicht man sie mit einer reichhaltig animierten Marke wie Apple und dessen Plattform iOS, fallen folgende Dinge auf:

Apple

Nutzt man die digitalen Produkte von Apple, scheint ein großer Teil der Objekte in den Nutzeroberflächen animiert: seien es Subnavigationen, Hero-Images, Titel oder Produktfotos. Dabei bedienen sämtliche Animationen in der Regel einen der zuvor genannten Zwecke. Das macht die Marke Apple lebhaft.

Apple nutzt davon abgesehen insgesamt relativ neutrale Markensignaturen: die Farben Weiß, Schwarz und Grau, die Plattformschrift San Francisco, eine sehr reduzierte Formensprache, es gibt keine herausstechenden Gestaltungsmotive – alles zielt darauf ab, die Produktfotos in den Vordergrund der Kommunikation zu rücken. Im Digitalen wird dieses Vokabular jedoch bedeutend durch Animationen ergänzt: während die anderen Markensignaturen neutral sind, ist Animation in der Lage, zum einen die Produkte noch mehr in den Fokus zu setzen und zum anderen, den neutralen Markensignaturen mehr Charakter zu verleihen.

iOS

Auch der Ruf der Marke iOS basiert zu einem großen Teil auf reichhaltigen Interaktionen und Animationen, welche zur Optimierung der Nutzbarkeit eingesetzt werden. Dem Betriebssystem sagen viele ihrer Nutzer nach, am intuitivsten bedienbar zu sein – ob dies wirklich so ist, steht zur Diskussion. Alleine aber, dass die Plattform in der Lage war, sich diesen Ruf zu erarbeiten, sagt schon einiges über das Produkt aus. Auch Dan Saffer schreibt den Grund der gefühlt schlechten Nutzbarkeit der ersten Android-Version den schwerfälligen und inkonsisenten Microinteractions zu – insbesondere im Vergleich zum Konkurrenten iOS.29 Beide Betriebssysteme bieten vom Prinzip die gleichen Features: sie unterscheiden sich jedoch in der Qualität der Microinteractions. Dan Saffer schreibt so auch: »Wenn die Microinteractions mangelhaft gestaltet sind, sind die Hauptfeatures – egal wie gut sie sind – begleitet von Frustration. Das Design eines Produktes ist nur so gut wie sein kleinster Teil.«30

Was die Marke iOS unter anderem so erfolgreich macht, sind die reichhaltige und konsistente Nutzung von Animationen. Der Wert dieser spielt auch der Dachmarke Apple zu und verhilft ihr zum Ruf einer nutzerzentrierten Marke.

Genauso wie z. B. Schriften und Farben können auch Animationen und Interaktionen konsistent gestaltet werden und Teil einer Identität sein, die einen bestimmten Charakter mitformen können. Wie ein Mensch sich bewegt, kann einiges über seinen Charakter oder seine Stimmung aussagen – gleiches gilt für Animationen in Nutzeroberflächen. Ob ein Ladebalken eine ruhige, gleichmäßig laufende Linie, ein regenbogenfarbener, sich drehender Kreis oder ein lustig hüpfender Ball ist, sagte etwas über den Absender aus und kann Werte vermitteln.

Die Designsprache Google Material benutzt als grundsätzliche Animation für Rückmeldungen auf Klicks oder Taps eine kreisförmig erscheinende, sich vergrößernde Fläche, die ihren Ursprung in der Position des Klicks besitzt und zügig wieder verblasst. Die Animation ist sehr subtil und doch ist sie durch konsequenten Einsatz in Lage, ein farbenreiches und ansonsten neutrales Erscheinungsbild zu verbinden und als Google kenntlich zu machen. Die Animation könnte man als Signature Animation bezeichnen.

Darüber hinaus sind insbesondere die erfahrbaren Qualitäten von Animationen, die großformatig und prominent eingesetzt werden, für ein Markenerlebnis nicht zu unterschätzen, da sie andere Markensignaturen lebhaft erscheinen lassen und daher eine intensive Wirkung auf den Betrachter besitzen.

Der Wert von Interaktionen und Animationen

»Die besten Produkte sind gut in zwei Sachen: Features und Details. Features locken den Nutzer zu einem Produkt; Details halten ihn dort. Microinteractions gehören zu diesen Details. Details sind Lieferstoffe für Emotionen«31 beschreibt Dan Saffer selbst das Potenzial, welches man in Interaktionen und Animationen sehen kann.

Zwar kann eine Interaktion in Kombination mit Animation für sich gesehen durchaus in der Lage sein, das große Bild eines Produktes und damit einer Marke zu bestimmen, sie wirken in der Regel jedoch im Kleinen und können andere Markensignaturen sinnvoll ergänzen und intensivieren. Ihre Stärken kommen vor allem in ihrer Summe und die daraus resultierende Konsistenz zur Geltung. Animationen machen ein Nutzererlebnis und damit auch ein Markenerlebnis zum einen lebhafter und erfahrbarer und dienen zum anderen einer befriedigenden Nutzerfreundlichkeit und spielen einer Identität somit auch indirekt zu.

Animationen sind – genau wie Haptik im Analogen – eng verknüpft mit der grafischen Gestaltung, sie prägen aber vor allem den ›Feel‹-Teil in ›Look and Feel‹.

6 Zwischenfazit

Wir fassen zusammen, worin die Ursachen für inkonsistente Erscheinungsbilder im Analogen und Digitalen liegen, wohin gehend sich daraus resultierend die Anforderungen eines zeitgemäßen Corporate Designs verändert haben und welche Bedeutung dabei den unterschiedlichen Markensignaturen im Digitalen zugerechnet werden kann. Aus diesen Erkenntnissen und Anforderungen wird daraufhin eine exemplarische Methode entwickelt und getestet.

Ursachen visueller Inkonsistenz

• Digitale Produkte werden in der Regel nicht von Corporate Designern, sondern von Gestaltern fachfremder Disziplinen (Interaction Design, Entwickler, …) entwickelt
• die Gestaltung und Nutzung von digitalen Produkten orientiert sich häufig an wiederkehrenden Mustern und Richtlinien, mit denen ein Erscheinungsbild in Konkurrenz stehen kann
• nicht alle Markensignaturen können deshalb im Analogen wie im Digitalen gleich angewendet werden
• Digitale Medien sind häufig werkzeugähnliche Produkte, die in erster Linie bedienbar sein müssen. Ist ein Gestaltungsmotiv im Sinne der Funktionalität ein reines Ornament, besteht die Gefahr, dass es zur Optimierung der Nutzbarkeit ignoriert wird
• wechselnde Kontexte, Zielgruppen und Nutzbarkeit können unter Umständen erfordern, dass ein digitales Produkt nicht konsistent zum Erscheinungsbild gestaltet werden muss

Schlussfolgerungen

Anforderungen

• ein Erscheinungsbild muss in der Lage sein, sich möglichst aufwandslos in bewährte Gestaltungsmuster und Templates integrieren zu lassen
• Regeln, Elemente und Komponenten eines Corporate Designs müssen so vermittelbar sein, dass alle beteiligten Instanzen es verstehen und möglichst aufwandslos damit arbeiten können
• das Erscheinungsbild einer Marke muss in der Lage sein, sich gemäß wechselnder Nutzungsszenarien und Kontexte adaptierbar und flexibel zu zeigen
• ein Corporate Design sollte als lebendes Projekt verstanden werden und ähnlich wie ein digitales Produkt ständig gepflegt und weiterentwickelt werden
• digitale Marken bieten in der Regel Dienstleistungen an; eine Marke sollte daher als Berührungspunkt zwischen Service und Nutzer verstanden werden. Dieser Service stellt oft den wichtigsten Berührungspunkt mit einer Marke und ist häufig eine visuelle Nutzer­oberfläche
• auch eine Marke könnte nutzerzentriert gestaltet werden. Wobei hier vor allem eine Rolle spielt, mit welcher Funktion, welchem Format der Nutzer am häufigsten in Berührung kommt. In dieser Funktion muss sich die Identität einer Marke in allen zur Verfügung stehenden Signaturen angemessen widerspiegeln

Markensignaturen

• Farbe und ihre Gewichtung ist nach wie vor das prägendste, visuelle Identitätsmerkmal einer Marke
• Schrift spielt nur bedingt eine identitätsstiftende Rolle. Sie dient selten als eindeutiges Erkennungsmerkmal, kann jedoch die Wirkung eines visuellen Erscheinungsbild bedeutend ergänzen und prägen
• vielmehr besitzen Gestaltungsmotive und Formen großes Potenzial, eine starke Signalwirkung für eine Identität zu senden – sie sollten gestärkt werden
• als gutes, anwendbares visuelles Gestaltungselement kann betrachtet werden, was sich möglichst aufwandslos und nahtlos in funktionale Elemente einer Nutzeroberfläche integrieren lässt
• neben Ästhetik prägen auch Interaktionen, Animationen und Tonalität die Nutzererfahrung und damit die Begegnung mit einer Marke

7 Lösungsansätze

Wie gestaltet man Marken, die digital und zukunftsfähig sind? Identitäten müssen einerseits konsistent sein, sich aber andererseits auch flexibel zeigen. Und so vermittelt werden können, dass sie von einer Vielzahl an beteiligten Instanzen und unter Umständen auch von ›Nicht-Gestaltern‹ verstanden und angewandt werden können.

Es gilt also, Lösungen zu finden, die sich sowohl mit der Definition eines Corporate Designs an sich beschäftigen als auch mit der Vermittlung von Markensignaturen und ihrer Gestaltungsregeln an Dritte.

Im Folgenden finden sich drei Ansätze, die sich mit den drei Fragestellung beschäftigen:

• Wie übermittelt man ein Erscheinungsbild an ›Nicht-Gestalter‹ und stellt eine konsistente Umsetzung sicher?

• Wie erreicht man Flexibilität und bleibt trotzdem konsistent?

• Wie kann ein Designprozess aussehen, welcher sichert, dass ein Erscheiungsbild zum einen digital funktioniert und zum anderen auf eine konsistente Ausarbeitung abzielt?

7.1 Lebende Komponentenbibliothek

Vor zum Teil ähnlichen Herausforderungen wie im Corporate Design steht man in der Softwareentwicklung: an einem digitalen Produkt arbeiten häufig eine Vielzahl an Menschen, teils ohne Gestaltungskenntnisse, das Produkt muss gepflegt werden und mit zunehmender Zeit wächst es an Funktionalität und Komponenten. Schließlich gibt es zwei große Ziele im Software Design: ein hohes Maß an visueller Konsistenz und die einfache Reproduktion wiederkehrender Elemente.1

Gleichzeitig muss man sich jedoch der Unterschiede zu den Ansprüchen eines Erscheiungsbildes bewusst sein: zwar ist eine einheitliche Gestaltung gemeinsames Ziel der beiden Disziplinen, der Unterschied besteht jedoch vor allem darin, dass sich ein gutes Corporate Design neben Einheitlichkeit auch durch Individualität und Wiedererkennbarkeit auszeichnet. Es lohnt sich, einen Blick auf gängige Lösungsansätze in dieser Branche zu werfen.

In der Softwaregestaltung ist es üblich, Design Systeme zu entwickeln, die nicht nur aus Formaten bestehen, sondern vor allem aus Komponenten, die in ihrer Kombination ein Format bilden. Ein Format könnte dabei, vereinfacht gesagt, eine Landing Page sein; Komponenten sind beispielsweise eine Hauptnavigation, eine Subnavigation, eine Bildergalerie, usw. Komponenten sind modular gestaltet und bilden in Kombination mit anderen Komponenten verschiedene Formate.

Diese Komponenten sind in einer Bibliothek geordnet, die jeder an dem Produkt beteiligten Person zu Verfügung stehen. Ein großer Vorteil besteht darin, dass bereits erstellte Komponenten einfach wieder verwendet oder einem anderen Nutzungskontext entsprechend abgewandelt werden können. Eine abgewandelte Komponente wird darauf hin in der Bibliothek eingepflegt, sodass die Bibliothek Ähnlichkeiten zu einem lebenden und wachsenden Dokument besitzt.

Die Form der Komponenten kann dabei verschieden sein: es kann sich z. B. um offene Design-Dateien oder um interaktive Module mit Code handeln.

AirBnB gibt auf seinem Design-Blog einen Einblick in die Organisationder Designkomponenten in Sketch.2 Die Agentur Edenspiekermann zeigt,3 wie eine programmierte Bibliothek samt Code für das Zeitungsportal vol.at aussieht.

Diese Idee ließe sich auch auf Corporate Design übertragen: die Komponentenbibliothek besteht dabei nicht nur aus digitalen Komponenten, sondern auch aus analogen. So beinhaltet sie Layout-Dateien für einerseits bereits erstellte Formate, andererseits auch sich daraus ergebenden Komponenten wie Informationsbox, Störer, Fußzeilen, Marginalspalten, usw.

Auch Audi nutzt für sein Corporate Design eine Komponentenbibliothek, welche als gutes Beispiel aufgeführt werden muss.4 Das besondere dabei ist vor allem, dass die Marke ganz im Sinne des Open Source Charakters des Web alle Inhalte öffentlich zugänglich macht. Zwar bietet die Bibliothek sämtliche Komponenten samt Code-Schnipsel für Elemente von Nutzeroberflächen; das Erstellen analoger Medien wird aber nach wie vor unter anderem über Schritt-für–Schritt–Erklärungen geregelt.

7.2 Atmende Marke

Die Anforderungsziele an ein starkes Corporate Design sind neben hoher Wiedererkennbarkeit häufig auch Wandlungsfähigkeit, um verschiedene Kontexte bedienen zu können.

In Kombination zu einer Komponentenbibliothek, die das Ziel besitzt, Konsistenz sicherzustellen, könnten Markensignaturen und Regeln als losere Parameter eine Marke ausfüllen. Das Erscheinungsbild wird sozusagen fließend – in unterschiedlichen Ausprägungen – definiert. Dabei gibt es Kernelemente, die die grundlegenden Pfeiler der Identität darstellen. Hierzu könnten z. B. Primärfarbe, Formensprache und Typografie gehören.

In der weiteren Ausprägung würde sich die Identität erweitern und dadurch mehr Gestaltungsspielraum ermöglichen. Hierzu gehören z. B. Sekundärfarben, erweiterte Typografie und ergänzende Gestaltungsmotive. Je nach Kontext und Anforderung kann der Gestalter sich bei Bedarf dieser erweiterten Parametern bedienen.

Wirft man einen Blick auf die Medien von Zeit Online, kann man ein ähnliches Prinzip vermuten: Um so jünger die Zielgruppe, um so freier und schriller ist das verwendete Vokabular und damit die Gestaltung.

Im Sinne eines klug gedachten Markenerlebnisses sind verschiedene Berührungspunkte einer Marke mühelos miteinander verbunden – wenn auch grafisch nicht Eins zu Eins einheitlich, aber mit möglichst umfangreichem gemeinsamen visuellem Vokabular.

Wichtigste Grundlage dieses Prinzips ist jedoch, dass sämtliche Medien einer Marke durch möglichst prägnante gemeinsame Markensignaturen verbunden sind. Es geht sozusagen um einen ausdrucksstarken, gemeinsamen Nenner, welcher die Marke ausmacht und zusammenhält. Zeit Online nutzt dazu eine reduzierte, klare Formensprache und vor allem Schrift.

7.3 Exemplarische Methode – von innen nach außen

» The details are not the details.
They make the design. « Charles Eames

Einen Begriff, welchem wir während der gesamten Untersuchung immer wieder begegneten, ist das ›Detail‹: konsistente Gestaltung drückt sich im Details aus, Gestaltungsmotive müssen in kleine Interface­elemente integrierbar sein, Microinteractions sind Details, Schriftwirkung findet im Detail und subtil statt. Den Details werden im Design im Allgemeinen schon immer große Bedeutung zugewiesen; auch eine von Dieter Rams »Zehn Thesen zum Design« misst ihnen elementare Bedeutung zu: Gutes Design ist konsequent bis ins letzte Details. Wenn den Details auch in der Entwicklung von Corporate Designs so viel Bedeutung zugewiesen werden kann, warum sich nicht im Gestaltungsprozess darauf konzentrieren und methodisch mit ihnen vorgehen? Der folgenden Methode liegen hauptsächlich drei ­Ideen zugrunde:

Ein ausdrucksstarkes Erscheinungsbild wird vor allem durch Konsistenz im Detail geprägt.

Digitale Produkte besitzen Kernfunktionen, die den wichtigsten Berührungspunkt mit einer Marke darstellen. In dieser Funktion muss eine Marke präsent sein und sich vor allem in den Markensignaturen widerspiegeln, aus denen diese Funktion besteht.

Eine klare Formensprache oder ein Gestaltungsmotiv kann eine digitale Identität stärken – aber nur, wenn es sich in funktionalen Elementen der Nutzeroberfläche integrieren lässt. Ziel ist, die Marke in möglich zahlreichen Komponenten widerzuspiegeln.

Die Methode folgt dabei diesen Prinzipien und setzt im Gestaltungsprozess im Detail an. Von einem kleinen Detail ausgehend, arbeitet man sich schrittweise durch verschiedene Elemente und generiert somit ein Set an modularen Komponenten.

Man gestaltet die Identität also zum einen funktional von innen nach außen, zum anderen aber auch visuell: von seinen Kernelementen im grafischen Detail ausgehend übertragen wir die Prinzipien aus dem Kleinen ins große Bild, von seiner wichtigsten Nutzeroberfläche nach Außen zu Werbemitteln. Darüber hinaus beginnt die Methode an der tiefsten Stelle in der Informationsarchitektur einer Anwendung und arbeitet sich systematisch von unten nach oben.

Dabei machen wir uns metaphorischer Begrifflichkeiten aus der Web­entwicklung zu Nutze – dem Prinzip des Atomic Design; erfunden von Brad Frost.6

Atomare Begrifflichkeiten und Prinzipien

Atomic Design ist ein Konzept zur Beschreibung modularer Komponenten von Design Systemen für das Web. Das Prinzip folgt dabei der Erkenntnis, dass die Qualität und Komplexität einzelner Seiten im Web vor allem durch das Definieren der einzelnen Komponenten und deren Addition beschrieben werden kann – und versucht daher den Begriff der ›Seite‹ zu vermeiden – man spricht also von Inhaltselementen und nicht von Formaten. Das Prinzip ließe sich auch in das Analoge übertragen: der Satz einer Broschürenseite hängt maßgeblich von dem Inhalt ab – wird er durch komplexe Informationsvisualisierungen gefüllt, ist er wesentlich aufwändiger als der Satz von einfachem Fließtext.

Atomic Design bedient sich dabei zur Veranschaulichung einer Allegorie aus der Chemie: Atome sind die kleinste Einheit eines jeden chemischen Elements und bilden damit die Bausteine, aus denen sämtliche Stoffe auf der Erde gemacht sind. Kombiniert man Atome miteinander, bilden sie ein Molekül, verbindet man wiederum diese miteinander, entstehen Organismen. Das wichtigste Prinzip im Atomic Design besteht darin, dass Elemente zusammenhängen: Ändert sich ein Atom, ändert sich der gesamte Organismus.

Während Brad Frost das Konzept vor allem als klare Beschreibung für wiederverwertbare Module begreift, die unabhängig vom Layout ­betrachtet werden sollen, setzen wir im Gestaltungsprozess im Kleinen an.

Das Konzept ist in der visuellen Gestaltung an sich nichts vollkommen Neues: manche Gestalter kennen einen ähnlichen Ansatz z. B. beim Gestalten von Büchern: Betrachtungsabstand und x-Höhe bestimmen die Schriftgröße, die Schriftgröße bestimmt die Zeilenbreite, die Zeilenbreite bestimmt den Zeilenabstand, Zeilenbreite und Zeilenabstand bestimmen das Raster, das Raster bestimmt den Satzspiegel und der Satzspiegel bestimmt letztendlich in Kombination mit den Seitenabständen das Buchformat. Ändert man nun die Schrift, hätte dies für die Gestaltung der Buches weitreichende Folgen.

Der Vorteil für ein Corporate Design liegt vor allem in der layoutunabhängigen Betrachtung einzelner Komponenten: ist jede Markensignatur und jeder Inhaltsblock in der Lage, Markensignale zu senden, summieren sich diese im großen Bild. Dabei besteht die Leistung eines Erscheinungsbildes nicht in gelayouteten Formaten, sondern in der Kreation einer Designatmosphäre.

Als Atome gelten dabei die Signaturen einer Marke an sich: Farbe, Form, Motiv, Schrift, Ziffern, usw.

Die Methode ist genau wie jeder andere Gestaltungsprozess von Iterationen geprägt. Nach dem Erstellen einer Komponente muss hinterfragt werden, ob diese wirklich die Werte der Marke widerspiegelt. Ist dies nicht so, müssen gefällte Designentscheidungen revidiert bzw. angepasst werden.

Der Prozess beginnt zwar in einem interaktiven, digitalen Element, soll aber mithilfe eines ständigen Wechselspiels auch analoge Komponenten miteinbeziehen, sodass medienübergreifende Konsistenz erreicht wird.

Ziel der Methode ist eine Sicherstellung der Anwendbarkeit eines Erscheinungsbildes im Digitalen, eine konsequente Ausarbeitung in möglichst vielen Details, um ein hohes Maß an Konsistenz zu erzielen und einen Absender und seinen Charakter in möglichst vielen Komponenten angemessen zu integrieren.

Arbeitsgrundlage

Marktanalyse und Markenwerte Dem visuellen Gestaltungsprozess sollte grundsätzlich eine gründliche Analyse der Marktsituation und eine detaillierte Definition der Markenattribute vorausgegangen sein, um ein Gefühl dafür zu besitzen, wo man eigentlich hin möchte.

Wireframes Mittels Wireframes sollte außerdem definiert werden, aus welchen Inhaltselementen das digitale Produkt besteht. Wireframes bilden sozusagen den Partner zur Gestaltungsmethode: sie beschäftigen sich mit Inhaltsblöcken, ohne auf visuelle Ausgestaltung zu achten, sodass definiert wird, was wirklich gebraucht wird. Mithilfe der Wireframes identifizieren wir, welche die Hauptfunktion des Produktes darstellt und wo unser Startpunkt liegt – genau dort, wo der Nutzer am Ende des Prozesses der Funktion angelangt ist. In der Regel ist dies an einem tiefen Punkt in der Informationsarchitektur. Diesen Wireframe zerlegen wir in seine Einzelteile. Von dort aus arbeiten wir uns Inhaltsblock für Inhaltsblock, Wireframe für Wireframe nach oben zum Starkbildschirm der Anwendung.

Liegt dem Corporate Design kein spezielles Produkt zugrunde, greift man auf typische, wiederkehrende Elemente zurück. Da ein Button als grundlegendes Aktionselement in den meisten Nutzeroberflächen eine Rolle spielt und drei Atome – Farbe, Motiv und Schrift – zu einem Molekül formt, eignet er sich besonders als Startpunkt des Designprozesses und der Untersuchung. Er ist außerdem ein Interaktionselement, erfordert damit verschiedene Stati und kann animiert werden, sodass in ihm auch ein viertes Atom zur Anwendung kommt.

Ablauf der Methode und exemplarische Untersuchung

Im folgenden soll untersucht werden, wie die Methode an sich angewandt werden kann und ob sie wirklich eine funktionierende, angemessene Methode darstellt.

Inhaltlicher Rahmen Um dies zu testen, müssen zuerst die Rahmenbedingungen abgesteckt werden. Wir entwickeln eine Markenidentität für eine Auktionsapplikation. Die Zielgruppe wurde vorwiegend als jüngere Anwender definiert, die als Digital Natives bezeichnet werden können. Sie sind mit dem Digitalen sehr vertraut und begeistern sich für attraktive, unkonventionelle Angebote. Die Marke soll dementsprechend als jung, unangepasst, vielfältig und designaffin auftreten.

Die Kernfunktion des Produktes ist das Bieten und Kaufen von Artikeln. Wir analysieren den ersten Wireframe, der die Kernfunktion darstellt und zerlegen ihn in seine Einzelteile. Für unser Corporate Design sind die Atome, mit denen wir beginnen, also:

• Zahlen
• Eingabe der Zahlen
• Call-To-Action Button bestehend aus:
• Text
• Farbe
• Form
• verschiedene Zustände

Zielsetzung Wir verdeutlichen uns noch einmal, worin unsere Vision besteht: Das Ziel ist es, als Marke bereits in seinen kleinsten Elementen als solche erkennbar zu sein. Wir sind auf der Suche nach Formen, die Typik ausdrücken und sich somit abgrenzen. Wir gehen davon aus, dass man das Detail immer in das große Bild übertragen kann. Diese Formen sind im Idealfall in vielen Umgebungen in unterschiedlichen Ausprägungen anwendbar und bieten somit Flexibilität.

Phase 1

Button (Molekül)

Um einen Button zu gestalten, müssen wir uns vergegenwärtigen, was ein Button eigentlich ist und was er leisten muss:

• Grafisch gesehen ist ein Button eine Kombination aus Fläche und Text.
• Funktional gesehen ist ein Button eine interaktive Fläche, sie muss als solche erkennbar sein und sich somit von nicht aktiven Flächen unterscheiden.
• Aktive Flächen besitzen in der Regel verschiedene Aggregat­zu­stände: aktiv, hover, on-click, gedrückt. Der Wechsel der verschiedenen Zustände kann animiert werden und somit dem Nutzer eine Rückmeldung auf Interaktionen geben.
• Abhängig vom Inhalt ist ein Button in Größe und Proportionen ­flexibel.
• Inhaltlich unterscheidet man zwischen Call-To-Action-Button (›Jetzt Bezahlen‹) und einfachen Links. Sie unterscheiden sich in der Wichtigkeit der Darstellung.

Wir beginnen mit einer zunächst separaten Betrachtung der Atome Farbe, Schrift und Form, um im folgenden Schritt das erste Molekül zu bilden.

Farbe (Atom)

Die verfügbaren Farben beschränken wir zum einen basierend auf dem Ausschlusskriterium, dass die Marke sich farblich insbesondere von seinen Mitbewerbern abheben muss. Zum anderen soll die Farbe unsere Markenattribute transportieren.

Wir entscheiden uns exemplarisch für ein intensives Mintgrün, welches frisch und jung wirkt und aus dem digitalen Farbraum kommt. In Druckprodukten würde es mit einer Sonderfarbe umgesetzt werden.

Schrift (Atom)

Bei der Wahl der Schrift achten wir allgemein darauf, dass sie charaktervoll ist. Das bedeutet, dass sie kleine Eigenheiten besitzt, die sie unterscheidbar macht. Diese Eigenheiten können um so deutlicher ausfallen, je exzentrischer eine Marke sein möchte. Wichtig ist außerdem, dass wir uns nicht sofort für eine Schrift entscheiden. Es ist eher ratsam, dass wir insbesondere zu Beginn eine möglichst große Auswahl an potenziell geeigneten Schriften zur Verfügung haben. Neben Typik, besitzt eine Markenschrift außerdem den Anspruch, die Markenattribute zu transportieren.

Ziffern Da wir Ziffern als Element unserer zentralen Funktion ausgemacht haben, schenken wir ihnen noch einmal gesonderte Aufmerksamkeit bei der Wahl der Schrift.

Form (Atom)

Im ersten Schritt zum Button betrachten wir auch die Form noch nicht als Button in seiner Funktionalität, sondern konzentrieren uns vielmehr auf die grafische Komponente, die später einen Teil unserer Identität darstellen könnte. Die gefundene Form muss später nicht zwingend auch einen Button darstellen. Vielmehr ist diese Formfindung ein Test, um sicherzustellen, dass sie genügend Flexibilität und Einfachheit besitzt, um sie in eine Formensprache zu übersetzen und in eine simple, funktionale Anwendung wie einen Button integrieren zu können. Wir beginnen daher zunächst ohne Textlabel, legen die Form aber in für einen Button typische Proportionen an und beginnen mit dem Formfindungsprozess.

Formfindung aus Assoziationsfeld und Markenwerten Unterschied­liche Thematiken lassen aus verschiedenen Gesichtspunkten Formassoziationen zu: geht es z.B. um Fußball, könnte man aus dem Ball einen Kreis ableiten, aus der Bemusterung klassischer Bälle ein 5-Eck, gleichzeitig aber auch aus den Linien des Spielfeldes ein Rechteck oder aus dem Fußballtor ein Rechteck in bestimmten Proportionen. Gleiches gilt für die Übersetzung von Werten: Dynamisch kann etwas schräg gestelltes sein, aber auch ein Pfeil. Diese Assoziationen versuchen wir in die Formgestaltung des Buttons einfließen zu lassen. Hierbei kommen grundlegende, elementare Gestaltgesetze zum Einsatz.

Varianz und Extreme Um die angewandten Formen besser beurteilen zu können, sollten wir Varianten mit unterschiedlichen Ausprägungen erstellen, denn ›spitz‹ ist nicht gleich ›spitz‹. Es ist ratsam, Extreme auszureizen und Reihungen zu bilden. Die unterschiedlichen Ausprägungen könnten sich – wenn nicht in der Form des Buttons –später in anderen Komponenten des Corporate Design wiederfinden.

Formfindung aus einer Schrift Analysiert man verschiedene Schriften auf ihre Grundkonstruktion und Eigenarten, bieten diese Potential, um daraus eigene Formen abzuleiten. Gleichzeitig entsteht so auf natürliche Weise eine Konsistenz zwischen Schrift und Buttonform, die vielleicht innerhalb des Buttons gar nicht unmittelbar sichtbar sein muss. Steht die Flächenform jedoch direkt neben groß gesetztem Text/Titeln, wird die Verwandschaft offensichtlicher.

Auch hier gilt: die entstandenen Formen müssen nicht zwingend mit den entsprechenden Schriften kombiniert werden. Es ist vor allem einen Versuch wert, eine kontrastierende Schrift zu kombinieren, um mehr visuelle Spannung zu erzeugen.

Text/Form Kombination (Molekül)

Spannungsverhältnis Text & Form Im nächsten Schritt kombinieren wir Text und Fläche und möchten uns zunächst nur mit dem Spannungsverhältnis zwischen Text und Buttonfläche besfassen. Dazu verwenden wir eine möglichst neutrale Schrift (ff Real) und eine einfache Form, damit wir uns noch nicht von diesen beiden Faktoren bei unserer Beurteilung beeinflussen lassen.

Parameter Um visuelle Spannung zu erzeugen, stehen uns verschiedene Parameter zur Verfügung: Position, Orientierung, die Schriftgröße und damit verbunden der Weißraum, die Laufweite und der Satz.

Bereits hier werden wichtige, elementare Entscheidungen getroffen, die sich später auf die Übertragung in die nächst größeren Einheiten des Design Systems auswirken werden: das Verhältnis zwischen Schriftgröße und Größe des Buttons (Weißraum) könnte auch darüber entscheiden, in welchem Verhältnis später Titelgröße zum Papierformat steht. Soll eine Marke bold und laut auftreten, kann sich das auch in einem großen und fettem Titel im Verhältnis zum Format ausdrücken.

Kombination Schrift, Form und Spannung

Wir haben nun schon eine variantenreiche Auswahl an Buttons erstellt, die alle für sich unterschiedliche Qualitäten in ihrer Wirkung besitzen: manche sind unauffällig, manche elegant, manche laut und einige auch uninteressant hinsichtlich Typik.

Nun kombinieren wir unsere drei zuvor gewählten Parameter miteinander: wir setzen unsere Schrift im gewählten Spannungsverhältnis in unsere Formen. Dabei versuchen wir, möglichst viele Kombinationen zu kreieren. Wir wählen möglichst viele Varianten aus, die die Kriterien Typik in verschiedenen Ausprägungen erfüllen.

Iteration 1

Obwohl wir noch keine Farbe, Füllungen oder Effekte verwendet haben, sind wir nun an dem Punkt, an dem wir das ersten Mal hinter­fragen können:

• besitzt der Button genügend Typik?
• transportiert das Aussehen der Form-Text-Kombination unseren erwünschten Charakter?

Ist dies nicht der Fall, ist es an der Zeit für eine erste Iteration: Falls der Button zu ausdrucksstark ist, ist es ein Hinweis darauf, dass die einzelnen Parameter für sich bereits sehr dominant sind und miteinander konkurrieren. In diesem Fall versucht man einen Parameter abzuschwächen und so die Exzentrik etwas zu neutralisieren. Neutralisiert man eine Form, sollte man diese nicht verwerfen, da sie immer noch eine Verwandtschaft zur neuen Form besitzt und damit eine Variation dieser darstellt. Da wir ein flexibles System erstellen möchten, könnte sie später noch hilfreich sein und zum Einsatz kommen.

Besitzt der Button noch nicht genügend Charakter, ergeben sich zwei Wege: einerseits kann man einen Parameter in eine auffälligere, exzentrischere Richtung verändern. Andererseits kann man versuchen, in den nächsten Schritten mittels Farbe, Füllung, Kontur oder Effekten mehr Persönlichkeit zu erzeugen. Dies kann inhaltlich durchaus Sinn ergeben. Gestaltet man beispielsweise eine Identität, die gestalterisch an Prinzipien des Bauhauses angelehnt sein soll, sind Form und Schriftstil quasi vorgegeben.

Anwendung Farbe & Füllung & Kontur

Farbe In den nächsten Schritten addieren wir zu Form und Schrift Farbe(n). Sowohl Fläche als auch Text und/oder Kontur können eingefärbt werden. Auch hier ist es ratsam, möglichst viele Kombinationen zu testen.

Effekte Zusätzlich zur Farbe ergibt sich die Option, verschiedene Effekte wie Verläufe, Muster, Schatten oder Konturfüllungen anzuwenden. Dies ergibt insbesondere Sinn, wenn die Text/Fläche-Kombination noch mehr Individualität benötigt.

Kontur

Falls wir uns für eine Kontur entscheiden, der Button an sich aber noch an Typik vermissen lässt, kann es sich lohnen, der Kontur an sich Aufmerksamkeit zu schenken:

Beziehung Konturstärke / Schriftgewicht Wir überprüfen die B­e­zieh­ung zwischen Konturstärke und Schriftgewicht und variieren, sodass durch geringe Veränderungen einerseits eine elegante, andererseits auch eine laute Wirkung erzeugt werden kann.

Beziehung Konturform / Schrift Genau wie die Flächenform, kann sich auch die Konturform aus Eigenheiten der gewählten Schrift ableiten.

Beziehung Konturform / Schrift / Flächenform / Farbe Und schließlich kann es sich auch lohnen, die aus der Schrift abgeleiteten Flächenformen und Flächenfüllungen zu kombinieren.

Fläche

Entscheidet man sich zunächst für eine flächige Gestaltung, der Button besitzt jedoch noch nicht genug Charakter, lohnt sich eine Ausein­andersetzung mit Effekten. Hierbei bieten insbesondere Fülleffekte – wie Verläufe, Muster, Schraffuren o.ä. – Potenzial, identitätsstiftenden Charakter zu erzeugen.

Abschluss Phase 1

Wir sollten nun im Idealfall unser erstes Molekül aus verschiedenen Atomen zusammengesetzt haben – vermutlich sind sogar mehrere Buttons entstanden, die als Grundlage für den weiteren Prozess gelten können. Die unterschiedlichen Buttons können als verschiedene Pfade angesehen werden, welche alle in andere Gestaltungsrich- tungen leiten.

Betrachten wir die Buttons nun: wir gleichen ab, ob diese unsere Markenwerte in eine adäquate Gestaltung übersetzen. Falls dies nicht der Fall sein sollte, analysieren wir unser vorläufigen Ergebnisse und wiederholen die Iterationen.

Ist dies der Fall, wählen wir die vielversprechendste Richtung und sind bereit, in die nächste Phase überzugehen. Zum Abschluss der ersten Phase zerlegen wir das Molekül noch einmal in seine Einzelteile, um uns zu vergegenwärtigen, welche Designentscheidungen wir bereits getroffen haben.

Phase 2

Während wir uns in der ersten Phase mit den Atomen und einem ersten Molekül im Digitalen beschäftigt haben, versuchen wir in Phase 2 eine Übertragung der (vorläufigen) Gestaltungsprinzipien auf einen analogen Baustein.

Visuell betrachtet ist ein Button Text in einer Box. Wir suchen also nach ähnlichen typischen Formen im Analogen. Ein einfaches Störer­element bietet offensichtliche Ähnlichkeit, eine hervorgehobene Infobox in Broschüren besitzt ebenfalls Parallelen. Aber auch ein Titel oder eine Zwischenüberschrift bietet so betrachtet ähnliche Voraussetzungen.

Die Übertragung in eine neue Komponente hat zum einen den Zweck, dass er die Anwendbarkeit im Analogen prüft. Zum anderen erhalten wir einen ersten Eindruck aus dem größeren Bild, haben wir uns bisher doch nur isoliert auf eine Komponente konzentriert. Wir erstellen also Abwandlungen unseres Ansatzes und hinterfragen gleichzeitig, ob unsere bisherigen Designentscheidungen die richtigen waren.

Dabei ist es uns nach wie vor wichtig, dass wir nicht nur eine Lösung generieren, sondern möglichst Varianz erzeugen – denn wir sind nicht auf der Suche nach z. B. der perfekten Informations-Box, sondern nach vielen Komponenten, die für verschiedene Einsatzzwecke geeignet sind.

Iteration In dem vorliegenden, exemplarischen Fall wird deutlich, dass die gewählte Schrift in größerer Menge sehr technisch und statisch wirkt – was nicht zu den gewählten Attributen passt; die Schrift sollte weicher, eigenartiger und jünger sein. Wir führen also einen weiteren Schriftwechsel durch und übertragen ihn auch auf die digitale Komponente.

Phase 3

Im nächsten Schritt wechseln wir wieder ins Digitale und gestalten die nächste Komponente aus der Nutzeroberfläche. Dazu zerlegen wir den Wireframe, mit welchem wir begonnen haben, in seine inhaltlichen und funktionalen Einzelteile. In dem Beispielfall wären dies:

Inhaltselemente

• Artikeltitel
• Aktuelles Gebot
• Restzeit der Auktion
• Eingabe eines neuen Gebotes

Sortierung nach Relevanz

Wir sortieren die Komponenten nun nach Relevanz hinsichtlich der Nutzung unseres Interfaces und zerlegen auch diese in seine Einzelteile falls möglich:

• Eingabe eines neuen Gebotes
• Eurobetrag
• Centbetrag
• Währung
• Kennzeichnung Interaktivität
• Artikeltitel
• Aktuelles Gebot
• Textlabel
• Eurobetrag
• Centbetrag
• Währung
• Restzeit der Auktion
• Textlabel
• Stunden, Minuten, Sekunden
• Einheit

Wir wählen als nächstes die Komponenten, welchen man am meisten Bedeutung zumessen kann und arbeiten so Schritt für Schritt unsere Liste ab. Während der Gestaltung ist es nach wie vor wichtig, dass wir die Komponenten zunächst noch isoliert für sich betrachten.

Reine Textkomponenten

Komponenten, welche ausschließlich aus Typografie bestehen, sind schwierig unabhängig von Layout und anderen Komponenten zu gestalten, da sie immer in Beziehung zu ihren umgebenden Elementen stehen und daher – vor allem in ihrer Größe – von ihnen abhängig sind. Das gilt insbesondere für typografische Hierarchien wie Titel, Untertitel, etc. Wir gestalten diese deshalb erst, sobald wir alle anderen Komponenten erstellt haben und in einem Layout zusammentragen.

Je nach Inhaltsumfang des ersten Wireframes besteht nach Vervollständigung der Liste eine erste Kollektion an Komponenten, welche uns einen Eindruck über Anmutung und Atmosphäre des Corportae Designs geben.

Phase 4: In ein Format bringen

Diese Komponenten übertragen wir nun in ein erstes Layout – im Beispiel in das Format eines Applewatch-Screens.

AppleWatch Guidelines

Dazu ist es notwendig, sich mit den GUI-Richtlinien der AppleWatch zu befassen – dabei gibt es zwei wissenswerte Dinge zu beachten:

Der Hintergrund auf einer AppleWatch ist grundsätzlich schwarz aktive Elemente sollen nicht nur durch Farbe markiert werden, sondern auch durch eine weitere Kennzeichnung. Apple rät dazu, dunkelgraue Flächen zu nutzen und deren Ecken abzurunden. Wireframe 1

Wendet man diese Regeln an, kann man vermuten, dass die abgerundeten Ecken zwar recht deutlich mit den bisher getroffenen Gestaltungsentscheidungen brechen würden. Dies fällt allerdings nicht allzu sehr ins Gewicht, da die Form des Buttons so die Gestaltung dominiert, sodass die beiden Formen in Koexistenz zueinander stehen können ohne wesentlich zu konkurrieren.

Auch die Anwendung der Plattformschrift sf ui Compact birgt Vorteile im Vergleich zur Markenschrift Mallory: vor allem in kleinen Schriftgrößen wirkt sie besser lesbar und insbesondere platzsparender als die breit konstruierte und weit laufende Mallory. Da markenprägende Schriften vor allem in Groß wirken, wäre es hier also durchaus legitim, für kleine Texte auf die San Francisco zurückzugreifen.

Formatvariante 2

Der Wechsel zur zweiten Variante des Wireframes bietet erstmals die Möglichkeit, eine Interaktion und gegebenenfalls Animationen zu gestalten. Dazu müssen wir uns verdeutlichen, worin der Wechsel funktionell besteht:

• Eingabe eines neuen Betrages
• Fokussierung auf den Geldbetrag
• differenzierte Eingabe von Euro und Cent
• Bestätigung des Gebots
• ›sichere‹ Interaktion: z. B. Wischgeste
• Rückmeldung ›Gebot erfolgreich‹

Jeder dieser Schritte bietet das Potenzial, gestaltet zu werden, um zum einen die Nutzbarkeit zu optimieren und zum anderen auch individuellen Charakter zu erhalten, der die Marke widerspiegelt.

Fokus auf den Geldbetrag Drückt man ›Mitbieten‹ oder auf das aktuelle Gebot, kommt man in den Eingabemodus. Dazu vergrößern sich die Ziffern, unwichtige Elemente treten in den Hintergrund und der Euro-Betrag wird als aktives Element hervorgehoben.

Bestätigung des Gebots Sobald ein höherer Betrag eingegeben wurde, erscheint ein von links nach rechts animierter Verlauf auf dem Button, welcher die nötige Interaktion (Wischen von links nach rechts) signalisiert, um das Gebot zu bestätigen. Während des Wischens sind die beiden Rechtecke als Grundformen des Buttons entgegengesetzt animiert und verschwinden bei fortgeschrittener Interaktion/Bestätigung. Interaktion und Animation als Referenz zielen somit darauf ab, eine Signature Interaction darzustellen – jedes Mal, wenn ein Nutzer ein Gebot abgibt, kommt er mit ihr in Berührung. In der folgenden Weiterentwicklung des Corporate Design sollte versucht werden, diese oder ähnliche Interaktionen in die Nutzeroberfläche zu integrieren, um die Animation als Markensignatur zu stärken.

Weiterer Verlauf der Methode

Im weiteren Verlauf der Methode arbeitet man somit sämtiche Wireframes und Komponenten ab, wechselt regelmäßig ins Analoge und baut so nach und nach eine umfangreiche, konsistente Bibliothek an Komponenten auf.

Auf den folgenden Seiten ist eine Übersicht einiger Komponenten, führt man den Prozess noch einige Schritte weiter.

Fazit

Anhand der exemplarisch durchgeführten Untersuchung lässt sich vermuten, dass die Methode durchaus Potenzial besitzt, ein visuelles Erscheinungsbild auf systematische Weise zu erstellen. Es bräuchte jedoch vermutlich noch einige reale Anwendungsfälle, um die Tauglichkeit wirklich zu bestätigen, da zur Veranschaulichung vor allem extreme Parameter eingesetzt wurden.

Was die Methode leisten kann

Die Stärke der Methode liegt dabei sicherlich in der Fokussierung auf einzelne Gestaltungskomponenten und damit auf eine konsistente Ausarbeitung. Sie stellt außerdem die Anwendbarkeit in komplexen Umgebung wie einer Nutzeroberflächen sicher und konzentriert sich auf eine layoutunabhängige Gestaltung. Mit fortschreitender Ausarbeitung sammeln sich so immer mehr Komponenten an, mit denen sich ab einem gewissen Punkt auch spezifische Layoutkompositionen erstellen lassen. Außerdem kann die Methode eine Hilfestellung bei der Exploration geben, passende, individuelle Formensprachen und Gestaltungsmotive zu finden und sich dabei nicht auf Ornamentik sondern auf Funktionalität zu konzentrieren.

Was die Methode nicht leisten kann

Die Methode ist sicherlich keine universelle Lösung für jede Problemstellung. Im gewissen Maße schränkt man sich durch sie zweifellos ein, sodass bestimmte mögliche Ergebnisse gar nicht zustande kommen können – z. B. die Entwicklung eines Gestaltungsmotivs wie es die Sparkasse verwendet. Basiert ein zu erstellendes Erscheinungsbild nicht grundlegend auf einer Anwendung, könnte man die Methode als Ergänzung im Gestaltungsprozess betrachten.

Ist die Methode digital?

Zwar zielt die Methode darauf ab, vor allem im wichtigsten Berührungspunkt mit einer Marke – z. B. im Serviceprozess einer Applikation – stark aufzutreten und ein im Digitalen prägnantes Corporate Design zu erstellen. Es spräche jedoch nichts dagegen, als Grundlage derselben Methode z. B. eine Verpackungsgestaltung heranzuziehen – es fehlte dann jedoch von Grund auf eine solch konkrete Fokussierung auf ein einziges Element – spielt bei einer Verpackung doch auch Komposition eine wichtige Rolle – und die Integration von Interaktivität. An ihrer Stelle stünden dann jedoch andere Komponenten wie z. B. Haptik. Allerdings ließe sich anhand der Methode als Ergänzung während des Entwurfs stets überprüfen, ob eine vorliegende Gestaltungsidee medienübergreifend anwendbar ist.

8 Résumé

9 Literaturverzeichnis