1. Defintion

Das Wort Farbe hat aus heutiger Sicht mehrere Bedeutungen. Zum einen stellt es die visuelle Erscheinung und Wahrnehmung des Lichtes dar. Zum anderen steht es als Werkstoff bzw. Beschichtungsstoff. Als letztes, umgangssprachlich auch für Farbmittel, Pigmente und Farbstoffe.
Nach internantionaler Vereinbarung steht das Wort selbst nur noch für die Sinnesempfindung (die farbliche Information).
Nach DIN 5033 ist Farbe diejenige Gesichtsempfindung eines dem Auge des Menschen strukturlos erscheinenden Teiles des Gesichtsfeldes, durch die sich dieser Teil bei einäugiger Beobachtung mit unbewegtem Auge von einem gleichzeitig gesehenen, ebenfalls strukturlosen angrenzenden Bezirk allein unterscheiden kann.

Das Wort Design bedeutet meist Entwurf oder Formgebung. Es ist ein Lehnwort aus dem Englischen, das wiederum aus dem Lateinischen abgeleitet ist (designare = (be)zeichnen) und in viele Sprachen Eingang gefunden hat.
Im deutschen Sprachgebrauch beschreibt Design den Prozess des bewussten Gestaltens. Er dient als Sammelbegriff aller bewusst gestalteten Aspekte eines realen oder virtuellen Objektes, einer Dienstleistung oder Marke. Durch eine stetige zunahme der Anwendungsbereiche in die verschiedenene Designprozesse vordrangen veränderte sich die Ansicht des Begriffes. Design wird damit entgegen dem Selbstverständnis der Designer immer noch als Applikation, als "add on" missverstanden, das vor allem ästhetischen Regeln zu folgen habe.



2. Bedeutungen von Farben beim Design

Wenn das Auge eine Farbe wahrnimmt, nimmt der Mensch nicht nur die Sinnesempfindung (wie "rot" "grün") auf. Die Farbe erzielt noch weitere spezifische und psychologische Ein/-Wirkungen. Farben sind Schwingungen, die von unserem Organismus aufgenommen werden und sowohl auf den Körper als auch auf die Psyche wirken. Sie haben somit einen großen Einfluß auf unser Wohlbefinden und unser Lebensgefühl.
Für die Tatsache, daß Farben als Energiestrahlung vom menschlichen Körper deutlich wahrgenommen werden, erbrachte der Begründer der rationalen Lichttherapie, Professor Nils Finsen, den wissenschaftlichen Beweis. Für seine Forschungsarbeit über Licht und Farben erhielt er 1903 den Nobelpreis für Medizin. Er konnte nachweisen, daß Farben selbständige Kräfte sind und ihre Wirkung nichts mit Suggestion zu tun hat. Seine Versuche zeigten eindeutig, daß Farbschwingungen, die auf den menschlichen Körper treffen, diesen zu deutlichen Reaktionen veranlassen.
So werden heute beim Design und Concept eines Objektes diese Farben bewusst verwendet. Dabei ist es egal für welchen Bereich das Objekt gestalltet wurde. Überall gelten grundlegende Bedeutungen von Farben, die im Web, in der Mode, bei Verpackungen oder aber in der Kunst vorkommen.



2.1 Psychologische Wirkungen

Nachfolgend soll mit Hilfe einer Tabelle gezeigt werden, welche Gefühle, und die daraus resultierenden Assoziationen, Farben ervorrufen können. Gleichzeitig werden Webseiten gezeigt, die speziell auf die Assoziationen bezug nehmen um auf Empfindungen des Menschen einzugehen.

Farbe Positive & negative Assoziationen Farbbeispiele im Web
Violett Spiritualität, Pietät, Mystik, Magie, Feierlichkeiten, Macht, Herrschaft, Verborgenheit, Nostalgie, Trauer, Passion, Demut, Extravaganz, Eitelkeit, Dekadenz, Feminismus, Unbefriedigt
  • in der Politik und als gesellschaftliches Statement: Emanzipation (vgl. Frauenbewegung)
  • in der Katholische Kirche: Buße
croweb.nl
tiscali.de
milka.de
cadbury.com
Rosa Zärtlichkeit, Weichheit, Milde, Empfindsamkeit, Sanftheit, Naivität, Baby, Charme, Weiblichkeit, Kitsch, Romantik, Eitelkeit, Lieblichkeit, Süßlichkeit bebe.de
rosaliste.de
humanface.com
adamdom.com
Blau Weite, Tiefe, Sehnsucht, Stille, Harmonie, Glaubwürdigkeit, Treue, Ruhe, Frische, Leistung, High-Tech, Männlichkeit, Kühle, Distanz, Passivität, Bewegungsarmut
  • in der Politik: Demokratie – Republik - Liberalismus - In Großbritannien die Farbe der Konservativen Partei
  • im Judentum: Gott, Himmel, Glauben, Offenbarung
  • als Signalfarbe: vorgeschrieben, Jugend
  • im Christentum: Maria, Mutter von Jesus von Nazaret
gilette.com
frankenbrunnen.de
nivea.com
argonauten.de
Grün Natur, Vegetation, Wachstum, Üppigkeit, Frische, Leben, Jugend, Gesundheit, Ruhe, Erholung, Friedlichkeit, Sicherheit, Hoffnung, Giftigkeit, Bitterkeit
  • in der Politik: Nachhaltigkeit (auch Ökologiebewegung) - Frieden - Menschen- und Bürgerrechte
  • auf Flaggen: Islam, Esperantoflagge
  • als Gesichtsfarbe: Krankheit
  • als Signalfarbe: erlaubt, vorhanden, Start, Okay, richtig, giftig
  • im Christentum: Farbe der Auferstehung
perrier.com
aicomm.de
nachtagenten.de
raptile.com
Gelb Sonne, Wärme, Helligkeit, Glück, Heiterkeit, Optimismus, Ehre, Freundlichkeit, Wert, Gold, Adel, Eifersucht, Neid, Geiz, Feigheit, Aufdringlichkeit, Verlogenheit
  • als Signalfarbe: eingeschränkt, teilweise, Zwischenzustand, Warnung (siehe Warnfarbe)
  • in China: Erde, Mitte, Ausgeglichenheit
yellostrom.de
moon-music.ch
deutsche-post.de
Orange Wärme, Lebhaftigkeit, Wildheit, Aufmerksamkeit, Mut, Spass, Geselligkeit, Glück, Vergnügen, Aufdringlichkeit, Künstlichkeit
  • in der Politik: Opposition, Widerstand
  • als Signalfarbe: Warnung, Gefahrensymbole, Gefahrengutkennzeichnung (siehe Warnfarbe)
  • im tantrisch geprägtem Kulturkreis Indien: selbstloser Dienst, Mönchtum, Entsagung
  • tiefenpsychologisch: Kommunikation, Wunsch nach Einheit
fanta.de
antwerpes.de
e-sixt.de
mango.com
Rot Energie, Aktivität, Kraft, Liebe, Sexualität, Lust, Leben, Wärme, Feuer, Glut, Gefahr, Warnung, Leidenschaft, Kampf, Verletzung, Mord, Wut, Sucht, Egoismus
  • in der Politik: Linke Politik, Sozialismus, Kommunismus, Revolution
  • in China: Glück
  • als Signalfarbe: verboten, Stopp, negativ, falsch
  • im Christentum: Farbe des Heiligen Geistes und des Blutes der Märtyer
ferrari.com
kimura-karate.ch
cocacola.com
fancyphone.es
Braun Bodenständigkeit, Gemütlichkeit, Erde, Naturverbundenheit, Spießigkeit, Mittelmäßigkeit, Langweiligkeit, Faulheit, Herbst, Vergänglichkeit, Verdorbenheit reneerhyner.com
peets.com
mamalion.com
toffifee.de
Weiß Reinheit, Unschuld, Sauberkeit, Klarheit, Leichtigkeit, Ordnung, Aktualität, Perfektion, Modernität, Funktionalität, Wahrheit, Güte, Vollkommenheit, Ehrlichkeit, Sterilität
  • in der Politik: Konterrevolution, Antikommunismus
  • bei Katholiken/Israeliten: Heiligkeit
  • Asien (besonders China): Trauer,Tod
  • als Symbolfarbe: Friedenssymbol (weiße Taube, weiße Flagge)
shiseido.de
apple.com
perlweiss.de
billhicks.com
Grau Neutralität, Nüchternheit, Theorie, Eleganz, Sachlichkeit, Technologie, Bescheidenheit, Angepasstheit, Unsicherheit, Einsamkeit, Mittelmaß, Heimlichkeit, Alter, Elend, Tristess safaris-botswana.com
macromedia.com
cmart.design.ru
audi.com
Schwarz Eleganz, Würde, Mächtigkeit, Schwere, Nacht, Einsamkeit, Leere, Geheimnis, Verbot, Magie, Bosheit, Brutalität, Abweisung, Negation, Egoismus, Melancholie, Trauer, Tod
  • in der Politik: Reformation, Konservatismus, Anarchismus
  • in der Katholischen Kirche: orthodox, Trauerfarbe, Anarchie, Leere
bulgari.com
rotkaeppchen.de
afri-cola.de
bauhaus.de
Tabelle mit Farben, Emotionen bzw Assoziationen und Beispielen

3. Farbgestaltung von Client-Oberflächen
"Farben werden dann sinnvoll eingesetzt, wenn sie die Aussage einer Gestaltung unterstützen. Dabei kommt es auf ein Zusammenwirken zwischen Farbe und Form an. Die gewählten Farbzusammenstellungen sollten für das Auge des Betrachters angenehm sein und seine Aufmerksamkeit anziehen. Als Gestaltungsmittel stehen uns dafür Farbharmonien, Farbkontraste und Farbklänge zur Verfügung. Darüber hinaus ist die Gestaltung mit Farben eine Geschmacksfrage, für die es keine verbindlichen Regeln gibt."[Quelle: IPSI FHG]

3.1. Farbe und Form
Farbe und Form gehören zusammen. In unserer physikalischen Welt ist Farbe, abgesehen von farbigem Licht, ohne Form nicht denkbar. Und im praktischen Alltagsleben ist in der Regel zuerst eine Form da, die dann mit Farbe behandelt wird. Im idealfall wirken somit Farbe und Form zusammen. Die Farbgebung unterstützt die Form und bringt sie besonders gut zur Geltung. Ein besonders gutes Beispiel hierfür wäre zum Beispiel ein "run" und "stop" Button einer grafischen Oberfläche. Allein, ohne Farbe würde er nur schwer zur Geltung kommen. Doch durch Einfärben gewohnter Farben wie grün und rot erkennt man schneller die Bedeutung. Dadurch steigert man Usability und die Geschwindigkeit in der ein Anwender die gesamte Anwendung überschauen kann (bei komplexeren Oberflächen). Aber auch hier gilt das Sprichwort: "Weniger ist oft mehr". Es bringt keine Vorteile wenn ein Programmierer/Designer jeden Button und jedes Element gleichzeitig aufblinken lässt. Das kann eine Unüberschaubarkeit der Anwendung zur Folge haben und erheblich die Usability der Oberfläche einschränken. Farbe und Form bedingen sich also, eins ist ohne das andere undenkbar und wenn sie zusammenwirken, bilden sie eine harmonische Einheit. Das beste Beispiel dafür bietet die Natur. Betrachten wir die Farben und Formen der Natur, dann stellen wir fest, daß sie optimal aufeinander abgestimmt sind. Und bei genauerem Hinsehen können wir erkennen, daß die Schöpfung mit den uns bekannten Gestaltungsmitteln arbeitet, nämlich mit Farbharmonien, Farbkontrasten und Farbklängen.

4. Einsatz von Farben im World Wide Web
Der Einsatz von Farben im Web ist allgegenwärtig. Im Web wird heute ein großer Fokus auf das Farbschema der Darstellung gelegt. Da eine Webseite zumeist gleichzeitig eine Repräsentation einer Firma ist, spielt die Farbgebung eine große Rolle. Es wäre zum Beispiel unanbebracht wenn eine Business-EDV-Firma sich auf ihrer Webseite schwarz präsentiert. Das würde eher den falschen Anschein einer "Underground-Hacker" Firma wiederspiegeln.
Um im Web Farben und Schematas von Farben verwenden zu können bedient man sich häufig dem Cascading Style Sheed (nachfolgend CSS genannt). CSS gilt heutzutage als die Standard-Stylesheetsprache für das Web. Sie ermöglicht dabei die Darstellung von Dokumenten. Hierzu werden Elemente aus XML oder HTML, welche gleich dargestellt werden sollen, zu Klassen zusammengefasst. Anschließend wird mit Hilfe von CSS Konstrukten bestimmt wie diese Ansammlung ausehen soll.
Um Farben zu nutzen muss man die gewünschte Farbe im CSS Code eingeben. Dies ist auf zweierlei Arten möglich. Zum einen gibt es das Hexadezimalformat. Hierbei wird die Farbe durch eine sechstellige Hexadezimal-Zahl mit vorangestelltem #-Zeichen dargestellt. Dabei bezeichnen je zwei Ziffern die Intensität der drei Farbkanäle Rot, Grün und Blau in dieser Reihenfolge. Darüber hinaus gibt es auch ein kurzes Hexadezimalformat, bei dem jeder Farbkanal nur durch eine Stelle dargestellt wird. Hellrot (#FF9999) kann somit auch als #F99 dargestellt werden und ein Gelbgrün #AAFF33 als #AF3.
Eine weitere Möglichkeit besteht durch die Angabe von Standardisierte Farbnamen. Dabei unterscheidet man zwischen dem HTML 4 / VGA Standart (Farbtalle) und dem CSS 3 Standart (Farbtalle).

    Beispiel:


HTML Code des Elementes ''p'' und ''ul''. Hier wurde eine Klasse angelegt mit Namen ''note''.


Mittels CSS Attributen werden alle Klassenelemente beeinflusst.

Dies ist ein kleiner Testabsatz. Dies ist ein kleiner Testabsatz. ...

  • ListeNr. 1
  • ListeNr. 2
  • ListeNr. 3
Ansicht der beiden unterschiedlichen HTML Elemente.

Für ausführlichere Anwendungen und Beispiele im Ungang mit CSS sei an dieser Stelle auf SelfHTML/CSS verwiesen.

4.1. CSS und HTML Elemente
Wie oben gezeigt, lassen sich mittels CSS einfach und schnell HTML Elemente formatieren. Nun ist es auch vorstellbar, dass man nicht nur eine reine HTML Seite ansprechend "designed". Natürlich gilt das auch für Seiten, welche eine Business Logik dahinter haben. In welcher Sprache diese Logik existiert ist dabei "design-technisch" nicht von Bedeutung. Um nun die Logik auszulösen oder zu steuern stellt HTML verschiedene Komponenten bereit, auf die man mittels CSS bezug nehmen kann. Dabei handelt es sich um folgende:

ein Button (Schaltfläche)
ein Textfield (einzeiliges Eingabefeld)
ein Textarea (mehrzeiliges Editorfeld)
ein Radiobutton
eine Checkbox
eine Combobox (Auswahlliste)


5. Einsatz von Farben bei Stand-Alone-Applikationen
6. Quellen
http://de.wikipedia.org/wiki/Farbe
http://de.wikipedia.org/wiki/Design
http://de.wikipedia.org/wiki/Farbtabellen_im_Internet
http://de.wikipedia.org/wiki/Cascading_Style_Sheets
http://de.wikipedia.org/wiki/W3C
http://www.ipsi.fraunhofer.de/%7Ecrueger/farbe/farb-gest.html
http://www.ipsi.fraunhofer.de/%7Ecrueger/farbe/form.html
http://www.ipsi.fraunhofer.de/%7Ecrueger/farbe/farb-harm.html
http://help.adobe.com/de_DE/Illustrator/13.0/help.html?content=WS714a382cdf7d304e7e07d0100196cbc5f-6288.html
http://wellstyled.com/tools/colorscheme2/index-en.html
http://wellstyled.com/tools/colorscheme/index-en.html