Direkt zum Seiteninhalt

Hauptmenü:

Pillar

Das Geheimnis, die Farben einer Website perfekt zu kombinieren, wie ein echter Jedi im Webdesign

Achten Sie auf die Farben, wenn Sie eine Website gestalten?

Das korrekte Kombinieren der Farben Ihrer Website ist sehr wichtig, um die gewünschten Zielpersonen anzusprechen, sie für Ihre Produkte oder Dienste zu interessieren und zu erneuten Besuchen zu motivieren. Der Grund hierfür ist einfach: Farben stimulieren Emotionen und haben daher eine einzigartige Überzeugungskraft.

Aber wie wähle ich die richtigen Farben?

Wenn Sie eine schnelle Methode zur Gestaltung einer Website suchen, mit der Sie noch heute Ihr Projekt umsetzen können, ist diese Praxis-Anleitung genau das Richtige für Sie: So realisieren Sie das optimale Layout für eine Website mit einem Farbschema, das zu Ihrem Zielpublikum passt. Mit unserer Infografik über die Macht der Farbe werden auch Sie zum Jedi des Webdesigns!

Hierbei geht es nicht um Farbtheorie, vielmehr lernen Sie die Tricks kennen, mit denen Sie diese Theorie in die Praxis umsetzen, sowie die Methode, die wir seit jeher für die Gestaltung der Vorlagen von WebSite X5 verwenden.

Nach der Lektüre dieses Artikels wissen Sie, wie Sie die Farbpalette wählen, die sich für Ihr Projekt am besten eignet, und wie Sie für jede Website-Kategorie ein Farbschema anwenden. Außerdem erfahren Sie, wie Sie mit den richtigen Farben bis zu 24% mehr Klicks generieren. Ob Sie einen Blog erstellen, einen Online-Store eröffnen oder Ihre persönliche oder geschäftliche Visitenkarte im Web veröffentlichen möchten, in puncto Farbwahl wird es für Sie keine Geheimnisse mehr geben.

Die Macht der Farbe in Zahlen: Warum ist die richtige Farbwahl so wichtig?


Die Farben einer Website betreffen zahlreiche Elemente: Hintergründe, Buttons, Überschriften, Text, Links und Bilder. Sie bestimmen die Lesbarkeit der Inhalte, können zum Kauf motivieren und einer Marke auf den ersten Klick Wiedererkennungswert verleihen. Aus diesen Gründen ist Farbe ein unentbehrliches Werkzeug für jeden Webdesigner. Aber welchen Wert hat diese Macht konkret?
Jeder Jedi des Webdesigns sollte die Macht der Farbe genau kennen. Daher berücksichtigen Sie die Wirkung der Farben auf Ihre Besucher, wenn Sie eine Website planen. Behalten Sie unsere Infografik über die Macht der Farbe im Auge. Damit erkennen Sie leichter die Elemente, die für ein wirkungsvolles Layout wichtig sind, wenn Sie Ihre Webseiten gestalten.

Was ist ein Farbschema und wie nutze ich es für meine Website?


Das einfachste und am schnellsten umzusetzende Farbschema besteht aus 2 kontrastierenden Hauptfarben und 1 oder 2 Textfarben:

  • 1 Grundfarbe
  • 1 Kontrastfarbe
  • 1 Textfarbe: Weiß, Schwarz oder Grau.

Die Grundfarbe dominiert die Website. Die Kontrastfarbe hingegen vermittelt die Persönlichkeit Ihrer Website oder Ihres Blogs. Daher sollte sie für Buttons oder Icons verwendet werden, also an wenigen und präzise ausgewählten Punkten.

Zum Beispiel assoziieren wir automatisch Amazon mit dem Orange seines Einkaufswagen-Symbols oder YouTube mit dem Rot seines Play-Buttons. Sind Ihnen diese Details schon einmal aufgefallen?
 4 Schritte 
mit denen Sie
die perfekte Palette
für Ihre Website zusammenstellen.

1. Wählen Sie die Grundfarbe aus der Galaxie des Webs (achten Sie auf die Macht der Farbe)



Welchen Geschmack haben die Nutzer, die Sie auf Ihre Website locken möchten? Um für Ihr Projekt die richtige Grundfarbe zu wählen, müssen Sie sich in Ihr potenzielles Publikum hinein versetzen, seine Gewohnheiten kennen und seine Reaktionen vorhersehen. Ein Jedi würde sagen: „Finden Sie den Draht zur Macht“.

Suchen Sie zuerst nach Inspirationen aus dem Web. Um die Galaxie Ihrer Nutzer zu verstehen, müssen Sie sie bereisen. Nutzen Sie diese 3 Koordinaten, um sich bei Ihrer Recherche zu orientieren:

  • Die Kategorie Ihrer Website: Holen Sie sich Input von Websites, die ihr Zielpublikum oft besucht. Die Website einer Versicherung hat mit Sicherheit eine andere Farbpalette als eine Seite für Kinder, nicht wahr?

  • Ihr Logo (sofern Sie schon eines besitzen): Ihre Grundfarbe muss auf Ihre bereits bestehende Grafik abgestimmt sein, weil sich sich Nutzer bei einem kohärenten Image Ihr Angebot und Ihre Produkte leichter merken. Daher lassen Sie sich von Websites inspirieren, die in ähnlichen Farben gehalten sind wie das Bildmaterial, das Ihnen zur Verfügung steht.

  • Ihre Persönlichkeit: Stellen Sie sich Ihre Website als Person aus Fleisch und Blut vor und suchen Sie nach der Farbe, die ihren Charakter widerspiegelt. Dabei können Sie einige Stereotypen zur Hilfe nehmen, wie Bedeutungen von Farben oder die Unterscheidung zwischen warmen und kühlen Farbtönen.

Auch wenn diese Koordinaten sehr allgemein klingen, in der Startphase eines Projekts erweisen Sie sich aus drei Gründen als nützlich: Sie zeigen, welche Farben Ihre potenziellen Besucher anziehen, an welche Farben sie gewöhnt sind und wie Sie sich abheben können.
Für diese erste Phase der Recherche empfehlen wir Ihnen zwei [kostenlose Tools], die Sie dabei unterstützen können, eine passende Farbe für Ihre Website zu wählen. Beide klassifizieren Web-Farben nach der hexadezimalen Farbdefinition HEX, bestehend aus 6 alphanumerischen Zeichen mit einem vorgestellten #:

  • ColorZilla: Mit dieser Erweiterung für Chrome und Firefox können Sie die Farben einer Website bestimmen, während sie dort navigieren; dabei können Sie einzelne Farben ebenso ermitteln wie die gesamte Farbpalette.

  • BrandColors: Liste weltweit bekannter Marken, geordnet nach den HEX-Farbcodes, die sie auf ihren Websites verwenden. Von Amazon über Apple bis hin zu Coca Cola.

Nachdem Sie genug Ideen gesammelt haben, sind Sie bereit für den nächsten Schritt: Die Wahl der Grundfarbe ist sehr einfach und Sie benötigen dafür weder Photoshop noch sonstige Grafikprogramme.

Es reicht aus, in der Suchleiste von Google den Begriff „Color Pickeroder den HEX-Code der Grundfarbe, den Sie mit BrandColors oder ColorZilla ermittelt haben, einzugeben. Daraufhin wird die Farbe mit Angaben zu Ihrem Code angezeigt.
Bewegen Sie mit der Maus die Schieber, bis Sie den Farbton gefunden haben, der am besten zu Ihrer Website passt. Für jede Farbe zeigt Google jeweils den kompletten Satz der Farbwerte an. So finden Sie hier zum Beispiel auch den Farbcode RGB, mit dem in einigen Tools für die Website-Gestaltung, wie WebSite X5 die Farben definiert werden.

2.  Kombinieren Sie die Grundfarbe mit einer Kontrastfarbe in weniger als 5 Minuten



Nun zeigen wir Ihnen, wie Sie mit einem einfachen und dennoch vollständigen Farbpaletten-Generator in nur 5 Minuten Ihre Kontrastfarbe ermitteln. Sie glauben nicht, dass das möglich ist? Von Jedi zu Jedi: „Genau darum ist es Ihnen bisher nicht gelungen.“

  • Öffnen Sie Paletton und geben Sie den HEX-Code Ihrer Grundfarbe in die Suchbox ein A ;

  • Klicken Sie auf „Add complentary“ B um die Komplementärfarbe Ihrer Grundfarbe anzuzeigen. Die Farbe gefällt Ihnen nicht für Ihre Palette? Dann wandeln Sie sie ab:

  • Klicken Sie auf das Icon „Adjacent Colors“ C  um eine Farbe anzuzeigen, die der gewählten Grundfarbe ähnlich ist.

  • Oder klicken Sie auf „Triad“ D um eine Farbe mit besonders starkem Kontrast zu erhalten.

  • Wählen Sie schließlich im Menü „Preview“ die Option „Alternative with Text“ E und Ihrer Grund- und Kontrastfarbe werden Weiß-, Schwarz- und Grautöne für Ihre Texte zugeordnet.

Wissen Sie was? Das Farbschema für Ihre Website kann sofort genutzt werden.
Weniger als 5 Minuten.
Beispiel eines Farbschemas basierend auf „Triad“
Unter „Examples...“ F können Sie auch die Wirkung der Farbpalette auf einer Webseite testen. Im Browser öffnet sich das Standard-Layout einer Website mit der Farbpalette, die Sie zusammengestellt haben. Aufgrund dieser zahlreichen Funktionen ist Paletton auch für Einsteiger ein wirklich nützliches Tool.


Wenn Sie ein System suchen, mit dem Sie die Farben Ihrer Website noch schneller zusammenstellen können, probieren Sie die Tools aus, die Sie in der nachstehenden Liste finden.


Wenn Sie fertige Farbpaletten suchen, finden Sie diese auf den folgenden Internetseiten:

Möchten Sie ein Farbschema aus einem Bild erstellen?
Dann probieren Sie:


In diesem Artikel über die richtige Farbwahl für einen Blog hat Julie Gibbons einige Farbpaletten zusammengestellt, die sich an Bildern mit unterschiedlicher Atmosphäre inspirieren. Mit diesen praktischen Beispielen lernen Sie, das Potenzial dieser Instrumente optimal zu nutzen.


Wenn Sie eine persönliche Website haben oder einen Blog über Ihr Hobby schreiben, ist dies das ideale Web-Tool für Sie:

Es generiert Farbpaletten auf der Grundlage von Orten, Jahreszeiten oder bestimmten Themen.

Lassen Sie sich zum Beispiel für Ihren Reiseblog von den Farbkombinationen Ihrer Lieblingsziele inspirieren. Oder Wintersport-Fans erhalten mit wenigen Klicks Farbpaletten in den Tönen verschneiter Landschaften. WOW!


Das Thema Farbe beginnt, eine Leidenschaft in Ihnen zu wecken? Dann ist dies der richtige Zeitpunkt, diese neue Galaxie zu erkunden. Entdecken Sie die Kunst der Farbkombination nach der Farbtheorie in der Infografik von Kissmetrics.

3. Wenden Sie ein Farbschema auf Ihre Website an



Tu es oder tu es nicht. Es gibt kein Versuchen. Lassen Sie sich von dem berühmtesten Jedi inspirieren und starten Sie gemeinsam mit uns in Ihre Mission. Stellen Sie sich vor, Sie möchten eine Musik-Website für einen Freund oder Kunden erstellen. Welche Farben eignen sich dafür?

Suchen Sie im Web nach Inspirationen, um die richtige Palette zu finden, und überlegen Sie sich:

  • Welche Emotionen möchten Sie bei den Besuchern wecken?
  • Was möchten Sie mitteilen?


Hier zwei Beispiele, entnommen aus der Volage 3sounds:

  • Website für ein Sommerfestival klassischer Musik
    Eine Palette warmer Töne, bei der die Grundfarbe und ähnliche Akzente (Kontrastfarben aus den „Adjacent Colors“) Harmonie vermitteln, erinnert an Sommersonne und das Holz der klassischen Musikinstrumente, die im Mittelpunkt der Website stehen.

  • DJ-Website über elektronische Musik
    Eine Palette kräftiger, leuchtender Farben, im Kontrast mit der weißen Grundfarbe (Kontrastfarbe aus „Triad“) bringt die Macht der Kontraste Energie und Rhythmus zum Ausdruck, wie die Musik des Seitenbetreibers.
Haben Sie bemerkt, dass die Anordnung der Farben auf der Seite bei beiden Websites nahezu identisch ist? In der Tat folgt sie der Hierarchie des Farbschemas. Die Grundfarbe bedeckt den Hintergrund, die Kontrastfarbe (wir haben auch mehrere verwendet) konzentriert sich auf Buttons und Textelemente, die hervorgehoben werden sollen.

Und dennoch wirken beide Projekte sehr unterschiedlich. Warum? Weil die Farbpaletten verschiedene Atmosphären schaffen: Eine klassische und eine moderne.
Die  „richtige“ Farbpalette 
erzählt von Ihnen
spricht Ihr Publikum an.

Die richtige Farbkombination ist eine Frage der Ausgewogenheit. Die Bedeutungen von Farben und die Farbpsychologie helfen, die Persönlichkeit einer Website zu definieren. Aus praktischer Sicht besteht die beste Methode jedoch darin, konkrete Verbindungen zwischen den Farben und dem Thema Ihrer Website zu finden (Jahreszeiten, Sonne, Materialien).


Gregory Ciotti schreibt in einem interessanten Artikel über Farbe:

Der Schlüssel besteht darin, praktische Wege zu finden, Entscheidungen über Farben zu treffen. "

4. Buttons, Farben und Text: Vermeiden Sie diese Fehler



Bei der Farbwahl für eine Website können leicht Fehler unterlaufen.

Hier die häufigsten Fehler:

  • Zu viele Farben in ein und demselben Layout
  • Komplementärfarben für Text und Hintergrund
  • Übermäßige Verwendung warmer und kalter Farben

Kürzlich ist uns selbst ein Fehler unterlaufen. Damit Sie ein echter Jedi des Webdesigns werden, berichten wir Ihnen hier, was wir gelernt haben.

Wie Sie wissen, ist es für eine Website wie unsere äußerst wichtig, die Besucher zu motivieren, das Produkt auszuprobieren. Bei der Markteinführung der neuen Version von WebSite X5 war die Farbe des Buttons „Kostenlos herunterladen“ identisch mit unserer Grundfarbe - Blau.

Daraufhin haben wir für die Buttons einige Alternativen wie Rot und Grün getestet.

Das Ergebnis? Die roten Buttons haben 24% mehr Klicks generiert, das war der höchste Prozentsatz.
Datananalyse websitex5.com, Januar 2017

Ja, Rot funktioniert, wie auch andere Studien bestätigen, aber das Interessanteste daran ist, dass beide Farben (sowohl Rot als auch Grün) erheblich die Konversionsrate erhöht haben.

Warum?
„Je sparsamer eine Farbe verwendet wird, desto mehr Aufmerksamkeit weckt sie.“

Rot und Grün sind Farben, die sich von unserer Grundfarbe Blau „abheben“. Sie fallen sofort auf. Und wie Sie wissen, kann man sich in der Galaxie des Webs leicht verirren!

Schlussfolgerungen

Wie Sie gesehen haben, ist es sehr einfach, ein Farbschema zu erstellen, weil es dafür viele leicht verständliche Werkzeuge gibt. Der schwierige Part der Farbwahl im Webdesign ist die optimale Ausgewogenheit der Farben für die jeweilige Website.

Mit unserer Anleitung für Farb-Jedis im Webdesign wird es Ihnen leicht fallen, bei Ihrem nächsten Projekt Farben richtig zu verwenden

auf die richtige Weise
an der richtigen Stelle
abgestimmt auf Ihr Zielpublikum
für den gewünschten Zweck

(Möge die Macht der Farbe mit Ihnen sein)
Erfahren Sie mehr über die „Macht der Farbe“ mit unserer Infografik

Melden Sie sich an, um News und Angebote zu erhalten
Copyright © 2017 Incomedia S.r.l. Alle Rechte vorbehalten. USt.-ID: IT07514640015
Die Nutzung dieser Website untersteht den Nutzungsbedingungen, der Cookie-Richtlinie und der Datenschutzrichtlinie von Incomedia.
  • Italiano
  • Deutsch
  • English
  • Français
  • Español
  • Português BR
  • Polski
  • Русский
Zurück zum Seiteninhalt | Zurück zum Hauptmenü