Trucs pour l'utilisation des couleurs en design web

De temps √† autre, nous invitons des professionnels du web √† agir √† titre de blogueur invit√© sur le site de SatelliteWP. Cette semaine, Alison Knott, une sp√©cialiste du web et de l’image de marque chez¬†Eraserheader Design¬†bas√©e √† Halifax, discute du choix des couleurs en design web.

 

La place des couleurs lors du design d’un site web peut sembler banale. En effet, nous pensons souvent qu’on n’a qu’√† reprendre les couleurs de notre logo et le tour est jou√©! Mais en agissant ainsi, l’exp√©rience utilisateur peut en √™tre affect√©e. Un mauvais choix de couleurs pourrait faire en sorte que vos visiteurs ne cliqueront pas sur vos boutons, ach√®teront moins sur votre boutique ou ne liront pas vos contenus. Est-ce r√©ellement ce que vous souhaitez?

Une utilisation plus efficace des couleurs augmentera votre retour sur investissement. Après tout, votre site web est un outil marketing interactif et non une brochure statique! Les conseils contenus dans cet article vous donneront un avantage sur votre compétition en améliorant le design web de votre site web par une utilisation judicieuse des couleurs.

 

Assurez-vous de choisir les meilleures couleurs

En tant que concepteur de votre site, vous avez le droit de mettre à jour ou de changer totalement le jeu de couleurs que vous utilisez comme vous le souhaitez. Toutefois, pas besoin de réinventer la roue quand vient le temps de trouver des inspirations.

Sachez que vous devez choisir au moins 4 couleurs avec lesquelles vous travaillerez, c’est ce qu’on appelle une palette de couleurs. Naturellement,¬†nous avons tous des pr√©f√©rences personnelles pour la combinaison de couleurs. Comparez seulement votre style vestimentaire avec celui de vos coll√®gues et vous verrez (noir, noir et plus de noir dans mon cas). Pour vous aider √† choisir la meilleure combinaison de couleurs, il est donc recommand√© de diversifier vos sources d’inspirations. Choisissez deux ou trois palettes de couleur, puis affinez-les pour obtenir la combinaison qui vous attire le plus.

Heureusement, le web est rempli d’outils et de ressources pour ceux qui n’ont pas l’oeil dans le choix de couleurs.

Adobe Color CC

Adobe Color CC est mon site de prédilection pour amorcer ma recherche et identifier de nouvelles combinaisons de couleurs. Vous pouvez y spécifier des couleurs de départ pour y découvrir différentes harmonies de couleurs dont les valeurs RGB et HEX vous sont fournies.

Pour plus d’inspiration, cliquez sur l’onglet ¬ę Explore ¬Ľ pour voir les milliers de palettes que d’autres personnes ont assembl√© avant vous. Vous serez √©tonn√© par la quantit√© impressionnante de choix disponibles.

Capture d'écran de palettes de couleurs Adobe Colour

Voici une capture d’√©cran d’une palette de couleurs cr√©√©e par un utilisateur. Il n’y a pas de limites!

Jeu de couleurs par Visme.com

Cet article (en anglais) de Nayomi Chibana, publi√© il y a quelques ann√©es, est tout simplement de l’or en barre (#FFDF00).

Le site prend des captures d’√©cran de sites web et leur fait correspondre une palette de couleurs (valeurs hexad√©cimales incluses). Ce que j’aime dans cet article, c’est la vari√©t√© des industries √©chantillonn√©es et leur utilisation. Parfois, nous s√©lectionnons d‚Äôexcellentes combinaisons, mais leur utilisation combin√©e aux choix de typographie et de contenu ne donne pas l’effet escompt√©. Les captures d’√©cran nous aident √† visualiser √† quoi ressemblerait notre propre contenu avec les couleurs choisies.

 

Vérifiez le contraste et la lisibilité

Peu importe la qualit√© des couleurs, la conception sera un √©chec si le contenu est difficile √† lire. La lisibilit√© du contenu sur le site doit toujours primer sur l‚Äôesth√©tisme. De plus, les couleurs ne sont pas per√ßues de la m√™me fa√ßon par tous vos visiteurs (attention aux probl√®mes de vision). Assurez-vous donc d’en tenir compte lors de vos choix de couleurs.

Utilisez Webaim.org pour valider le niveau de contraste

Saviez-vous que 1 personne sur 200 poss√®de des probl√®mes de vision? Vous assurer d’utiliser un niveau de contraste √©lev√© est un moyen d’aider √† consulter vos contenus.

Un moyen tr√®s simple et efficace de v√©rifier le contraste de votre site est via Webaim.org. Vous n’avez qu’√† ins√©rer la valeur HEX de la couleur de votre texte ainsi que la couleur d’arri√®re-plan et voyez si √ßa passe ou √ßa casse! Si votre couleur ne passe pas, vous pouvez jouer avec le niveau de contraste afin d’obtenir une suggestion plus appropri√©e. Souvent, vous n’aurez qu’√† modifier l√©g√®rement la couleur sans affecter vos normes graphiques.

Capture d'écran WebAIM pour valider le niveau de contraste

Après avoir inséré les couleurs du haut de page de SatelliteWP, je suis heureuse de voir que les couleurs rencontrent les niveaux de contraste requis.

 

√Čvitez les textes de couleur pour le corps principal du texte

Vous serez peut-√™tre tent√© d’utiliser du texte de couleur une fois que vous aurez ma√ģtris√© l’utilisation du CSS ou utiliserez un th√®me WordPress offrant une grande libert√© de conception. Attention!

Le contenu principal du site web devrait √™tre du texte noir sur un fond blanc. La plupart des livres que vous poss√©dez utilisent cette m√™me combinaison de couleurs et avec raison ‚Äď le contraste est tr√®s √©lev√©.

Réservez les textes colorés pour un contenu court et défini dans une police de taille supérieure à celle du contenu principal. Les titres, les citations et les liens sont des candidats parfaits.

Limitez la fr√©quence d’utilisation du texte invers√©

Le texte inversé consiste à utiliser du texte blanc ou clair sur un arrière-plan coloré. Je vois souvent des gens exagérer avec ceux-ci. Un fond violet avec du texte blanc peut sembler cool, mais il peut aussi échouer aux tests de contraste. Personne ne veut que ses lecteurs aient à plisser les yeux pour lire son texte!

Utilisez donc du texte invers√© seulement pour une section d’une page. Par exemple, en guise d’introduction au contenu principal ou pour diviser votre design en un appel √† l’action, tel que l’inscription √† une infolettre ou le t√©l√©chargement d’un contenu gratuit. Et dans ce cas, d√©finissez une taille de texte sup√©rieure √† celle du reste de votre site pour en augmenter l’impact.

 

Utilisez vos couleurs avec discernement

Ne faites pas l’erreur de rendre chaque √©l√©ment de votre design de la m√™me couleur que votre logo. Vous cr√©eriez dans ce cas une lacune au niveau de la hi√©rarchie visuelle de votre design.

Qu’est-ce que la hi√©rarchie visuelle? C’est un √©l√©ment important d’un design qui aide √† comprendre l’importance relative des contenus sur votre site.

J’aime penser que le design d’une page est constitu√© de trois parties : le plus important, puis ce qui vient en deuxi√®me, et finalement ce qui est le moins important. Ce n’est pas suffisant de d√©montrer la hi√©rarchie par l’ordre dans lequel sont pr√©sent√©s les √©l√©ments, mais √©galement par la quantit√© d’espace qu’ils occupent. Les couleurs que vous choisissez peuvent venir jouer avec cette hi√©rarchie et augmenter ou diminuer l’importance des √©l√©ments sur une page.

√Čvitez les couleurs de votre image de marque pour les √©l√©ments structurels du site

Si vous travaillez avec une palette de couleurs limit√©e, ou si votre logo ne contient qu’une seule couleur, consid√©rez n’utiliser que le blanc et le noir pour le haut de page, la navigation et le bas de page. Puis convertissez votre logo au noir ou au blanc. Ceci vous permettra d’utiliser votre couleur principale pour les √©l√©ments contextuels tels que les boutons et les liens.

R√©servez une couleur d’accent pour les appels √† l’action

Votre image de marque contient deux couleurs principales que vous avez d√©cid√© d’utiliser partout : blocs de contenus, boutons, liens, etc. Le r√©sultat? Tout aura la m√™me importance. Dommage…

√Ä la place, choisissez une couleur compl√®tement diff√©rente qui sera seulement utilis√©e pour les √©l√©ments interactifs de votre site. Nous appelons ce genre de couleur une couleur d’accent, et elle viendra compl√©menter les couleurs ¬†de votre image de marque. Elle peut √©galement √™tre totalement diff√©rente pour renforcer la hi√©rarchie. Soyez s√©lectif lorsque vous utilisez cette couleur : r√©servez-l√† seulement aux √©l√©ments distinctifs et importants, tels qu’un bouton d’achat ou un lien vers un document important.

Capture d'écran de mindtools.com pour démontrer l'usage d'une couleur d'accent en design web

Les couleurs principales de l’image de marque sont orange et bleu. Par contre, la page utilise le vert pour mettre en √©vidence l’appel √† l’action.

 

En conclusion

Prendre quelques moments afin de consid√©rer vos choix de couleur peut r√©sulter en un site √† l’allure beaucoup plus professionnelle. En appliquant ces conseils, vous faciliterez la consultation de vos contenus par votre auditoire, rehaussant l’interaction au niveau que votre site m√©rite.

L'article "Comment choisir les couleurs de son design web" a été modifié la dernière fois le 21 janvier 2019 par Alison Knott.

À propos de Alison Knott

Alison Knott is a web and branding consultant at Eraserheader Design. Based out of Halifax, Alison specializes in relaunching websites for companies who want better ROI. She is also an international speaker, given presentations on the intersection of creativity, business and the web. When she’s not working, she can be found entertaining her two children parrots.

Laissez un commentaire