Farbmuster für Websites

FarbklangFarbeinsatz ist der schönste- aber auch schwierigste Part beim Entwurf von Websites. Wir empfinden Farben unmittelbar. Die Gefühle bei Betrachtung sind schwer zu versachlichen. Farbe wirkt immer mit psychologisch, und physiologisch. Da diese Wirkung im Vordergrund steht, kann man umge­kehrt als Designer rein logisch nur müh­sam har­monische Farb­klänge zu­sammen­­stel­len. Wenn man gewisse Prinzipien heranzieht, kann man sich den Vorgang zur Auswahl passender Farben er­leich­tern. Hier stelle ich folgend an Beispielen Farb­kompo­sitionen vor. Hilfreich ist wie immer ein gewisses »Gefühl für die Sache«, denn selbst das beste Rezept garantiert nicht den Erfolg!

Übersicht über bekannte Farbordnungen

Im Grunde kann man 6 verschiedene Farbprinzipien unterscheiden (es existieren mehr, aber das reicht zur Einführung). Diese beruhen auf Erfassung und Ordnung der Farben im Farbkreis.

  • monochromatisch
  • analog
  • komplementär
  • komplementär gesplittet
  • drei- und vierfach zum Farbenklang geordnet

Monochromatisch

Diese einfach umzusetzende Variante nutzt die Variationen (durch Schattierung, Aufhellung usw.) eines Grundfarbtones. Komplette Websites verwenden Monochromatik selten, da sie recht zurück­haltend wirkt, teilweise spannungs­arm und lang­weilig. Allerdings entstehen immer akzeptable Farb­har­monien. Denken Sie über den Einsatz einer Kontrastfarbe (vergl. folgende Beispiele) nach. Damit gewinnt die Site mehr Lebendigkeit.

Marshall Headphones mit extremen Hardrock-Kontrasten, fast monoton, aber absolut passend zum CD dieser Firma.

Weave ist eine App für iPhone. Die entsprechende Mikrosite kommt durch das mono­chro­ma­tische Blaugrau zurückhaltend sachlich daher. Alle Seitenelemente sind super durchdesigned. Die Farb­kombi­nation braucht allerdings ein paar auffrischende Extras.

FreeTime

Alle Briefe an den Santa Claus sind hier folgend abzugeben. Zu­rück­haltende Farbkontraste (z.B. mit goldbrauner Headline) stärken in Zusammenspiel mit großartig gewählter Typografie den alter­tüm­lichen Gesamteindruck.

santaclause

Full Cream Milk: sieht alles nach Milchhandel aus. Minimale Farbakzente durch verschieden farbige Deckel der Milchflaschen beleben einigermaßen.

fullcreammilkbirmingham

Analoge Farben

Wenn Sie analoge Farben verwenden, können Sie ungewöhnliche Ergebnisse erwarten. Jede Farbe des Farbenkreises hat zwei Nachbarfarbtöne links und rechts. Stellen Sie sich den Farbkreis vor: die Farben sind regenbogenartig aufgefächert. Rot hat auf der einen Seite Orange–, auf der anderen Gelb als Nachbarn. Eine analoge Farbkombination enthielte also Rot, Orange, Gelb.

Folgend haben wir ein Beispiel, wo diese Töne ungefähr abgeleitet vom Banner (Sonnen­unter­gang) verwendet werden. Sieht ok. aus, braucht aber wie oben gewisse Verbesserung. Ich glaube, die Verwendung von Grautönen könnte die etwas harten Kontraste, das Bunte mindern. Sehen Sie die erste Textbox, das passt. Im gesamten Auftritt helfen weitere anthrazitfarbene Boxen zur Dämpfung.

Analoge Farbkombi

Das folgende gelungene Beispiel zeigt die Verwendung eines von Grün ausgehenden Farb­klanges. Die blauen Artikel stehen im Kontrast mit dem hinterlegtem Farbschwung. Der weisse Hintergrund hebt allzu große Farbspannungen der Site auf.

Komplementär

Die im Farbenkreis gegenüber liegenden Farben haben komplementäre Eigenschaft. Laut Theorie ergänzen sich die Farben, in der Praxis bilden sich Kontraste, die mit Vorsicht behandelt werden sollten. Im nächsten Beispiel ist diese Vorsicht bedacht. Rot-Grün führt zu starkem Widerstreit, welcher hier durch leichtes Brechen der Farben sowie Einbetten der Farben in Schwarzraum gelöst wurde.


Im folgenden Beispiel hat sich der Gestalter an eine harte Nuss gewagt: komplementäres Rot und Grün werden vereint. Rot und Grün »flimmern«, wenn sie zu nahe geraten. Deswegen wird hier ein gebro­che­nes Rot gewählt. Viel Weissraum lässt den Farben Luft zum Atmen. Hellste Grünflächen werden zum Fond. Ein »weiches« Foto lockert auf und bringt Wärme auf die Site.

Portfolio Vlourenco

Komplementär gesplittet

Komplementär aufgebaute Farbgebung lässt sich mühsam ins Gleichgewicht bringen. Deswegen wird der Zeiger, der auf eine komplementäre Farbe des Farbkreises verweist, gesplittet. So haben wir unproblematische Farbfelder zur Verfügung.
Folgend finden sich gesplittete Farben des Komplementärpaares Rot-Grün zusammen. Rot wird gesplittet genutzt zu Orange/Beige/Braun und Grün bildet in diversen Gelbnuancen den Fond. Wieder wird für den gesamten Seitenbereich geschickt Weissraum genutzt, der durch die Icons und Farbkontraste nötig erscheint (siehe Gestalttheorie).

skolaskalice-cz

Der Zoo in Berlin nutzt eine gesplittete Farbgebung zur Verbesserung der Usability. Aus dem Gegen­satz­paar Orange-Blau wird mit Splittung Orange-Cyan/Grün. Der graue Hintergrund könnte die Farben zum Leuchten bringen. Der Verlauf erzeugt eine neutrale technische Stimmung. Die enthaltene Stadtsilhouette bricht die Freundlichkeit der Farben. Kommt hier die Grundstimmung von Berlin zum Vorschein?

Farbenklänge

Die Verwendung von Farbenklängen mit 3 oder 4 Hauptfarben bieten die meisten Möglichkeiten, verlangen aber auch sensible Abstimmung aller beteiligten Elemente. Farbe wirkt immer irgendwie. Laien versuchen dann über pure Quantität zu punkten. Reine, ungebrochene Farben werden neben­einander gestellt und erzeugen einen billigen Effekt von Buntheit.

Hier werden drei Farben benutzt und geschickt variiert. Zum Magenta gesellt sich ein Violett, zum Orange ein Honiggelb zum Blau diverse Abstufungen mit Grün- und Weissbeigaben. Das ganze ist äusserst gewagt und hinterlässt aufgrund der Besonderheit einen zwiespältigen Eindruck.

Im Folgenden wirken die Kontraste nicht so polarisierend, obwohl 04 Farben verwendet wurden. Geschickt wird über Weissraumsetzung und Strukturisierung der Hintergründe die Farbkraft zurück­genommen und über die Farbmengenverteilung ausgewogen präsentiert. 

Comments are closed.

QR Code Business Card