Rheinwerk Computing < openbook >

 
Inhaltsverzeichnis
Vorwort
1 Prinzipien des modernen Webdesigns
2 Projektmanagement
3 Konzeption und Strategie
4 Responsive Webdesign
5 Informationsarchitektur
6 Gestaltungsgrundlagen
7 Screendesign
8 Layout und Raster
9 Farbe im Webdesign
10 Typografie
11 Bilder und Grafiken
12 Navigations- und Interaktionsdesign
13 Webdesign-Stile und -Trends
14 Animationen
15 Website-Typen
16 Tipps, Tricks und Tools
Stichwortverzeichnis

Download:
- Beispieldateien, ca. 3.64 MB

Buch bestellen
Ihre Meinung?

Spacer
<< zurück
Webdesign von Martin Hahn
Das Handbuch zur Webgestaltung
Buch: Webdesign

Webdesign
Pfeil 9 Farbe im Webdesign
Pfeil 9.1 Welche Rolle spielt die Farbe?
Pfeil 9.1.1 Farbe und Webdesign
Pfeil 9.2 Farbe: eine Wissenschaft für sich
Pfeil 9.2.1 Licht und Farbe
Pfeil 9.2.2 Wie unsere Farbwahrnehmung funktioniert
Pfeil 9.2.3 Farbpsychologie
Pfeil 9.3 Farbsysteme
Pfeil 9.3.1 Farbkreise
Pfeil 9.3.2 RGB – das additive Farbmodell
Pfeil 9.3.3 CMYK – das subtraktive Farbmodell
Pfeil 9.3.4 Farbtiefe
Pfeil 9.3.5 Farbdefinition
Pfeil 9.3.6 Farbton, Sättigung, Helligkeit
Pfeil 9.4 Das Web-Farbmanagement
Pfeil 9.4.1 Mit Farbräumen & Farbprofilen arbeiten
Pfeil 9.5 Farbwirkung
Pfeil 9.5.1 Warme Farben
Pfeil 9.5.2 Rot
Pfeil 9.5.3 Orange
Pfeil 9.5.4 Gelb
Pfeil 9.5.5 Kalte Farben
Pfeil 9.5.6 Blau
Pfeil 9.5.7 Grün
Pfeil 9.5.8 Violett/Lila
Pfeil 9.5.9 Neutrale Farben
Pfeil 9.5.10 Schwarz
Pfeil 9.5.11 Weiß
Pfeil 9.5.12 Grau
Pfeil 9.5.13 Grell, greller, Neon
Pfeil 9.5.14 Zusammenfassung Farbwirkung
Pfeil 9.6 Farbkontraste
Pfeil 9.6.1 Farbe-an-sich-Kontrast
Pfeil 9.6.2 Hell-Dunkel-Kontrast
Pfeil 9.6.3 Kalt-Warm-Kontrast
Pfeil 9.6.4 Komplementärkontrast
Pfeil 9.6.5 Quantitätskontrast
Pfeil 9.6.6 Qualitätskontrast
Pfeil 9.6.7 Simultankontrast
Pfeil 9.6.8 Bunt-Unbunt-Kontrast
Pfeil 9.7 Farbschemata
Pfeil 9.7.1 Monochromes Farbschema
Pfeil 9.7.2 Analoges Farbschema
Pfeil 9.7.3 Komplementäres Farbschema
Pfeil 9.7.4 Teilkomplementäre, triadische und tetradische Farbschemata
Pfeil 9.7.5 Tool-Empfehlung: Unterstützung bei der Farbfindung
Pfeil 9.8 Gelungener Farbeinsatz im Webdesign
Pfeil 9.8.1 Farbe, Corporate Design & Identität
Pfeil 9.8.2 Farbverläufe
Pfeil 9.9 Farbe und Usability
Pfeil 9.9.1 Hürden bei der Farbwahrnehmung
Pfeil 9.10 Ein eigenes Farbschema entwickeln
Pfeil 9.10.1 Inspiration sammeln und Vorbilder finden
Pfeil 9.10.2 Farbtrends und Inspirationsquellen
Pfeil 9.10.3 Tools, um Farbkombinationen zu erzeugen
Pfeil 9.10.4 Praktische Umsetzung: Farbschemata selbst gestalten
Pfeil 9.11 Fazit
 
Zum Seitenanfang

9.8    Gelungener Farbeinsatz im Webdesign Zur vorigen ÜberschriftZur nächsten Überschrift

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.

 
Zum Seitenanfang

9.8.1    Farbe, Corporate Design & Identität Zur vorigen ÜberschriftZur nächsten Überschrift

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.

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

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.

congstar.de überzeugt 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.

Farben und Firmenbranding

Mehr zur »Bedeutung der Farben für das Branding«: www.designtagebuch.de/wiki/bedeutung-der-farben-fuer-das-branding und www.webdesign-journal.de/branding-farbe-webdesign/

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.

Neue Farbgestaltung mit Bedacht

Die Farben einer Website eben mal »etwas aufzufrischen«, nur damit einem unbestimmten (kundenseitigen) Veränderungswunsch Rechnung getragen wird, ist keine Lösung und schadet vor allem der Konsistenz der Werbematerialien und der Wiedererkennung. Das Design einer Webseite sollte zwar, genauso wie das Unternehmen an sich, wandel- und veränderbar sein. Aber bei Verlust eine visuelle Identität neu herzustellen kann sehr langwierig sein.

 
Zum Seitenanfang

9.8.2    Farbverläufe Zur vorigen ÜberschriftZur nächsten Überschrift

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!

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

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.

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

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.

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

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.

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.

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.

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

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

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.

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:

backgroundlinear-gradient(#6cf7a1#2744c4); 

Listing 9.4    Ein Farbverlauf wird erzeugt.

Ein einfacher Farbverlauf

Abbildung 9.133    Ein einfacher Farbverlauf

Download

Sie finden die Datei »verlauf.html« für den beschriebenen Farbverlauf unter BeispielmaterialKapitel_09.

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 */
backgroundlinear-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:

backgroundlinear-gradient(to bottom right#6cf7a1 , #2744c4);

Listing 9.6    Diagonaler Farbverlauf

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

backgroundlinear-gradient(#6cf7a1#fff#2744c4#6cf7a1);

Listing 9.7    Verlauf mit mehreren Farben

Auch Transparenzen lassen sich mit rgba-Angaben umsetzen:

backgroundlinear-gradient(to rightrgba(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:

backgroundradial-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.

 


Ihre Meinung?

Wie hat Ihnen das Openbook gefallen? Wir freuen uns immer über Ihre Rückmeldung. Schreiben Sie uns gerne Ihr Feedback als E-Mail an kommunikation@rheinwerk-verlag.de

<< zurück
 Zum Rheinwerk-Shop
Zum Rheinwerk-Shop: Webdesign Webdesign
Jetzt Buch bestellen

 Buchempfehlungen
Zum Rheinwerk-Shop: HTML5 und CSS3
HTML5 und CSS3


Zum Rheinwerk-Shop: Praxisbuch Usability und UX
Praxisbuch Usability und UX


Zum Rheinwerk-Shop: Responsive Webdesign
Responsive Webdesign


Zum Rheinwerk-Shop: Website-Konzeption und Relaunch
Website-Konzeption und Relaunch


Zum Rheinwerk-Shop: UX Writing und Microcopy
UX Writing und Microcopy


Zum Rheinwerk-Shop: WordPress 5
WordPress 5


Zum Rheinwerk-Shop: Stile & Looks
Stile & Looks


Zum Rheinwerk-Shop: Digitale Illustration
Digitale Illustration


 Lieferung
Versandkostenfrei bestellen in Deutschland, Österreich und in die Schweiz
InfoInfo

 
 


Copyright © Rheinwerk Verlag GmbH 2020
Für Ihren privaten Gebrauch dürfen Sie die Online-Version natürlich ausdrucken. Ansonsten unterliegt das <openbook> denselben Bestimmungen, wie die gebundene Ausgabe: Das Werk einschließlich aller seiner Teile ist urheberrechtlich geschützt.
Alle Rechte vorbehalten einschließlich der Vervielfältigung, Übersetzung, Mikroverfilmung sowie Einspeicherung und Verarbeitung in elektronischen Systemen.

 
[Rheinwerk Computing]

Rheinwerk Verlag GmbH, Rheinwerkallee 4, 53227 Bonn, Tel.: 0228.42150.0, Fax 0228.42150.77, service@rheinwerk-verlag.de

Cookie-Einstellungen ändern