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.7    Farbschemata Zur vorigen ÜberschriftZur nächsten Überschrift

Farben können je nach Einsatzgebiet verschiedene Wirkungen haben und werden dazu von ihrem (farbigen) Umfeld beeinflusst. Bei der Farbauswahl gilt es also, nicht nur für sich passende Farben zu finden, sondern Farbkombinationen, die zueinanderpassen. Neben einem – fast unersetzlichen – geschulten grafischen Auge, das passende Farbkombinationen findet, gibt es als Hilfsmittel die sogenannten Farbschemata. Diese Art »Formeln« erzeugen interessante und meistens wirkungsvolle Farbkombinationen. Sie werden auch häufig Farbharmonien genannt.

Um Farbharmonien zu entwickeln, braucht es immer eine Ausgangsfarbe, aus der sich die anderen Farben ergeben. Diese Grundfarbe ist oftmals vorgegeben, da Unternehmen meistens schon eine Art »Hausfarbe« haben. Diese muss einem Webdesigner nicht immer gefallen, aber sie kann den Einstieg in die Farbwahl erleichtern.

Die unterschiedlichen Farbschemata können bei der Auswahl von Farben große Dienste leisten, sie sind aber eher als Hilfe, als Unterstützung gedacht und kein starres Regelwerk, an das sich der Designer stur halten sollte.

 
Zum Seitenanfang

9.7.1    Monochromes Farbschema Zur vorigen ÜberschriftZur nächsten Überschrift

Monochrom bedeutet einfarbig. Dieses Farbschema enthält nur eine einzige Basisfarbe und entsprechende Abstufungen dieser Farbe. Passende Abstufungen lassen sich durch Veränderungen der Sättigung und/oder der Helligkeit erreichen. Hier wird also der Qualitätskontrast angewandt. Und auch wenn nur eine einzige Farbe eingesetzt wird, lassen sich damit durchaus sehr interessante Screendesigns umsetzen.

Ein monochromes Farbschema. Die erste Farbe könnte für Headlines sein, die zweite für den Fließtext, die mittlere als Hintergrundfarbe eingesetzt werden und die beiden rechten für Akzente, Grafiken, Buttons, Links etc.

Abbildung 9.113    Ein monochromes Farbschema. Die erste Farbe könnte für Headlines sein, die zweite für den Fließtext, die mittlere als Hintergrundfarbe eingesetzt werden und die beiden rechten für Akzente, Grafiken, Buttons, Links etc.

Ein monochromes Farbschema wirkt meistens harmonisch, einfach und manchmal auch elegant. Es ist aber zurückhaltend, wenig kraftvoll und kann schnell langweilig sein. Auch der Fokus auf bestimmte Elemente lässt sich mit einem monochromen Farbschema schwer lenken, da es insgesamt eben sprichwörtlich »eintönig« wirkt.

Ein schönes monochromes Farbschema in Anwendung, wenn auch mit eingeschränkter Lesbarkeit: blank.com.pt

Abbildung 9.114    Ein schönes monochromes Farbschema in Anwendung, wenn auch mit eingeschränkter Lesbarkeit: blank.com.pt

Monochrome Farbabstufungen

Ein hilfreiches Online-Tool, um monochrome Farbabstufungen zu finden, ist 0to255. Mithilfe eines einzugebenden Hexadezimalcodes werden unterschiedliche Helligkeitsabstufungen der gewählten Farbe angezeigt.

Es ist nicht nur für ein monochromes Farbschema geeignet, sondern auch für Verläufe, Buttons, borders, hover-Zustände etc. (0to255.com).

 
Zum Seitenanfang

9.7.2    Analoges Farbschema Zur vorigen ÜberschriftZur nächsten Überschrift

Ein analoges Farbschema enthält Farben, die im Farbkreis nebeneinanderliegen. Für dieses Farbschema sollte eine Hauptfarbe dominiert eingesetzt werden und ergänzend zwei, drei weitere Farben, die Akzente setzen können. Verglichen mit dem monochromen Farbschema hat das analoge mehr Nuancen, leidet aber unter dem gleichen Mangel an Farbkontrast.

Ein analoges Farbschema: zwei, drei markante Farbtöne und Blau und Grün, dazu helle Abstufungen als Kontrast

Abbildung 9.115    Ein analoges Farbschema: zwei, drei markante Farbtöne und Blau und Grün, dazu helle Abstufungen als Kontrast

Unterschiedliche Varianten lassen sich auch wie beim monochromen Schema mit unterschiedlichen Sättigungen und Helligkeiten der einzelnen Farben erreichen. Ungünstig ist beim analogen Farbschema meist die Mischung von kühlen und warmen Farben.

Braun, Orange und Grüntöne kann man als analoges Farbschema bezeichnen (ecoki.com).

Abbildung 9.116    Braun, Orange und Grüntöne kann man als analoges Farbschema bezeichnen (ecoki.com).

Magentarot und Orangebraun bei  whoorayrecords.com

Abbildung 9.117    Magentarot und Orangebraun bei whoorayrecords.com

 
Zum Seitenanfang

9.7.3    Komplementäres Farbschema Zur vorigen ÜberschriftZur nächsten Überschrift

Ein komplementäres Farbschema enthält zwei Farben, die sich im Farbkreis gegenüberliegen, z. B. Gelb und Violett oder Magenta und Grün. Diese Farbpaare haben den größtmöglichen Kontrast.

Hoher Kontrast und markante Wirkung durch Orange und Cyan – Komplementärfarben bei byronbayschoolies.com.au

Abbildung 9.118    Hoher Kontrast und markante Wirkung durch Orange und Cyan – Komplementärfarben bei byronbayschoolies.com.au

Durch den hohen Gegensatz der Farben lassen sich sehr kontrastreiche Designs erstellen. Aber Vorsicht: Es sollte auf jeden Fall vermieden werden, zwei Komplementärfarben übereinander oder zu nahe nebeneinander zu platzieren, also z. B. als Hintergrundfarbe und Textfarbe! Diese Kombination ist nur sehr schwer lesbar und erzeugt ein Flimmern.

Die Seite ist zwar technisch (und größtenteils auch optisch) nicht ganz auf dem neuesten Stand, aber der Komplementärkontrast kommt schön zur Geltung bei zt-dr-seidel.de.

Abbildung 9.119    Die Seite ist zwar technisch (und größtenteils auch optisch) nicht ganz auf dem neuesten Stand, aber der Komplementärkontrast kommt schön zur Geltung bei zt-dr-seidel.de.

 
Zum Seitenanfang

9.7.4    Teilkomplementäre, triadische und tetradische Farbschemata Zur vorigen ÜberschriftZur nächsten Überschrift

Die teilkomplementären, triadischen und tetradischen Farbschemata klingen merkwürdig technisch, sind im Grunde aber nur Variationen des komplementären Farbschemas.

Teilkomplementäres Farbschema | Wählt man zu einer Grundfarbe die jeweils links und rechts neben der Komplementärfarbe liegenden Farben aus, erhält man ein teilkomplementäres Farbschema.

Dieses Schema ist zwar markant, wirkt jedoch etwas weniger intensiv als das komplementäre, da der Farbgegensatz nicht ganz so hoch ist.

Das teilkomplementäre Farbschema

Abbildung 9.120    Das teilkomplementäre Farbschema

Triadisches Farbschema | Hier werden drei Farbtöne verwendet, die im Farbkreis den gleichen Abstand zueinander haben. Der Farbkreis wird sozusagen gedrittelt.

Dieses Schema wirkt sehr lebendig mit einem intensiven Kontrast, da drei Farben eingesetzt werden, die zueinander den größten Kontrast bilden können. Am geschicktesten eingesetzt, dominiert eine Farbe, und die beiden anderen setzen Akzente.

Das triadische Farbschema

Abbildung 9.121    Das triadische Farbschema

Tetradisches Farbschema | Hier wird ein komplementäres Farbschema mit einem anderen komplementären Farbschema kombiniert.

Hier dürfte es am schwierigsten werden, harmonierende Kombinationen zu finden. Vier Farben, dazu zweimal Komplementärkontraste, machen es schwierig, Akzente und Highlights zu setzen.

Das tetradische Farbschema

Abbildung 9.122    Das tetradische Farbschema

 
Zum Seitenanfang

9.7.5    Tool-Empfehlung: Unterstützung bei der Farbfindung Zur vorigen ÜberschriftZur nächsten Überschrift

Die vorgestellten Farbschemata dienen als Anhaltspunkte, als erstes Hilfsmittel, um spannende, für das aktuelle Projekt passende Farbkombinationen zu finden. Gerade für den Einstieg sind die Farbschemata sehr hilfreich, auf jeden Fall besser, als einfach blind in den Farbkasten zu greifen und zu schauen, welche Farbe zufällig ausgewählt wurde …

Selten passen die Farben, die sich aus den Schemata ergeben, gleich exakt für das Projekt bzw. das jeweilige Design, an dem man gerade sitzt. Daher heißt es, viel auszuprobieren, die Farben leicht zu verändern, mal heller, mal dunkler, mal kräftiger, mal trüber. Und manchmal auch alle Farben wieder zu verwerfen und von vorne anzufangen!

Im Folgenden empfehle ich zwei – von vielen – Farbtools, die bei der Erstellung eines Farbschemas sehr hilfreich sein können.

Paletton | Ein intuitiv zu bedienendes Tool, mit dem sich schnell verschiedene Farbschemata austesten lassen, ist der Paletton.

Ein hilfreiches Farbtool, um Farbschemata zu bestimmen: paletton.com.

Abbildung 9.123    Ein hilfreiches Farbtool, um Farbschemata zu bestimmen: paletton.com.

Als besondere Highlights kann man sich eine Webseitenvorschau in den ausgewählten Farben anzeigen lassen und die Farben auch in verschiedenen Formaten exportieren: paletton.com.

Colourco.de | Colourco ist ein spielerisch intuitives Tool, bei dem die ganze Bildschirmfläche der Farbfindung dient. Auch hier lassen sich die verschiedenen Farbschemata ausprobieren und in vielen Formaten exportieren: www.colourco.de.

Farbfindung spielerisch per Mausbewegung: colourco.de

Abbildung 9.124    Farbfindung spielerisch per Mausbewegung: colourco.de

 


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