Einklang von Harmonielehre und Farbsymbolik

Ein Designer könnte ein zusätzliches Leistungsmerkmal in sein Angebot aufnehmen: Design nach Farb-Assoziationen. Im Marketingsektor haben Farb-Assoziationen schon lange ihren festen Platz. Wenn ein Kunde die Erstellung solch einer Seite beauftragt, gehört es zum professionellen Vorgehen, dass die assoziierten Farben auch konsequent eingesetzt werden, damit die gewünschte assoziative Wirkung auch tatsächlich entsteht. In der Praxis ist dies nicht immer einfach, besonders, wenn es sich um viele Farben handelt. Bei falscher Platzierung der Farben kann Unübersichtlichkeit entstehen oder die Seite könnte allzu bunt wirken.

Integration der assoziierten Farben in ein Design

Folgende Situation: Wir möchten eine Webseite erstellen, deren Farben die Assoziation zu "Vertrauen" erwecken sollen. Laut Diagramm sind es die Farben Blau, Grün, Weiß, Gold und Gelb. Dies bedeutet, dass wir das Vertrauen am stärksten mit Blau verbinden, am zweitstärksten mit Grün, am drittstärksten mit Weiß, u.s.w. Nun könnten wir auf den Gedanken kommen, auf die letzte oder auch vorletzte Nebenfarbe zu verzichten. Vielleicht erhalten wir mit der Kombination Blau/Grün/Weiß ebenfalls den gewünschten Effekt?
 
Ein Blick auf das Blau-Diagramm gibt uns die Antwort: Die Kombination Blau/Grün/Weiß finden wir ebenfalls in den Begriffen Weite, Entspannung und Stille wieder, und zwar bei allen dreien als die erstgenannten Farben:

Das Vertrauen
Die Weite
Die Entspannung
Die Stille

Die weiteren Nebenfarben sind also wichtig, weil sie die jeweilige Assoziation näher bestimmen. Deshalb müssen diese Nebenfarben auch tatsächlich eingesetzt werden. Wir sollten uns also nicht fragen, auf welche Nebenfarbe verzichtet werden kann. Viel besser ist es, einen Weg zu finden, wie alle angegebenen Farben integriert werden können, ohne dass es allzu bunt und durcheinander-gewürfelt wirkt.
 
Hier kommt uns eine Tatsache zu Hilfe, die bei Design und Layoutgestaltung nicht wichtig genug genommen werden kann: In der Realität gibt es keine bloßen Farben! Immer ist es ein Gegenstand, der eine Farbe trägt. Auf einem Printmedium oder auf einer Webseite finden wir nun etwas völlig unnatürliches: Es finden sich gegenstandslose Flächen, die nichts weiter zu bedeuten haben, als einen Bereich abzugrenzen. Dieser Bereich ist z.B. ein Frame, eine Verweisliste oder ein Textfeld. Wir erkennen beim Betrachten dieses Mediums keinen blauen reellen Gegenstand, sondern einfach nur eine blaue Fläche. Diese "künstliche Fläche" wird zur Einteilung und Abgrenzung genutzt, um Übersichtlichkeit und Ordnung in die Seite zu bringen. Übersichtlichkeit ist eine sehr wichtige Komponente bei der Gestaltung von Webseiten. Farbige Flächen können helfen, Übersichtlichkeit in die Seite zu bringen, indem sie die Seite einteilen und ordnen.
 
Es wäre eine falsche Vorgehensweise, wenn wir alle auserwählten Farben auf diese "künstlichen Flächen" verteilen wollten, bloß weil alle diese Farben hineinsollen. Die Übersichtlichkeit einer Webseite hat absolute Priorität, und zwar vor allen anderen Dingen, ob es nun Farbwahl ist oder Design oder sonst was. Hier dürfen wir keine Kompromisse eingehen, nur weil noch Farben übrig sind und verteilt werden müssen. Denn der eigentliche Zweck einer Webseite, nämlich Informationen an den Surfer zu übermitteln, kann nicht erfüllt werden, wenn der Surfer sich nicht mehr zurechtfindet und schließlich die Seite verlässt.
 
Deshalb muss das erste Layout, nämlich die Verteilung von Schrift, Objekten und Farben, zunächst zweckorientiert sein, und der wichtigste Zweck ist die Übersichtlichkeit. Das Produkt ist zunächst eine Seite, die nur aus der Anordnung dieser "künstlichen Flächen" besteht, aus der Anordnung von Schrift, Objekten und Farben. Danach erst kommt das Design der Seite. Auch hier sollte das Design sich nicht nach der Anzahl der Farben richten, sondern ausschließlich nach der Vorstellung oder Idee des Designers.
 
Angenommen, die "künstlichen Flächen" sowie das Design wurden mit den Farben Blau und Gold realisiert. Blau und Gold eignen sich hierfür sehr gut, weil diese Farben in einem Winkelkontrast zueinander stehen. Weiß können wir immer verteilen, weil es die Winkelharmonie nicht beeinflusst. So blieben die Farben Gelb und Grün übrig. Nun müssen wir erreichen, dass die angestrebte Assoziation wirksam werden kann, indem wir Gelb und Grün in die Webseite integrieren. Diese Integration kann nur auf eine einzige Art und Weise stattfinden: Die restlichen Farben werden nicht über die "künstlichen Flächen" verteilt, sondern innerhalb der Komponenten der Seite. Diese Komponenten können ein Button sein, eine Linie, ein Logo, eine Grafik oder ein Foto. Ein Betrachter erkennt diese Komponente als solche wieder und fasst sie als ein "geschlossenes Ganzes" auf.

• Beispiel:
  Am Anfang dieser Seite sind Auszüge aus dem Blau-Diagramm eingeschoben. Die innerhalb dieser Grafik platzierten zusätzlichen Farben wurden nicht als störend empfunden, weil die Grafik als ein geschlossenes Ganzes auftritt. Die Grafik grenzt diese Farben gleichsam ab. Es leidet weder die Übersichtlichkeit noch das Design. Genauso verhält es sich bei all den anderen Grafiken in diesem Tutorial. Farben und Formen befinden sich immer innerhalb dieser Komponenten. (Wobei es bei einem schwachen Kontrast zwischen Hintergrund und Komponente häufig günstig ist, diese Komponente mit einem Rahmen abzugrenzen, um das geschlossene Ganze zu betonen. Beispiele für derartige Abgrenzungen finden sich ebenfalls in diesem Tutorial, z.B. immer, wenn es sich um eine Komponente mit weißer Fläche handelt. Oder auch die Textfelder, die zur Abgrenzung und Betonung einen Rahmen haben, und ebenso die Verweisfelder.)
   
• Beispiel:
  Die restlichen Farben können z.B. in ein Portrait eingearbeitet werden. Wir fassen ein Portrait als ein geschlossenes Ganzes auf, ganz gleich welche Farben hier eingesetzt werden. Auf dem Portrait könnte eine abgebildete Frau eine blaue Bluse tragen, eine goldene Uhr und goldene Kette, ein gelbes Haarband, und das ganze vor einer grünen Wiese als Hintergrund. Damit hätten wir die assoziierten Farben verteilt.

Diese Beispiele machen deutlich, wie einfach es ist, viele Farben einzusetzen, ohne dass die Gesamterscheinung unübersichtlich wird oder als zu bunt empfunden wird und ohne dass das Design allzu sehr leidet. Die assoziierten Farben oder Teile der assoziierten Farben werden innerhalb der Komponenten der Webseite integriert und damit gewissermaßen "eingekapselt". Weil aber die "künstlichen Flächen" nicht verändert wurden, ist die Struktur und das Design der Seite erhalten geblieben. Trotzdem sind die Farben jetzt vorhanden, und deshalb kann der angestrebte assoziative Effekt wirken.
Völlig falsch wäre es, die "künstlichen Flächen" der Webseite, die ja der Übersichtlichkeit dienen, von der Zahl der Farben abhängig zu machen (weißes Textfeld, blaues Frame, grüne Buttons, gelbe MausOver-Effekte und goldfarbige Trennlinien). Es mag sein, dass eine derart aufgebaute Seite gut aussehen kann, aber dies wäre reiner Zufall. Wenn nur zwei Farben mehr im Spiel wären, so hätten wir vielleicht eine rote Überschrift, einen violettes Rahmen u.s.w.
 
Grafische oder fotografische Komponenten eignen sich sehr gut, um die assoziierten Farben oder Teile davon aufzunehmen, gerade wenn wir viele verschiedene Farben integrieren müssen. Fotografische ganz besonders, weil wir hier zwei Fliegen mit einer Klappe schlagen können: Durch Hinzunahme einer fotografischen Komponente erhalten wir Gelegenheit, der Webseite einen aktivierenden Reiz zu verleihen. Um einen aktivierenden Reiz einzusetzen, eignet sich nichts besser als ein Foto. Wie wichtig solche Reize sind und welches die Reizkategorien sind, wird auf der Seite Unsere tägliche Aktivierung beschrieben.