Webdesign mit Gefühl: Artdirection spricht User emotional an

Gute Websites müssen nicht nur professionell aussehen und Designstandards erfüllen, sie sollen die Betrachter auch emotional ansprechen. Das erfordert klare Ziele. [tableofcontents] Menschen gehen an einer Plakatwerbung vorbei und müssen schmunzeln. Sie blättern durch ein Magazin und verlieren sich in den Seiten. Sie haben etwas Neues gekauft und fühlen sich so richtig gut damit. Warum? Weil diese Situationen Emotionen in ihnen ausgelöst haben. Anreize haben sie bewogen, sich mit etwas auseinanderzusetzen, Neues zu erleben oder Dinge zu kaufen. Diese Menschen glauben vielleicht, sie hätten alle Argumente rational abgewogen. Doch im Kaufprozess spielen häufig unsere Emotionen die entscheidende Rolle. Das sollten Designer bei der Gestaltung von Websites berücksichtigen. Denn jede Website möchte ihre Besucher von etwas überzeugen. Neben den sachlichen Argumenten müssen aber auch die Emotionen stimmen. Doch oft entscheiden Unternehmen in Designfragen auf Basis dessen, was den Mitarbeitern oder Kunden gefällt, was das nächstbeste WordPress-Theme oder der neueste Webdesign-Trend vorgeben. Mit anderen Worten: Sie lassen sich vom Geschmack leiten. [caption id="attachment_250905" align="alignnone" width="900"] Die Website Dribbble präsentiert jede Menge „Best Practices“ aus dem Bereich Design. Doch wer sich durch die Seite klickt, sieht sehr viel im selben Stil: weiche Farbverläufe, abgerundete Ecken oder nette Illustrationen. Dass sich mit dem immer gleichen Design die Ziele der unterschiedlichsten Marken und Unternehmen erreichen lassen, ist unwahrscheinlich. (Abbildung: Dribbble)[/caption] Ein Blick auf die Design-Showcase-Website Dribbble genügt, um diesen Eindruck zu untermauern [siehe Abbildung]. Ob weiche Farbverläufe, abgerundete Ecken oder nette Illustrationen, für die unterschiedlichsten Branchen und Herausforderungen zeigen sich die gleichen Designs. Sie alle sollen nur die aktuellen Trends bedienen. Dabei haben wohl die wenigsten Kunden das Ziel, mit ihrer neuen Website auf Dribbble oder Behance möglichst viele Likes einzuheimsen oder das Designer-Ego auf Awwwards zu befriedigen. Wichtig ist vielmehr, die richtigen Ziele herauszuarbeiten und zu definieren: Wen soll die Website erreichen? Die Antwort auf diese Frage ist der erste und wichtigste Schritt zu einer erfolgreichen Website. Damit das Design genau zu diesen Zielen passt, müssen Designer eine Brücke der Gefühle schlagen. Hier setzt Artdirection an. [caption id="attachment_250906" align="alignnone" width="700"] Mosh, der australische Online-Gesundheitsanbieter für Männer, signalisiert mit seinem Logo in fetten Versalien Stärke und mit seinen Illustrationen im Cartoon-Stil Humor und Nähe. Eine ideale Mischung, um zum Teil sensible Themen wie Haarausfall oder sexuelle Dysfunktionen anzusprechen. (Abbildung: Mosh)[/caption] Artdirection will emotionalisieren Zugegeben, Artdirection ist ein etwas diffuser Begriff, der sich schlecht direkt übersetzen oder mit wenigen Worten umschreiben lässt. Wikipedia kennt lediglich den Artdirector, der in einer Agentur die künstlerische Leitung innehat. In diesem Artikel soll es aber nicht um eine bestimmte Position gehen. Er soll den Prozess der Artdirection beleuchten. Die „Direction“ lässt sich in diesem Zusammenhang wohl am besten mit „Ausrichtung“ übersetzen. Die Übersetzung von „Art“ als „Kunst“ wäre irreführend. Es geht nicht um das, was wir landläufig unter Kunst verstehen. Es geht um gezielte Überlegungen im Designprozess. Der Webdesigner und Autor des Buches „Art Direction for the Web“ Andy Clarke meint, „Artdirection nutzt Designtechniken, um gezielt eine emotionale Reaktion beim Lesen eines Artikels, Nutzen eines Produktes oder Besuchen einer Website hervorzurufen.“ Hierbei fällt besonders die wichtige Unterscheidung zwischen Artdirection und Design auf. Artdirection ist der Prozess, in dem Designer herausarbeiten, wie sie visuell bestimmte Gefühle erzeugen können. Erst dann kommt das Design als Werkzeug für die entsprechende Umsetzung. Design, so könnte man sagen, ist, wie es aussieht, Artdirection ist, wie es sich anfühlt. Um eine Website so zu gestalten, dass sie erfolgreich ist, müssen Kreative die richtige emotionale Ansprache finden und diese adäquat in das passende Design übersetzen. Das ist Artdirection. [crosslinks ids="833976"] Ein konkretes Beispiel soll zeigen, wie das praktisch aussieht. Die australische Firma Mosh bezeichnet sich als „Online Men’s Health Clinic“ und fokussiert sich auf die unangenehmen Seiten des Männerdaseins: Haarausfall, sexuelle Dysfunktionen, Hautunreinheiten und Falten sowie mentale Probleme. Ein wichtiger Aspekt dabei: Das Unternehmen hat auch für sich herausgearbeitet, warum die Männerwelt Mosh braucht [siehe Abbildung oben]. Die Kreativen vom Studio Universal Favourite wussten daher genau, wo sie emotional ansetzen mussten, um Männer von Moshs Produkten zu überzeugen. Denn das Warum liefert den idealen Nährboden für den Artdirection-Prozess: Wie schaffen wir es, auf die mitunter peinlichen oder zumindest unangenehmen Probleme aufmerksam zu machen und Männer dazu zu bewegen, sich Mosh als Institution anzuvertrauen? Die Gestaltung muss überzeugend, selbstbewusst, zugleich aber auch verständnisvoll und nahbar sein. Entstanden sind ein Logo in fetten Versalien, das Stärke vermittelt, und Illustrationen im Cartoon-Stil, die die Probleme humorvoll und informativ aufzuzeigen, ohne sie zu verniedlichen. Die neue Website wirkt so sehr gelungen. Die gestalterische Ausarbeitung passt zu den formulierten Zielen und vermittelt so ein gutes Gefühl. Das half, den Umsatz zu steigern und verlorene Marktanteile zurückzugewinnen. [caption id="attachment_250907" align="alignnone" width="700"] Die Marke Harley-Davidson galt Jahrzehnte lang als Synonym für Freiheit und Andersartigkeit. Die aktuelle Website spiegelt mit ihrer beliebigen Gestaltung nichts mehr davon wider. Vielleicht, weil die Marke in einem Umbruch steckt: Neben röhrenden Motorrädern verkauft sie jetzt auch leise E-Bikes.[/caption] Natürlich gibt es auch Websites, bei denen man förmlich spürt, dass eine klare Artdirection fehlt. Harley-Davidson ist so ein Beispiel [siehe Abbildung oben]. Die Marke galt jahrzehntelang als Synonym für Freiheit und Andersartigkeit. Davon ist beim Blick auf die aktuelle Website allerdings nicht mehr viel zu spüren. Die Gestaltung wirkt beliebig. Ein mit Bildern bestücktes Standarddesign ohne Seele. Es ist nicht unwahrscheinlich, dass Harley-Davidson schlicht der tiefere Sinn abhandengekommen ist, mitten in einem Umbruch: Statt laut röhrender Kraftprotze bringen sie leise E-Bikes auf den Markt. Die gesetzlosen Rockerrebellen sind dem Durchschnittskunden gewichen. Unter diesen Bedingungen fällt es Artdirection schwer, emotional Akzente zu setzen. Es braucht klare Ziele Allein diese beiden Beispiele zeigen, wie wichtig es ist, klare Ziele zu haben, auf denen die Artdirection aufbauen kann. Doch der gesamte Prozess umfasst drei wesentliche Schritte. Im ersten Schritt geht es darum, die Ziele zu definieren und das Warum zu ergründen. Im Kundenbriefing ist zum Beispiel folgende Frage von zentraler Bedeutung: „Was möchte Ihr Unternehmen oder Produkt bewegen – und warum?“ Die platte Antwort ist sicherlich meist: „Geld verdienen.“ Doch es gibt immer noch weitere Gründe. Gründe, die uns wirklich motivieren. Eine aussagekräftige Antwort hat zum Beispiel die Designerin Sonja Hecker gefunden: „Meine erfolgreiche Mission als Designerin liegt darin, Projekte zur Förderung von Natur, Tier, Umwelt und pflanzlicher Ernährung auf gestalterischer Ebene voranzubringen.“ Damit beschreibt sie den eigentlichen Sinn ihrer Arbeit. Mit ihrer Gestaltung verfolgt sie ein konkretes Ziel. Das ist der emotionale Anker, den Kreative für die Auswahl von Bildern, Typografie und Gestaltung nutzen können. In dem Warum steckt der Schlüssel zum Erfolg des nächsten Schrittes. [crosslinks ids="1342077"] Im zweiten Prozessabschnitt der Artdirection steht die Überlegung an, mit welchen Mitteln sich die Ziele und das Warum am besten visualisieren lassen. Als Webdesigner könnte es das Ziel sein, Menschen zu verbinden. Warme, pastellige Farben könnten das unterstreichen, indem sie Nähe und Freundlichkeit erzeugen. Eine humanistische Schrift, die noch entfernt an den Duktus der Handschrift erinnert, unterstreicht ebenfalls den menschlichen Charakter. Fotos oder Illustrationen von glücklichen Menschen können die Botschaft unterstützen. So entsteht Stück für Stück ein Gesamtbild, das den Betrachter überzeugt. Erst dann geht es ans Design. Im dritten Schritt beginnt das eigentliche Handwerk der Gestaltung. Hier geht es nicht mehr – wie im zweiten Schritt – um konzeptionelle Überlegungen. Hier ist die praktische Umsetzung dran: Welche Farbwerte wirken am Bildschirm gut und weder zu blass oder zu schrill – oder gerade schrill, je nach Ziel? Wie erreichen die Schriften eine ausgewogene Hierarchie? Ist der Bodytext gut lesbar? Stimmen die Farbkontraste, um Barrierefreiheit zu garantieren? Sind die Bildausschnitte gut gewählt? Gibt es über alle Bildschirmgrößen hinweg ein konsistentes Nutzererlebnis? In der Praxis gehen Schritt zwei und drei oft fließend ineinander über. Das ist nicht weiter schlimm, solange die konzeptionellen Fragen beantwortet sind, bevor es an die eigentliche Gestaltung geht. [caption id="attachment_250908" align="alignnone" width="900"] Welche Gestaltung bringt die Dramatik des Themas Klimawandel besser rüber? Das der Onlineplattform der Süddeutschen Zeitung mit der fetten Überschrift vor gelb-rotem Farbverlauf – oder das von Global 2000 mit seinem kühlen und dezenten Grün-, Blau- und Pastelltönen? Die Gegenüberstellung zeigt, wie sehr Design eine Botschaft auf emotionaler Ebene stärken oder schwächen kann. (Abbildung: Süddeutsche Zeitung/ Global 2000)[/caption] Blick in die Praxis Beispiele sagen mehr als 1.000 abstrakte Theorien. Das zeigt der Vergleich zwischen den Beiträgen der Onlinepräsenz der Süddeutschen Zeitung und Global 2000, beide zum Thema Klimawandel. Der Beitrag der Süddeutschen Zeitung [siehe oben, links] zeigt unmissverständlich, wo der Schuh drückt. Das Wort „Katastrophe“ steht fett in der Überschrift mitten auf dem Bildschirm, der gelb-rote Farbverlauf im Hintergrund signalisiert Hitze und Gefahr. Dem gegenüber steht der Artikel von Global 2000 [siehe Abbildung oben, rechts]. Er ist in Grün, Blau und Pastelltönen gehalten. Doch passen die Farben zum Thema? Nein. Grün gibt ein Gefühl von Sicherheit, Blau strahlt Kühle aus und die pastelligen Farben wirken nett. Das Gefühl, das diese Gestaltung erzeugt, schwächt die Botschaften des Beitrages. Neben Farben spielt auch die Typografie eine wichtige Rolle. Schrift vermittelt Emotionen in der Regel viel subtiler. Dennoch sollten Designer ihre Wirkung nicht unterschätzen. Serifenlose Schriften wirken zum Beispiel moderner, minimalistischer und klarer als Serifenschriften, wie der Designer Oliver Schöndorfer in seinem Artikel „Font follows Feeling – A brief Type Classification“ beschreibt. Serifenschriften lösen in uns hingegen eher ein Gefühl von Vertrauen, Wärme und Sicherheit aus. Wie weit man gehen kann, um mit verschiedenen Schriftschnitten unterschiedliche Emotionen zu wecken, zeigt der Artdirector und Designer Marcus Brown. Für sein Projekt über die ikonischen Grachten in Amsterdam [siehe unten] nutzt er stolze fünf Schriftarten. Auch wenn sie alle die Eigenschaften „leidenschaftlich“, „ikonisch“ und „eindrucksvoll“ verkörpern sollen, hat Brown ihnen doch jeweils gezielt eine Funktion zugewiesen und sie geschickt aufeinander abgestimmt. Der Kontrast aus historischen und modernen Schriften hilft ihm dabei, das Stadtbild Amsterdams zu reflektieren, das ebenso aus historischen wie modernen Gebäuden besteht. Gleichzeitig zieht die eindrucksvolle, kontrastreiche Typografie die Leser in die Geschichte hinein. Sie tauchen ein in die Welt der Grachten. In Verbindung mit dem knackigen Rot macht das Design die Leidenschaft dieses Projektes spürbar. Über den Prozess der Artdirection zu diesem Projekt hat Brown übrigens einen sehenswerten Vortrag gehalten. [caption id="attachment_250910" align="alignnone" width="564"] Auch das Titelbild der HBO-Serie „Chernobyl“ ist ein gutes Beispiel für die subtile Macht der Typografie: Die nicht ausbalancierten Buchstabenabstände, die unausgewogenen Proportionen der Buchstaben selbst sowie die unsauberen Rundungen raunen: Hier stimmt etwas nicht. (Abbildung: HBO)[/caption] Ein anderes schönes Beispiel ist die Typografie in der HBO-Serie „Chernobyl“. Neben der düsteren Bildsprache löst auch der Titelschriftzug Unwohlsein beim Betrachter aus. Die nicht ausbalancierten Buchstabenabstände (das C steht viel zu weit ab), die unausgewogenen Proportionen innerhalb der einzelnen Buchstaben (etwa beim E und R), die unsauberen Rundungen (wie beim R und B) – all das signalisiert dem Zuschauer: Hier stimmt etwas nicht. Botschaft und Emotion ergänzen sich wunderbar. Fazit Websites leben von der Emotion. Durch eine gute Artdirection können Kreative gezielt bestimmte Gefühle bei den Nutzern hervorrufen. Entscheidend ist dabei, welchen Zweck eine Website hat. So hilft Artdirection dabei, Geschichten mithilfe von Design zu erzählen. Sie sorgt dafür, dass Menschen sich mit Unternehmen, Produkten oder wichtigen Themen auseinandersetzen – und Unternehmen damit das Ziel einer Website erreichen. Entscheidend für den Erfolg ist dabei nicht die Frage, „Was sehen die Besucher, wenn sie die Website öffnen?“. Kreative müssen sich vielmehr fragen: „Was fühlen sie, wenn sie die Website verlassen?“