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

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 essentiel. Les couleurs ont un impact sur :

  • Impression initiale d'une marque et de 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 spécifiques de l'interface utilisateur en fonction de 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 Highbridge a développé une marque en ligne pour un fabricant de vêtements qui souhaitait créer un site de commerce électronique direct aux consommateurs où les gens pouvaient 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 schémas de couleurs qui fonctionnaient bien sur l'impression (CMJN), 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 des recherches marketing sur une série de couleurs primaires avec notre public cible qui nous a réduits à une seule couleur.
  2. Nous avons effectué des recherches marketing sur une série de couleurs secondaires et tertiaires avec notre public cible, où nous avons réduit certains schémas de couleurs.
  3. Nous avons réalisé des maquettes de produits (emballage du produit, étiquettes de cou et étiquettes suspendues) ainsi que des maquettes de commerce électronique avec les schémas 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 avons suivi 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 un schéma de couleurs

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

Visitez 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 élaboré 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