Farben für deine Website wählen und eine Farbpalette erstellen
Nun ist es endlich so weit – deine Website soll zum Leben erweckt werden. Deine Corporate Identity ist dafür die wichtigste Grundlage. Sie umfasst deine Vision, Werte, deine Markenstimme, Logos, Schriftarten und eben deine Farbpalette.
Inhalt
Warum sind Branding Farben wichtig?
Die Farbe in deinem Branding und auf deiner Website, ist eines der ersten Elemente, das deine Zielgruppe wahrnimmt. Die Farbpalette sorgt für den wichtigen Wiedererkennungswert und vermittelt Emotionen und ein bestimmtes Gesamtgefühl. Ist deine Marke total seriös, freundlich, verspielt oder spiegelt ein gemütliches Gefühl wider?
Einige Farben werden deine Zielgruppe ansprechen, weil sie ein bestimmtes Gefühl suchten, andere überhaupt nicht. Deshalb sollte dein Farbschema auf deine Traumkund:innen angepasst sein.
Im Webdesign steuern die Farben außerdem, welche Elemente zuerst wahrgenommen oder als besonders wichtig empfunden werden.
Deine Zielgruppe
Um deine Farbpalette so zu gestalten, dass sie zu deiner Zielgruppe passt, definierst du diese erstmal genau. Vielleicht hast du das schon getan. Falls nicht, kann es hilfreich sein, eine oder mehrere Personas basierend auf Umfragen und Gesprächen mit deiner Zielgruppe zu erstellen.
Hier sind einige wichtige Fragen, die du dir stellen kannst:
Welches Geschlecht hat deine Zielgruppe?
Wie alt ist deine Zielgruppe?
Welches Problem möchte deine Zielgruppe lösen?
Welches Bedürfnis will die Person sich erfüllen?
Wie möchte sie sich fühlen, wenn sie mit deinem Angebot interagiert?
Das Gefühl deiner Website
Und genau da kannst du anknüpfen. Wie möchtest du, dass deine Zielgruppe sich auf deiner Website und in der Zusammenarbeit fühlt? Was soll sie empfinden?
Diese Begriffe kannst du in einer Liste zusammenfassen und später bei der Farbwahl nutzen. Ich empfehle dir, etwa fünf Wörter auszusuchen.
Hier sind einige Beispiele:
motiviert
verstanden
erleichtert
respektiert
feminin
spirituell
erfolgreich
gesund
Klarheit
Begeisterung
Abenteuer
Natur
Gerechtigkeit
Sanftheit
Intuition
Ruhe
Falls es dir schwerfällt, das Gefühl zu beschreiben, gibt es ein paar Tricks.
Du kannst dir zum Beispiel vorstellen, wie deine Website aussehen würde, wenn sie ein Raum wäre.
Wäre er eher minimalistisch, total bunt, im Boho-Stil oder im industriellen Stil eingerichtet?
Welche Formen siehst du? Weiche, spitze, unkonventionelle?
Welche Farben siehst du?
Welches Gefühl entsteht dabei?
Oder du stellst dir deine Marke und Website als eine Person vor.
Welche Charaktereigenschaften hat sie?
Ist sie schüchtern, total laut oder witzig?
Wie spricht die Person? Benutzt sie viel Slang oder redet sie sehr seriös?
Welche Kleidung trägt die Person? Elegant, cool, Jogginghose?
Welches Gefühl oder welcher Vibe entsteht dabei?
Das ist dir alles zu kompliziert?
Vielleicht hast du gar keine Zeit oder Lust, dich in das Thema einzuarbeiten. Mit unserem Branding Paket bekommst du Website und Farben in einem. ☺️
Corporate Design Farben festlegen
Basierend auf deiner Liste, erstellst du nun deine Farbpalette. Dafür kannst du dich an der Farbpsychologie orientieren.
So viele Farben brauchst du
Zuerst stellt sich aber natürlich die Frage, wie viele Farben du überhaupt benötigst. Grundsätzlich gilt es, lieber wenige Farben gut zu kombinieren, als zu viele zu nutzen.
Deine Farben sollen deiner Zielgruppe im Gedächtnis bleiben. Je mehr du daher verwendest, desto weniger bleibt der Wiedererkennungswert bestehen.
Da das Squarespace-System auf fünf Farben beruht, nutzen wir am liebsten Farbschemata, die aus fünf Farben bestehen.
Eine Farbpalette sieht bei uns so aus:
ein Schwarzton
eine dunkle Farbe
eine auffällige Akzentfarbe
eine helle Farbe
ein weißer Ton.
Schauen wir uns mal an, wie du diese Farben auswählst.
Farbpsychologie
Farben haben unterschiedliche Wirkungen auf uns. Sie vermitteln eine Nachricht und lassen uns bestimmte Dinge fühlen oder an etwas denken. Bestimmt hast du direkt eine Vorstellung im Kopf, wenn du an die Farbe Gelb denkst.
Je nach Farbe und Kontext kann diese Wirkung positiv oder negativ auf uns wirken. Folgend sind die Assoziationen zu den jeweiligen Farben in positiv und negativ eingeordnet. Manches könnte im Kontext deiner Arbeit aber bestimmt auch anders eingeordnet werden.
Diese Assoziationen rufen Farben in uns hervor:
Schwarz
Mysteriös, Macht, Luxus, anspruchsvoll, Nacht, Würde
Tod, Trauer, Pech, Unnahbarkeit
Braun
Ernsthaftigkeit, Wärme, erdig, Verlässlichkeit, Authentizität
Konservativ, dogmatisch, schwerfällig, Traurigkeit
Pink/Rosa
Unterstützend, warm, Mitgefühl, Fürsorge, gesund, süß
Instabilität, impulsiv
Rot
Leidenschaft, Aktion, Liebe, Aufregung, Stärke, Kraft, Mut
Negativ, aggressiv, dominant, fordernd
Orange
Verspielt, Innovation, Selbstvertrauen, erfolgreich, aufregend, Mut
Unreif, Frustration, Ignoranz
Gelb
Glück, Optimismus, Selbstvertrauen, Selbstsicherheit, Freude
Sorge, irrational, Frustration
Weiß
Unschuld, Reinheit, Licht, Sauberkeit, Wahrheit, Neuanfang, Göttlich
Steril
Grau
Zeitlos, Neutral, Balance, Intelligenz, Stärke
Unsicher, fade, Depression
Türkis
Anspruchsvoll, ehrlich, spirituell, Klarheit, Mitgefühl
Angeberei, Geheimniskrämerei, Distanziertheit
Grün
Balance, Harmonie, erfrischend, Fruchtbarkeit, Natürlichkeit, Hoffnung
Langeweile, Neid
Lila
Königlich, Weisheit, Luxus, Kreativität, mystisch, Ambition, Reichtum, Extravaganz
Unausgeglichen, Unterdrückung
Blau
Ruhe, Sicherheit, Frieden, Loyalität, Vertrauen, Intelligenz
Cool, Angst, unfreundlich, Traurigkeit, unemotional.
Basierend auf diesen Wirkungen kannst du dir so schon mal drei Grundfarben auswählen. Die weiteren zwei Farben sind dann meist schwarze und weiße Töne.
Wie vorher schon erwähnt, kannst du dich natürlich auch für weniger Farben entscheiden.
Die Farbpalette aus einem Bild erstellen
Eine andere Methode, um die Farben auszuwählen, nutzt deine Branding Fotos. Hast du schon professionelle Fotos von dir, deinem Arbeitsort oder Kund:innen, die du auf der Website nutzen wirst?
In Squarespace, Photoshop, Canva und anderen Design-Plattformen kannst du mithilfe verschiedener Tools wie der Pipette Farben aus deinen Fotos extrahieren. Das gibt ein schön harmonisches Gesamtbild.
Diese Methode kann auch funktionieren, wenn du noch keine eigenen Fotos hast, aber dir schon ein Moodboard erstellt hast. Wie das geht, erfährst du jetzt.
Ein Moodboard erstellen
Moodboards werden im Corporate Design genutzt, um erstmal ein Gefühl für eine Marke zu bekommen. Dabei werden die grafischen Elemente der Marke gemeinsam auf einem Board dargestellt.
Schau gerne mal bei Canva vorbei. Dort gibt es viele tolle Templates, die du zur Erstellung deines Moodboards nutzen kannst.
Darin enthalten sein können:
deine Werte und Schlagwörter, die deine Marke beschreiben
Fotos, Grafiken und Illustrationen, die dazu passen
Farben, die deine Werte unterstreichen
deine Schriftarten für Logos, Überschriften und Absätze
Du kannst auch Pinterest nutzen, um schöne Fotos, grafische Elemente wie Muster oder Inspiration für dein Logo zu finden. Achte dabei nur darauf, dass du deiner Linie treu bleibst. Ich weiß, wie viel Schönes auf Pinterest zu finden ist. 🤭
Wenn du dein Moodboard gestaltet hast, kannst du es wiederum nutzen, um passende Farben zu finden und auszuprobieren.
Barrierefreiheit und Kontraste beachten
Wenn du mir nur etwas ähnlich bist, wirst du, nach langem hin- und herprobieren, mehr als eine Farbpalette haben, die du schön findest.
Das ist der Moment, wo du dich nochmal auf deine Zielgruppe fokussieren und ihre Needs und Wünsche reflektieren kannst. Welche Farbpalette passt besser zu ihnen?
Sobald du dich entschieden hast, gibt es noch eine Sache zu beachten. Und ganz ehrlich, dieser Punkt kann manchmal nochmal alles über einen Haufen werfen.
Du möchtest ja, dass alle Menschen deine Website einfach navigieren und alles gut erkennen können. Einige können jedoch bestimmte Farben gar nicht oder nur abgeschwächt sehen. Andere nehmen gar keine Farben war oder sehen nur sehr verschwommen.
Um auch diese Menschen abzuholen, ist es wichtig, dass deine Farben genug Kontrast haben. Ob das zutrifft, kannst du ganz einfach mit Tools wie dem Adobe Contrast Analyzer überpüfen.
Na, welche der folgenden Überschriften und Slogans kannst du am einfachsten lesen?
Du siehst jeweils eine Grafik mit dem dazugehörigen Test im Contrast Analyzer, der uns sagt, ob die Farben genügend Kontrast zueinander haben oder nicht.
Ich sag’ mal so, je mehr Kontrast, desto besser.
Auf deiner Website werden allerdings nicht alle Farben wild miteinander kombiniert. Du wirst immer eine hellere Farbe mit einer dunkleren kombinieren, um eben genügend Kontrast zu haben.
Prüfe also vor allem die Farben, die du übereinander verwenden wirst, wie Texte oder Buttons auf einem Hintergrund.
Dann passt du deine Farbpalette nochmal an und kommst deinem Farbschema so immer näher.
Hilfreiche Design-Tools
Noch steht deine Farbpalette nicht? Dann folgen hier ein paar Tool-Tipps. Einige davon nutze ich selbst oft.
Squarespace
Wie oben schon erwähnt, gibt es auch im Website Builder Squarespace die Funktion, aus einem Foto Farben zu extrahieren. Dafür gehst du über den Pinsel in die Website-Stile zu den Farben.
Farbe aus Bild
Unter Palette bearbeiten findest du den Reiter Farbe aus Bild. Dort kannst du ein Bild hochladen und Squarespace generiert dir automatisch eine Farbpalette daraus.
Ausgangsfarbe
Wenn du bereits eine Farbe ausgewählt hast, gibst du den Hex-Code ein (das Ding mit dem Hashtag am Anfang, z. B. #51418C) oder wählst die Farbe aus der Palette. Squarespace gibt dir nun mehrere Optionen von ganzen Farbpaletten aus, die deine Farbe beinhalten.
Canva
Mehr Kontrolle hast du mit Canva, wo du die Pipette selbst bedienen und dir so die Farben aus den Fotos suchen kannst, die du nutzen möchtest.
Auch für die Gestaltung deines Moodboards ist Canva ein Traum.
Coolors
Wenn du ein, zwei Farben bereits ausgewählt hast und nun nicht mehr weiter weißt, hilft dir Coolors. Dort kannst du per Zufall weitere Farben generieren lassen und Farbpaletten herunterladen. Auch die Bildfunktion, einen Kontrastchecker und Farbpaletten zur Inspiration gibt es hier.
Adobe
Und schließlich nutzen wir bei jeder Farbpalette, die wir gestalten, den Contrast Analyzer von Adobe. Dort kannst du das Level der Barrierefreiheit auswählen, das du erreichen möchtest.
Deine Farben sollten mindestens mit dem Level AA kompatibel sein. Noch besser wäre AAA.
Farbpaletten zur Inspiration
Bevor du dich nun in das Grafikdesign-Tool deiner Wahl stürzt und Farbe um Farbe miteinander kombinierst, habe ich hier noch ein paar Farbpaletten zur Inspiration für dich.
Pinne sie dir gerne in Pinterest als Inspiration für dein eigenes Farbschema.
Ich hoffe, du hast etwas Inspiration und Hintergrundwissen bekommen. 💜 Solltest du Fragen haben oder Unterstützung benötigen, sind wir natürlich gerne für dich da. ☺️
In der Power Hour können wir deine Farben für dich anpassen, oder wir gestalten dein Branding gleich zusammen mit deiner neuen Website, sodass dein Auftritt von vorne bis hinten glänzt.
