Fermer

décembre 17, 2021

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 essentiel. 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.
  • Les décisions d'achat – la confiance d'une marque peut être déterminée par le contraste des couleurs. Les palettes de couleurs douces peuvent être plus féminines et dignes de confiance, les contrastes sévères peuvent être plus urgents et plus économiques. pour naviguer dans une interface utilisateur.

Quelle est l'importance de la couleur ?

  • 85 % des personnes interrogées affirment 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 %. % d'acceptation ou de 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 principale – Choisissez une couleur qui convient à l'énergie de votre produit ou service.
  2. Couleurs d'action – Ceci est absent de 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 apprend à votre public à se concentrer sur des éléments spécifiques de l'interface utilisateur en fonction de la couleur. couleur pop.
  3. 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. votre site Web – rappelez-vous qu'une police de caractères noire solide est rare et déconseillée.

Par exemple, mon entreprise Highbridge a développé une marque en ligne pour un fabricant de vêtements qui souhaitait créer un commerce électronique direct aux consommateurs. site 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).

Test d'un schéma de couleurs avec une étude de marché

Notre processus de sélection de schémas de couleurs a été intensif.

  1. Nous avons effectué 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, là où nous avons réduit 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 la marque dépendait en grande partie de la saisonnalité, nous avons également incorporé des couleurs saisonnières au mélange. Cela peut s'avérer 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 » class= »wp-image-116487″ width= »500″ height= »556″ srcset= »https://martech.zone/wp-content/uploads/2021/12/closet52-color-scheme-1000×1112.png 1000w, https://martech.zone/wp-content/uploads/2021/12/closet52-color-scheme-640×712.png 640w, https://martech.zone/wp-content/uploads/2021/12/closet52-color-scheme-600×667.png 600w, https://martech.zone/wp-content/uploads/2021/12/closet52-color-scheme.png 1092w » sizes= »(max-width: 500px) 100vw, 500px » title= »How To Develop Website, Ecommerce, Or Application Color Schemes 2″/>

Alors que les couleurs de la marque sont rose clair et gris foncé, nous avons développé les couleurs d'action pour être la nuance de 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é 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 nos visiteurs et avec lesquels ils interagissent. le plus pour s'assurer que nous avons un jeu de couleurs qui n'est pas seulement beau… il fonctionne bien. interface 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. 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 à l'aide de l'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. Il est intéressant de noter que 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 décolorés peuvent distinguer. Le daltonisme affecte environ cinq à huit pour cent des hommes (environ 10,5 millions) et moins d'un pour cent des femmes.

Usability.gov

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

Comment choisir un jeu de couleurs pour votre site Web




Source link