WIE WÄHLE ICH PASSENDE FARBEN FÜR MEINE WEBSEITE AUS

Praktische Tipps wie Du harmonische Farben für deine Webseite und deine Zielgruppe finden kannst

Wie wähle ich passende Farben für meine Webseite  aus ?

Praktische Tipps wie Du harmonische Farben für deine Webseite und deine Zielgruppe finden kannst

 

Nachdem du alle deine Inhalte zum Aufbau deiner Webseite zusammengestellt hast, kommst du zum tatsächlichen Bauen deiner Webseite. Eine der wichtigsten Komponenten deiner Webseite wird die Auswahl der Farben sein. Mit der richtigen & harmonischen Farbkombinationen kannst du deinen Kunden das Navigieren auf deiner Webseite erleichtert, die Aufmerksamkeiten auf die wichtigen Punkte lenken, einen Lifestyle vermitteln und bestimmte Gefühle hervorrufen.

Eine falsche Farbauswahl wird sicherlich niemanden umbringen; kann aber einen signifikanten Effekt auf die Interaktionen deiner Kunden haben.

Schaue Dir folgendes Beispiel an

Wie du siehst ist der Text und das Symbol unverändert und doch fühlt sich nur das Rote Herz als „richtig“ an.

Also bevor Du dich  für eine Farbkombinationen für deine Webseite entscheidest bzw. festlegst,  macht es Sinn zu überlegen wie dein Produkt im Allgemeinen repräsentiert wird. Hier lohnt es sich durchaus auf die Konkurrenz zu schauen , das heißt welche Farben bzw. Farbkombinationen haben die Big Player genommen...Inspiration durch Profis ist oft der Anfang einer neuen schönen Webseite. 

Kleiner Tipp am Rande, sicher sollte deine Webseite deinen Geschmack repräsentieren, jedoch machen hauptsächlich Anfänger den Fehler, persönliche Farbvorlieben in den Vordergrund zu stellen, was zur Folge hat, dass ich Webseiten mit  braunen Hintergrund und blass lila Schrift sehe, oder noch Schlimmeres.

Ich bin keine großer Fan von uniformen Webseiten, jedoch sollte die Farbauswahl Stimmung erzeugen UND funktional sein, das heiß im Klartext, die Schrift muss auch auf dem mobile Endgeräten und  im grellen Licht  gut lesbar sein, die Webseite sollte durch die Farbauswahl deinen Kunden ein klare Struktur vermitteln und dein CTA - Button sollen und müssen eine Reaktion  hervorrufen können.

Hier  hilft es sich kurz zu überlegen, was der "Sinn " deiner Webseite sein wird. Vermittels Du hauptsächlich Informationen oder dient es als ein Schaukasten deiner Bilder bzw.  Produkte? Warum ist dies für eine Farbauswahl entscheidend ?

Wenn der Schwerpunkt hauptsächlich auf dem Design liegst, kannst du sehr wohl Farben als Accessoires und komplementär zu deine Produkten nutzen, da hauptsächlich die Produkte deine Geschichte erzählen und die Farben diese Objekte noch unterstützen können, anders verhält es sich wenn deine Webseite viel Informationen zu deinen Kursen oder deiner Firma vermitteln sollte, dann muss der Schwerpunkt daran liegen, den Kunden das Aufnehmen der Informationen so einfach wie möglich zu machen.

​Wie bereits erwähnt haben assozieren wir mit bestimmten Farben, bestimme Dinge und es wurde sogar nachgewiesen , dass bestimmte Farben sogar körperliche Reaktion wie z.B. blutdrucksenkend wirken oder zur Steigerung der Herzfrequenz führen können, somit hat deine Auswahl eines Farbschema eine konkrete Wirkung auf den Betrachter deiner Webseite.

Ein paar Basics vorweg

 

Falls Du dich für ein Template für den Aufbau deiner Webseite ( alle Webbaukästen bieten dies mittlerweile an) entschieden hast, ist in der Regel bereits eine stimmige Farbkombination vorbelegt, das heiß der Text, die Überschriften, die Buttons und Ähnliches haben alle bereits ihre vordefinierten Farben. Oft sucht man bereits in den Templates bereits nach Themen, d.h. Unternehmen, Hotel, Restaurant etc. je nach dem was Dein Business beinhaltet, somit sind diese Farben auch schon in der richtigen "Gefühlsrichtung" ausgewählt worden. Es spricht nichts dagegen ein Template als Ausgangsbasis zu nehmen und doch  möchte bzw. sollte man  etwas persönliches zum Template hinzufügen, oder in manchen Fällen hat man ein tolles Template (im Sinne der Funktion und Aufbau) gefunden, die vorbelegten Farben passen aber überhaupt nicht zum Logo, oder  die Farben repräsentieren weder Dich, noch dein Produkt. Jeder Anbieter lässt Dich mittlerweile deine Farben im Template individuell wählen und ich finde du solltest davon auch ruhig Gebrauch machen.

Um wirklich zusammenpassende Farben finden zu können, solltest du kurz verstehen, was wir Menschen als " zusammenpassend" empfinden, beziehungsweise wie Designer die Farbkombinationen bestimmen. 

Beim Webdesign finde ich gilt wie oft im Leben die Regel weniger ist mehr.

In der Regel wählt man max 3 Hauptfarbe in Kombination mit 2 neutralen Farben. 

Die Auswahl der  Hauptfarben kann ( muss aber nicht) nach folgenden Muster erfolgen

  • TRIADE:  drei Fraben im gleichmäßigen Abstand zueinander

  • KOMPLEMENTÄR:  im Farbkreis exakt gegenüber liegende Farbtöne

  • ANALOG-KOMPLEMENTÄR: zwei komplementär plus eins analog (meine Lieblingskombination)

  • ANALOG: aneinander angrenzende Farbtöne

  • AKZENTUIERT:  gedeckte Farben mit einem Highlight

  • WARME FARBEN:  aus dem oberen Farbbereich des Farbkreise

  • KALTE FARBTÖNE:  aus dem unteren Hälfte des Farbkreis

Mehr anzeigen

Wissenswert

Je nachdem für wenn du deine Webseite baust, also was ist dein Zielgruppe - Männer und Frauen tendieren zu unterschiedlichen Farbkombinationen, ebenso findet man auf Webseiten für Männer so gut wie keine Lila Töne, oder pastellige Variationen. 

Falls Du dich noch genauer mit den Farbkomponenten, deren Aufbau, Wirkung und Systemen im Webdesign beschäftigen möchtest findest Du einen hervorragenden Fachbeitrag (in Englisher Sprache) unter diesen Link 

Wie gehe ich bei der Farbauswahl für meine Webseite nun vor? 

Ein Browser interpretiert Farben durch Hexadezimal werte. Immer voran steht # ,gefolgt von einer Kombination von Buchstaben und zahlen, die die RGB werte sozusagen für den Browser übersetzen. Also wenn Du nach einer bestimmten Farbe suchst wird die Farb-Nummer  ungefähr so dargestellt: "#D61043". 

Farbcode herausfinden

Wie wählst du also deine Farben bzw.. die HEX Nummer aus ?

Ich nehme ein Foto was  mich inspiriert oder das Produkt repräsentiert und öffne es im Photoshop. Im Photoshop selbst nehme ich das Tool mit der Pipette und suche ich mir verschiedene Farben heraus. Nachdem ich die Nummern habe, überprüfe ich auf den HTML web sicheren Farbtabelle ( hier ist der Link zu einer solchen Tabelle in der 216 websichere Farben mit den html Farbcodes aufgeführt sind ) und wähle die nächstmögliche Farbvariante , somit kann ich gewährleisten, dass alle Browser meine Farben gleich darstellen können. Ich möchte nicht, dass eine Farbe in unterschiedlichen Browsern bedeutende Nuancen hat.

Wer keinen Photoshop hat , Gimp ist ein kostenlose Variante ( ich finde es jedoch sehr umständlich) oder ihr könnt folgendes Tool nutzen : Dazu brauchst Du einen kostenlosen Add-on für deinen Browser , dieser kann dann die Farben direkt auf deinem Bildschirm (also auf einer Webseite) bestimmen.

Web Developer -> Informationen -> Farbinformationen anzeigen ( rechter Mausklick) 

LINKS zu den Add-ons 

Sobald Du die Nummer hast, kannst Du ganz einfach innerhalb deines Template, unter Design diese Nummer eingeben und schon ändert sich die Farbe. Meistens wird diese Farbe in dem Editor auch unter deinem Profil gespeichert, damit Du sie immer wieder nutzen kannst

Fazit

Beim Erstellen der Webseite und bei der Auswahl der Webseitenfarben muss man kein Vollprofi sein, es hilft jedoch zumindest die Basics zu verstehen und anzuwenden. Ich hoffe diese Post hat Dir den Einstieg erleichtert und falls Du noch mehr interessanten Themen Rund um Webseite selbst erstellen entdecken möchtest, dann abonniere  meinen Newsletter oder folge mir auf Facebook, da stelle ich immer wieder hilfreiche Tipps und Tricks vor.

BEISPIEL

MEINE WEBDESIGN FARB INSPIRATION

2020 Borina Websolutions UG 

Inh. Petra Borina / Lindenbrunnen 8/ 74538 Rosengarten/ borinawebsolutions@gmail.com  / 0791-20460508