Far­ben im Web­de­sign smart und mit Sys­tem ein­set­zen

Far­ben spie­len in unse­rer Wahr­neh­mung eine wich­tige Rolle. Sie wir­ken sowohl auf Kör­per als auch Psy­che und haben direk­ten Ein­fluss auf unser Wohl­be­fin­den. 1903 erhielt PROF. NIELS FINSEN den Nobel­preis für Medi­zin für seine For­schung im Bereich der Licht­the­ra­pie, weil er nach­wei­sen konnte, dass Far­ben unab­hän­gige Ener­gien sind und Farb­schwin­gun­gen unter­schied­li­che REAK­TIO­NEN DES MENSCH­LI­CHEN KÖR­PERS UND DER PSY­CHE BEWIR­KEN. Auch GOE­THE setzte das Har­mo­nie­ge­setz der Töne dem der Far­ben gleich. Far­ben lösen bei den Betrach­tern Gefühle, Asso­zia­tio­nen und unbe­wuss­ten Reak­tio­nen aus. Jeder Farbe wird eine eigene Sym­bo­lik zuge­schrie­ben, die für die meis­ten Men­schen Gül­tig­keit hat.

Was ist Farbe und wie funk­tio­niert sie?

Phy­si­ka­lisch kam man ihr auf den Grund als Isaak New­ton 1676 wei­ßes Son­nen­licht mit­hilfe eines Pris­mas in seine Ein­zel­teile zer­legte, den soge­nann­ten SPEK­TRAL­FAR­BEN und damit zeigte, dass Kör­per­far­ben durch das Aus­fil­tern unter­schied­lich lan­ger Licht­wel­len ent­ste­hen. Schon Johan­nes Itten, Bau­haus-Meis­ter, Künst­ler und Farb­theo­re­ti­ker, beschrieb in sei­nem Werk “Kunst der Farbe” bein­dru­ckend, wie stark Farb­wir­kung unsere (psycho-phy­si­sche) Wirk­lich­keit bein­flu­ßen kann. In sei­ner Theo­rie erhält Farbe erst in Wech­sel­wir­kung zu einer oder ande­ren Far­ben ihren Wert. Die grund­le­gen­den Wir­kungs­wei­sen von Far­ben nennt man die 7 FARB­KON­TRASTE, die auf den FARB­KREIS VON ITTEN auf­bauen:
Farbkreis von Johannes Itten
Der Farb­kreis von Johan­nes Itten mit den Pri­mär­far­ben (innen), Sekun­där­far­ben (Mitte) und Ter­ti­är­far­ben (Außen)
Far­ben­paare, die durch das Drei­eck, Vier­eck und Qua­drat ver­bun­den sind, gel­ten als har­mo­nisch.
WECH­SEL­WIR­KUNG UND KON­TRASTE
Farbe-an-sich-Kontrast
Farbe-an-sich-Kon­trast = Skala rei­ner, unge­bro­che­ner Far­ben
Hell-Dunkel-Kontrast
Hell-Dun­kel-Kon­trast = Skala hel­ler und dunk­ler Ton­stu­fen
Kalt-Warm-Kontrast
Kalt-Warm-Kon­trast = Skala unter­schied­li­cher Farb-Tem­pe­ra­tur­stu­fen
Komplementärkontrast
Kom­ple­men­tär-Kon­trast = Skala ent­ge­gen­ge­set­zer Farb­kreis-Far­ben
Simultankontrast
Simul­tan-Kon­trast = Skala aus rei­ner Farbe und auf Grau “ent­ste­hen­der” Kom­ple­men­tär­farbe
Qualitätskontrast
Qua­li­täts-Kon­trast = Skala unter­schied­lich rei­ner und gesät­tig­ter Far­ben
Quantitätskontrast
Quan­ti­täts-Kon­trast = Far­ben im Grö­ßen­ver­hält­nis nach “Farb­stärke”

DER EIMER iST ROT, WEIL ER MOLE­KU­LAR ALLE LICHT­WEL­LEN AUS­SER DEN ROTEN ABSOR­BIERT (650-800 nm).

FARB­PRIN­ZI­PIEN IM WEB­DE­SIGN

Neben der impres­si­ven, expres­si­ven und sym­bo­li­schen Wir­kung von Farbe im All­tag erwei­tert sich ihre Auf­gabe im digi­ta­len Ein­satz. Als fun­da­men­ta­les Werk­zeug in der Umset­zung von App- und Web­site­ober­flä­chen liegt ihre Funk­tion in der Visua­li­sie­rung von HIER­AR­CHIEN, INTER­AK­TION, INFOR­MA­TION und MAR­KEN­WELT. Diese vier Prin­zi­pien die­nen als Grund­lage für den visu­ell-struk­tu­rier­ten Ein­satz von Farb­pal­let­ten, -sche­mas und -hier­ar­chien.
HIER­AR­CHIEN
Farbe unter­stützt Struk­tur und opti­sche Gewich­tung.
INTER­AK­TION
Farbe ist opti­sche Navi­ga­ti­ons­hilfe und Signal­ge­ber.
INFOR­MA­TION
Farbe erhöht den Trans­fer von Inhal­ten durch Text-Kon­trast.
MAR­KEN­WELT
Farbe syn­chro­ni­siert Marke und Nut­zer­um­feld.

Erstel­lung eines Farb­sche­mas

Liegt nicht schon der “Cor­po­rate Sty­le­guide” mit Vor­ga­ben an die Farb­ge­stal­tung auf dem Tisch, muss im Kon­text und pas­send zur Marke oder Pro­dukt­li­nie ein Farb­schema auf­ge­baut wer­den. Das Farb­schema unter­teilt sich in Grup­pen der PRI­MÄR-, SEKUN­DÄR-, FLÄ­CHEN- und SON­DER­FARBE.
  1. PRI­MÄR­FARBE

    Die Pri­mär­farbe legt den farb­li­chen Schwer­punkt und ist die Farbe, die am häu­figs­ten im Lay­out und den Kom­po­nen­ten ein­ge­setzt wird. Neben der PRI­MÄR­FARBE (Pri­mary Key­co­lor) soll­ten für einen bes­se­ren Kon­trast zwi­schen UI-Ele­men­ten helle oder dunkle VARI­AN­TEN DER PRI­MÄR­FARBE (Pri­mary Vari­ants) ver­wen­det wer­den. Zusätz­lich zu der Pri­mär­farbe benö­tigt man eine pas­sende DECK­FARBE (On-Pri­mary) für alle Ele­mente, die sich auf der Pri­mär­farbe befin­den, z.B. Text oder Icons.

  2. SEKUN­DÄR­FARBE

    Die Sekun­där­farbe erwei­tert gestal­te­ri­sche und struk­tu­rie­rende Mög­lich­kei­ten, um Module her­vor­zu­he­ben und zu unter­schei­den. Die Ver­wen­dung der Sekun­där­farbe ist optio­nal und sollte spar­sam in einem aus­ge­wo­ge­nem Ver­hält­nis zu der Pri­mär­farbe ein­ge­setzt wer­den, um bestimmte Teile Ihrer Benut­zer­ober­flä­che zu beto­nen. Die Sekun­där­farbe eig­net sich z.B. für Aus­wahl­bo­xen, Rei­ter Reg­ler und Schal­ter oder text­li­cher Dar­stel­lung von Links und zweit­ran­gi­gen Über­schrif­ten. Auch sie gibt es mit VARI­AN­TEN (Secon­dary Vari­ants) und DECK­FAR­BEN (On-Secon­dary).

  3. FLÄ­CHEN­FARBE

    Wäh­rend Hin­ter­gründe von Anwen­dun­gen oder Web­sites in der Regel glo­bal ange­legt wer­den, defi­niert die FLÄ­CHEN­FARBE (Sur­face) den Con­tai­ner, in dem sich Ele­mente oder Module befin­den. Auf­gabe der Flä­chen­farbe ist es, sich vom Hin­ter­grund abzu­he­ben und optisch-struk­tu­rell Berei­che von ande­rem abzu­gren­zen. Flä­chen­far­ben hal­ten sich im Hin­ter­grund und haben in der Regel auch keine mar­ken­re­le­vante Bedeu­tung. Auch sie wird in VARI­AN­TEN (key, dim, bright) ange­legt.

  4. SON­DER­FARBE

    Bei feh­len­der oder erfor­der­li­cher Inter­ak­tion, Hin­wei­sen und Resul­ta­ten sind Far­ben, die sich vom Schema unter­schei­den, essen­ti­ell, um sicher­zu­stel­len, dass ent­spre­chende Ele­mente in kei­nem Fall über­se­hen wer­den. Son­der­far­ben soll­ten in den Abstu­fun­gen AUF­FOR­DE­RUNG (alert), HIN­WEIS (con­sider) und MIT­TEI­LUNG (info).

Beispiel für den Einsatz von Primär-, Sekundär- und Flächenfarbe
Pri­mär­farbe
Pri­mär­farbe
Pri­mär-Deck­farbe
Pri­mär-Vari­ante
Sekun­där­farbe
Pri­mär­va­ri­ante
Flä­chen­farbe
Sekun­där­va­ri­ante

AUF­BAU DER FARB­GRUP­PEN

Bevor man die ein­zel­nen Farb­grup­pen defi­niert, muss die Schlüs­sel­farbe bzw. die pri­märe Haupt­farbe bestimmt wer­den. Das kann in funk­tio­na­ler Anleh­nung an das bestehende MAR­KEN­BILD, einer sinn­lich-emo­tio­nal DEFI­NI­TION, einer bestimm­ten SYM­BO­LIK oder expres­si­ven WIR­KUNG auf den Betrach­ter erfol­gen. Die Bestim­mung der Pri­mär­farbe ohne Kon­text ist schwie­rig und erfor­dert viel Vor­stel­lungs­kraft - leich­ter wird es, wenn für die Pri­mär­farbe eine “Rich­tung” bestimmt und mit Hilfe eines Farb­ras­ters um sie herum auf­baut wird. Alter­na­tiv eig­nen sich auch Gene­ra­to­ren wie Adobe Color Wheel, Color Hunt, Huem­int oder Coo­lors Palette...
 
In unse­rem Bei­spiel haben wir uns für ein sat­tes INDIGO als Pri­mär­farbe und einem strah­len­den TÜR­KIS als Sekun­där­farbe ent­schie­den. Beide gel­ten als “kalte” Far­ben, die aber durch ihre unter­schied­li­che Hel­lig­keit einen auf­fäl­li­gen Kon­trast bil­den. Als Hin­ter­grund- bzw. Flä­chen­farbe kom­bi­nie­ren wir beide Töne mit einem neu­tra­len Sand­ton. Um die Farb­grup­pen zu ver­voll­stän­di­gen, bil­den wir je EINE DUNKLE UND ZWEI HELLE VARI­AN­TEN für Pri­mär- und Sekun­där­farbe und eine Hell-dun­kel-Vari­ante für die Flä­chen­farbe. Für alle Ele­mente, wie Gra­fik und Schrift, die auf unse­ren, neuen Haupt­far­ben lie­gen, muss als letz­ter Schritt noch die DECK­FARBE bestimmt wer­den.

FAR­BEN UND DECK­FAR­BEN DER PRI­MÄR­GRUPPE

Pri­mär­va­ri­ante (dun­kel)
#3700B3

Pri­mär­farbe (key color)
#6200EE

Pri­mär­va­ri­ante (mit­tel)
#985EFF

Pri­mär­va­ri­ante (hell)
#DBB2FF

P

Deck­farbe (on-pri­mary)
#FFFFFF

P

Deck­farbe (on-pri­mary)
#3700B3

FAR­BEN UND DECK­FAR­BEN DER SEKUN­DÄR­GRUPPE

Sekun­där­va­ri­ante (dun­kel)
#019592

Sekun­där­farbe (key color)
#03DAC5

Sekun­där­va­ri­ante (mit­tel)
#70EFDE

Sekun­där­va­ri­ante (hell)
#C8FFF4

S

Deck­farbe (on-secon­dary)
#FFFFFF

S

Deck­farbe (on-secon­dary)
#3700B3

FLÄ­CHEN­FARBE UND VARI­AN­TEN

Flä­chen­va­ri­ante (dun­kel)
B1AE91

Flä­chen­farbe (key)
#C8C6AF

Flä­chen­va­ri­ante (hell)
#F0EAE1

Nach­dem das FARB­SCHEMA auf­ge­baut ist, geht es an die Über­tra­gung der Farb­re­geln auf die Ober­flä­chen bzw. dem Web­de­sign. Idea­ler­weise ver­wen­det man als erste “Farb­skizze” das zuvor ange­legte Wire­frame, um die ein­zel­nen Sek­to­ren den Farb­grup­pen zuz­ord­nen. Wer über die nötige Übung und Erfah­rung ver­fügt, kann natür­lich direkt mit einem sta­ti­schen Design oder Pro­to­ty­pen durch­star­ten.

FAZIT

Wer die Bedeu­tung und Wir­kung von Farbe kennt, schafft es, emo­tio­nale Wel­ten zu gestal­ten, die, aus Sicht des Betrach­ters, har­mo­nisch im Kon­text zum Inhalt ste­hen. Smart ein­ge­setzte Farb-Kon­traste ver­bes­sern nicht nur die Nutz­bar­keit, son­dern geben der Gestal­tung eine visu­elle Struk­tur und eine Bin­dung zur Mar­ken­welt.. Abge­se­hen die­ser Regel­werke: Farbe macht happy! (Q.E.D.)

Face­book
XING
Lin­ke­dIn
War die­ser Bei­trag hilf­reich?
Wir unter­stüt­zen Sie gerne bei Ihrem nächs­ten Projekt. Von der Kon­zep­tion bis zum Design oder der voll­stän­di­gen Ent­wick­lung einer Web­site.
SAG’
HALLO!
Impressum

//

Datenschutz
PROJEKTANFRAGE
Super, Sie haben bei Ihrem Projekt an uns gedacht. Vielen Dank! Beschreiben Sie kurz, worum es geht, damit wir ein gutes Feedback geben können. Wir melden uns in Kürze zurück. Bis bald!
Von Ihnen im Formular eingegebene Daten speichern und verwenden wir ausschließlich zur Bearbeitung Ihrer Anfrage. Ihre Daten werden verschlüsselt übermittelt. Wir verarbeiten Ihre personenbezogenen Daten im Einklang mit unserer Datenschutzerklärung.

DANKE.

Wir haben ihre Anfrage erhalten und melden uns umgehend.