Art-Direction, Webdesign und Grafiker / Strategie, Kunst und Design

Blog

Web Design

Die Theorie von gutem Webdesign 3 (Farbgestaltung)

Ein Artikel von .

Farbgestaltung und Bildauswahl für Websites

Die Farbwahl

Die Wichtigkeit der richtigen Farbwahl beim Webdesign wird immer wieder unterschätzt. Es ist schon soviel darüber geschrieben worden. Deswegen fasse ich es einfach mal kurz zusammen. Farben beeinflussen als wichtiger Faktor die Stimmung der Website. Die Farbwahl spielt eine erhebliche Rolle bei einem guten und erfolgreichen Webdesign.Die Farbwahl sollte sich natürlich an der Zielgruppe orientieren. Verwenden Sie zum Beispiel gedämpfte Farben für edle Produkte, elegante Farben für hochpreisige Seiten, bunte Farben für verspieltere Seiten, usw.

 

Weissräume und silberne Verläufe sorgen auf apple.com für schlichte Eleganz.

Dunkle Websites rücken gezielte Bereiche in den Fokus der Aufmerksamkeit. Dunkle Bereiche geben Halt und schonen das Auge des Betrachters. Viel negativer Text ist eher schlecht zu lesen.

 

 

Eine farbige Website. Blau wird von vielen Menschen als besonders angenehm empfunden. Im Beispiel vermitteln die Blautöne die Farben der Großstadtnacht. Die Stadt die nicht schläft.

 

 

Grosse Corporate Design Websites

 

Grundsätzlich empfehle ich für ein gelungenes Layout eher dezente Farben einzusetzen. Mit sorgfältig ausgewählten Eyecatcher Farben können Sie dann im zweiten Schritt die richtigen Akzente setzen, um die die Aufmerksamkeit Ihrer Leser weiter zu kanalisieren.

Ein tolles Tool zur Planung einer zukünftigen Farbdarstellung ist das Programm Adobe Kuler, welches Sie sich kostenlos herunterladen können.

color.adobe.de Hilft bei der stimmigen Farbabstimmung.
color.adobe.de Hilft bei der stimmigen Farbabstimmung.

Farbzusammenstellungen auf Basis eines raufgeladenen Bildes erstellen

Austausch mit der Adobe Community
Austausch mit der Adobe Community
Stimmige Farbzusammenstellungen anhand einer Farbe erstellen
Stimmige Farbzusammenstellungen anhand einer Farbe erstellen

Tausende schöner Farbzusammenstellungen warten nur darauf erforscht und in eigenen Designs ausprobiert zu werden.

http://color.adobe.com/

Mit Farbabstufungen und Komplementärfarben werden die Informationen weiter nach Wichtigkeit sortiert und immer feiner untergliedert. Besonders wichtige Elemente werden mit einer auffälligen Farbe ausgezeichnet. Diese besondere Farbe sollte wirklich ausschließlich für die Auszeichnung von wichtigen Dingen reserviert werden. (Eyecatcher) Andernfalls verheizt man nur Ihre Wirkung und der Besucher wird keinen Zusammenhang mehr zwischen Farbe und Bedeutung herstellen.

Das Umfeld

Farben werden durch ihr Umfeld beeinflusst. Dies macht die Sache nicht unbedingt einfacher. Jede Farbe entfalltet letztendlich erst durch den Kontext, in welchem sie steht ihre volle Wirkung. Eine Stimmung entsteht also erst in der Kombination. Eine einzelne Farbe ist wie eine Note. Ein Design ist wie ein Akkord.

Die Farbwirkung wird durch Ihr Farb- Umfeld beeinflusst.

Aua! (Keine schöne Farbwirkung.)
Aua! (Keine schöne Farbwirkung.)

Farben beeinflussen sich in Ihrer Wirkung gegenseitig

Der Kontrast

Lesbarkeit hat natürlich viel mit Typographie zu tun. Die richtige Farbwahl ist aber auch wichtig. Zur guten Nutzund Lesbarkeit sollte man vor allem auf einen guten Kontrast achten. Vergewissern Sie sich, daß genug Kontrast zwischen Text und Hintergrund besteht. Nach meiner Erfahrung sollten Sie mindestens eine Luminanz „Helligkeit“ mit mindestens 28% Unterschied wählen.

Der größte Kontrast besteht bei den Druckfarben (CMYK) übrigends nachgewiesenermaßen nicht zwischen Schwarz und Weiss, sondern zwischen Gelb und Blau.

Die Wichtigkeit

Die Farbe steuert im gesamten Kontext die Wahrnehmung. Durch auffallende Farbzuordnung zu Schlüsselelementen wird die Wahrnehmung gezielt auf einzelne besonders wichtige Elemente gelenkt. Wenn man geschickt vorgeht lässt sich so die Aufmerksamkeit steuern. In der Praxis geschieht dies, indem man geschickt auf die Bereiche des „Call to action“ verweist. Amazon hat diese Technik perfektioniert.

 

Amazon verwendet für den "Call to Action" auffallende Farben

 

Mehr zum Thema „Call to action“:
https://boagworld.com/design/10-techniques-for-an-effective-call-to-action

Bildwahl

Bilder haben einen großen Einfluß auf das Feeling einer Seite. Man kann bei der Auswahl der richtigen Bilder nicht vorsichtig genug vorgehen. Falsch gewählte Bilder ziehen die Qualität der ganzen Website nach unten. Nicht nur die einer einzelnen Seite! Schlechte Qualität oder falsch gewählte Kompressionsstufen hinterlassen einen negativen Beigeschmack.

Geeignete Bilder oder Videos sind das A und O einer erfolgreichen Website, denn Sie visualisieren das Thema und unterstützen oder erweitern die Aussage. Ein gutes Bild, eine Grafik oder ein Video zum Thema interessieren Ihre Besucher. Sorgfältig ausgewählte Bilder eignen sich daher hervorragend um eine Dienstleistung oder ein Produkt zu verkaufen.

Bild als "Hinkucker"

Beispiel 2

Bilder können polarisieren. Machen Sie sich Ihre Wirkung lieber vorher klar.

Das Thema dieser Seite wird sofort verstanden.

Auch bei Apple ist man sich über die Wirkung von guten Bildern im klaren. Nahezu jeder Bereich wird durch entsprechende Bilder visualisiert.
Auch bei Apple ist man sich über die Wirkung von guten Bildern im klaren. Nahezu jeder Bereich wird durch entsprechende Bilder visualisiert.

 



[ad#adsense-artikel]

Abgelegt in: Web Design Datum: 22. November 2009 Erstellt von Stephan Bender

Schreiben Sie einen Kommentar

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

Dok: Ben.design Web DesignDie Theorie von gutem Webdesign 3 (Farbgestaltung)