Für ein ansprechendes und überzeugendes Webdesign sind neben der übersichtlichen Gestaltung und gut lesbaren Schriftarten ganz besonders die verwendeten Farben von Bedeutung. Dies gilt besonders, da Farben eine subtile Wirkung auf ihre Betrachter haben und bestimmte Assoziationen, Gefühle und somit auch unbewusste Reaktionen auslösen. Wie einzelne Farben unsere Wahrnehmung beeinflussen, wie Du eine tolle Farbpalette für Deine Website zusammenstellen kannst und welche Tools Dir dabei helfen, zeige ich Dir in diesem Artikel. Außerdem zeige ich Euch, wie man ein Farbschema in meinen beiden Lieblings-Plattformen Jimdo und Wix erstellen und verwenden kann. Zum Schluss findet Ihr noch ein kleines Video zum Thema Hex Farben sowie weiter Link-Tipps von mir.
Hast Du Vorgaben für Dein Farbschema?
Vielleicht hast Du bereits ein Logo oder sogar eine ganze Corporate Identity und somit auch schon Vorgaben für Deine Farben oder Farbfamilie. Dann solltest Du unbedingt hier ansetzen, damit Deine Website mit ihren Farben perfekt zu Deinem sonstigen Look & Feel passt. Schließlich möchtest Du überall mit einem einheitlichen Farbschema auftreten, um so Wiedererkennung und Vertrauen zu Deiner Marke aufzubauen.
Solltest Du bisher noch keine Farbauswahl getroffen haben, ist das überhaupt kein Problem und die Gestaltung Deiner Website ist der ideale Zeitpunkt, dies nun zu tun! Vielleicht geht es Dir auch so wie mir, ich hatte zunächst nur mein Logo und anthrazit und weiß und bin von dort aus gestartet mit meiner Farbpalette. Wichtig für die anstehende Auswahl ist, dass Du Dir schon mal Gedanken darüber gemacht hast, welche Werte und Emotionen Dein Unternehmen und Deine Leistungen am besten repräsentieren. Die Wirkung der auswählten Farben sollte diese Werte und Emotionen bestmöglich unterstützen. Wie die einzelnen Farben die Wahrnehmung beeinflussen, schauen wir uns im nächsten Abschnitt an.
Unterschiedliche Farben und ihre Wirkung
Lohnt es sich wirklich, die verschiedenen Farben hinsichtlich Ihrer Wirkung zu prüfen? Mit Sicherheit! Es gibt Studien, die ergeben haben, dass Menschen innerhalb von 90 Sekunden die Entscheidung fällen, ob Ihnen ein Produkt gefällt oder nicht und dass diese Entscheidung wiederum zu 90% von der Farbe des Produktes abhängt. (Quelle der Studie: https://neilpatel.com/blog/how-colors-affect-conversions/) Eine kurze Betrachtung der Farbwirkung lohnt sich also in jedem Fall, bevor Ihr Euch entscheidet. Hier der komprimierte Überblick der psychologischen Wirkung von Website-Farben:
Rot
Rot symbolisiert starke Emotionen und erzeugt große Aufmerksamkeit. Es steht für Aktivität, Energie, Bewegung und Liebe – aber auch für negative Assoziationen wie Warnung, Feuer, Aggressivität und Wut. Daher ist beim Einsatz von Rot auf Websites eher Zurückhaltung geboten. Als Akzentfarbe sparsam eingesetzt, kann Rot eine aufregende Wirkung haben und gezielt die Aufmerksamkeit auf eine gewünschte Aktion der Website-Besucher lenken . (Stichwort: Call to Action, wie z.B. Registrierung, Kauf, Absenden!)
Orange
Orange wirkt einladend, fröhlich, lebendig und energetisch. Häufig wird Orange mit Spaß, Begeisterung und Wärme in Verbindung gebracht, manchmal steht es aber auch für Warnung bzw. Achtung! Es eignet sich im Webdesign ähnlich wie Rot dazu, Deine Website-Besucher zu bestimmten Aktionen aufzurufen. Genau wie bei Rot ist hier auch weniger mehr, zu viel Orange kann schnell überwältigend wirken.
Gelb
Geld ist fröhlich, strahlend und voller Energie und Strahlkraft. Positive Konnotationen sind Sonne, Leuchten, Glück und Optimismus. Vor allem helle Gelbtöne können auf Websites eine annehme Wirkung haben und eine fröhliche, aber ruhige Stimmung transportieren. Bei starkem Gelb, gerade in Verbindung mit Schwarz, rate ich eher zu Vorsicht, da es sehr aufdringlich und marktschreierisch wirken kann.
Grün
Grün steht für Natur, Wachstum, Gesundheit und Ruhe. Grün eignet sich sehr gut für Websites aus dem Bereich Ernährung, Gesundheit, Wohlbefinden oder Nachhaltigkeit, da es harmonisch, frisch, gesund, friedlich und ausbalanciert wirkt. Diese positive Stimmung kann Grün auch bei Deinen Website-Besuchern erzielen. Blau
Blau wird von sehr vielen Marken genutzt, da es für Vertrauen, Sachlichkeit, Kompetenz und Zuverlässigkeit steht. Je nach Schattierung reicht die Wirkung von Blau von ruhig, zuverlässig, seriös bis hin zu erfrischend und energiespendend. Diese Assoziationen kommen aus der Natur vom blauen Himmel und dem blauen Meer und werden auch mit Weite und Ferne verbunden. Je nach Nuance kann Blau auch zurückhaltend und kühl wirken. Grundsätzlich kannst Du mit Blau beim Webdesign aber wenig falsch machen!
Türkis
Als Mischung aus Grün und Blau vereint Türkis die positive Wirkung beider Farben: Es ist vertrauensfördernd wie Blau und zur gleichen Zeit beruhigend und harmonisierend wie Grün. Türkis steht für Bewusstheit, Klarheit, Freiheit und Offenheit. Besonders gut eignet sich Türkis für Websites aus den Bereichen Reisen und Urlaub, Heilpraxis, Wellness, Schönheit und Kosmetik. Lila
Die Farbe Lila oder Violett hat eine kreative, magische, verträumte und phantasievolle Ausstrahlung. Häufig werden mit dieser Farbe auch spirituelle oder religiöse Themen assoziiert. Die Wirkung von lila eignet sich weniger, um gezielt Aufmerksamkeit zu erregen, sondern eher, um eine ruhige und gelassene Stimmung auf Deiner Website zu erzielen.
Rosa
Rosa hat überwiegend positive Assoziationen, es wirkt sowohl elegant als auch verspielt, sanft und beruhigend. Dabei wird Rosa jedoch stark mit femininen, weiblichen Themen in Verbindung gebracht und ist meist schwer davon zu trennen. Leuchtende Rosa- und Pink-Töne können kraftvoll im Webdesign wirken, helles Rosa wird oft als niedlich und sentimental wahrgenommen. Braun
Braun ist eine warme Farbe aus dem Naturbereich, die mit Holz, Erde, Zuverlässigkeit und Bodenständigkeit assoziiert wird. Häufig wird Braun verwendet, wenn es um Leder, Brot, Schokolade, Kaffee oder Tabak geht. Braun kann aber leicht langweilig oder konservativ wirken. Im Webdesign eignet es sich weniger, um gezielte Aufmerksamkeit auf bestimmte Aktionen zu lenken, aber durchaus, um eine behagliche Stimmung auf einer Website zu erzeugen. Grau
Die positiven Assoziationen zur Farbe Grau umfassen Professionalität, Zeitlosigkeit, Zuverlässigkeit, Seriosität und Kompetenz. Jedoch wird Grau oft auch als unscheinbar, formell, langweilig und nichtssagend empfunden. Am besten wirkt Grau im Webdesign in Verbindung mit anderen Farben, deren Strahlkraft es umso mehr zur Geltung bringen kann.
Schwarz
Schwarz ist eine starke Farbe, die elegant, hochwertig und modern wirkt, gleichzeitig aber auch sehr dominant in ihrer Wirkung ist. Im Webdesign wirkt Schwarz am besten in der Kombination mit anderen Farbtönen, die es gezielt in Szene setzen kann. Schwarz ist bei der Wahl der Schriftfarben im Webdesign klar eine der Top-Farben, die Du auswählen kannst. Das sprichwörtlich Schwarz auf Weiß sorgt auch am Bildschirm für die beste Lesbarkeit Deiner Botschaften.
Weiß
Weiß wirkt rein, klar, freundlich und neutral. Den sogenannten Weißraum zwischen verschiedenen Website-Elementen kann es meiner Meinung auf einer Website gar nicht genug geben. Weiße Zwischenräume sorgen für maximale Übersichtlichkeit auf einer Website und bringen die anderen Website-Elemente deutlich besser zur Geltung. Mancher empfindet zu viel weiß allerdings auch als steril und klinisch. Weiß ist der ideale Partner für andere Farbtöne und wird deshalb von vielen Webdesignern bevorzugt als Hintergrundfarbe für Websites eingesetzt.
Kombiniere 2-3 Farben für einen professionellen Loo
Grundsätzlich ist es empfehlenswert, dass Du Dich für einen professionellen Look Deiner Website auf 2-3 Farben festlegst. Websites, die mehr Farben verwenden, wirken oft unprofessionell und überladen. Das gilt natürlich nicht für Dich, wenn sich auf Deiner Website alles um das Thema Regenbogeneinhörner dreht.
Generell solltest Du folgende Farben auswählen:
Hintergrundfarbe
Textfarbe
Akzentfarbe
Die Akzentfarbe kannst Du nutzen, um Highlights zu setzen und Aufmerksamkeit auf bestimmte Bereiche oder gewünschte Aktionen Deiner Website Besucher zu lenken. Meine Akzentfarbe ist zum Beispiel Pink (#eb627c), das ich gezielt für meine Top Level Navigation sowie für Buttons und Grafiken verwende.
Tools zum Finden Deiner Farben
Es gibt tolle kostenlose Tools, die Dir bei der Auswahl von Farben oder sogar beim Erstellen Deiner eigenen Farbpalette helfen können, hier eine Auswahl meiner Favoriten:
ColorZilla: Zum Herausfinden von Farben auf jeder beliebigen Website schwöre ich auf diese Browser-Erweiterung für Chrome.
Picular: So cool, hier kannst Du einfach einen Begriff Deiner Wahl eingeben (Am besten in Englisch!) und bekommst dann passenden Farbtöne dazu vorgeschlagen.
Canva Farbenrad: Hier kannst Du die Komplementärfarbe sowie andere passende Farben zu Deiner Wunschfarbe finden und einiges über Farbtheorie lernen.
Canva Farbpaletten-Generator: Hier kannst Du ein Bild hochladen, das Du verwenden möchtest oder das Farben enthält, welche Du verwenden möchtest. Der Canva Farbpaletten-Generator zeigt Dir dann eine passende Farbpalette an, fertig mit Farbcodes zur direkten Verwendung.
Coolors: Kinderleicht zu bedienen, zaubert Dir Coolors wunderschöne Farbpaletten. Sobald Dir ein Ton gefällt, kannst Du ihn einfach einloggen und dann passende weitere Farben entdecken.
Adobe Color CC: präsentiert Dir ganz einfach perfekt aufeinander abgestimmte Farben.
Farbschema in Jimdo Creator bearbeiten
Allgemeines Farbschema der Website in Jimdo Creator bearbeitenIm Jimdo Creator hast Du verschiedenen Möglichkeiten, Deine ausgewählte Designvorlage auf Deine individuellen Website-Farben anzupassen. Am einfachsten ist es, wenn Du die allgemeinen Einstellungen im Farbschema im Bereich Menü > Design > Style änderst. Hier werden allgemeine Einstellungen für die komplette Website vorgenommen. Wenn Du hier Grundeinstellungen vornimmst, stellst Du sicher, dass Deine Jimdo Website ein konsequentes und harmonisches Erscheinungsbild hat.
Du kannst aber auch zusätzlich einzelne Webseiten- Elemente manuell stylen, indem Du unter Menü > Design > Style den Schieberegler bei Detail Styling aktivierst. Dann klickst Du einfach mit der Farbrolle das gewünschte Element an und bearbeitest die Farbe in den Styling-Optionen, wie hier im Bildbeispiel die Optionen eines Buttons auf meiner Website.
Farbschema in Jimdo Dolphin bearbeiten
In Jimdo Dolphin kannst Du ebenfalls die Farben Deines Designs anpassen. Du wählst hierzu im Bereich Design > Farbschema bearbeiten eine neue Hauptfarbe aus, dies kannst Du manuell tun oder Dir eine Farbe aus einem Bild Deiner Wahl, z.B. Deinem Logo oder Key Visual aussuchen. Jimdo Dolphin erstellt Dir daraufhin eine Vielzahl verschiedener Farbpaletten, die mit der gewählten Hauptfarbe harmonisieren. Du kannst Dir gedeckte, sanfte, leuchtende oder farbenfrohe Paletten zu Deiner Hauptfarbe anzeigen lassen. so dass Du garantiert fündig wirst. Auf einen Klick kannst Du kinderleicht herausfinden, wie die Farben Deiner auswählten Palette in den verschiedenen Website-Elementen Deiner Dolphin Website einsetzt werden. Dann heißt es nur noch speichern und veröffentlichen.
Farbschema in Wix bearbeiten
Auch Wix bietet Dir tolle Möglichkeiten, die Farben Deiner Website individuell auf Deine Farbpalette anzupassen. Um die Farben deines gewählten Website-Designs konsequent auf der gesamten Website zu verändern, solltest Du die Farben direkt im Farbschema bearbeiten. Dazu klickst Du in Deinem Editor auf Hintergrund > Farbe > Ändern. Dann kannst Du entweder unter Farbschemen ein vorgeschlagenes Farbschema auswählen oder auf einen Farbkreis klicken, um das Farbschema Deiner Website individuell anzupassen.
Darüber hinaus hast Du außerdem die Möglichkeit, die meisten Website-Element im Wix Editor individuell in ihrer Farbe zu bearbeiten. Dazu klickst Du ein Element an und wählst Design > Design gestalten > Füllfarbe & Deckkraft. Hier kommst Du wieder zur Farbauswahl Deiner Website und kannst aus den vorausgewählten Farben wählen oder eine neue Farbe hinzufügen. An dieser Stelle hast Du auch die Möglichkeit, die Deckkraft Deiner Farbe zu erhöhen oder zu verringern, wenn Du mit Transparenz arbeiten möchtest.
Video und Pinterest Tipps
Im Webdesign arbeiten wir meistens mit den sogenannten Hex Farben. In diesem kurzen Video erkläre ich Dir ganz komprimiert, was Hex Farben sind.
Viele weitere Tipps und Inspiration rund um das Team Website-Farben findest Du übrigens auch auf meinem Pinterest-Board mit Webdesign Tipps:
https://www.pinterest.com/jscommunications/website-design-tipps/
Ich hoffe, diese Tipps helfen Dir weiter und freue mich wie immer auf Kommentare oder Fragen!