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

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