Spaces. Smartes Cloud Hosting für anspruchsvolle Webprojekte. Loslegen und Spaces testen. Von Mittwald.
Julia Blake 1. Juni 2014

Elegant oder langweilig? Die Farbe Grau im Website-Design

Wussten Sie, dass das mensch­li­che Auge in der Lage ist, rund 500 Schattierungen der Farbe Grau zu unter­schei­den? Dabei liegt die Grauzone genau zwi­schen den bei­den Nichtfarben Weiß und Schwarz. Je dunk­ler der Grauton, des­to näher am Schwarz, je hel­ler, des­to näher am Weiß ist er ange­sie­delt. Je nach Schattierungen wur­de Grau schon immer mit diver­sen Stimmungen in Verbindung gebracht. Helle Schattierungen von Grau sind sehr neu­tral, gut für das Hintergrund-Design geeig­net. Helles Grau erzeugt kei­ne nega­ti­ven Gefühle, wirkt sogar bis­wei­len kalt und gefühl­los. Dunkles Grau hin­ge­gen ver­mit­telt star­ke Gefühle. Trauer, Depression, Ausweglosigkeit – Wann immer jemand eine extrem nega­ti­ve Situation insze­nie­ren will, wird er auf sehr dunk­le Grautöne set­zen. Dabei ist es gera­de die Vielseitigkeit der Graupalette, die es berech­tigt erschei­nen lässt, hier von der­je­ni­gen Farbe zu spre­chen, die am uni­ver­sells­ten und unvor­her­seh­bars­ten ein­setz­bar ist.

Elegant Gray Cat
Elegante graue Katze

Die verschiedenen Wahrnehmungen von Grau

Natürlich gib es wei­te­re Stereotype. Grau ist die Farbe der Business-Kasper, jener sich mit Anzügen uni­for­mie­ren­den Kaste der Besserverdiener. Blaue Anzüge wer­den auch noch akzep­tiert, aber grau ist da schon sehr weit vor­ne. So ist es kein Wunder, dass der geneig­te Betrachter die Farbe GRau gern auch mit Formalismen und Langeweile ver­bin­det.

Während also man­che die Farbe Grau mit Langeweile und Gefühllosigkeit asso­zi­ie­ren, emp­fin­den ande­re, allen vor­an die genann­ten Anzugträger, sie als hoch­ele­gant. In der Tat dür­fen Anzüge wohl als eta­blier­te Kleidungsstücke gewis­ser Eleganz in den ent­spre­chen­den Kreisen gel­ten.

Boring Gray Landscape?
Langweilige graue Landschaft?

Es ist ja nicht neu, Farben sind extrem wich­tig im Webdesign und kön­nen, falsch ein­ge­setzt, Ihr nächs­ten Projekt kom­plett zer­stö­ren. So ist es kein Wunder, dass Grau als poten­ti­ell neu­tra­le Farbe gern für das Design von Websites ver­wen­det wird. Mindestens in der Form der Akzentuierung kön­nen graue Elemente fast jedes Webdesign auf­wer­ten und ihm Klasse ver­lei­hen.

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

  • Grau als Hintergrundfarbe ist unauf­dring­lich. Stattdessen unter­streicht der rich­ti­ge Grauton die eigent­li­che Botschaft des Designs.
  • Grau ist gut geeig­net für Navigationsmenüs. Mit Bildern kom­bi­niert, kön­nen Sie so eine ele­gan­te UI schaf­fen. Auch beliebt ist grau als Hintergrund für Suchboxen.
  • Verschiedene geo­me­tri­sche Formen struk­tu­rie­ren eine Website und sind dabei häu­fig in grau­er Farbe umge­setzt. So wer­den sie zwar wahr­ge­nom­men, wir­ken aber nicht domi­nant.
  • Graue Schriften, was hal­ten Sie davon? Kombiniert mit Pink spre­chen Sie Frauen an, kom­bi­niert mit grü­nen oder blau­en Akzenten errei­chen Sie die Herren der Schöpfung.

Nun las­sen Sie uns gemein­sam ein paar Dutzend Beispiele anschau­en. Es han­delt sich um mei­ne Favoriten zum Thema. Vielleicht fin­den Sie ja eben­so­viel Inspiration wie ich:

Jay Fram: Profi-Fotograf

Jay Fram Web Design

Tyler Copeland: Designer

Tyler Copeland Website

Monday Music: Musik ent­de­cken

Monday Music Website

Trust Reviews: Bewertungsdienst

Trust Reviews Website

Heartbeat: Ladenausstatter

Retail Store Website

H Furniture: unge­wöhn­li­che Möbel

H Furniture Website

PFD: Design-Agentur

PFD Web Design

Bird Boutique: exklu­siv Shoppen

Bird Boutique Website

One Space Media: Agentur für digi­ta­le Medien

One Space Media Website

Sunaj Official Store

Sunaj Website Design

Strekstore: unge­wöhn­li­che Items, ana­log und digi­tal

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 digi­ta­le 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: hand­ge­fer­tig­te 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 han­deln­der Stoffladen

Ink & Spindle Web Design

So weit, so gut. Haben wir was tol­les ver­ges­sen? Sagen Sie es uns in den Kommentaren.

(dpe)

Julia Blake

Julia Blake beschäftigt sich ganztägig mit Webdesign und ist Autorin vieler Artikel zum Thema. Neben dem Job interessiert sie sich für die Fotografie, reist gern und viel und lernt so etliche Sprachen dieser Welt. Derzeit arbeitet sie für MotoCMS, einem neuen Website-Builder und Theme-Anbieter.

2 Kommentare

  1. Grau ist cool oder auch nicht, es kommt auf den Einsatz an!
    Was für eine Website, was für eine Branche… wenn man z.B. Menus in Grau zei­gen wür­de, wür­de bei kei­nem das Wasser im Mund bei einem saf­ti­gen Steak zusam­men­lau­fen!

    —–stoo­nich

  2. Das Grau ist roh und stark, des­halb teil­wei­se vie­len alten Filmen so tief sind. :D

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert.