Analyses et testsMarketing de ContenuCommerce électronique et vente au détailInfographie marketingOutils marketingMarketing mobile et tabletteMédias sociaux et marketing d'influence

Comment développer des schémas de couleurs de sites Web, de commerce électronique ou d'applications

Nous avons partagé pas mal d'articles sur l'importance de la couleur par rapport à une marque. Pour un site Web, un site de commerce électronique ou une application mobile ou Web, c'est tout aussi critique. Les couleurs ont un impact sur :

  • L'impression initiale d'une marque et sa valeur - par exemple, les produits de luxe utilisent souvent le noir, le rouge implique l'excitation, etc.
  • Décisions d'achat – la confiance d'une marque peut être déterminée par le contraste des couleurs. Les schémas de couleurs douces peuvent être plus féminins et dignes de confiance, les contrastes sévères peuvent être plus urgents et axés sur les remises.
  • Convivialité et expérience utilisateur – les couleurs ont un effet psychologique et l'impact physiologique également, rendant plus facile ou plus difficile la navigation dans une interface utilisateur.

Quelle est l'importance de la couleur ?

  • 85% des personnes ont affirmé que la couleur a une influence majeure sur ce qu'elles achètent.
  • Les couleurs augmentent la notoriété de la marque de 80 % en moyenne.
  • L'impression couleur est responsable de 60% de l'acceptation ou du rejet d'un produit.

Lors de la détermination d'un schéma de couleurs pour un site Web, certaines étapes sont détaillées dans l'infographie qui l'accompagne :

  1. Couleur primaire – Choisissez une couleur qui convient à l'énergie de votre produit ou service.
  2. Couleurs d'action - Cela manque dans l'infographie ci-dessous, mais l'identification d'une couleur d'action principale et d'une couleur d'action secondaire est extrêmement utile. Il éduque votre public à se concentrer sur des éléments d'interface utilisateur spécifiques basés sur la couleur.
  3. ACouleurs supplémentaires – Choisissez supplémentaire des couleurs qui se complètent votre couleur primaire, idéalement des couleurs qui font votre couleur primaire pop.
  4. Couleurs d'arrière-plan – Choisissez une couleur pour l'arrière-plan de votre site Web – peut-être moins agressive que votre couleur principale. Gardez également à l'esprit les modes sombre et clair. De plus en plus de sites intègrent des schémas de couleurs en mode clair ou sombre.
  5. Couleurs de police – Choisissez une couleur pour le texte qui sera sur votre site Web – n'oubliez pas qu'une police de caractères noire unie est rare et déconseillée.

A titre d'exemple, mon entreprise DK New Media a développé une marque en ligne pour un fabricant de robes qui souhaitait créer un site de commerce électronique destiné directement aux consommateurs où les gens pourraient acheter des robes en ligne. Nous avons compris notre public cible, la valeur de la marque et – parce que la marque était principalement numérique mais avait également un produit physique – nous nous sommes concentrés sur des combinaisons de couleurs qui fonctionnaient bien sur les imprimés (CMYK), les palettes de tissus (Pantone), ainsi que numérique (RVB et Hex).

Tester un schéma de couleurs avec une étude de marché

Notre processus de sélection de notre palette de couleurs a été intensif.

  1. Nous avons fait une étude marketing sur une série de couleurs primaires auprès de notre public cible ce qui nous a réduit à une seule couleur.
  2. Nous avons fait des recherches marketing sur une série de couleurs secondaires et tertiaires avec notre public cible où nous avons réduit certaines combinaisons de couleurs.
  3. Nous avons réalisé des maquettes de produits (emballages de produits, étiquettes de cou et étiquettes suspendues) ainsi que des maquettes de commerce électronique avec les palettes de couleurs et les avons fournies au client ainsi qu'au public cible pour commentaires.
  4. Parce que leur marque dépendait largement de la saisonnalité, nous avons également incorporé des couleurs saisonnières au mélange. Cela peut être utile pour des collections ou des visuels spécifiques pour les publicités et les partages sur les réseaux sociaux.
  5. Nous sommes passés par ce processus plus d'une demi-douzaine de fois avant de nous arrêter sur le schéma final.
schéma de couleurs du placard52

Alors que les couleurs de la marque sont rose clair et gris foncé, nous avons développé le couleurs d'action être l'ombre du vert. Le vert est une couleur orientée vers l'action, c'était donc un excellent choix pour attirer les yeux de nos utilisateurs sur des éléments orientés vers l'action. Nous avons incorporé l'inverse du vert pour nos actions secondaires (bordure verte avec fond et texte blancs). Nous testons également une nuance de vert plus foncée sur la couleur d'action pour les actions de survol.

Depuis que nous venons de lancer le site, nous avons intégré le suivi de la souris et des cartes thermiques pour observer les éléments qui attirent le plus nos visiteurs et avec lesquels ils interagissent le plus afin de garantir que nous avons un jeu de couleurs qui n'est pas seulement beau… il fonctionne bien.

Couleurs, espaces blancs et caractéristiques des éléments

Le développement d'un schéma de couleurs doit toujours être accompli en le testant dans une interface utilisateur globale pour observer l'interaction des utilisateurs. Pour le site ci-dessus, nous avons également incorporé des marges, un remplissage, des contours, des rayons de bordure, une iconographie et des polices très spécifiques.

Nous avons fourni à l'entreprise un guide de marque complet à distribuer en interne pour tout matériel de marketing ou de produit. La cohérence de la marque est essentielle pour cette entreprise car elle est nouvelle et n'a aucune notoriété dans l'industrie à ce stade.

Voici le site de commerce électronique résultant avec une palette de couleurs

  • Closet52 - Acheter des robes en ligne
  • Page Collections Closet52
  • Page produit Closet52

Utilisation des couleurs et daltonisme

N'oubliez pas les tests d'utilisabilité pour le contraste des couleurs entre les éléments de votre site. Vous pouvez tester votre schéma en utilisant le Outil de test d'accessibilité du site Web

. Avec notre palette de couleurs, nous savons que nous avons des problèmes de contraste sur lesquels nous travaillerons plus tard, ou nous pouvons même avoir des options pour nos utilisateurs. Fait intéressant, les risques de problèmes de couleur avec notre public cible sont assez faibles.

Le daltonisme est l'incapacité de percevoir les différences entre certaines des couleurs que les utilisateurs non altérés de couleur peuvent distinguer. Le daltonisme affecte environ cinq à huit pour cent des hommes (environ 10.5 millions) et moins d'un pour cent de femmes.

Usabilité.gov

L'équipe de WebsiteBuilderExpert a rassemblé cette infographie et un article d'accompagnement détaillé sur Comment choisir une couleur pour votre site Web c'est extrêmement minutieux.

Comment choisir une palette de couleurs pour votre site Web

Douglas Karr

Douglas Karr est le directeur marketing de OuvrirINSIGHTS et le fondateur de la Martech Zone. Douglas a aidé des dizaines de startups MarTech à succès, a contribué à la due diligence de plus de 5 milliards de dollars d'acquisitions et d'investissements MarTech, et continue d'aider les entreprises à mettre en œuvre et à automatiser leurs stratégies de vente et de marketing. Douglas est un expert et conférencier de renommée internationale en matière de transformation numérique et de MarTech. Douglas est également l'auteur d'un guide pour les nuls et d'un livre sur le leadership d'entreprise.

Articles Relatifs

Retour à bouton en haut
Fermer

Adblock détecté

Martech Zone est en mesure de vous fournir ce contenu gratuitement car nous monétisons notre site grâce aux revenus publicitaires, aux liens d'affiliation et aux parrainages. Nous vous serions reconnaissants de supprimer votre bloqueur de publicités lorsque vous consultez notre site.