So entwickeln Sie Website-, E-Commerce- oder Anwendungsfarbschemata
Wir haben eine ganze Reihe von Artikeln über die Bedeutung von Farben für eine Marke veröffentlicht. Für eine Website, eine E-Commerce-Website oder eine Mobil- oder Webanwendung ist dies ebenso wichtig. Farben haben Einfluss auf:
- Der erste Eindruck einer Marke und ihres Wertes – bei Luxusgütern wird beispielsweise oft Schwarz verwendet, Rot impliziert Aufregung etc.
- Kaufentscheidungen – Das Vertrauen einer Marke kann durch den Farbkontrast bestimmt werden. Sanfte Farbschemata können femininer und vertrauenswürdiger sein, harte Kontraste können dringender und rabattorientierter sein.
- Usability und User Experience – Farben haben eine psychologische und physiologische Auswirkungen, wodurch es einfacher oder schwieriger wird, durch eine Benutzeroberfläche zu navigieren.
Wie wichtig ist Farbe?
- 85% der Menschen gaben an, dass Farbe einen großen Einfluss darauf hat, was sie kaufen.
- Farben steigern den Wiedererkennungswert der Marke um durchschnittlich 80 %.
- Der Farbeindruck ist für 60 % der Annahme oder Ablehnung eines Produkts verantwortlich.
Bei der Festlegung eines Farbschemas für eine Website sind einige Schritte in der begleitenden Infografik beschrieben:
- Primärfarbe – Wählen Sie eine Farbe, die der Energie Ihres Produkts oder Ihrer Dienstleistung entspricht.
- Aktionsfarben – Dies fehlt in der Infografik unten, aber die Identifizierung einer primären Aktionsfarbe und einer sekundären Aktionsfarbe ist äußerst hilfreich. Es schult Ihr Publikum, sich auf bestimmte Elemente der Benutzeroberfläche basierend auf Farbe zu konzentrieren.
- Azusätzliche Farben – Wählen Sie zusätzliche Farben, die ergänzen Ihre Primärfarbe, idealerweise Farben, die Ihre Primärfarbe ergeben Pop.
- Hintergrundfarben – Wählen Sie eine Farbe für den Hintergrund Ihrer Website – möglicherweise weniger aggressiv als Ihre Primärfarbe. Denken Sie auch an den Dunkel- und Hellmodus.. Immer mehr Websites integrieren Farbschemata im Hell- oder Dunkelmodus.
- Schriftfarben – Wählen Sie eine Farbe für den Text, der auf Ihrer Website erscheinen soll – denken Sie daran, dass eine durchgehend schwarze Schrift selten ist und nicht empfohlen wird.
Als Beispiel mein Unternehmen DK New Media entwickelte eine Online-Marke für einen Kleiderhersteller, der eine E-Commerce-Website direkt an den Verbraucher aufbauen wollte, auf der Menschen Kleider online kaufen konnten. Wir verstanden unsere Zielgruppe und den Wert der Marke und konzentrierten uns – da die Marke überwiegend digital war, aber auch über ein physisches Produkt verfügte – auf Farbschemata, die sowohl im Druck (CMYK) als auch in den Stoffpaletten (Pantone) gut funktionierten digital (RGB und Hex).
Testen eines Farbschemas mit Marktforschung
Unser Prozess für unsere Farbschemaauswahl war intensiv.
- Wir haben mit unserer Zielgruppe eine Marktforschung zu einer Reihe von Primärfarben durchgeführt, die uns auf eine einzige Farbe reduziert hat.
- Wir haben mit unserer Zielgruppe eine Marktforschung zu einer Reihe von Sekundär- und Tertiärfarben durchgeführt, bei der wir einige Farbschemata eingegrenzt haben.
- Wir erstellten Produktmodelle (Produktverpackungen, Halsetiketten und Hängeetiketten) sowie E-Commerce-Modelle mit den Farbschemata und stellten diese sowohl dem Kunden als auch der Zielgruppe zur Rückmeldung zur Verfügung.
- Da ihre Marke stark von der Saisonalität abhängt, haben wir auch saisonale Farben in den Mix aufgenommen. Dies kann für bestimmte Sammlungen oder Visuals für Anzeigen und Social-Media-Shares nützlich sein.
- Wir haben diesen Prozess mehr als ein halbes Dutzend Mal durchlaufen, bevor wir uns für das endgültige Schema entschieden haben.
Während die Markenfarben Hellrosa und Dunkelgrau sind, haben wir die Aktionsfarben der Grünton sein. Grün ist eine aktionsorientierte Farbe, daher war es eine großartige Wahl, um die Augen unserer Benutzer auf aktionsorientierte Elemente zu lenken. Wir haben die Umkehrung von Grün für unsere sekundären Aktionen integriert (grüner Rahmen mit weißem Hintergrund und Text). Wir testen auch einen dunkleren Grünton für die Aktionsfarbe für Hover-Aktionen.
Seit dem Start der Site haben wir Maus-Tracking und Heatmaps integriert, um die Elemente zu beobachten, die unsere Besucher am meisten anziehen, und mit denen sie am meisten interagieren, um sicherzustellen, dass wir ein Farbschema haben, das nicht nur gut aussieht, sondern auch gut funktioniert.
Farben, Weißraum und Elementeigenschaften
Die Entwicklung eines Farbschemas sollte immer durch Testen in einer Gesamtbenutzeroberfläche erfolgen, um die Interaktion der Benutzer zu beobachten. Für die obige Site haben wir auch sehr spezifische Ränder, Auffüllungen, Umrisse, Randradien, Ikonographie und Schriftarten integriert.
Wir haben dem Unternehmen einen vollständigen Branding-Leitfaden zur Verfügung gestellt, um ihn intern für alle Marketing- oder Produktmaterialien zu verteilen. Markenkonsistenz ist für dieses Unternehmen von entscheidender Bedeutung, da es neu ist und in der Branche derzeit noch nicht bekannt ist.
Hier ist die resultierende E-Commerce-Site mit Farbschema
Farbverwendbarkeit und Farbenblindheit
Vergessen Sie nicht, die Benutzerfreundlichkeit zu testen, um den Farbkontrast zwischen den Elementen Ihrer Website zu überprüfen. Sie können Ihr Schema mit dem testen Tool zum Testen der Barrierefreiheit von Websites
. Bei unserem Farbschema wissen wir, dass wir einige Kontrastprobleme haben, an denen wir in Zukunft arbeiten werden, oder wir haben möglicherweise sogar einige Optionen für unsere Benutzer. Interessanterweise ist die Wahrscheinlichkeit von Farbproblemen bei unserer Zielgruppe ziemlich gering.Farbenblindheit ist die Unfähigkeit, Unterschiede zwischen einigen der Farben wahrzunehmen, die nicht farbbehinderte Benutzer unterscheiden können. Farbenblindheit betrifft etwa fünf bis acht Prozent der Männer (ca. 10.5 Millionen) und weniger als ein Prozent der Frauen.
Benutzerfreundlichkeit.gov
Das Team von WebsiteBuilderExpert hat diese Infografik und einen ausführlichen Begleitartikel dazu zusammengestellt So wählen Sie eine Farbe für Ihre Website das ist extrem gründlich.