Dans mon métier, je suis souvent amené à donner mon avis sur les aspects graphiques des sites Internet pour lesquels je travaille où à participer à la phase de création de ceux-ci. Malheureusement, je suis souvent surpris par le manque de cohérence de certains designs.
Quelque soient les produits vendus et la qualité de ceux-ci, le design du site Internet vous permettra de vous crédibiliser en proposant une création professionnelle et agréable qui inspirera confiance à vos visiteurs ou au contraire d’inciter votre nouveau visiteur à quitter votre site Internet.
Malheureusement, je constate que de nombreux graphistes décident de passer outre les règles de base au profit de “concepts graphiques” qui seront ne très probablement pas compris par les visiteurs de votre site.
Voici donc les conseils de base que je peux vous donner et que je vous conseille vivement de faire respecter lorsqu’on vous propose une maquette ou que vous devez préparer un briefe au créatif en charge de votre site Internet.
Ajustez la colorimétrie
Vous pensez sans doute que vous devez choisir les couleurs de votre site Internet et ensuite faire en sorte qu’elles se marient avec des mises en valeur et des ajustements plus ou moins importants. En réalité, une fois la couleur dominante choisie, la meilleure solution n’est pas de choisir les autres couleurs complémentaires mais plutôt de choisir le groupe de couleurs associées que vous préférez.
En effet, il existe des méthodes pour trouver les couleurs associées à votre première couleur (accords analogues, accords isocèles, accords tétradics, …). Chacune de ces associations vous proposera une série de couleurs qui s’accordent parfaitement avec votre couleur de départ.
Le respect de cette règle graphique est essentielle pour conserver une certaine visibilité et ne pas mettre ensemble deux couleurs qui gâcheront la lisibilité de votre contenu ou atténueront les effets que vous souhaitez donner.
Exemple :
La couleur principale du site Place des tendances est le violet. Les différents éléments de structure et le fond utilisent des couleurs complémentaires parfaitement en raccord. Les éléments décoratifs de la home page et les éléments d’illustration restent aussi cohérents avec des codes couleur complémentaires.
Soyez homogènes
Maintenant que vos couleurs s’accordent bien entre elles, il faut vous assurer que l’ensemble de votre site est homogène. Au delà des couleurs, les textes et les formes sont en quelques sorte le langage de votre site Internet et vous devez l’apprendre à votre visiteur.
Faites en sorte que tous vos titres soient de la même taille, même couleur, même police et si possible, positionnés au même endroit. Idem pour les sous-titres et ainsi de suite. Ca permettra à l’internaute d’identifier directement les différents éléments de votre site Internet quelque soit la page qu’ils sont en train de visiter.
De la même façon, les boutons “call to action” doivent à la fois être mis en valeur et être semblables sur l’ensemble de votre site Internet. Par exemple, si votre bouton “ajouter au panier” est vert sur les fiches produit, conservez cette couleur pour valider le panier. Ces actions sont cohérentes entre elles, elles doivent donc l’être visuellement pour que l’internaute les reconnaisse sans même avoir à lire ce qui est écrit dessus.
Exemple :
Tous les boutons “call to action” du site Ginger Pup Lane respectent la même charte visuelle : texte blanc sur bouton marron à coins arrondis.
Evitez la surcharge
Il est toujours très tenant de mettre beaucoup d’informations en avant sur la première page de votre site Internet. Vous voulez mettre en avant vos produits, vos nouveautés, vos promotions … En même temps, vous voulez absolument capter l’attention de votre visiteur pour l’inciter à rester sur votre site Internet. Malheureusement, plus il y a d’informations, plus l’attention de votre visiteur est dispersée et les informations mises en avant deviennent de moins en moins pertinentes (je vous invite à lire mon article sur les moyens de convaincre vos visiteurs de rester sur votre site Internet).
Les informations que vous devez afficher sont donc un subtil équilibre entre votre envie de diffuser des informations et l’attention de vos visiteurs que vous souhaitez évidemment garder.
Personnellement, j’ai une certaine préférence pour l’utilisation de carrousel. C’est un moyen de diffuser plusieurs informations avec un utilisateur passif (sans action de sa part) tout en n’en affichant qu’une seule à la fois et donc, sans troubler son attention. Un message à la fois !
Exemples :
Le site Winestore propose une entrée sur son site très épurée en prenant le parti de proposer directement un produit.
Le site LK Bennet préfère mettre en avant un grand visuel sous forme de carrousel.
Respectez votre identité
Mettez-vous à la place d’un internaute qui ne vous connait pas. Votre identité, si elle est bien réalisée, vous permettra de définir plusieurs choses essentielles en une fraction de seconde.
Votre secteur d’activité. Certaines activités ont des codes implicites. Par exemple, si vous proposez des articles de golf, le vert et blanc est de rigueur. Ce sont des couleurs associées au golf dans l’inconscient collectif.
Votre positionnement. Afficher un “-50%” en rouge dans une étoile rouge ne vous donnera tout de suite une impression de “discount” alors qu’une police blanche fine sur un fond noir avec un petit reflet vous positionnera plutôt comme une enseigne dans le luxe. Certaines couleurs sont également plus nobles que d’autres. Assurez-vous que votre positionnement soit clair dès qu’on jette le premier coup d’oeil sur votre site.
Exemples :
AuGolf.fr a une charte graphique verte et une bannière illustrant un terrain de golf.
Le site Dior Couture affirme son positionnement haut-de-gamme dans la conception même de ses pages avec un design épuré, des photos de qualité et des lignes fines.
Le site CDiscount affirme son positionnement de discounter en affichant une page chargée et 5 promotions dès la home page.
Adressez-vous directement à votre cible
De la même façon que les habitudes de shopping des femmes et des hommes sont différentes, on ne s’adresse pas à des femmes comme à des hommes, à des ados comme à des cadres … Choisissez judicieusement entre des formes rondes ou carrées, un design simple ou plus travaillé, des menus simples ou complets, …
Servez-vous des statistiques de votre site Internet pour décider de ce que vous devez mettre en avant, par exemple en choisissant vos meilleures ventes.
Exemple :
Un fond noir et des polices épaisses pour un design très masculin chez Dsquared2.
Votre expérience de création
Cs règles ne sont évidemment que les bases qui, selon moi, devraient être prises en compte pour tout projet web, mais il y en a bien d’autres qui mériteront d’autres articles publiés prochainement sur ce blog.
D’ici là, partagez vos expériences de création dans les commentaires de ce blog.
D'autres articles sur un sujet lié :
- D’autres méthodes pour analyser votre site Internet
- Les étapes pour bien lancer son projet e-Commerce
- Conseils pour la page de résultats de recherche
- Google Tools vous aide à améliorer votre référencement
- 10 erreurs (trop) courantes sur les sites web