So entwickeln Sie Website-, E-Commerce- oder Anwendungsfarbschemata

Entwickeln Sie Website-, E-Commerce- oder App-Farbschemata

Wir haben einige Artikel über die Bedeutung von Farbe in Bezug auf eine Marke geteilt. Für eine Website, E-Commerce-Site oder eine mobile oder Webanwendung ist dies genauso wichtig. Farben haben einen Einfluss auf:

  • Erster Eindruck einer Marke und ihres Wertes – zum Beispiel wird bei Luxusgütern oft Schwarz verwendet, Rot bedeutet Aufregung usw.
  • 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:

  1. Primärfarbe – Wählen Sie eine Farbe, die der Energie Ihres Produkts oder Ihrer Dienstleistung entspricht.
  2. Aktionsfarben – Dies fehlt in der Infografik unten, aber die Identifizierung einer primären Aktionsfarbe und einer sekundären Aktionsfarbe ist äußerst hilfreich. Es lehrt Ihr Publikum, sich auf bestimmte Benutzeroberflächenelemente basierend auf der Farbe zu konzentrieren.
  3. Azusätzliche Farben – Wählen Sie zusätzliche Farben, die ergänzen Ihre Primärfarbe, idealerweise Farben, die Ihre Primärfarbe ergeben Pop.
  4. 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.
  5. 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 Highbridge eine Online-Marke für einen Kleiderhersteller entwickelt, der eine E-Commerce-Site für Direktkunden aufbauen wollte, auf der die Menschen die Möglichkeit haben Kleider online kaufen. Wir verstanden unsere Zielgruppe, den Wert der Marke und – da die Marke überwiegend digital war, aber auch ein physisches Produkt hatte – konzentrierten wir uns auf Farbschemata, die sowohl in Druck (CMYK), als auch in Stoffpaletten (Pantone) gut funktionierten digital (RGB und Hex).

Testen eines Farbschemas mit Marktforschung

Unser Prozess für unsere Farbschemaauswahl war intensiv.

  1. Wir haben mit unserer Zielgruppe Marketingforschung zu einer Reihe von Primärfarben durchgeführt, die uns auf eine einzige Farbe reduziert haben.
  2. Wir haben mit unserer Zielgruppe Marketingforschung zu einer Reihe von Sekundär- und Tertiärfarben durchgeführt, bei der wir einige Farbschemata eingegrenzt haben.
  3. Wir haben Produkt-Mockups (Produktverpackungen, Neck-Tags und Hanging-Tags) sowie E-Commerce-Mockups mit den Farbschemata erstellt und diese sowohl dem Kunden als auch der Zielgruppe für Feedback zur Verfügung gestellt.
  4. 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.
  5. Wir haben diesen Prozess mehr als ein halbes Dutzend Mal durchlaufen, bevor wir uns auf den endgültigen Plan festgelegt haben.

Schrank52 Farbschema

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

  • Closet52 - Kleider online kaufen
  • Closet52 Sammlungsseite
  • Closet52 Produktseite

Besuchen Sie Schrank52

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 zum Thema So wählen Sie eine Farbe für Ihre Website das ist extrem gründlich.

So wählen Sie ein Farbschema für Ihre Website