9.8    Gelungener Farbeinsatz im Webdesign 

Farben haben eine enorme emotionale Wirkung. Sie können Aufmerksamkeit erzeugen, Inhalte vermitteln, Elemente visuell gruppieren und die Ästhetik verstärken. Farbe ist also ein wunderbares Gestaltungsmittel, das die gewünschte Aussage unmittelbar und unbewusst vermitteln kann. Unpassende Farben können allerdings inhaltliche Aussagen zerstören und den Betrachter verwirren.

Kein Screendesign kommt ohne Farbe aus. Der Webdesigner muss sich also der Farbwahl bewusst sein und sich aktiv Gedanken machen.

 

9.8.1    Farbe, Corporate Design & Identität 

Farben spielen in der Unternehmenskommunikation eine bedeutende Rolle, unabhängig davon, ob es sich um einen Selbstständigen, ein Kleinunternehmen oder einen Großkonzern handelt. Wir haben oben die verschiedenen Farbwirkungen gesehen und schon Beispiele von Unternehmen, die sich die Eigenschaften einzelner Farben zunutze gemacht haben. Denn der optische Auftritt eines Unternehmens, das visuelle Erscheinungsbild, meistens Corporate Design genannt, ist wichtig für die Imagebildung des Unternehmens.

»Es heißt: Bilder sagen mehr als tausend Worte. Wenn man so will, ist eine Fläche mit einer Farbe bereits ein Bild, das unzählige Assoziationen erzeugt. Insofern trifft diese Redewendung vor allem auch auf Farben zu.«
Achim Schaffrinna, Diplom-Designer, designtagebuch.de

Welche Bedeutung Farben für die Markenbildung, die Wiedererkennung, die Identität eines Unternehmens haben, lässt sich immer gut an den »großen« Unternehmen demonstrieren: Das erst vor einigen Jahren gegründete Unternehmen evonik.de (Abbildung 9.125) erreichte rasch Bekanntheit, natürlich vor allem durch entsprechende Werbemaßnahmen. Zur Wiedererkennung des Unternehmens oder, besser, der Marke trug nicht unwesentlich die Wahl der Farbe Violett bei. Ein markantes Unterscheidungsmerkmal.

Abbildung 9.125    evonik.de setzt zur Wiedererkennung auf ein starkes Farb- und markantes Unterscheidungsmerkmal: Violett.

Auch congstar.de (Abbildung 9.126) überließ die Farbwahl für sein Corporate Design nicht dem Zufall. Denn sich im Dschungel der Telekommunikationsanbieter (optisch) zu behaupten, ist alles andere als einfach. congstar.de gelingt das mit einem Farbe-an-sich-Kontrast zusammen mit tiefem Schwarz.

Abbildung 9.126    congstar.de überzeugt mit einem Farbe-an-sich-Kontrast zusammen mit tiefem Schwarz.

Firmenidentität durch Optik | Jedes Unternehmen, ob bewusst gesteuert oder nicht, ob gewollt oder nicht, vermittelt (potenziellen) Kunden eine Art Identität, ähnlich wie Menschen durch ihr Äußeres zwangsläufig eine Wirkung beim Gegenüber hervorrufen. Und die optische Erscheinung ist auch im Normalfall das Erste, was wir beim Menschen wahrnehmen, lange bevor wir sein Verhalten oder seine Sprache wahrnehmen. Dieser Prozess ist auf unsere Begegnung mit Unternehmen übertragbar. Bevor wir mit Mitarbeitern des Unternehmens sprechen, deren Produkte genauer betrachten, nehmen wir das optische Erscheinungsbild wahr. Das kann alles Mögliche sein – von der Visitenkarte über eine Zeitungsanzeige, die Autobeschriftung, Mitarbeiterkleidung bis eben zur Webseite.

Die Farben, die in der Unternehmenskommunikation eingesetzt werden, vermitteln uns bestimmte Eigenschaften und Stimmungen. Unbewusst erzeugen sie damit auch ein Image. Nicht allein, dazu gehören selbstverständlich auch noch andere Gestaltungselemente, aber die Farbwirkung ist sehr bedeutend, vor allem für den ersten Eindruck.

Das Corporate Design | Wenn es sich nicht gerade um eine Existenzgründung – neudeutsch »Start-up« – handelt, ist ein Farbschema meistens bereits festgelegt und sollte entsprechend beachtet bzw. eingesetzt werden. Je nachdem, wie intensiv man sich damit im Unternehmen beschäftigt hat, gibt es eventuell schon Corporate-Design-Vorgaben. Hier sind dann unter anderem schon exakte Farbwerte festgehalten. Denn diese Farben werden – oder, besser, sollten – konsequent in allen Marketing-Materialien benutzt werden, auch auf der unternehmenseigenen Webseite.

Anders sieht es bei Projekten für Existenzgründungen aus: Hier sind nur selten Unternehmensfarben vorgegeben. Umso wichtiger ist es, die Farben des Screendesigns sorgfältig auszuwählen. Nicht selten werden die Hauptfarben des Screendesigns dann nämlich zu den künftigen Unternehmensfarben gemacht.

Einheitlichkeit und Wiedererkennung | Durch den konsistenten Einsatz gleicher Farben in den verschiedenen Medien wird eine Wiedererkennung erreicht. Im Idealfall erkennt der Betrachter allein anhand der Farbe(n) das Unternehmen. Daraus entwickelt sich auch eine Art Vertrautheit. Was der Mensch (wieder)erkennt, findet er erst einmal angenehm. Er weiß, woran er ist, und muss sich nicht erst neu orientieren.

Je konsistenter ein Unternehmen sein Corporate Design umsetzt, umso eher kann es ein Image aufgrund des Corporate Designs vermitteln und aufbauen.

Farben im Screendesign | Auch wenn schon Farbvorgaben etwa durch ein vorhandenes Corporate Design existieren, müssen diese oft noch mit weiteren Farben ergänzt werden. Denn Screendesigns kommen selten mit drei Farben aus. Elemente wie der Hintergrund, Texte, verschiedene Überschriften, mehrere Navigationen, Links, Buttons etc. wollen schließlich alle farbig gestaltet werden. Daher sollten nicht nur zwei, drei Farben gewählt, sondern, von Fall zu Fall natürlich unterschiedlich, weitere »Ergänzungsfarben« ausgesucht werden.

Redesigns | Es kann natürlich die Fälle geben, dass Kunden die bisherigen Farben nicht benutzen möchten oder der Webdesigner es dem Kunden aus irgendwelchen Gründen ausredet. Eine Neugestaltung eines Screendesigns samt neuer Farbfindung bringt, wie fast alles, Chancen und Risiken mit sich. Da Farben eines der wirkungsvollsten und prägendsten Design-Instrumente sind, sollten sie mit großem Bedacht ausgewählt werden. Spätere Änderungen an den Farben sind kritisch zu sehen, wenn erst einmal entsprechende Kommunikationsmaßnahmen erfolgt sind. Anders als die Schriftarten oder auch die Bilder (die natürlich beide jeweils auch eine große Bedeutung haben) prägen Farben die Gesamtkommunikation entscheidend und nachhaltig.

 

9.8.2    Farbverläufe 

Eine Besonderheit innerhalb der Farben sind die Farbverläufe. Es gab Zeiten, da waren Verläufe in Designs verpönt: »Hat der Grafiker nix drauf, macht er schnell einen Verlauf.« Spätestens seit dem typischen Web 2.0-Stil (siehe Kapitel 13, »Webdesign-Stile und -Trends«), bei dem Logos und die Screendesigns mit Spiegelungen, Schatteneffekten und Verläufen versehen wurden, gehören Verläufe bei vielen Screendesigns dazu. Aber: Verlauf ist nicht gleich Verlauf!

Abbildung 9.127    Auch eine kreative Möglichkeit für einen Farbverlauf: innerhalb eines Hintergrundbildes wie bei thesnippetapp.com

Was ist das Besondere an einem Farbverlauf? | Die Hauptwirkung eines Verlaufs liegt vor allem in der dadurch entstehenden räumlichen Tiefe. Neben Texturen und Bildern bieten Verläufe damit eine großartige und vor allem recht einfach einzusetzende grafische Möglichkeit, Webdesigns eine, wenn auch kleine Haptik zu geben. Und diese Haptik sorgt mitentscheidend für die Wirkung des Webdesigns auf den Betrachter.

Abbildung 9.128    Die Hauptnavigation wird durch einen dezenten Blauverlauf sprichwörtlich »runder«. Es entsteht ein minimaler haptischer Eindruck.

Und dezente Verläufe finden sich auch in Navigationsleisten oder kleineren inhaltlichen Einheiten, die sich damit klarer von den anderen Inhalten abgrenzen können. Hier liegt die Verlaufsgestaltung im Detail, und gerade auf die Details kommt es ja oft an. Mit einem fast unmerklichen Einsatz von Verläufen, die sich zwischen zwei sehr ähnlichen Farbwerten vollziehen, lässt sich so eine dezente räumliche Tiefe erreichen. Das Webdesign wird so insgesamt etwas lebhafter, je nach Stärke des Verlaufs.

Abbildung 9.129    Verläufe machen sich auch in Icons gut. Recht simpel entsteht so ein 3D-Effekt wie bei culturedcode.com/things.

Farbverläufe lassen sich aber auch wesentlich markanter einsetzen, als Gestaltungsmittel, die das Design wesentlich prägen, als ästhetisch ansprechendes Stilmittel.

Abbildung 9.130    Statt dem Flat-Trend folgend, nur einfarbige Flächen einzusetzen, lässt es sich mit einem Verlauf im Hintergrund vom Rest abheben, so wie bei betex.de.

Leider verlaufen | Zwei Farben, die als Fläche nebeneinander harmonieren würden, müssen noch lange keinen schönen Verlauf ergeben! Sind die Verlaufsfarben zu weit auseinander im Farbton oder in der Helligkeit, entsteht ein markanter Verlauf, der im Gesamtdesign viel Aufmerksamkeit auf sich zieht. Oft zu viel und oft sieht der Verlauf dann auch ziemlich unharmonisch aus.

Verläufe in grafischen Elementen | Wenn es ein grafisches Element gibt, das seit Anbeginn des Internets von und mit Verläufen lebt, dann der Button! In den frühen Phasen des Screendesigns waren dafür keine Farbkombination und kein Effekt zu viel. Diese Buttons haben vor einigen Jahren eine Art Renaissance erfahren, die auch durch den Flat-Trend nicht aufgehört hat. Verläufe mit entsprechenden Schatteneffekten sind allgegenwärtig. Gerade für die sogenannten Call-to-Action-Buttons ist diese Art der Gestaltung fast unverzichtbar.

Abbildung 9.131    Sieht aus wie ein Verlaufsbutton aus den 90ern. Wie sich Design selbst bei so kleinen Dingen wie Buttons ändern kann …

Abbildung 9.132    Gar nicht so einfach, noch Buttons mit Verläufen zu finden, wo auf einmal alle »flat« sind. uploadify.com/demos bietet aber noch einige an.

Verläufe können ein hilfreiches Mittel bei der Gestaltung einzelner Elemente sein. Wie bei allen anderen Gestaltungsmitteln kommt es auf den gezielten Einsatz an.

Verläufe mit CSS3 | Jahrelang wurden Verläufe in Screendesigns mit oft nur 1 Pixel breiten Bildern umgesetzt. Diese wurden per background-image und einer repeat-x-Angabe definiert. Seit CSS3 gibt es nun die Möglichkeit, diese per background-image: gradient()-Angabe zu definieren. Mühseliges Ausschneiden der Bilder aus dem Bildbearbeitungsprogramm entfällt dadurch, und die Gestaltungsmöglichkeiten, gerade auch im Hinblick auf Responsive Webdesign, steigen. Und die Ladezeit wird es auch danken, wenn auf (Verlaufs)bilder verzichtet wird.

Folgender Code erzeugt einen Verlauf wie in Abbildung 9.133:

background: linear-gradient(#6cf7a1, #2744c4); 

Listing 9.4    Ein Farbverlauf wird erzeugt.

Abbildung 9.133    Ein einfacher Farbverlauf

Diese Angabe wird von den modernen Browsern (und ab IE > 9) unterstützt. Wer ältere Browser unterstützen will oder muss, sollte einige weitere Angaben hinzufügen, um einen Verlauf zu erzeugen:

/* Hintergrundfarbe, falls Verlauf nicht interpretiert wird */
background: #2744c4;
/* Für WebKit-Browser (Safari, Chrome, etc.) */
background: -webkit-linear-gradient(top, #6cf7a1, #2744c4);
/* Für Mozilla/Gecko-Browser (Firefox etc) */
background: -moz-linear-gradient(top, #6cf7a1, #2744c4);
/* Für Presto-Browser (Opera etc) */
background: -o-linear-gradient(top, #6cf7a1, #2744c4);
/* Ab Internet Explorer 10 */
background: -ms-linear-gradient(top, #6cf7a1, #fff);
/* aktuelle W3C */
background: linear-gradient(#6cf7a1, #2744c4);

Listing 9.5    Farbverlauf-Unterstützung älterer Browser

Viele (Präfix-)Angaben für einen einfachen Verlauf. Ob die neue Methode angewandt wird oder alle (älteren) Browser berücksichtigt werden, hängt sicher vom einzelnen Projekt ab. Die folgenden Beispiele zeigen weitere Möglichkeiten auf, sind aber der Übersichtlichkeit halber ohne Präfixe umgesetzt.

Nicht lineare Verläufe | Einen diagonalen Verlauf von links oben nach rechts unten erzeugt folgender Code:

background: linear-gradient(to bottom right, #6cf7a1 , #2744c4);

Listing 9.6    Diagonaler Farbverlauf

Auch ein Verlauf mit mehreren Farben lässt sich einfach umsetzen:

background: linear-gradient(#6cf7a1, #fff, #2744c4, #6cf7a1);

Listing 9.7    Verlauf mit mehreren Farben

Auch Transparenzen lassen sich mit rgba-Angaben umsetzen:

background: linear-gradient(to right, rgba(255,255,255,0), rgba(255,255,255,1));

Und als letztes Beispiel gibt es neben linearen Verläufen auch die Möglichkeit, kreisförmige mit der Angabe circle zu erzeugen:

background: radial-gradient(circle, #6cf7a1, #fff, #2744c4);

Listing 9.8    Kreisförmiger Verlauf

CSS-Farbverläufe automatisch generieren lassen | CSS3 bietet auch bei den Verläufen Webdesignern neue tolle Möglichkeiten. Verschiedene Verlaufsvarianten lassen sich so direkt am »lebenden Objekt« (der Webseite) austesten, ohne jedes Mal in ein Bildbearbeitungsprogramm zu wechseln.

Ein nützliches Tool, um sich Farbverläufe innerhalb weniger Sekunden erzeugen zu lassen, ist der Ultimate CSS Gradient Generator. Die Bedienung erinnert an Photoshop, und am Ende steht CSS-Code, der sich natürlich kopieren lässt, aber vor allem auch einige Einstellungen bietet und die Präfixe für alle möglichen (alten) Browser anbietet. Wer Verläufe einsetzen will, sollte das Tool unbedingt bookmarken: www.colorzilla.com/gradient-editor.