Endlich mal wieder ein Blog von mir. Viele haben lange gewartet und gehofft, aber jetzt hat das warten ein Ende. Denn hier ist der Vierte Teil der Reihe “Design für Nicht-Designer”. Diesmal geht es darum, wie Farben auf einer Homepage miteinander kommunizieren. Dies ist vor allem wichtig, um zu Signalisiert auf welcher Seite man steht. Es ist auch ein Wiedererkennungswert. Das einfachste Beispiel ist “Greenpeace”. Hier werden viele Grüne Farbtöne verwendet. Microsoft setzt auf Blau und Schwarz. YouTube ist auf Rot unterwegs.

Natürlich klingt das total banal. Aber wir sollten und mal Ansehen, wie Farben funktionieren. Und das aller wichtigstem was Farben überhaupt aussagen.
 

Farben haben eine Aussage
Farbe ist eine Grundlage in der Thematik der Gestaltung. Dabei ist die Wirkung von Farben sehr bedeutend für Webdesigner. Zusätzlich haben Farben eine wirkung auf Emotion. Zum Beispiel ist Rot die Farbe für Blut und damit für Gefahr – diese Emotionale Reaktion ist angeboren. Erlernte Reaktionen gibt es zum Beispiel bei der Farbe Grün. Grün ist die Ampel oder auch wenn “Alles klar” ist. Die Bewertung der Farben ist von Kultur zu Kultur anders. Das heißt, Sie brauchen hier schon eine Zielgruppe die Sie ansprechen wollen.

Sind Sie sich im Team beim Thema Farbgebung nicht einig, kann nur ein Test mit Vertretern der Zielgruppe helfen – oder finden Sie einen Kompromiss. Richtig oder falsch sind im Bereich der Farbe Schwarz schwer zu beurteilen. Aber beachten Sie folgende Regeln:

• Farbton
  Als Farbton wird das bezeichnet, was wir umgangssprachlich einfach nur “Farbe” nennen, also Rot oder Blau.
  
• Sättigung
  Die Sättigung einer Farbe ist die Intensität einer Farbe.
• Helligkeit
  Die Helligkeit oder Stärke einer Farbe bestimmt, wie hell eine Farbe wirkt.

Aber bei der gestaltung einer Website sollten Sie ein ganz wichtiges Grundkonzept haben. Wählen Sie sich nur eine einzige Grundfarbe. Als Beispiel ist meine Wiedererkennungsfarbe Schwarz. Dann muss es diesen Roten Faden geben um ein einheitliches Design zu erzielen. Verwenden Sie bei der Grundfarbe “Schwarz” also nicht alle Farben die Ihnen so in den Sinn kommen, sondern wählen Sie zum Beispiel weiß für den Text (oder Schwarz wenn der Hintergrung weiß ist) und Betonen Sie Objekte oder Textabschnitte in Grautöne. So haben Sie schon mal ein Konzept für die Farbgebung Ihrer Website.

 

Komplementärfarben
Zwar wissen Sie jetzt wie Sie den Roten Faden bilden. Aber es gehören immer Mindestens zwei Farben dazu. Eine Grundfarbe und eine Betonungs-Farbe. So nenne ich die beiden einfach. Am einfachsten geht dies mit den Komplementärfarben. Zwei Farben sind komplementär, wenn sie zusammengemischt grau bis schwarz ergeben. Diese Farben bilden dazu noch die Stärken kontraste die zu ermöglichen sind. In Werbung, Fotos oder eben auf Websites fallen diese Farben sehr leicht auf. Es gibt soganennte Komplementärkontraste. Die häufigsten sind diese hier:

• Rot & Grün
• Orange & Blau
• Gelb & Lila
• Gelb-orange & Blau-lila
• Magenta & Cyan

 

Farbwirkung
Wie wirken aber jetzt nun Farben? Genau dafür habe ich mir Rot, Gelb, Grün und Blau mal genauer angesehen:

Rot
Aktiv bis aggressiv, Warnend, Stop/Achtung (als Signalfarbe), Beunruhigend, Erotisch, Warm, Nah

Gelb
Anregend, Nervös, Heiter, Attraktiv, Achtung (als Signalfarbe), sehr Warm, Nah

Grün
Lebendig, Beruhigend, Okay/Weiter (als Signalfarbe), Neutral bis kühl, Entfernt

Blau
Seriös, Technisch, Beruhigend, Kalt, Entfenrt

 

Vorschau auf  Teil 5: Da wir jetzt im 4ten teil gesehen haben, wie man ein Farbkonzept entwerfen sollte und wie Farben auf den Menschen wirken, gibt es im Teil 5 nachzulesen, wie eine Farbe mit einer anderen kommuniziert. Und keine sorge, es ist viel einfacher als es klingt.
 

Mit freundlichen Grüßen
Markus Mörth

Design für Nicht-Designer (Teil 4) ähnliche Beiträge:
>>Photoshop Elements 6 für den Mac
>>Design für Nicht-Designer (Teil 1)
>>Design für Nicht-Designer (Teil 2)