Farben für emotionales Webdesign

Sie sind das Fundament nahezu jeder Website und das Stilmittel Nr. 1, wenn es darum geht die Website an das Corporate Design des Unternehmens anzupassen. Genauso können sie aber auch als Blickfang, zur optischen Trennung von Inhalten oder zur besseren Orientierung auf einer Website — beispielsweise für Links — eingesetzt werden. Doch wie können Farben Emotionen erzeugen? Hier ein paar Antworten.

Assoziationen von Farben

Farben rufen beim Menschen unterschiedliche Assoziationen hervor. Bestes Beispiel: Blau und Rosa. Über Jahrzehnte wenn nicht sogar Jahrhunderte hinweg hat unsere Gesellschaft bestimmte Assoziationen beim Anblick von Farben entwickelt.

Warum nutzen viele Anwaltskanzleien, Banken und andere Unternehmen, die als seriös und konservativ wahrgenommen werden wollen vorzugsweise ein dunkles Blau? Und warum wird die „Bio-Variante“ von Lebensmitteln so gerne mit Grün, Beige und Braun gekennzeichnet? Auch hier liegt die Antwort in der Assoziation mit Farben.

Weitere Farbassoziationen:

  • Weiß – sauber, kalt und steril, aber auch unschuldig, beruhigend
  • Rosa – weiblich, lieblich und zart, aber auch verspielt
  • Blau – männlich, seriös und kühl, aber auch frisch, belebend
  • Rot – aktivierend und warm, aber auch unruhig, aggressiv
  • Gelb – sonnig, freundlich und optimistisch, aber auch warnend
  • Violett – mystisch, prachtvoll, kalt

Allein die Wahl des Farbtons kann also darüber entscheiden, was der Betrachter mit der Website assoziiert und welche Emotionen dadurch erzeugt werden. Doch nicht nur die Farbe beeinflusst unser Empfinden, auch wie diese auf einer Website eingesetzt wird.

Prägnanter und dezenter Farbeinsatz

Um die Wirkung von unterschiedlichen Farbeinsätzen auf einer Website zu verdeutlichen habe ich mir 3 Seiten rausgesucht, die alle mit der Farbe Rot im Design arbeiten:

H&M Online Shop

Ein wenig überrascht war ich, als ich mir den Online-Shop von H&M, aber auch von Zalando und Esprit einmal genauer angesehen habe. Alle drei setzen lediglich Farbakzente und arbeiten stattdessen mit Schwarz, Weiß und einer Hand voll Grautönen. Dadurch wirken die Shops einerseits sehr übersichtlich und aufgeräumt, andererseits aber auch kalt und von den Produktbildern mal abgesehen emotionslos.

Mediamarkt Online Shop

Schauen wir uns im Gegenzug den Online-Shop von Mediamarkt an, erleben wir das genaue Gegenteil. Dezent könnte man hier allenfalls den Einsatz von Weiß nennen. Der übermäßige Einsatz von Rot lässt die Website unruhig und aggressiv wirken. Nun könnte man meinen, dass Mediamarkt sonst auch eher aggressiv in der Werbung vorgeht und der Online-Shop zum Gesamtkonzept passt. Wenn ich allerdings an die durch das Rot erzeugten Emotionen denke, dann sind diese keineswegs verkaufsfördernd, ganz im Gegenteil. Hier könnte sich Mediamarkt einiges vom Mitbewerber redcoon.de abschauen.

Microsoft Office Website

Stück für Stück hat Microsoft in den letzten Monaten einen Imagewandel vollzogen. Dieser zeigt sich auch auf der Microsoft Office Website mit einer geänderten Bildsprache und dem gezielten Einsatz von Farben. Die großen Headerbilder ergänzt durch rote Farbflächen stehen in einem ausgewogenen Verhältnis und wirken warm und aktivierend. Lediglich auf den Komplementärkontrast, also die grünen Buttons auf rotem Untergrund hätte ich verzichtet.

Fazit

Wer Farben zur Erzeugung von Emotionen im Webdesign nutzen möchte, sollte sich einerseits mit den damit verbundenen Assoziationen auskennen, andererseits aber auch Gespür dafür entwickeln, wie Farben eingesetzt im Verhältnis zur gesamten Website wirken. Farben im Webdesign sind also keineswegs einfach nur Geschmackssache. Wie bei allen Methoden zur Erzeugung von Emotionen wird man es auch bei der Farbwahl nicht jedem Seitenbesucher recht machen können. Das ist okay, wenn man es im Gegenzug schafft, bei einem Großteil der Seitenbesucher positive Emotionen durch Sympathie zu erzeugen.

Ich bin Steuermann bei Erdmann & Freunde, einem Netzwerk für Contao-Webworker, und schreibe hier über Themen aus dem Bereich Webdesign und Webentwicklung.

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind markiert *