Auch das gehört zur Usability – Farben fürs Webdesign (Teil 2)

Darius A Monsef IV

Gutes Webdesign zeichnet sich auch und ganz besonders durch die gelungene Wahl der Farben aus. Ähnlich wie bei Werbegrafiken ist bei der Gestaltung einer Website ganz besonders auf die Wirkung der Farben zu achten. Es geht also nicht nur darum, dass Ihr Webdesign gut aussieht – mit der richtigen Farbe können Sie den Nutzern die Orientierung auf der Website erleichtern, Schaltflächen und Informationen hervorheben oder Kunden zum Kauf anregen. Der zweite Teil des Beitrags über Farben für Webdesign beleuchtet Farbauswahl unter dem Gesichtspunkt der Usability.

Farbe erleichtert die Orientierung

Stellen Sie sich einmal vor, Web-Seiten wären in ihrer Evolution in den Tagen frühen Zeitungs-Layouts mit schwarzem Text auf weißem Hintergrund stecken geblieben. 1982 sorgte die damals neu gegründete Tageszeitung „USA Today“ mit ihrer ersten Ausgabe im Vierfarbdruck für großen Aufruhr unter den Verlegern (1).


„USA Today“ setzt seit der Gründung in 1982 Farben ein, um den Lesern die Orientierung zwischen den einzelnen Rubriken zu erleichtern.

Ergänzend zu Farbfotos verwendete „USA Today“ von Anfang an Leitfarben, um die verschiedenen Rubriken optisch voneinander zu unterscheiden. Vorteil: Die Farben helfen Lesern dabei, den gewünschten Teil der Zeitung schnell und gezielt zu finden.

Dieses Navigationskonzept ist fürs Webdesign sehr wichtig, um neuen und auch regelmäßigen Anwendern die Orientierung zu erleichtern. USA Today hat dieses Farbleitsystem der Printausgaber später fürs Webdesign übernommen. Die Schaltflächen der Hauptnavigation sind entsprechend der Zeitungsrubriken mit klar voneinander abgegrenzten Farbtönen gestaltet. Kleines Manko: Die Buttons für „Home“, „News“ und „Travel“ sind in sehr ähnlichen Blautönen gehalten, was möglicherweise den einen oder anderen Nutzer durcheinander bringt.

Handlungsaufforderungen farbig hervorheben

Mint.com setzt Farbe sehr erfolgreich ein, um potentielle Kunden die eigenen Dienstleistungen zu erklären und zur Handlung aufzurufen. Positiven Eindruck machen zwei Elemente:

  • das angenehme doppelt-komplementäre Farbschema
  • die dazu passend in kräftigem Orange abgesetzte Schaltfläche „Free! Get started here>“,
    die sich sehr gut vom dezenten Farbchema der übrigen Seite abhebt

Auf dieser Website wird Farbe auch dazu eingesetzt, um die Besucher auf Fehler beim Ausfüllen des Formulars hinzuweisen. Die Wahl fiel auf Rot, dessen Signalwirkung allgemein bekannt ist. Als Komplementärfarbe des vorherrschend verwendeten Grün der Website fügt sich das Rot gut ins Erscheinungsbild ein und wird dennoch deutlich wahrgenommen.


Doppelt-komplementär, Palette


Mint.com setzt auf ein doppelt-komplementäres Farbschema, um die Vorzüge seiner Software anzupreisen. Die Handlungsaufforderung in Form einer orangenen Schaltfläche hebt sich gut von der restlichen Seite ab.

Aktionen auslösen durch Farbe

Farben erregen nicht nur die Aufmerksamkeit von Besuchern. Mit dem gezielten Einsatz von Farbe, können Sie Besucher auch dazu animieren, sich mit einer Website zu beschäftigen. Angesichts der heutigen Reizüberflutung, sollten Sie nicht davon ausgehen, dass Internetnutzer sich von allein gezielt mit Ihrer Website auseinandersetzen. Nutzen Sie Farben dazu, die Besucher in Ihr Design hineinzuziehen und sie auf bestimmte Elemente aufmerksam zu machen.

Die Gelborange- und Blautöne sind nahezu komplementär. Der Grünton sticht aus diesem Paar heraus.


Der saftig grüne Sticker hebt sich gut von der gedeckten Hintergrundfarbe ab und zieht die Aufmerksamkeit perfekt auf sich.

UI Tuneup verwendet nur wenig Farben, um seine Dienstleistungen zu erklären.  Die blaugrünen Elemente der Startseite fallen daher sofort ins Auge – so werden die Besucher geschickt zur Handlungsaufforderung „Get started“ geführt. Dieses Prinzip funktioniert auch, wenn Sie viele Faben verwenden. In dem Fall müssen Sie für die wichtigen Elemente Ihrer Website eine besondere Farbe reservieren, die sich von den übrigen Farben der Website deutlich abhebt und im gesamten Internetauftritt nur in diesem Kontext (Download-Buttons, Warenkorb et cetera) eingesetzt wird. Ein gelungenes Beispiel dafür ist der obere Screenshot von OtherInbox. Der grüne Sticker fällt sofort ins Auge.


Die Wahl von kräftigen Komplementärfarben hilft den Besuchern von UI Tuneup das Angebot schnell zu erfassen und die Handlungsaufforderung zu finden.

Der schlimmst anzunehmende Fall von misslungenem Webdesign tritt dann ein, wenn ein neuer Besucher ihren Internetauftritt nach ein paar unbefriedigenden Klicks wieder verlässt, weil die Navigation kryptisch ist. Farbe hilft neuen Besuchern dabei, schnell zu finden, wonach sie suchen. Dass dies auf ganz unterschiedliche Weise möglich ist, können Sie erkennen, wenn Sie die beiden Internetauftritte von OtherInbox und UI Tuneup vergleichen. Obwohl sich die Seiten vom Farbschema und der Struktur ähneln, ist der erzielte Effekt ganz anders.

Ähnliche Paletten, völlig andere Wirkung – aufs Farbschema kommt es an

Um diesen Aspekt noch ein wenig zu vertiefen, hier eine weitere Gegenüberstellung zweier Wesites, die ein ähnliches Farbschema einsetzen, aber jeweils unterschiedlich gewichten.


Nahezu identische Paletten mit gänzlich verschiedenem Erscheinungsbild

Sonze treibt mit seinen Schaltflächen geradezu ein Versteckspiel. Helle Farbtöne, zudem in verschiedenen Schattierungen eingesetzt, geben den Besuchern Rätsel auf. Während man die Buttons noch einigermaßen erkennen kann, gehen die Links in den hellblauen Flächen völlig unter.


Rate mal, wo Du klicken sollst – ein Beispiel, wie es nicht geht.

Ganz anders sieht das bei AutoFinancierung aus. Obwohl die Farbpalette fast identisch ist, erscheint die Struktur viel übersichtlicher und es wird auf den ersten Blick klar, wo es was zum Klicken gibt.


Vorsicht bei Hell-Dunkel-Kombinationen: Wählen Sie die kräftige Farbe für den Akzent – nicht umgekehrt. Sonst gehen Schaltflächen völlig unter, wie im oberen Beispiel von Sonze.

Kontraste richtig einsetzen
Für kontrastreiche Internetauftritte mit vielen verschieden farbigen Inhalten, sollten Sie entweder einen neutralen Hintergrund wählen oder eine neutrale Farbe mit bestimmten Akzenten. So erreichen Sie, dass die Inhalte direkt ins Auge springen. Bei Fotografen ist diese Methode sehr beliebt. Wenn Sie sich einmal Referenz-Seiten von Fotografen anschauen, werden Sie sehen, dass die Fotos oftmals auf diese Art und Weise hervorgehoben werden.

Hulu, eine Website mit populären Videos, nutzt einen neutralen, akzentuierten Hintergrund. Ebenso wie COLOURlovers, die Website des Autorenteams – eine Plattform zum Erstellen und Austauschen von Farbpaletten.

Hulu nutzt Grün als Akzent. Abgesehen davon, setzt es zugunsten der Inhalte Farbe äußerst sparsam ein.


COLOURLovers arbeitet mit einem roten Akzent, um die Aufmerksamkeit auf den wichtigsten Aspekt zu lenken: Den Community-Bereich.

Die Bedeutung von Farben

Wenn Sie Farben auswählen, sollten Sie nicht nur auf die rein optische Wahrnehmung achten. Auch die Bedeutung, die einzelnen Farben zugeschrieben wird, ist bei der Auswahl zu beachten. Vor allem dann, wenn die Website für eine internationale Zielgruppe gedacht ist. Je nach Kulturraum, kann eine Farbe eine ganz andere Bedeutung haben. So steht Grün seit dem Einsetzen der Umweltbewegung in westlichen Ländern vorwiegend für Nachhaltigkeit und Umweltfreundlichkeit. In früheren Jahrhunderten war Grün im Westen nicht immer so positiv besetzt: So wurde Grün auch mit Eifersucht oder Krankheit assoziiert. Ähnlich in China: Dort kann Grün bedeuten, dass eine Frau ihren Ehemann betrügt.

Vorsicht Falle – andere Länder, abweichende Bedeutung

Im Islam ist Farbe heilig. Wichtige Bedeutung haben Farben auch im Katholizismus und der religiösen Kunst. In manchen afrikanischen Ländern repräsentiert Grün den natürlichen Reichtum Afrikas. Weitere in verschiedenen Kulturen variierende Bedeutungen von Grün sind: Geld, Wachstum, Unerfahrenheit (grün hinter den Ohren), Bosheit/Ärger, Fruchtbarkeit, Hoffnung, Jugend und Tod.

Weitere Informationen zu Farbempfindung und Psyche bietet der Beitrag Farbe und Screendesign.

Farbe löst Emotionen aus
Nicht zu unterschätzen ist der emotionale Effekt, den bestimmte Farben auslösen. Doch auch hier gilt: Ein Pauschalurteil gibt es nicht, es kommt auf die richtige Mischung an.

Cyan gilt eigentlich als kalt und abweisend. in der richtigen Dosis eingesetzt – wie im Bild unten – wirkt es jedoch sehr anziehend.

Foto: Paulo Brando, Sunset.

Zudem werden Farben bestimmte psychische Effekte zugeschrieben. So soll Grün eine beruhighende Wirkung haben, weshalb es viele Wände von Krankenzimmern oder Asylantenheimen ziert.

Appetit und Farbe

Interessante Erkenntnisse gibt es über die Wirkung verschieden farbiger Teller. Speisen auf einem grünen Teller werden bitterer wahrgenommen als dasselbe Gericht auf einem weißen Teller. Blau wirkt Appetit-zügelnd, während Pink Süße suggeriert (2).

Für sich genommen, sieht die Farbpalette nicht sehr attraktiv aus. In einem gestalterischen Kontext – wie im Foto unten – kann dieses Farbspektrum beeindruckend schön aussehen.


Der Plasma Globe ist eine interessante Erfindung von Nikola Tesla. Die Farben entstehen durch geladene Gaspartikel im Inneren der Erdkugel.

Zu sämtlichen Farben des Farbkeises gibt es eine große Zahl von Interpretationen, Sagen und symbolische Bedeutungen. Es gibt im Prinzip keine Regeln oder Rezepte, denen Sie bei der Wahl der Farbe folgen könnten. Auf den Punkt gebracht: Sie sollten Ihrem eigenen Urteilsvermögen trauen, was gut aussieht und was für ein bestimmtes Projekt am besten geeignet ist. Trauen Sie sich ruhig, dabei auf Ihr Gefühl zu achten: Wenn Sie sich einem Moment zurücklehnen und Ihre Entwürfe betrachten – für welche Farbkombination würden Sie sich aus dem Bauch oder dem Herzen entscheiden. Überlassen Sie Farbauswahl nicht nur Ihren Augen.

Tipp der Redaktion: Anregungen, wie Sie die Wünsche und Vorstellungen Ihrer Kunden ermitteln, gibt Ihnen der Dr.-Web-Beitrag: „So kreiern Sie aus jeder beliebigen Vorlage ein gelungenes Webdesign.

Inspirationen

„Gute Künstler kopieren, große Künstler stehlen.“

Pablo Picasso
Quellen und Literaturangaben

Farbe findet sich in der Natur, in der Wissenschaft und allem Mensch-Gemachten. Farbe ist überall. Sie suchen Inspirationen? Sehen Sie sich einfach um. Möglicherweise haben Sie in unmittelbarer Reichweite ein Bild, dass Sie animiert oder ein Möbelstück, eine rostige Stoßstange, Katzen oder Blumen mit interessanter Farbkombination. Indem Sie Farben von alltäglichen Gegenständen und Wesen aus Ihrem Umfeld wählen, können Sie den Quell Ihrer Inspiration auf ganz einfache Art erheblich erweitern.


Diese Palette mit den frischen Farben der Süßigkeiten aus dem Foto darunter würde eine Website verlockend-lecker wirken lassen.


Schöne Farbpaletten können Sie aus fast jedem Gegenstand in Ihrer Umgebung extrahieren – zum Beispiel aus diesen frühlingsfrischen Lutschbonbons. Doch mit der Palette allein ist die Arbeit nicht getan – die größtere Herausforderung ist es, die Farben optimal zu proportionieren. Dieses Bild würde völlig anders aussehen, wenn Grün die vorherrschende Farbe wäre.

Mut zur Farbe und eigenen Experimenten

Wir hoffen, dass dieser Beitrag Ihnen das Grundkonzept der Farbtheorie sowie einige der wichtigsten Fachbegriffe vermittelt hat. Vor allem aber soll dieser Beitrag Ihnen Inspirationen für Ihre nächsten kreativen Projekte geben. Jedenfalls werden diese Informationen Ihnen dabei helfen, Ihre Designs zu strukturieren und mit dem geschickten Einsatz von Farbe die Anwenderfreundlichkeit und Beliebtheit Ihrer Websites zu steigern oder sogar einen Trend zu setzen.

Am meisten wünschen wir uns, Sie dazu animiert zu haben, zu experimentieren und Farbe spielerisch einzusetzen. Es gibt viele „Regeln“ zum Einsatz von Farbe, aber Regeln sind dazu da, um sie zu brechen. Menschen sollten Ihrem Herz und Ihrer Inspiration folgen. Digitale Technik versetzt uns dazu in die Lage, ihre Leidenschaft mit wenigen Klicks an eine große Gemeinschaft weiterzugeben. Bei einem so großen und diversifizierten Markt gibt es genug Raum und Abnehmer, so dass jeder kreativ und einzigartig sein und dabei etwas Schönes schaffen kann. Viel Erfolg und frohes Färben.

Wenn Sie die reinen Bunttöne, die im Original eher inkompatibel sind, etwas dunkler schattieren, gewinnen Sie eine schöne Farbpalette.

Auf den ersten Blick lässt sich auf dem unteren Foto kein rechtes Schema erkennen. Wenn Sie beginnen, die einzelnen Farben mit der Pipette heraus zu ziehen, kommt eine sehr hübsche Palette dabei heraus.


Erosion ist ein weiterer faszinierender Effekt der Natur, von dem Sie sich inspirieren lassen können.

Verwendete Literatur

Garcia Media
Mayama, M.: The Color of Yummy, In: Parenting, Band 15, Ausgabe 3, April 2001.

(tm), (mm)

Sortiert nach:   neueste | älteste | beste Bewertung
Michael
Gast
6 Jahre 4 Monate her

Wenn sich sonst keiner traut, fang ich mal an :-) Der Artikel erläutert anhand passend ausgesuchter Beispiele sehr anschaulich, wie man mit unterschiedlichen Farbwahl-Ansätzen Website-Besucher zum Beispiel zum Button führt. Sehr Lesenswert.

trackback

[…] Farben fürs Webdesign II (Dr. Web) Der zweite Teil des Beitrags über Farben für Webdesign beleuchtet Farbauswahl unter dem Gesichtspunkt der Usability. (tags: cfischercom) […]

trackback

[…] Farben in unterschiedlichen Kombinationen wirken zeigt ein Artikel von Dr. Web. Eine gute englischsprachige Zusammenstellung von möglichen Farbkombinationen und Webseiten auf […]

Timo Reese
Gast
Timo Reese
1 Jahr 6 Monate her
Jetzt muss ich mal was einwerfen, als Softwareentwickler lese ich mich (aufgrund aktuellem bedarf) seit einigen Tagen durch etliche Artikel wie diesen. Fast alle beschreiben recht gut wie es funktionieren kann. Leider gibt fast niemand konkrete Beispiele oder zeigt bereits umgesetzte und gut funktionierende Konzepte. Ich, für meinen teil habe bereits zuviel Theorie dazu gelesen und bin satt. So fand ich einen Einwand zu diesem Thema sehr passend, nämlich wozu soll ich ein bestimmtes Konzept verfolgen wenn ich es ohnehin nicht jedem oder vielen recht machen kann? Denn so ziemlich jeder seine eigenen Ansprüche an guten Content und den Aufbau… Read more »
Patrick
Gast
4 Monate 21 Tage her

Sehr inspirierender Beitrag. Es ist erstaunlich, was die richtige Kombi aus Farben alles beim Besucher verursachen kann.

wpDiscuz

Mit der Nutzung unseres Angebots erklärst du dich damit einverstanden, dass wir Cookies verwenden. Weitere Informationen

Wir verwenden Cookies, um Inhalte und Anzeigen zu personalisieren, Funktionen für soziale Medien anzubieten und die Zugriffe auf unsere Website zu analysieren. Dadurch geben wir nicht personenbezogene Informationen zur Nutzung unserer Website an unsere Partner für soziale Medien, Werbung und Analysen weiter. Nähere Informationen findest du in unserer Datenschutzerklärung. Durch die Weiternutzung unserer Website (oder das ausdrückliche Klicken auf "Einverstanden") gehen wir davon aus, dass du mit der Verwendung von Cookies einverstanden bist.

Schließen