Kategorien
Inspiration Showcases

Elegant oder langweilig? Die Farbe Grau im Website-Design

Wussten Sie, dass das menschliche Auge in der Lage ist, rund 500 Schattierungen der Farbe Grau zu unterscheiden? Dabei liegt die Grauzone genau zwischen den beiden Nichtfarben Weiß und Schwarz. Je dunkler der Grauton, desto näher am Schwarz, je heller, desto näher am Weiß ist er angesiedelt. Je nach Schattierungen wurde Grau schon immer mit diversen Stimmungen in Verbindung gebracht. Helle Schattierungen von Grau sind sehr neutral, gut für das Hintergrund-Design geeignet. Helles Grau erzeugt keine negativen Gefühle, wirkt sogar bisweilen kalt und gefühllos. Dunkles Grau hingegen vermittelt starke Gefühle. Trauer, Depression, Ausweglosigkeit – Wann immer jemand eine extrem negative Situation inszenieren will, wird er auf sehr dunkle Grautöne setzen. Dabei ist es gerade die Vielseitigkeit der Graupalette, die es berechtigt erscheinen lässt, hier von derjenigen Farbe zu sprechen, die am universellsten und unvorhersehbarsten einsetzbar ist.

Elegant Gray Cat
Elegante graue Katze

Die verschiedenen Wahrnehmungen von Grau

Natürlich gib es weitere Stereotype. Grau ist die Farbe der Business-Kasper, jener sich mit Anzügen uniformierenden Kaste der Besserverdiener. Blaue Anzüge werden auch noch akzeptiert, aber grau ist da schon sehr weit vorne. So ist es kein Wunder, dass der geneigte Betrachter die Farbe GRau gern auch mit Formalismen und Langeweile verbindet.

Während also manche die Farbe Grau mit Langeweile und Gefühllosigkeit assoziieren, empfinden andere, allen voran die genannten Anzugträger, sie als hochelegant. In der Tat dürfen Anzüge wohl als etablierte Kleidungsstücke gewisser Eleganz in den entsprechenden Kreisen gelten.

Boring Gray Landscape?
Langweilige graue Landschaft?

Es ist ja nicht neu, Farben sind extrem wichtig im Webdesign und können, falsch eingesetzt, Ihr nächsten Projekt komplett zerstören. So ist es kein Wunder, dass Grau als potentiell neutrale Farbe gern für das Design von Websites verwendet wird. Mindestens in der Form der Akzentuierung können graue Elemente fast jedes Webdesign aufwerten und ihm Klasse verleihen.

Hier sind die Hauptgründe für den Einsatz von Grau:

  • Grau als Hintergrundfarbe ist unaufdringlich. Stattdessen unterstreicht der richtige Grauton die eigentliche Botschaft des Designs.
  • Grau ist gut geeignet für Navigationsmenüs. Mit Bildern kombiniert, können Sie so eine elegante UI schaffen. Auch beliebt ist grau als Hintergrund für Suchboxen.
  • Verschiedene geometrische Formen strukturieren eine Website und sind dabei häufig in grauer Farbe umgesetzt. So werden sie zwar wahrgenommen, wirken aber nicht dominant.
  • Graue Schriften, was halten Sie davon? Kombiniert mit Pink sprechen Sie Frauen an, kombiniert mit grünen oder blauen Akzenten erreichen Sie die Herren der Schöpfung.

Nun lassen Sie uns gemeinsam ein paar Dutzend Beispiele anschauen. Es handelt sich um meine Favoriten zum Thema. Vielleicht finden Sie ja ebensoviel Inspiration wie ich:

Jay Fram: Profi-Fotograf

Jay Fram Web Design

Tyler Copeland: Designer

Tyler Copeland Website

Monday Music: Musik entdecken

Monday Music Website

Trust Reviews: Bewertungsdienst

Trust Reviews Website

Heartbeat: Ladenausstatter

Retail Store Website

H Furniture: ungewöhnliche Möbel

H Furniture Website

PFD: Design-Agentur

PFD Web Design

Bird Boutique: exklusiv Shoppen

Bird Boutique Website

One Space Media: Agentur für digitale Medien

One Space Media Website

Sunaj Official Store

Sunaj Website Design

Strekstore: ungewöhnliche Items, analog und digital

Strecstore Website

Provekjore

Provekjore Web Design

Doris Research: Beratung für Designer

Doris Research Web Design

Tickera Ticketing System

Tickera Website

Capullo: Hairstylisten

Capullo Website

Uppercase: Agentur für digitale Medien

Uppercase Website

Tommy Graphics: Grafikdesigner und Fotograf

Tommy Graphics Site

Lee Jeans: Markenwebsite

Lee Jeans Site

Olaf Hussein: Noch eine Markenwebsite

Olaf Hussein Web Design

Authentic: Weinverkäufer

Wine Website

Michele Mazzucco: Markendesign

Michele Mazzucco Gray Site

Juicymo: App-Hersteller

Juicymo Site

Mike Seehagel: Fotograf

Mike Seehagel Portfolio

Photo Portfolio Website Design: Template für MotoCMS

Portfolio Web Design

Boggi Roeselare: Männermode

Boggi Roeselare Site

Graf von Faber Castell: Schreibutensilien

Graf von Faber Gray Site

Cereal Magazine

Cereal Magazine Gray Design

Bold & Noble: handgefertigte Produkte

Bold & Noble Gray Web Design

Allure: Architekten

Allure Architecture Site

Schneider Electric: Elektrogeräte

Schneider Electric Site

Masseria Gialli: Ferien-Resort

Masseria Gialli Site

Edge Magazine

Edge Magazine Gray Design

The Pragmatic Lab: Bildungseinrichtung

Pragmatic Lab Site

Arsova Salon: High-Society-Stylisten

Arsova Salon Site

Gray Designer’s Portfolio: WordPress-Theme

Design Portfolio Theme

Mega: Art-Director und Illustrator

Mega Illustrations Web Design

VROY Communications: Werbeagentur

VROY Website

Songes: Innenarchitekten

Interior Design Site

Anyi Lu Shoes: Markenwebsite

Shoes Brand Site

Crocon: Schiffsbauer

Crocon Site

Magnetic Zero: Interaktives Design und Entwicklung

Magnetic Zoo Website

The 2014 Lavazza Calendar Website

Lavazza 2014 Site

Herbal Bises: Naturkosmetik

Herbal Bises Web Design

Framelab: Grafik-Design + Direction

Framelab Site

Squad: Design-Agentur

Squad Design Site

Ink & Spindle: Fair handelnder Stoffladen

Ink & Spindle Web Design

So weit, so gut. Haben wir was tolles vergessen? Sagen Sie es uns in den Kommentaren.

(dpe)