5 Tipps zur Farbpsychologie, um E-Commerce-Websites sofort zu verbessern

Farbpsychologie für E-Commerce-Websites

Als Designer denken Sie vielleicht nicht regelmäßig über Farbpsychologie nach, aber Sie sind sich wahrscheinlich bewusst, dass etwas Rotes Sie hungrig machen kann und dass Sie sich in einem hellen, sonnigen gelben Raum unbeschwert und glücklich fühlen können.

Die Anwendung der Farbpsychologie auf das Webdesign von E-Commerce-Websites kann sich auch emotional auf die Besucher vor Ort auswirken. Welche Farben Sie für das Design auswählen, kann zur Markenbekanntheit beitragen und sogar dazu, wie wahrscheinlich es ist, dass ein Kunde dies tut Vertrauen Sie Ihrer Marke.

Farbpsychologie ist im Grunde die Art und Weise, wie Farbe die Emotionen und Verhaltensweisen von Menschen beeinflusst. Will es sie, einen Artikel zu kaufen? Macht es sie glücklich oder zeigt es eine ernsthafte Seite?

Die Farbpsychologie ist jedoch nicht so einfach, wie Rot Sie hungrig macht und Blau Sie ruhig fühlen lässt. In der Farbpsychologie steckt noch viel mehr, und es gibt viele vielschichtige Facetten. Wenn Sie dies für E-Commerce-Websites tun, ist die Farbpsychologie umso wichtiger.

Inhalt[Anzahl Artikel]

Es gibt keine allgemein anerkannter Standard dafür, wie Farbe jeden beeinflusst. Die Emotionen oder Gefühle, die Farbe erzeugt, sind von Person zu Person sehr individuell. Ihre eigenen Lebenserfahrungen können sich sogar darauf auswirken, wie Sie eine bestimmte Farbe sehen und welche Gefühle sie hervorruft.

In der Studie „Einfluss von Farbe in Marketingstudien“ stellten die Forscher fest, dass 90% der ersten Eindrücke kommen davon, ob der Besucher der Meinung ist, dass Farbe für das Branding geeignet ist und ob sie für das, was verkauft wird, angemessen ist.

Wenn der Kunde der Meinung ist, dass die Farbe nicht zur Marke passt, ist es weniger wahrscheinlich, dass er dem Unternehmen vertraut.

Das wegnehmen?

Achten Sie auf Farbwahrnehmungen wie dunkle Farben, Schwarz und Grau für robuste, männliche Produkte und Pink und Lila für girly Produkte. Seien Sie jedoch nicht so an die Farbtheorie gebunden, dass Sie das Branding oder die Gesamtästhetik des Designs ignorieren.

Beginnen Sie mit einem wirklich ansprechenden Design und dann können Sie die Farben optimieren, um die besten für Ihre Marke zu finden. Sie sollten sich auch der Ausgewogenheit des Leerraums bewusst sein und wissen, ob das Gesamtdesign für das menschliche Auge angenehm ist.

Wie Farben die Conversion-Raten beeinflussen

Verwendung der Farbtheorie beim Design von E-Commerce-Websites

Wenn es darum geht, die Farbtheorie auf das E-Commerce-Design anzuwenden, ist der beste Ausgangspunkt, mit welchen Farben Benutzer Ihr Produkt kaufen möchten. Ungefähr 62-90% der Meinung, die ein Kunde in den ersten 90 Sekunden auf einer Website macht, wird allein durch die Wahl der Farbe gebildet.

Empfohlene Lektüre: 

25+ Beste E-Commerce-WordPress-Themes für Online-Shops (2020)

 

In diesem Sinne können Sie sehen, warum es wichtig ist, die richtigen Farben für Ihr Design auszuwählen.

Das Letzte, was Sie tun möchten, ist, Kunden auszuschalten, damit sie von Ihrer Website abprallen.

Wie bereits erwähnt, kann die Farbe, die Leser anlocken könnte, von Ihrem gesamten Branding abhängen und davon, ob dieser Kunde dies für Ihre Marke als angemessen erachtet.

Wenn du beispielsweise Motorradzubehör verkaufst, würdest du wahrscheinlich keinen rosa Kaufknopf verwendenless du verkaufst gezielt mädchenhafte Accessoires an Frauen. Sie möchten eine gewisse Konsistenz im gesamten Design haben.

Wenn Sie sich also für die Verwendung von CTA-Schaltflächen (Red Call to Action) entscheiden, sollten Ihre CTA-Schaltflächen diese Farbe im gesamten Design beibehalten. Die einzige Ausnahme ist, wenn Sie nur auf eine bestimmte Schaltfläche und nicht auf die anderen aufmerksam machen möchten.

Was wahrscheinlich noch wichtiger ist als die Farbe, die Sie letztendlich wählen, ist sicherzustellen, dass Ihre Farben auf Ihrer Website konsistent sind. Wenn Sie sich für die Verwendung von Rot entscheiden, um ein Gefühl von Energie und Frische zu erzeugen, bleiben Sie bei dieser Farbpalette, vom Aufruf über die Aktionsschaltflächen bis hin zu den vorgestellten Überschriften.

Stellen Sie sicher, dass Sie keine kollidierenden Farben verwenden, die ein klirrendes Symbol für Ärger für Website-Besucher darstellen könnten.

Psychologie der Farbe

Quelle: WebpageFx

Navigieren in den Farboptionen - Wie treffe ich die beste Wahl?

Zu wissen, welche Farben wann verwendet werden sollen, kann etwas komplizierter sein, aber es ist möglich herauszufinden, welche für Ihre Website am besten geeignet sind.

Wenn Sie beispielsweise ein Gefühl des Vertrauens schaffen möchten, kann Blau eine gute Wahl sein. Wir werden im Folgenden etwas näher erläutern, auf welche Arten von Emotionen und Gefühlen verschiedene Farben abzielen könnten.

Es ist auch klug zu wissen, welche Farben Ihre Konkurrenten verwenden, und zu entscheiden, ob ähnliche Farben für Sie gut geeignet sind oder ob Sie sich mit sehr unterschiedlichen Farben von der Konkurrenz abheben möchten. Einige Websites verwenden Farben sehr gut. Hier einige Beispiele:

  • Dicks Sportartikel verwendet ein dunkles Grün, um an die Natur zu denken. Da sie Outdoor-Ausrüstung verkaufen, ist dies die perfekte Farbwahl für sie. Sie finden diese Farbe in ihren Überschriften, Verkaufsbannern und einigen CTA-Schaltflächen.Schwänze sportlich

 

  • Rue 21 ist ein Online-Bekleidungsgeschäft, das sich an Jugendliche und junge Erwachsene richtet. Ihre Kleidung ist frisch, günstig und macht Spaß. Es ist nicht überraschend, dass die auf dieser Website verwendeten Farben jung, frisch, hellblau und pink sind. Beachten Sie auch, dass der Fokus auf der günstigen Preisgestaltung mit kleinen leuchtend rosa Blasen liegt, die die verschiedenen Preisklassen im Geschäft anzeigen. Dies ist fast ein Aufruf zum Handeln für den Site-Besucher.

rue21 

Zielpersonen und Farbe - für wen ist mein Produkt bestimmt?

 

Es ist von entscheidender Bedeutung, Ihre Zielgruppe und die Arten von Farben zu verstehen, die sie von Ihrer Art von Website erwarten würden. Ihr erster Schritt bei der Auswahl einer Farbpalette sollte also mit der Untersuchung Ihrer Zielgruppe beginnen.

Wenn Sie noch keine Benutzerpersönlichkeit für Ihre Zielgruppe erstellt haben, sollten Sie mindestens eine erstellen.

Dies ist im Grunde eine fiktive Person, die Ihren wahrscheinlichsten Kunden repräsentiert. Sie können ihm einen Namen, Eigenschaften, eine mögliche Karriere usw. geben. Dies kann Ihnen helfen, das Publikum, für das Sie schreiben, besser zu verstehen, und Sie können dann Ihren Inhalt - und Ihre Farbauswahl - auf diesen Persönlichkeitstyp ausrichten.

Zum Beispiel wurde gezeigt, dass Männer Blau um 57% bevorzugen, gefolgt von Grün (14%) und Schwarz (9%).

Ein Beispiel für die Verwendung von Blau in Kombination mit einem maskulinen Look ist Mountain Productions Rigging Equipment and Services. Beachten Sie, wie tief und dunkel die Farben sind und der gesamten Seite ein maskulines Aussehen verleihen. Blautöne bringen eine Lieblingsfarbe hervor und sorgen für einen starken Aufruf zum Handeln. Die Seite verfügt über genügend Leerraum, um den gesamten Look auszugleichen.

Rigging

Frauen bevorzugen in der Regel auch Blau um 35%, dicht gefolgt von Lila mit 23% und Rot mit 9%.

Ein gutes Beispiel für die Verwendung von Purpur in einem Webdesign ist die Website von Claire's, die erschwingliche Mode und Schmuck verkauft. Diese Website verwendet einige violette Streifen, aber auch starke Farbtupfer, um ihre jugendliche Seite zu zeigen, insbesondere im Bild der jungen Mädchen, die Claires Accessoires tragen.

Die Seite zieht jedoch auch ein bisschen Blau an, da sie versteht, dass Blau eine beliebte und vertrauenswürdige Farbe bei Frauen ist. Sie werden sogar etwas Rot auf dieser Website entdecken, was beweist, dass diejenigen, die es entworfen haben, klar verstehen, dass die meisten Frauen diese Farben anderen vorziehen.

Letztendlich kann man mit Blau wirklich nichts falsch machen, da die meisten Leute die Farbe mögen und sie als vertrauenswürdig und beruhigend ansehen.
claires

Farben und was sie vermitteln

 

Während Sie bedenken sollten, dass die Auswirkungen einer Farbe je nach den Erfahrungen der Personen, die eine bestimmte Seite anzeigen, variieren können, gibt es einige Faustregeln, was jede Farbe bedeutet, die Sie auf Ihre Designs anwenden können:

1. Rot

Rot neigt dazu zu vermitteln:

  • Energie & Erneuerbare Energien
  • Leistung
  • Begeisterung
  • Liebe


Rot kann Aufregung erzeugen und zieht die Aufmerksamkeit auf sich. Beachten Sie, wie hell und energisch das unten stehende Website-Design ist.

Fantasy Shopping verwendet Rot in beiden Teilen der Überschrift und um eine Frage und das Design selbst stärker zu verdeutlichen. Beachten Sie, wie das Rot Ihre Aufmerksamkeit darauf lenkt, wohin der Designer es möchte.

Balenciaga E-Commerce-Websites Farbe

XStore bietet eine weichere Vorlage mit rotem Thema, hat jedoch weiterhin eine kühne Aussage, wobei die diagonalen Linien zur Mitte zeigen. Der Schwerpunkt führt Sie direkt zum Haupttext. 

XStore

2. Gelb

Gelb ruft oft hervor:

  • Joy
  • Energie & Erneuerbare Energien
  • Wärme
  • Fröhlichkeit


Gelb erzeugt oft Gefühle des Glücks und der Leichtigkeit.

 

Lipton Tea verwendet hervorragend Gelb, um eine helle und sonnige Stimmung zu erzeugen. Eistee ist nicht nur mit glücklichen Zeiten verbunden, sondern auch mit Sonnentee und Sommer.

Das helle Gelb in diesem Entwurf macht Sie glücklich und könnte Ihnen helfen, sich den Spaß eines Gartengrills vorzustellen. Es macht Lust, gleich einen Tee zu kaufen, damit Sie Ihren eigenen Sonnentee brauen können, nicht wahr?

Beachten Sie, dass selbst die Produktfotos diese Verwendung von Sonnengelb widerspiegeln.

Lipton Tea - Farbpsychologie für E-Commerce-Websites

Zitronenvorlage auch vermittelt durch ihr Design Wärme und Lebendigkeit mit einem Hauch von Gelb auf den verschiedenen Seiten.

Benutzer werden aufgefordert, den Cursor über das obere Navigationssystem zu bewegen und das durchscheinende Schwarz in einen gelben Strich zu ändern. Dieses Design hebt nicht nur die Energie hervor, sondern lädt auch andere dazu ein, sich beim Scrollen durch ihre Website verjüngt zu fühlen.

Zitrone

3. Schwarz & Grau

Schwarz und Grau erzeugen oft ein Gefühl von:

  • Autorität
  • Leistung
  • Stärke
  • Männlichkeit
  • Neutralität

Diese Farben schaffen auch ein Gefühl von Vertrauen und Zuverlässigkeit.

Harley Davidson verwendet Schwarz und Grau sehr effektiv, um eine leistungsstarke, männliche Website zu erstellen, die von Macht und Autorität spricht. Beachten Sie, dass die Farben bis auf die orangefarbene CTA-Taste alle ziemlich dunkel sind.

Sie können nicht anders, als den Blick auf diese Schaltfläche zu lenken, die den Website-Besucher effektiv dahin leitet, wohin das Unternehmen sie führen möchte.

Erfahren Sie mehr über das schwarze Websites und dunkles Webdesign hier.

Harley Davidson - Farbpsychologie

Phoenix-Thema verwendet auch Schwarz und Grau in seiner Vorlage und hat eine starke und raffinierte Persönlichkeit. Es ist eine glatte Vorlage mit minimalen Ablenkungen.

Diese Art von Website spricht die Unternehmensleiter an, die keine Spielereien wollen und zu einem bestimmten Zweck auf die Website gekommen sind. Wenn Sie an der Implementierung minimalistischer Webdesign-Techniken und mehr interessiert sind, sollten Sie dies ausprobieren Dieser Artikel über minimale WordPress-Themes.

Phönix

4. Orange

Orange neigt dazu zu fördern:

  • Glück
  • Aufregung
  • Wärme
  • Kultiviertheit

Wie Rot und Gelb kann Orange ein Gefühl von Energie und Glück erzeugen. Es wird jedoch auch als anspruchsvollere Farbe angesehen. Ein gutes Beispiel für die Verwendung von Orange in einem Design ist Sunny Delight Beverages. Da es sich um Getränke mit Orangengeschmack handelt, ist es sinnvoll, diese Farbe in ihrem Design zu verwenden.

Denken Sie daran, dass ein Teil der Psychologie der Farben darin besteht, Farben zu verwenden, die der Website-Besucher von Ihrer Marke erwarten würde. Sunny D nutzt dieses Konzept sehr gut. Das Design verwendet orangefarbene Kanten, orangefarbene Navigationsschaltflächen und Orange in den Bildern und im Logo. Das Nebeneinander des tiefblauen und weißen Raums bietet einen raffinierten Look, der zeigt, dass das Getränk nicht nur für Kinder, sondern für alle Altersgruppen geeignet ist.

Sunny D

Beachten Sie, dass die Vorlage von Omega aufgrund des kräftigen orangefarbenen Balkens durch ihr Design so lebendig ist. Es ist ein einladendes Layout und alle Funktionen, auf die sie hinweisen möchten, sind orange. Ästhetisch könnte dieses einfache Design für ein potenzielles Unternehmen von großem Wert sein.

Omega

5 Grün

Grün vermittelt oft:

  • Natur
  • Wachstum
  • Geld
  • Fruchtbarkeit


Grün ruft Gefühle der Ruhe und Entspannung hervor. Sie werden oft Marken sehen, die umweltfreundlich sind oder mit dieser Farbe in Verbindung stehen. Finanzunternehmen verwenden möglicherweise auch Grün, um zu zeigen, dass Sie Geld verdienen können - denken Sie an Banken, Geldblogs usw.

John Deere ist ein gutes Beispiel für die Verwendung von Grün in einem Website-Design.

Sie verwenden einen ganz bestimmten Grünton, der auf der ganzen Welt bekannt ist. Die Traktoren der Marke sind in den Farben Grün und Gelb erhältlich. Daher ist es nur sinnvoll, dass diese Farben im Website-Design von John Deere angezeigt werden.

Schließlich wurden sogar Country-Songs über „John Deere Green“ geschrieben.

Beachten Sie, wie das folgende Site-Beispiel das helle Grün verwendet, aber es hat auch eine gute Balance von neutralen Farben, um zu verhindern, dass das Grün zu überwältigend wird.

Ein professioneller Designer kann einen Blick auf die Gesamtbalance der Seite werfen und sicherstellen, dass der Text lesbar angezeigt wird, die Farben jedoch weiterhin mit dem Gesamtkonzept der Marke verknüpft sind Abzeichenland In Neuseeland wird die Farbe Grün verwendet, um die Marke auf der Website wiederzugeben.

Dies ist eines der besten Beispiele für eine Website, die das, was bereits über die Farbe ihrer Marke bekannt ist, nutzt und es auf intelligente Weise in ihr Designkonzept umsetzt.

John Deere Green - Farbpsychologie

Adeline Fashion kombiniert Umweltreize und deren Markt innerhalb der Vorlage. Es bietet natürliche Ästhetik innerhalb des Designs und zeigt, wie eine Marke, die mehr auf Natur ausgerichtet ist, diese Vorlage anpassen kann und dennoch eine organische Ausstrahlung hat.

Adeline

6. Blau

Blau wird normalerweise gesehen als:

  • Vertrauenswürdigkeit
  • Beruhige
  • Weise
  • Serene

Es gibt viele verschiedene Blautöne, und jeder Farbton kann eine andere Emotion hervorrufen. Zum Beispiel kann ein tiefes Königsblau den Eindruck von Königen und Reichtum erwecken. Dies ist eine gute Farbe für Luxusmarken. Auf der anderen Seite kann ein helles Aqua ein Gefühl von Jugend und Lässigkeit erzeugen. Ein Hellblau kann ein Gefühl der Ruhe erzeugen.

Denken Sie darüber nach, mit welchen Dingen Sie verschiedene Blautöne verbinden und welcher Farbton Ihre Marke am besten repräsentiert. Es gibt viele verschiedene Beispiele für Unternehmen, die die Farbe Blau im Design verwenden.

Denken Sie daran, dass Blau sowohl bei Männern als auch bei Frauen eine Lieblingsfarbe ist. Daher ist es sinnvoll, dass diese Farbe in verschiedenen Website-Designs häufig vorkommt.

Ein Beispiel für die Farbe Blau, die in einem Designkonzept effektiv verwendet wird, ist Skype.

Schon der Name lässt Sie an den Himmel denken - und an das Himmelblau. Skype berücksichtigt diese Erwartung in seinem Logo und im gesamten Design. Beachten Sie, wie sie eine Balance mit einigen neutralen Farben herstellen und dann mit ihrem Aufruf zum Handeln einen Farbtupfer in Blau hinzufügen.

Darüber hinaus kann die Verwendung von leuchtenden Farben auf Jugend, Spaß oder Weiblichkeit hinweisen. Stellen Sie nur sicher, dass Sie diese Farben in Maßen verwenden, da Sie sonst das Design und den Besucher der Website überfordern können. Die Gesamtästhetik sollte angenehm und einfach zu navigieren sein.

Achten Sie auch darauf, Gelb und andere helle Farben zu verwenden, die möglicherweise nicht auf Weiß erscheinen oder die Augen belasten.

Einige Leute bevorzugen hellere Farben für ein dunkles Webdesign.

Ein dunkles Webdesign passt jedoch möglicherweise nicht vollständig zum Ton Ihres Produktangebots. Denken Sie daran, dass ein dunkles Design ein imposantes, schweres und maskulines Gefühl erzeugen kann. Das obige Beispiel von Harley Davidson funktioniert sehr gut mit dunklen, kräftigen Farben.

Wenn Sie jedoch versuchen, Nagellack zu verkaufen, ist dieser Look wahrscheinlich nichts für Sie.

skype

VG Strepre verfügt über a ähnliche Farbpalette mit seiner Vorlage und verwendet auch abgerundete Schaltflächen. Die Komplementärfarbe hebt bestimmte CTAs hervor und passt gut zum Übergefühl der Site.

Das Letzte, was Sie haben möchten, ist, dass sich Ihre CTAs überwältigend anfühlen.

stepre

Split-Tests, um festzustellen, welche Farben für Ihr Publikum am besten geeignet sind

 

Da die individuelle Wahrnehmung einen solchen Einfluss darauf haben kann, welche Farben am besten funktionieren, sollten Sie auf Ihrer eigenen Website herausfinden, welche Farben Ihre eigene Zielgruppe bevorzugt. Sie könnten sie überblicken, aber die Antworten sind möglicherweise nicht so genau wie die Durchführung einiger einfacher Split-Tests, um festzustellen, auf welche sie am besten reagieren.

Sie können verschiedene Zielseiten einrichten und die Ergebnisse von Conversions, die auf der Seite verbrachte Zeit usw. verfolgen.

Einige Dinge, die Sie testen möchten, sind:

  • Farbe der Überschriften
  • Farbe der CTA-Tasten
  • Farbe des Hintergrunds
  • Balance zwischen Hauptfarbe und neutralen Farben

Probieren Sie verschiedene Kombinationen aus und finden Sie heraus, welche für Ihre Website am besten geeignet sind. Verwenden Sie helle, kräftige Farben für Ihren CTA (Rot, Hellrosa, Blau).

Zum Beispiel hat Nature Air 17 verschiedene Zielseiten ausprobiert, um festzustellen, welche bessere Conversion-Raten hatten. Durch A / B-Tests stellten sie fest, dass die markanteren CTA-Farben die Conversions um bis zu 591% erhöhten.

Darüber hinaus führte Performable einen Test durch, bei dem die CTA-Schaltfläche für die Startseite von grün auf rot getauscht wurde und die Conversions um 21% zunahmen.

Rot ist ein Blickfang, egal wie Sie es schneiden, und es ist eine Farbe, die Sie zumindest gelegentlich in Ihre Website integrieren sollten, um zum Handeln aufzurufen. Führen Sie mit diesem Konzept Ihre eigenen A / B-Tests durch und sehen Sie, welche Ergebnisse Sie erzielen.

Farbpsychologie zum Mitnehmen

Die Farbpsychologie hat so viele verschiedene Elemente, weil Menschen einzigartige Individuen sind. Sogar die Kultur, aus der eine Person stammt, kann Unterschiede in der Art und Weise hervorrufen, wie sie unterschiedliche Farben sieht.

Ihre ersten Schritte bei der Bestimmung der im Design zu verwendenden Farben sollten damit beginnen, herauszufinden, wer Ihre Zielgruppe ist. Dies ist ein wesentlicher Schritt für Websites in den Bereichen Farbpsychologie und E-Commerce.

Berücksichtigen Sie als Nächstes die Farben, die die meisten Menschen mit der Art des angebotenen Produkts in Verbindung bringen. Schauen Sie sich Ihre Konkurrenz an, um zu sehen, welche Farben sie verwenden. Während Sie einzigartig sein möchten, möchten Sie sich zumindest an einige herkömmliche Standards halten.

Führen Sie abschließend einige A / B-Tests durch, um sicherzustellen, dass Sie alles richtig analysiert haben, und sind Sie offen für Änderungen, falls erforderlich.

Das Verständnis der Farbpsychologie ist wichtig, aber lassen Sie sich nicht so darauf ein, dass Sie grundlegende Designtechniken oder den gesunden Menschenverstand ignorieren.

Über den Autor
David Attard
Autor: David AttardWebsite: https://www.linkedin.com/in/dattard/
David arbeitet seit 18 Jahren in oder um die Online- / Digitalbranche. Er verfügt über umfangreiche Erfahrung in der Software- und Webdesignbranche mit WordPress, Joomla und den sie umgebenden Nischen. Als digitaler Berater konzentriert er sich darauf, Unternehmen durch die Kombination ihrer Website und der heute verfügbaren digitalen Plattformen einen Wettbewerbsvorteil zu verschaffen.

Eine Sache noch... Wussten Sie, dass Leute, die nützliche Dinge wie diesen Beitrag teilen, auch FANTASTISCH aussehen? ;-);
Bitte kontaktieren Sie uns lass a nützlich Kommentieren Sie mit Ihren Gedanken und teilen Sie dies dann Ihren Facebook-Gruppen mit, die dies nützlich finden würden, und lassen Sie uns gemeinsam die Vorteile nutzen. Vielen Dank für das Teilen und nett zu sein!

Disclosure: Diese Seite enthält möglicherweise Links zu externen Websites für Produkte, die wir lieben und von ganzem Herzen empfehlen. Wenn Sie Produkte kaufen, die wir vorschlagen, können wir eine Empfehlungsgebühr verdienen. Solche Gebühren haben keinen Einfluss auf unsere Empfehlungen und wir akzeptieren keine Zahlungen für positive Bewertungen.

Autor (en) Empfohlen am:  Inc Magazin Logo   Sitepoint-Logo   CSS Tricks Logo    Webdesignerdepot-Logo   WPMU DEV Logo   und viele mehr ...