Wie du ein Farbkonzept für deine Website erstellst
Wenn du gerade dabei bist, Farben für deine Website zu finden, kann es nicht schaden ein paar Basics im Hinterkopf zu haben. Es geht bei deinem Farbkonzept für deine Website um mehr als schöne Buttons und fancy Schriften.
Die meisten von uns wollen eine Website, die funktioniert und dabei auch noch richtig gut aussieht. Die Wahl der Farbe ist dafür mega wichtig.
Auf welcher strategischen Grundlage ich meine Farbpaletten für Websites zusammenstelle, zeige ich dir jetzt.
Inhaltsverzeichnis
Warum du ein vernünftiges Farbkonzept für deine Website brauchst
Farben werden so ziemlich als erstes (unterbewusst) wahrgenommen und machen was mit dir. Du findest sie ganz banal gesagt schön oder eben nicht.
Gefallen sie dir, fühlst du dich viel mehr zu der Marke hingezogen oder sogar eine direkte Verbundenheit, weil sie dir ein Gefühl gibt.
Es fühlt sich stimmig an ohne das du bewusst darüber nachdenkst. Und deswegen, weil Farben uns unbewusst beeinflussen (und das Unterbewusstsein ist in Wahrheit der Chef) solltest du mit der Wahl ein der richtigen Farben ein klein wenig Zeit verbringen. Wenn die sitzen, kann nicht mehr viel schiefgehen.
Hier geht es jetzt aber um eine eher rationale und strategische Erstellung deines Website-Farbkonzeptes. Denn vor allem auf Bildschirmen sind noch ein paar andere Dinge wichtig, als die reine Emotion, die angesprochen werden will.
Die Inhalte sollten:
möglichst gut lesbar sein und kontrastreich sein
man sollte keinen „Augenkrebs“ bekommen, sprich: Es sollte nicht anstrengend für das Auge sein, die Seite zu betrachten
Farbauswahl soll möglichst logisch aufgebaut sein, um bei der technischen Umsetzung eine sinnvolle Taxonomie zu haben
flexibel und einfach zu nutzen, auch für jemanden, der kein „Auge für sowas hat“
Wie du ein gutes Website-Konzept erstellst
Es ist super simpel und liegt eigentlich auf der Hand, aber irgendwie bemerken wir oft gar nicht, das hinter vermeintlich so einfachen Dingen eine Strategie steckt.
Aber hier verrate ich dir jetzt ein paar:
Gute Lesbarkeit durch hohe Kontraste
Verwende für lange Texte eine dunkle Schrift auf einem hellen Hintergrund. Andersherum ist es zwar oft schick, aber total ermüdend für unsere Augen. Für den Fließtext solltest du am besten auch kein reines Schwarz verwenden, warum erkläre ich später etwas ausführlicher.
Harmonische Farbauswahl
Deine Hauptfarben sollten gut aufeinander abgestimmt sein. Das ist gar nicht so leicht – i know Wenn du hier noch struggelst, lies doch mal hier. Du kannst natürlich auch bewusst Farben wählen, die super auffällig und knallig sind. Aber dann solltest du sie nur in Maßen nutzen.
Bedenke den Zweck deiner Farben
Nicht alle deiner Farben werden für Schriften oder Hintergründe benutzt. Bedenke auch Details, wie Links, Buttons oder deine Bildwelt. Auch hier solltest du unbedingt dein Farbkonzept anwenden. Sonst sieht es schnell aus, wie Kraut und Rüben auf deiner Website.
Wie das geht, erfährst du im nächsten Abschnitt:
Anatomie einer guten Website-Farbpalette
Eine gute Farbpalette für eine Website besteht aus fünf bis sechs Farben, die ich nach einem bestimmten Schema aufbaue:
1- 2 (max. 3) Hauptfarben
1 Akzentfarbe
1 dunkle Farbe
1 helle Farbe
1 Basisfarbe
Im Grunde ist die Hauptarbeit, richtig gute Hauptfarben zu finden, der Rest ergibt sich daraus und ist super simpel.
Die Hauptfarben
Für ein richtig gutes Webdesign brauchen wir natürlich richtig gute Farben, aber sie sollten auch gut an Bildschirmen funktionieren.
Es bringt nichts sich 5 pastellige Töne auszuwählen, auch wenn sie wunderschön sind, am Ende kommt es darauf an, das deine Inhalte gut zu konsumieren sind.
Ich empfehle daher, sich auf ein bis zwei Hauptfarben festzulegen. Sie sind der Schwerpunkt deiner Marke und der visuelle Eyecatcher / die Rockstars, die dich strahlen lassen. Sie fallen auf und geben deinem Branding sein unverwechselbares Gesicht. Sie sollten in deinem Logo auftauchen und auf deiner Website eine tragende Rolle spielen.
Anzahl: Idealerweise 1-2 (maximal 3) Hauptfarben
Verwendung: Logo, Überschriften, Buttons, Flächen, Grafiken, Bilder (Aber nicht alles auf einmal! )
Die Akzentfarbe
Sie hebt sich ab und richtig eingesetzt sorgt dafür, dass der Betrachter einen Moment seine Aufmerksamkeit darauf richtet.
Beispielsweise auf wichtige Buttons oder Bereiche, die deine Kunden auf ein tolles Angebot hinweisen sollen.
Die Akzentfarbe kann aber auch dezent eingesetzt werden, um die Hauptfarbe(n) zu unterstützen, z. B. durch Grafiken die sich im Hintergrund halten, Icons oder Hover-Effekte.
Anzahl: 1 Akzentfarbe
Verwendung: Buttons, Links., Bildwelt, Icons, Hover-Effekte
Eine dunkle Farbe
Idealerweise, ist deine dunkelste Farbe nicht schwarz! Unser Auge empfindet reines Schwarz als super anstrengend, weil der Kontrast einfach zu hoch ist.
Besser ist es, wenn die dunkelste Farbe eine sehr, sehr dunkle Nuance einer deiner Hauptfarben ist. So harmonieren die Farben automatisch miteinander. Oder wenn du auf Nummer sicher gehen willst, wähle ein sehr dunkles Grau.
Primär wird die dunkle Farbe für Texte verwendet, aber auch z. B. für farbige Hintergrundflächen (Footer oder Menü z. B.).
Anzahl: 1 genügt, 2 sind auch okay
Verwendung: Texte, Hintergrund-Flächen
Eine helle Farbe
Sie unterstützt die Hauptfarben und sollte diese in einer super hellen Nuance nochmal aufgreifen. Ich benutze sie auch gerne für dezente Akzente, Hintergrund-Bereiche oder auch mal Formular-Eingabefelder
Anzahl: 1
Verwendung: dezente Akzente, Hintergrund-Bereiche, Formularfelder
Eine Basisfarbe
Sie ist meist neutral und überlässt den Raum den Haupt- und Akzent Farben. In den meisten Fällen ist die Basisfarbe Weiß, ein helles Creme oder eine sehr helle Variante der Hauptfarbe. Es gibt aber auch Designs, die in die andere Richtung gehen und eine dunkle Basisfarbe wählen.
Anzahl: 1
Verwendung: Hintergrund der Website
Fazit: Regeln sind da um gebrochen zu werden 🤓
Yep, that´s my point.
Regeln helfen uns, wenn wir völlig lost sind. Diese Liste hier ist eine gute Orientierung, aber sie ist auf keinen Fall der Stein der Weisen. Im Design tut sich ständig was, es gibt immer wieder Trends, die so gar nicht zu diesem System hier passen. Aber das ist auch gut so! Ich lade dich auch dazu ein, diese Tipps hier zu beherzigen, wenn du eine solide Website haben möchtest, die funktioniert.
Aber wenn es nicht zu dir passt, dann sei mutig uns probiere was anderes!
Mehr Tipps & Impulse
