Tutorial: Farben im Webdesign

Zuletzt aktualisiert: 24.11.2014
Impressum

Download Color Selector (Farbwähler für Harmoniekontraste) und Tutorial.

In diesem Tutorial wird speziell auf die Themen Farben und richtige Farbwahl eingegangen, was interessant ist sowohl für diejenigen, die sich ihre Webseiten erstellen lassen, als auch besonders für diejenigen, die sich mit dem Thema Homepageerstellung befassen oder befassen müssen.
Es wurde versucht, nur soviel Theorie wie nötig, dafür soviel Praxisbezogenheit wie möglich einzusetzen, sodass man recht schnell zu brauchbaren Ergebnissen gelangt.
 
Vorab ein Hinweis:
Das Tutorial ist reichlich mit farbigen Grafiken illustriert. Die Qualität der Darstellung auf dem Monitor ist von verschiedenen Faktoren abhängig: Vom verwendeten Monitor selbst, der Monitoreinstellung, der Grafikkarte und sogar vom verwendeten Browser. Bitte berücksichtigen Sie diese unvermeidlichen Toleranzen bei der Betrachtung der Grafiken.


Welche Farben in die Homepage?

Speziell das Kapitel Harmonielehre setzt Grundkenntnisse aus der Farbenlehre voraus. Wer sich mit den Grundbegriffen der Farbenlehre nicht auskennt (Komplementärkontrast, Farbenkreis, Farbmodulationen, u.s.w.), sollte sich zunächst mit den Grundregeln befassen:

Die Grundregeln der Farbenlehre

 
Wer noch überhaupt keine Vorstellung über die Farbe seiner Homepage hat, für den sind die Seiten über Farbsymbolik interessant. Farbsymbolik bedeutet, dass wir mit bestimmten Begriffen, Gefühlen, Situationen oder Zuständen ganz spezifische Farben oder Farbkombinationen assoziieren. Ein bekanntes Zitat veranschaulicht diese Assoziationen:

"Grau, teurer Freund ist alle Theorie, und Grün des Lebens goldner Baum."
Mephisto in Goethes Faust

Jeder von uns versteht auf Anhieb, worum es geht. Wir ordnen intuitiv die assoziierte Symbolik den jeweiligen Farbwörtern zu. Diesen Effekt kann man bei der Wahl seiner Farben nutzen: Möglicherweise existieren Farbkombinationen, die imstande wären, das Thema der Homepage zu unterstreichen? Ein Hersteller von Biokost beispielsweise beschäftigt sich auf seiner Webseite mit dem Thema "Gesund". Hier könnten Farben eingesetzt werden, die wir mit dem Begriff "Gesund" assoziieren. In der Tat sind es die Farben Grün und Rot und ein wenig Rosa und Blau. Im Kapitel Farbsymbolik können zu über 200 Begriffen die jeweiligen Farbassoziationen ermittelt werden:

Die Farbsymbolik

 
In welcher Art und Weise die Farben auf der Webseite verteilt werden sollten, damit es für unser menschliches Empfinden passend und harmonisch wirkt, steht auf den Seiten über Farbharmonie:

Die Harmonielehre

 
Wie eine im Kapitel Farbsymbolik ausgewählte Farbassoziation in die Webseite integriert wird und mit den Regeln der Harmonielehre in Einklang gebracht wird:

Einklang von Harmonielehre und Farbsymbolik

 
Weil Farben nur dann so richtig zur Geltung kommen, wenn sie in geeigneter Weise auf die Formen und Flächen der Webseite verteilt werden, ist ein Kapitel über die Grundlagen des Formen- und Flächendesigns entstanden:

Das Design von Flächen

 
Weil Marketing und PR auch im Web immer wichtiger werden:

Marketing und PR

 
Die Kapitel können auch der Reihe nach durchgearbeitet werden, am Fuß jeder Seite befindet sich ein "zurück"- und ein "weiter"- Verweis.

Es gibt auch eine "Schnellstartseite", auf der die Farbdiagramme, die Aufstellung der assoziierten Begriffe, der harmonische Farbkreis, die Reizkategorien sowie die Regeln für Fließtext und Headlines verlinkt sind. In der Offlineversion des Tutorials brauchen Sie nur eine Verknüpfung zu dieser Schnellstartseite auf Ihren Desktop zu legen oder ein lokales Bookmark in den Browser, um bequem Zugriff zu bekommen:

Schnellstartseite

 
Sitemap

Die Grundregeln der Farbenlehre

Additive Farbmischung
Subtraktive Farbmischung
Grafik: Vergleich RGB- und CMY-Farbmischverfahren
Primär- und Sekundärfarben
Der Farbenkreis
Verschiedene Farbkreise
Komplementärfarben und Simultanwirkung
Nachbilder
Der harmonische Farbkreis
Grafik: Vergleich aller Farbenkreise
Modulationen
Die Tertiärfarben
Perspektiveffekt durch Farben

Farbsymbolik

Die Farbsymbolik
Allgemeine Bestimmung der Assoziationen
Farben und Assoziationen in Diagrammen
Beliebteste und unbeliebteste Farben
Blau
Rot
Grün
Gelb
Orange
Schwarz
Rosa
Weiß
Violett
Gold
Silber
Braun
Grau
Aufstellung aller assoziierten Begriffe

Die Harmonielehre

Vorwort zum Thema Kreativität
Was ist eine Harmonielehre?
Die Harmonielehre Nach Roman Liedl
Der Winkelkontrast
Die Winkelharmonie
Auffächerungen
Farbreihen
Wiederholungen
Eine Farbkombination, die wir gewöhnt sind
Farben zur Unterstützung bestimmter Winkelharmonien
Der Mengenkontrast
Der Hell-Dunkel-Kontrast
Der Bunt-Unbunt-Kontrast
Der Kalt-Warm-Kontrast
Die Harmoniekontraste
Arbeitsbeispiele:
Seite 1
Seite 2
Seite 3
Seite 4
Seite 5
Seite 6
Seite 7
Seite 8
Seite 9
Seite 10
Seite 11
Seite 12
Seite 13

Color Selector (Farbwähler für Harmoniekontraste)

Beschreibung und Download des Color Selectors
 

Einklang von Harmonielehre und Farbsymbolik

Integration der assoziierten Farben in ein Design
Aus assoziierten Farben werden Harmonien
Ergänzung zur Winkelharmonie
Ergänzung zur Farbreihe
Wiederholung der Disharmonie

Das Design von Flächen

Was ist Harmonie?
Gegensätze
Gleichartigkeit und Verschiedenartigkeit
Beispiele für Harmonie und Disharmonie
Weitere Beispiele für Harmonie und Disharmonie
Spannungen
Das Schöne und das Hässliche
Unsere tägliche Aktivierung
Die schöne Webseite

Marketing und PR

Marketing im Webdesign
Bilder als Mittel im Marketing
Headlines als Mittel im Marketing
Text als Mittel im Marketing

Schnellstartseite

Schnellstartseite
 
 
Quellennachweis:
 
Literaturverzeichnis
Impressum
 
Verantwortlich für den Inhalt:
Hartmut Rudolf
Hattenheimer Str. 11
45145 Essen
Tel: 0201/64 95 34 34

Die Informationen auf diesen Webseiten wurden sorgfältig und gewissenhaft zusammengestellt. Sie werden auch in Zukunft ständig geprüft, aktualisiert und erweitert. Trotzdem können sich aber Angaben zwischenzeitlich verändert haben. Eine Haftung oder Garantie für die Aktualität, Richtigkeit und Vollständigkeit der zur Verfügung gestellten Informationen kann daher nicht übernommen werden. Gleiches gilt auch für alle Websites, auf die mittels eines Hyperlinks verwiesen wird. Für den Inhalt der Websites, die mit einer solchen Verbindung erreicht werden, sind wir nicht verantwortlich.
Lesen Sie hierzu die Informationen über Garantie und Kopierrechte.

 
 
   
  Additive Farbmischung >> 
 
 
© 2000 - 2010 info@metacolor.de