Wirkung und Funktion von Farben

Farben können in Bezug auf Webdesign unterschiedliche Funktionen haben und eine bestimmte Wirkung erzielen. Sie dienen zum Beispiel dazu, den Nutzer zu stimulieren, sie können eine Struktur erzeugen und den Nutzer leiten und nicht zuletzt werden sie gezielt eingesetzt, um Aufmerksamkeit zu erregen und bestimmte Elemente hervorzuheben.

 

 

 

 

Stimmung erzeugen

 

In der folgenden Auflistung handelt es sich um Assoziationen, die zumindest in der westlichen Welt mit verschiedenen Farben in Verbindung gebracht werden. Diese Liste ist allerdings mit Vorsicht zu genießen, da jeder Mensch individuell empfindet und mit Farben unterschiedliche Emotionen verbindet. Auch kulturell gibt es einige Differenzen, was die Symbolik von Farben betrifft.

 

Rot:

  • Positiv: Leidenschaft, Liebe, Temperament, Energie
  • Negativ: Gefahr, Wut, Aggression

 

Orange:

  • Positiv: Kreativität, Erfrischung, Wärme, Sonnenuntergang
  • Negativ: Misstrauen, Aufdringlichkeit

 

Gelb:

  • Positiv: Optimismus, Frische, Energie, Sonne
  • Negativ: Warnung, Eifersucht, Krankheit

 

Grün:

  • Positiv: Hoffnung, Wachstum, Natürlichkeit, Heilung
  • Negativ: Ehrgeiz, Neid, Feigheit, Krankheit

 

Blau:

  • Positiv: Ruhe, Vertrauen, Sicherheit, Wissen, Seriosität
  • Negativ: Kälte, Distanz, Zurückgezogenheit

 

Violett:

  • Positiv: Mystik, Kreativität, Individualität
  • Negativ: Eitelkeit, Melancholie, Buße

 

Weiß:

  • Positiv: Reinheit, Unschuld, Frieden, Licht
  • Negativ: Leere, Stille

 

Schwarz:

  • Positiv: Eleganz, Seriosität, Modernität, Sachlichkeit
  • Negativ: Trauer, Tod, Dunkelheit, Angst

 

Wie Sie sehen können, hat keine Farbe rein positive Assoziationen. Selbst wenn man eine „fröhliche“ Farbe in einem bestimmten Kontext verwendet, kann eine negative Stimmung erzielt werden. Als Beispiel dafür schauen Wir uns mal die Farbe Gelb an:

 

Wenn man an Gelb alleine denkt, dann kommt einem vielleicht zunächst die Sonne in den Sinn. Gelb ist eine warme Farbe und wird häufig als „fröhlich“ angesehen. Sie kann also leicht eine positive Stimmung erzeugen.

 

lipton
Quelle: https://www.lipton.com/de/home.html

 

In Verbindung mit der Farbe Schwarz kann Gelb jedoch auch bedrohlich wirken. In dieser Kombination gilt gelb als Warnfarbe. Das ist zum einen in der Natur der Fall (Wespen, Hornissen, …) und wird zum anderen bei Schildern und Symbolen (Hochspannung, Radioaktivität, …) deutlich.

 

radioaktiv

 

Deshalb ist es wichtig, zu wissen was man mit seiner Farbwahl erreichen möchte und welche Zielgruppe man ansprechen will. Je nach Anliegen kann man sich sowohl die positiven, als auch die negativen Assoziationen einer Farbe zu Nutze machen.

 

Strukturieren und Leiten

 

Farben können dabei helfen den Nutzer zu leiten und die Struktur der Webseite hervorheben. So können beispielsweise Bestandteile der Navigation durch Farbgebung von dem restlichen Inhalt abgetrennt werden.

 

Ein weiterer Punkt zu diesem Thema ist die gezielte Verwendung bestimmter Farben für gewisse Meldungen. Für User Interfaces haben sich inzwischen spezifische Farben etabliert, um websitespezifische Meldungen anzuzeigen:

 

Blau oder Grau:

  • Hilfefunktionen oder Zusatzinformationen
  • z.B. Meldungen zum Systemstatus oder Erklärungen zu gewissen Funktionen

 

Grün:

  • Erfolgsmeldungen nach Abschluss einer Aktion
  • z.B. Erfolgreiches Abschicken einer E-Mail, Abschließen eines Downloads

 

Gelb oder Orange:

  • Warnmeldungen, die nicht systemkritisch sind
  • z.B. wenn eine Aktion auf Grund mangelnder Informationen nicht durchgeführt werden kann

 

Rot:

  • Kritische Fehler und Aktionsabbrüche
  • z.B. Fehlschlagen eines Downloads, Inhalte konnten nicht geladen werden

 

Aufmerksamkeit erregen und Elemente hervorheben

 

Buttons und andere interaktive Elemente wie Links werden häufig farblich hervorgehoben, um Aufmerksamkeit zu erregen und zu verdeutlichen, dass es sich bei diesem Element nicht nur um reinen Text handelt, sondern dass hier eine Interaktion möglich ist.

 

Auch grundsätzlich kann durch den gezielten Einsatz von Farben im Layout einer Webseite die Aufmerksamkeit des Nutzers auf bestimmte Inhalte gelenkt werden. Da man zuerst die grobe Struktur einer Webseite wahrnimmt bevor man sich Ihre Bestandteile genauer ansieht, können so Elemente, die auf einem farbigen Hintergrund platziert werden, in den Fokus des Nutzers gerückt werden.

 

 

Nun haben Sie einen kleinen Einblick in die Wirkung und Funktion von Farben erhalten. Mehr zur Bedeutung von Farben im Web können Sie demnächst in unserem Blogartikel „Was ist bei der Farbwahl zu beachten?“ lesen.

 

Wenn Sie mehr zum Thema UX Design lesen wollen, dann schauen sie sich gerne auch die anderen Blogartikel unserer Web Design Agentur an: "Was ist UX Design?" , "Was macht gutes Design aus?" und "Wie geht ein UX Designer vor?"

 

Mehr Informationen zum Thema Design finden sie auf unserer Design-Seite, in unserer Agenturpräsentation oder kontaktieren Sie uns direkt.