Wie du Farben auf deiner Webseite richtig einsetzt

Wenn du gerade deine Webseite aufbaust, weißt du, dass es viele Entscheidungen zu treffen gibt. Welche Inhalte stellst du bereit? Wie sieht deine Sitemap aus? Und natürlich auch: Welches Design wählst du und entsprechend, welche Farben kommen zum Einsatz?

Es gibt unzählige Blog-Artikel, die sich mit der Farbpsychologie in der Kommunikation beschäftigen. Welche Farbe, welche Stimmung vermittelt, möchte ich an dieser Stelle nicht aufgreifen. Ich gehe davon aus, dass die Farben für deinen Markenauftritt bereits bewusst ausgewählt wurden.

Dein vorrangiges Ziel beim Einsetzen von Farben sollte sein, den Usern einen einfachen und effizienten Weg zum gesuchten Content aufzuzeigen. Die richtige Wahl der Farben verbessert also die User Experience.

Die Farben deines Markendesigns sollten auf deiner Webseite prominent sein. Ein einheitlicher Markenauftritt hilft deiner Zielgruppe bei der Orientierung.

Deine gesamten Kommunikationsmittel sollten also einheitlich erscheinen, dazu gehört auch deine Webseite. So erkennt der User auf den ersten Blick, dass er bei dir gelandet ist und die richtige Webseite angesteuert hat. Das ist bei der Vielzahl von Unternehmen und Angeboten am Markt unglaublich wichtig.

Wie du deine Marken-Farben einsetzt, hängt ganz davon ab, welche das sind und aus welchem Grund sie für deinen Markenauftritt gewählt wurden.

Bei einem beispielsweise rot-weißen Auftritt kannst du aggressiv und knallig auftreten, z. B. als Händler, aber auch seriös und beherrscht, z. B. als Unternehmensberater.

Im ersten Fall dominieren vielleicht fette rote Angebote das Gesamtbild. Es wird also viel Rot eingesetzt um viel Aufmerksamkeit zu erregen.

Quelle: www.mediamarkt.de

Im zweiten Beispiel wird das Rot als Call-to-Action-Farbe (CTA-Farbe) genutzt. Immer wenn der User etwas anklicken oder eine Handlung vornehmen kann, erscheint das jeweilige Element in Rot.

Wichtig ist, dass die Farbe ausschließlich zu diesem Zweck eingesetzt wird. So verinnerlicht der User das System schnell und findet sich besser zurecht.

Wird das Umfeld in zurückhaltenden Farben und mit viel Weißraum gestaltet, ist das Rot trotz reduziertem Einsatz dominant und deine Marke erkennbar.

Quelle: www.atolye15.com

Ist deine Unternehmensfarbe zitronengelb, versteht sich von selbst, dass du Texte nicht in zitronengelb auf weißem Hintergrund einsetzt. Das wäre selbst für „Adlerauge himself“ schlecht lesbar.
Du arbeitest also eher mit farbigen Hintergründen oder beispielsweise mit monochromen Bildern in zitronengelb und wählst für den Text eine dunkle Farbe, die sich gut absetzt und die Lesbarkeit fördert.

Quelle: hlvticons.ch

Bestimme eine Call-to-Action-Farbe

Die CTA-Farbe zeigt immer an, wenn eine Handlung vom User vorgenommen werden kann. So sollten beispielsweise Button und Banner nur in der CTA-Farbe erscheinen. Und zwar

  • ausschließlich
  • konsequent und
  • kontinuierlich.

Die CTA-Farbe nutzt du also bitte nur zu diesem Zweck und setzt sie fortwährend auf allen Seiten ein.

Dieses System, das Handlungsaufforderungen immer in der besagten CTA-Farbe erscheinen, lernt der User in Nullkommanix und findet sich dadurch deutlich besser zurecht.

Idealerweise sticht diese Farbe heraus. Denn es ist sicher dein Ziel, dass der User Handlungen vornimmt. Achte aber darauf, dass z. B. der Text auf einem Button in der CTA-Farbe gut lesbar ist. Wähle hierfür eine kontrastreiche Farbe.

Nutze Hinweis-Farben

Kann man auf deiner Webseite Handlungen vornehmen (z. B. eine Newsletter-Anmeldung) so erscheint nach erfolgreicher Anmeldung ein Hinweis-Text, im Anmeldefeld selbst oder auf einer gesonderten Seite.

Bestimme für solch erfolgreiche Handlungen eine Hinweis-Farbe. Idealerweise nimmst du hierfür einen Grünton. Wir sind es von Ampelschaltungen und vielen anderen Dingen gewohnt, dass Grün ein “Go!” oder “Success” symbolisiert.

Du kannst den Text in Grün setzen oder auch einen grünen Hintergrund mit weißem oder schwarzem Text anlegen. Das kommt ganz auf dein Markendesign und die gesamte Gestaltung deiner Webseite an.

Rot hingegen zeigt oft an, dass etwas schief gelaufen ist. Also empfiehlt sich diese Farbe für misslungene Handlungen.

Auch hier gilt, setze diese Farben:
 

  • ausschließlich
  • konsequent und
  • kontinuierlich ein.

Wähle ggf. noch Akzent-Farben

Möglicherweise wurde nur eine oder zwei Farben für dein Markendesign definiert. Dazu passend hast du CTA- und Hinweis-Farben ausgewählt, es fehlt dir aber noch die ein oder andere Farbe, mit der du Akzente setzen, bzw.

Deine Webseite konvertiert schlecht?

Dann hol dir jetzt die 6 Schritte-Anleitung für ein nutzerfreundliches Webdesign, das die Usability fördert und hilft, dass deine Angebote genutzt werden.

Inhalte hervorheben kannst.

Grundsätzlich gilt: Weniger ist mehr. Definiere für deine Webseite nur so viele Farben, wie nötig. Dass heißt: Jede Farbe sollte eine Rolle zugewiesen bekommen und diese konsequent und kontinuierlich ausführen. Sind alle Rollen besetzt, braucht es keine zusätzliche Farbe mehr.

Wenn dir dennoch eine fehlt, kannst du – passend zu deinem Markendesign – aus verschiedenen Farbgruppen Akzent-Farben wählen, zum Beispiel: komplementäre Farben, hellere oder dunklere Nuancen oder auch analoge Farben.

Die harmonischsten Farbkombinationen liefert uns im Übrigen die Natur. Hast du z. B. ein Foto vom Federkleid eines Fasans und pickst die einzelnen Farben heraus, so ergibt sich immer eine harmonische Farbpalette.

Findest du ein solches Bild, in dem deine Marken-Farbe enthalten ist, kannst du dort passende Akzent-Farben für deinen Look finden.

Was ist also bei der Farbgestaltung im Web zu beachten?

  • Setze deine definierten Farben konsequent ein.
  • Gib deinen Farben eine konsistente Rolle: Nutzt du eine Farbe für einen Call to-Action-Button, dann setze diese auf der gesamten Seite für diese Handlung ein. Das gilt auch für Texte oder Angebote, stell sie einheitlich dar.
  • Füge keine Farben hinzu, die keine Funktion haben. Design ist keine Dekoration.
  • Vermeide Text und Hintergrund in einer ähnlichen Farbgebung. Achte auf Kontraste und gute Lesbarkeit.
  • Setze genügend Weißraum ein, er verleiht deinen Inhalten mehr Gewicht.

Nimm dir ausreichend Zeit und probiere verschiedene Farbkombinationen und Lösungen aus. Ich wünsche dir viel Spaß dabei und falls du Hilfe benötigst: hello@goldmarie-suwiemer.de

Happy working
Goldmarie a. k. a. Su Wiemer

Susanne Wiemer
Hola, ich bin Goldmarie a.k.a. Su Wiemer und ich zeige dir, wie du einen Online-Auftritt gestaltest, der deine Wunschkunden magisch anzieht und sie in Kunden umwandelt – Design matters!

Kommentar absenden

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