Tutorial: Farben im Webdesign
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:
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:
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:
Wie eine im Kapitel Farbsymbolik ausgewählte Farbassoziation in die Webseite integriert wird und mit den Regeln der Harmonielehre in Einklang gebracht wird:
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:
Weil Marketing und PR auch im Web immer wichtiger werden:
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:
Sitemap
Die Grundregeln der Farbenlehre
- Additive Farbmischung
- Primär- und Sekundärfarben
- Der Farbenkreis
- Verschiedene Farbkreise
- Komplementärfarben und Simultanwirkung
- Modulationen
- Die Tertiärfarben
- Perspektiveffekt durch Farben
Farbsymbolik
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
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.
