Farben im Webdesign richtig einsetzen

Kategorie: Internet Tipps

Neben den Texten sind auch die Farben einer Website maßgeblich für den Erfolg bzw. Misserfolg einer Internetpräsenz verantwortlich. Die einzelnen Farben haben unterschiedliche psychologische Wirkungen auf die User und sollten daher sorgfältig und für die jeweilige Firma passend ausgewählt werden. Es kommt darauf an, die Farben im Webdesign so einzusetzen, dass sie die gewünschten Emotionen auslösen.
Farbschema Webdesign

Inhalt

Farbkombinationen

Es gibt Farben, die besonders gut harmonieren und die richtig miteinander kombiniert zu einer gelungen Website beitragen. Diese Farbkombinationen können auf verschiedene Arten ermittelt werden.

Beim analogen Farbschema werden ähnliche Farbtöne miteinander kombiniert und die Abweichungen zwischen den Farbtönen sind sehr gering.

Das komplementäre Farbschema fügt dagegen genau gegensätzliche Farbtöne zusammen. Trotz dieser Gegensätzlichkeit wirken die Farben im Zusammenspiel harmonisch.

Durch das Programm Paletton – The Color Scheme Designer können sowohl analoge als auch komplementäre Farbschemata ermittelt werden. Hierzu muss nur der Hexadezimal-Code der Grundfarbe eingegeben werden und dann wird ein komplettes Farbschema berechnet. Gestartet wird das Programm, indem man im Eingabefeld Base RGB: unten links den Farbcode eingibt.

Farbkontraste zur Hervorhebung

Bestimmte Elemente der Website, wie der Senden-Button eines Kontaktformulars oder der Kaufen-Button in einem Onlineshop sollen besonders häufig angeklickt werden. Um dies zu erreichen, sollte man diese Elemente farblich vom Layout der übrigen Seite abheben. Sind diese Buttons in ähnlichen Farbtönen wie der Rest der Website gehalten, werden sie mangels Unterscheidbarkeit kaum angeklickt. Werden dagegen Komplementärfarben verwendet, die sich deutlich vom Rest des Layouts abheben, werden mehr Anfragen getätigt bzw. mehr Produkte gekauft.

Für diese Website ist es daher besser einen Button in der Komplementärfarbe grün einzubauen, statt den Button in der orangenen Grundfarbe der Internetseite zu gestalten.

Rot

Mit der Farbe Rot können sowohl positive als auch negative Emotionen ausgelöst werden. Rot steht für Lust und Liebe aber auch für Wut und Gefahr. Daher sollte man diese Farbe im Webdesign nur sehr sparsam einsetzen, um negative psychologische Wirkungen zu vermeiden. Rot sollte nicht großflächig, sondern nur punktuell auf der Website eingesetzt werden. So können beispielsweise besonders wichtige Punkte durch Rot hervorgehoben werden. Weil Rot für Verbote steht und gleichzeitig auch noch eine warme Farbe ist, kann es sehr viele Emotionen auslösen und bei zu großzügiger Anwendung einen kontraproduktiven Effekt auf den Erfolg der Website haben.

Rot
#FF0000
Dunkelrot
#8B0000
Hellrot
#F08080

Um die negativen Effekte, die die Farbe Rot hervorruft zu umgehen, kann auf Dunkelrot oder Hellrot ausgewichen werden, diese Farben wirken etwas weniger aggressiv und werden von den meisten Usern positiver wahrgenommen.

Grün

Der große Vorteil, der Farbe Grün ist, dass es sich um eine neutrale Farbe handelt, die weder warm (Rot) noch kalt (Blau) wirkt. Daher vermittelt ein grüner Farbton Ruhe und Entspannung. Außerdem gilt Grün als die Farbe der Hoffnung. Weil Grün mit Natur verbunden wird, ist diese Farbe besonders gut für Unternehmen geeignet, die Naturprodukte verkaufen, sich mit der Umwelt beschäftigen oder Reisen ins Grüne anbieten. Weniger gut eignet sich Grün für Unternehmen, die technische Produkte ohne Bezug zum Umweltschutz herstellen.

Grün
#008000
Dunkelgrün
#006400
Olivgrün
#808000
Gelbgrün
#9ACD32

Blau

Blau wird mit Zuverlässigkeit, Vertrauen und Sicherheit assoziiert. Daher ist Blau auch die bevorzugte Farbe von Banken oder Versicherungen. Blau ist eine kalte Farbe und sollte daher ebenso wie die warme Farbe Rot nicht im Übermaß eingesetzt werden. Außerdem wird Blau auch mit Männlichkeit verbunden und sollte nicht verwendet werden, wenn es sich um spezifisch weibliche Produkte handelt. Helles Blau kann eine aktivierende Wirkung haben, während die dunklen Blautöne eher für Beständigkeit und Kraft stehen.

Blau
#0000FF
Königsblau
#4169E1
Himmelblau
#87CEEB
Hellblau
#ADD8E6

Gelb

Gelb gilt als positive und freundliche Farbe und wird mit Freude und Optimismus verbunden, hat aber auch negative Wirkungen und kann mit Neid und Warnungen gleichgesetzt werden. Wegen dieser doppelten Wirkung sollte Gelb mit Vorsicht eingesetzt werden. Starke Gelbtöne sollte eher vermieden werden, während man mattere Gelbtöne auch häufiger einsetzen kann. Durch Gelb kann Aufmerksamkeit erregt und zu Handlungen animiert werden, sofern der Einsatz dieser Farbe nicht übertrieben wird.

Gelb
#FFFF00
Gold
#FFD700
Khaki
#F0E68C
Hellgelb
#FFFFE0

Orange

Orange vermittelt Energie und Spaß, erregt Aufmerksamkeit und steht für Kreativität. Daher benutzen viele Firmen aus der Meidenbranche diese Farbe als ihre Unternehmensfarbe. Reines Orange wirkt allerdings oft zu aufdringlich, daher sollten eher mattere oder hellere Orangetöne verwendet werden, um das Auge des Betrachters nicht zu überfordern. Es muss verstärkt darauf geachtet werden, Orange nicht zu großflächig einzusetzen, damit die Website nicht zu unseriös aussieht.

Orange
#FFA500
Dunkelorange
#FF8C00
Hellorange
#FF7F50

Grau

Grau gilt als zeitlos, elegant und seriös, wird aber auch mit Langeweile in Verbindung gebracht. Für geschäftliche Websites oder sehr textlastige und informative Internetseiten ist grau gut geeignet, weil der Text und nicht die Designelemente im Mittelpunkt stehen sollen. Soll dagegen Aufmerksamkeit erregt oder eine aktivierende Wirkung erzielt werden, ist Grau die falsche Wahl. Als neutraler Farbton gilt grau als Kompromisslösung, wenn die Farbe eher im Hintergrund stehen und einen ausgleichenden Effekt haben soll.

Grau
#808080
Dunkelgrau
#A9A9A9
Silber
#C0C0C0
Hellgrau
#D3D3D3

Verwandte Beiträge

VPN erklärt

Ein VPN (Virtual Private Network) ermöglicht durch einen VPN Server eine sichere Internetverbindung und schützt so die persönlichen Daten (wie IP Adressen) vor Zugriffen von unbefugten Dritten. Inhalt Wozu dient

Das Client-Server-Modell erklärt

Experten verbinden Computer in Netzwerken, um die Kommunikation der Teilnehmer zu vereinfachen den Datenaustausch zu erleichtern mehrere PCs auf ein externes Gerät (Drucker, Festplatte, Server …) zugreifen zu lassen Die

Blockchain für Anfänger erklärt

Die Blockchain ist eine dezentrale Datenbank, die Informationen verwaltet, verändert und speichert. Eine Blockchain (Block-Kette) besteht aus mehreren Blocks (Datenblöcken). An den ersten Block hängen sich neue Blöcke, die jeweils

Was ist Browser-Caching?

Besucht ein User bei aktiviertem Browser-Caching eine Website, dann werden Teile dieser Seite (zum Beispiel Grafiken oder CSS-Dateien) im Browser-Cache gespeichert. Beim nächsten Besuch der Seite brauchen die Inhalte also

SSL-Verschlüsselung erklärt

SSL ist die Abkürzung für Secure Sockets Layer und sorgt für eine verschlüsselte Übertragung der Daten. Eine verschlüsselte Domains erscheint jetzt mit dem Zusatz https und einem grünem Schloss vor