Webdesign Website erstellen

Wie du Farben für deine Website wählst. Ohne Farbenkreis und komplizierte Theorien.

Farben: Wie viele sind zu viel und wie du diese leicht für deine Website aussuchst. Ohne den Farbenkreis von Itten und Vorkenntnisse im Webdesign. In diesem Beitrag zeige ich dir, wie du einfach die richtigen Farben für deine Website auswählst.

Die Hauptfunktion einer Website ist es, Informationen an Webnutzer weiterzugeben. Farben sollten dir dabei helfen und es nicht schwerer machen. Wenn zu viele Farben benutzt werden, wirken Webseiten schnell chaotisch. In diesem Fall wissen Webnutzer nicht, wohin sie schauen müssen und welche Informationen von Bedeutung sind.

Beispiel: Die Mitteilung auf deinem CTA Button durch Farbe unterstützt werden. Wenn der Nutzer vorgewarnt werden muss, dass er mit seinem Schritt wichtige Informationen löscht, sollte der Button nicht grün sein. Menschen sind es gewöhnt, dass dies durch rot gekennzeichnet wird. Deswegen solltest du deine Farben gut auswählen. 

Wie viele Farben brauchst du für deine Website?

Im optimalen Fall solltest du dich für vier Farben entscheiden:

Die Hintergrundfarbe ist am stärksten auf deiner Website zu sehen. Diese nimmt den größten Raum ein und dient als Fond für deine gesamten Inhalte. Deswegen sollte diese ziemlich neutral sein. Eine guten Lösung dafür ist weiß. Wir sind von klein an gewöhnt, schwarzen Text auf weißem Hintergrund zu lesen. Wenn du dies auch bei deiner Seite umsetzt, schaffst du eine vertraute Umgebung für die Augen und vermeidest überflüssige Anspannung. Außerdem verleiht weiße Farbe deiner Webseite einen hellen und angenehmen Look. 

Die Textfarbe ist abhängig von deiner Hintergrundfarbe. Wenn du dich nicht für weiß als Hintergrundfarbe entscheidest, achte darauf, dass die Schrift gut lesbar bleibt. Zum Beispiel ist weiße Textfarbe auf einem grünem Hintergrund wegen des geringen Kontrasts nicht vorteilhaft.

Die Hauptfarbe wird oft genommen, um einer Website eine individuelle Note zu verpassen. Sie setzt einen Kontrast zur Hintergrundfarbe und ist das Bindeglied zwischen dezentem Hintergrund und auffälliger Akzentfarbe. 

Die Akzentfarbe brauchst du, um auf bestimmte Aufmerksamkeit der Leser auf bestimmte Informationen zu lenken. In dieser Farbe gestaltest du zum Beispiel dein Call-to-Action Button.

Haben Farben eine bestimmte Bedeutung? 

Wenn du nach der Bedeutung von Farben im Internet suchst, bekommst du solche Zusammenfassungen zu sehen:

Rot ist eine gute Farbe, um Aufmerksamkeit zu lenken. Sie bedeutet Leidenschaft, Aggressivität, Erregung und Wut.

Gelb soll angeblich Freude und Glück, aber auch Müdigkeit und Feigheit symbolisieren.

Blau ist wohl die Lieblingsfarbe der Deutschen. Webseiten in dieser Farbe sollen nüchtern und vertrauensvoll wirken. Zu viel blau kann aber dazu führen, dass die Seite gefühllos wirkt.

Wie man sieht, kann man nicht pauschal sagen, dass eine bestimmte Farbe für deine Webseite zu 100 % passt. Rot bedeutet Gefahr, sagt der Mensch, der heute eine rote Tomate gegessen hat und anschließend sein Kind zum Weihnachtsmann gebracht hat. Schwarz ist zu düster, sagt der andere, der beim Frühstück eine Zeitschrift mit schwarzen Buch gelesen hat und dabei laut gelacht hat.

Wie du siehst, kann jede Farbe im entsprechenden Kontext verschiedene Bedeutungen haben und Signale aussenden. Du solltest dich daher nicht an irgendwelche allgemeinen Regeln für die Farbauswahl halten, sondern konkret deine Webseite betrachten und die dazu passenden Farben auswählen.

Sechs Grundregeln: Farben für deine Website leicht ermitteln 

Diese sechs Regeln helfen dir, die passenden Farben auszuwählen. Deine Website wirkt so stimmig und einheitlich. Heute werde ich nicht auf den klassischen Farbenkreis nach Itten eingehen. Mit ihm lassen sich effektive Farbkombinationen ermitteln, aber sein Verständnis ist zeitaufwendig. Farben auswählen geht auch einfacher. Ich zeige dir, wie es geht.

1. Weniger ist mehr 

An erster Stelle fragst du dich, welches Ziel du mit deiner Website verfolgst. Soll deine Webseite als lustig oder als cool von deinen Webnutzern wahrgenommen werden? Bei lustigen Seiten kannst du dich praktisch frei austoben bei der Farbwahl. In den meisten Fällen wollen Menschen aber die zweite Variante. In diesem Fall reicht es, wenn du dich bei deiner Farbauswahl einschränkst.

Es ist ausreichend, wenn du dich auf vier Farben fokussierst. Hintergrundfarbe zusammen mit der Hauptfarbe ergeben 80-90% der Farben, die auf deiner Website zu finden sind. Der Rest ist die Farbe, mit der du Akzente setzt. Es ist eine einfache und gut funktionierende Lösung für diejenigen, die sich aus zeitlichen Gründen nicht mit Farbpaletten beschäftigen wollen. Als Ergebnis bekommst du eine stilvolle und übersichtliche Webseite. 

Für diese Lösung spricht auch die Tatsache, dass die Farben, die du aussuchst an Computern von Webnutzern anders aussehen können. Dies hängt von den Einstellungen des Bildschirmes und der Beleuchtungsstärke ab. Zum Beispiel kannst du deine Website in grün erstellen, aber Webnutzer bekommen sie in giftgrün zu sehen. Deswegen setze lieber auf sichere Lösungen, um unerwünschte Ergebnisse zu vermeiden. Dafür kannst du auf die websicheren Farben zugreifen, die auf allen Geräten problemlos abgebildet werden.

2. Schaue andere Webseiten aus deiner Branche an

Wenn du keinen Anhaltspunkt hast und nicht weißt, welche Farben in deiner Thematik oft genommen werden, ist die einfachste Methode bei der Konkurrenz zu schauen. Du musst aber nicht alles zu eins zu eins kopieren. Ich zeige dir, warum es oft sinnvoll ist, diese Regel zu beachten.

Menschen haben bestimmte Assoziationen, die sie mit bestimmten Themen verbinden. Sie dienen für viele als eine Orientierung. Dadurch stellen sie schneller fest, worum es hier geht. Zum Beispiel nutzen Websites mit medizinischen Themen oft die folgende Farbpalette. Sie ruft Assoziationen mit der Kleidung von Ärzten und Krankenschwestern hervor. 

 

Farben für eine Seite für Medizin
Beispiel für eine Webseite mit medizinischen Thema

Die Websites, die sich primär an Männer richten, nutzen in der Regel keine bunten und schrillen Farben. Man findet in diesem Fall schwarz, verschiedene Grautöne oder weiß. Bunte Farben dienen dazu, Akzente zu setzen und die Aufmerksamkeit der Menschen auf ein Objekt zu lenken. Bei Websites, die sich mit Umweltthemen auseinandersetzen, finden sich meist Farben, die mit der Natur zu tun haben wie zum Beispiel grün oder braun.

Öffne einfach Google und gib im Suchfeld „Thematik von deinem Projekt + Webseite“ ein und schaue an, welche Bilder dazu angezeigt werden. Auf diese Weise kannst du relativ schnell die Tendenzen in deinem Bereich herausfinden.

Kurz gesagt, denke dir nicht das aus, was schon von anderen vor dir erfunden wurde. Wenn deine Konkurrenten länger auf dem Markt sind und deren Lösungen funktionieren, analysiere sie, passe sie deinem Projekt an und wende sie bei deiner Webseite an.

3. Nutze keine Grundfarben

Grundfarben sind die Farben rot, grün und blau. Pures Rot, Blau oder Grün wird oft in Verbindung mit dem Programm Paint von Microsoft Windows gebracht. Die Farben drücken durch ihre Assoziation mit Paint keine Persönlichkeit aus und transportieren keine Botschaft. Bei der Farbe geht es auch an erste Stelle darum, deiner Website einen individuellen Look zu verpassen. Mit diesen Farben ist das schwerer umzusetzen. 

Durch eine Abwandlung der Grundfarben – wie Aufhellung – entsteht ein komplett anderer visueller Eindruck. Solche Farben sind meist angenehmer für unsere Wahrnehmung. Bei den Farben kann man ruhig ein bisschen experimentieren, wenn man auf der Suche nach einem individuellen Farbton ist, der einen über Jahre begleiten wird. 

4. Setze auf deiner Website die gleichen Farben bei den gleichen Elementen ein

Diese Regel wird leider oft vernachlässigt. Als Zeichen von gutem Webdesign wird angesehen, dass deine Farbauswahl stimmig ist. Zum Beispiel machst du alle Buttons auf allen Unterseiten in der gleichen Farbe. Somit erleichterst du für dich selbst die Arbeit, denn du kannst dir bei jeder Unterseite die Farbauswahl sparen. Außerdem überraschst du deinen Webnutzer nicht mit komplett anderen Webdesign. Es kann zu Irritationen führen, wenn dein Webnutzer von einer Unterseite auf die andere kommt, die absolut anders aussieht und er nicht mehr weiß, ob immer noch bei der gleichen Website ist.

5. Nutze die entsprechenden Tools, um die richtige Farbkombinationen zu ermitteln

Welche Farben passen zusammen? Man kann nicht pauschal sagen, dass rot mit grün gar nicht geht. Dann denke ich an rote Erdbeeren mit grünen Blättern. Es kommt auf den Farbton an. Um diese zu ermitteln und herauszufinden, nutze diese spezielle Tools aus meinen Favoriten, die dir die Farbauswahl erleichtern: 

Coolors.co – das einfachste Tool

Paletton.com – bietet viele Funktionen, ist aber dadurch auch etwas komplizierter zu bedienen.

Brandcolours.net – kannst du nutzen, wenn du wissen möchtest, welche Farben bestimmte Marken nutzen.

Colourlovers – bei diesem Tool kannst du nach Farbenzusammenstellungen suchen, die bestimmte Thematiken abdecken. 

Diese sind vor allem nützlich, wenn du eine Hauptfarbe schon hast und nicht weißt, welche du als Akzentfarbe nehmen solltest. Oder du suchst nach einer Farbe für deinen Button, die zeigen soll, dass bereits auf ihn geklickt wurde.

6. Fixiere deine Farben

Notiere dir, welche Farben du genau bei welchen Elementen nutzt. Dies sorgt dafür, dass erleichtert dir die Arbeit bei der weiteren Erstellung der Unterseiten und deine Webseite wirkt auf die Webnutzer stimmig.

Es wirkt nicht professionell, wenn du dich für bestimmte Farben entscheidest und irgendwann später einen ähnlichen Farbton einsetzt, weil du nicht mehr weißt, welche Farbe es genau war.

Checkliste für deine Farbauswahl

Nachdem du die Farben für deine Website festgelegt hast und ein bis zwei Unterseiten erstellst hast, gehe diese Liste durch und schau, ob du nichts vergessen hast:

Weniger Farben sind mehr. 

In deiner Farbpalette gibt es nicht mehr als fünf Farben, eine davon ist die Hauptfarbe. 

Du hast genug Farben. Die unterschiedlichen Elemente deiner Website sollten unterschiedliche Farben haben.

Die Elemente deiner Website passen gut zueinander. Die Farbe stört nicht dabei, die Informationen zu lesen.

Die Website hat keine eindeutigen Fehler, die sinnentstellende Assoziationen hervorrufen, zum Beispiel, einen roten Button mit „Kaufen“ und einen grünen Button mit „Abbrechen“.

Kommentieren

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert.