Im Teil 4 haben wir uns angesehen wie Farben die menschlichen Emotionen beeinflussen und was diese bedeuten. Farben haben 3 Grundeigenschaften. Den Farbton, die Sättigung und die Helligkeit. Um den “roten Faden” in einem Farbdesign zu behalten solle man sich auf eine Grundfarbe einigen die sich durch die komplette Website zieht. Um bestimmte Objekte oder Textteile zu betonen sollte es auch eine “Betonungs-Farbe” geben. Das verschafft nicht nur die Übersicht, sondern wirkt seriös und enthält ein Komplettes Konzept. Denn die Farben können auch Layout und Bilder beeinflussen. Komplementärfarben sind die häufigsten Farben die Verwendet werden. Durch Verwendung von zwei verschiedenen Komplementärfarben als Grund- und Batonungs-Farbe erhält man auch den sogenannten “Web 2.0″-Effekt. Jedoch gehört dazu auch ein leichter 3D-Effekt. Das ist aber wieder ein anderes Thema.

In Teil 5 sehen wir uns diesmal an wie die Farben nun konkret kommunizieren. Es ist wichtig zu Verstehen wie Farben wirkuen. Denn das kann eine Website sehenswert oder unangenehm machen. Denn ein Benutzer muss sich wohl fühlen. Da können Sie das beste Layout der Welt haben, die Farben regieren das Internet.

Farben kommunizieren Welche Farben Sie auch immer als Grund- und Betoungs-Farbe wählen, Sie kommunizieren immer damit. Gestalten Sie eine Website, wie in unserem Beispiel in Teil 4, in Schwarz-Weiß, sagen Sie dem Benutzer damit “Wir geben uns ganz klassisch. Nur nicht auffallen. Design ist nicht so wichtig.” Das hat negative Wirkung. Durch verschiedenste Grau-Stufen an Betonungen haben Sie dann schon bessere Wirkungen.

Gestalten Sie Ihre Website in Rot, Grün und Gelb sagen Sie damit “Hey! Aufgepasst! Das hier ist wichtig! Und zwar alles!”. Das hat genauso schlechte Wirkungen. Denn es ist nie alles wichtig. Sie überfordern den Benutzer, dieser fühlt sich nicht wohl und das Design schlägt fehl. Und wenn wir ehrlich sind, es wirkt unseriös und billig. Wenn dazu noch kleine Blinkende Bilder kommen und Texte in allen Farben gestaltet wurde, wird man die Website nie mehr besuchen wollen. Farben wirken viel weniger bewusst als geschriebene oder gesprochene Worte, aber der Vergleich ist für den Designbewussten Webdesigner sehr hilfreich.

Zu schwache Farben oder Bilder mit zu wenigen Kontrasten wirken wie ein sehr leise und sehr schüchtern. Ruhige Farben mit starken Kontrasten wirden seriös und professionell. Wie ein ruhiger Mensch mit kräftiger Stimme. Sehr starke Farben mit sehr kräftigen Kontrasten wirden wie ein sehr unruiher Mensch der sie Anbrüllt. Ein lauteres Wort kann unsere Aufmerksamkeit wecken, doch schreit jemand mit uns. Das ist unangenehm. Schreien Sie die Benutzer nict unnötig an. Verwenden Sie Kräftige Farben mit Bedacht. 

Seien Sie also Vorsichtig bei den Primärfarben Rot, Grün, Blau. Auch Gelb sollen Sie mit Bedacht verwenden. Sethen Sie diese Farben in voller Sättigung nur ein, wenn Sie etwas wichtiges hervorheben wollen. Diese Farben als Grundfarbe zu Verwenden ist der größte Fehler den man machen kann. Im Normalfall genügt es auch, die Grundfarbe mit einer etwas stärkeren Sättigung zu Verwenden um etwas zu betonen. Setzen Sie daher BITTE diese Farben generell nur gezielt ein:

Eine Farbe hebt hervor.

Mehrere Farben nebeneinander oder große Farbflächen wirken schreiend. Gedeckte Farben (also Pastelltöne) eignen sich für größere Flächen viel besser. Farben eignen sich im Akzente zu setzen. Sie können beispielsweise die Funktion eines Wiedergabe-Buttons deutlicher machen, indem Sie ihn Grün hinterlegen. Sie sollten jedoch nicht nur die Farbe einsetzen, um ihn vom Stopp Button zu unterscheiden.
Farbe und Symbolik
Tests haben gezeigt, dass Benutzer sich schwerer tun, Dinge nur aufgrund von Farben zu unterscheiden. Deshalb sollten Sie immer zuerst mit der Unterscheidung durch Form, Größe oder Position arbeiten und diese erst im zweiten Gestaltungsschritt durch die Farbgebung unterstützen.

Es gibt allgemein zwei Regeln:

1. Ein gutes Design funktioniert auch in Schwarz-Weiß. Verwenden Sie hierbei viele Grautöne um auch klassische Seiten aufregender zu machen. Es wirkt dadurch sehr seriös und professionell.
2. je länger die Teste auf der Seite sind, desto zurückhaltender sollten die Farben sein. Oder wie lange können Sie lange Texte lesen, die sich auf einem roten Hintergrung befinden lesen. Es wird auf dauer sehr unangenehm. Pastelltöne sind hier die Lösung.

Diese Regelung zur Unterstützung der Texte, Marken oder für das Design sollten Sie unbedingt einhalten. Sie fördern durch den Roten Faden der Farben (Grundfarbe, Betonungsfarbe, Logo, Schrift, Bildsprache) auch die Marke und den wiedererkennungswert Ihrer Website.
Vorschau Teil 6: Wir sehen uns in Teil 6 ein Beispiel an. Wir erstellen zusammen ein “Farbklima” mit hilfe aller Informationen die wir in den Teilen 1 bis 5 gelernt haben. Wir werden uns dann auch ansehen wie die Farben die Lesbarkeit beeinflussen.

Vorschau auf Teil 7: Da wir dann in Teil 6 ein Design mit den gelernten Informationen erstellt haben, will ich Ihnen zeigen, wie Sie dieses Design auch Umsetzen können. Dazu gibt es die “Grundregeln zur Umsetzung”. Zukünftig werden wir uns hierbei auch mit er Typographie beschäftigen, Absätzen, Seitenbreite- und -höhe, Layout, Schwerpunkte, Bilder, Buttons, Symbole, Kombinationen, Hervorherbungen, Tabellen, Listen, Schmuck und vielen mehr.

Also dranbleiben lohnt sich.
Mit freundlichen Grüßen
Markus Mörth

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