Conseils pour un design de site web efficace

1. Ajuster la colorimétrie dans la charte graphique

On pense souvent que l’on doit choisir les couleurs d’un 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 l’on préfère.

En effet, il existe des méthodes pour trouver les couleurs associées à la première couleur (accords analogues, accords isocèles, accords tétradics, …). Chacune de ces associations proposera une série de couleurs qui s’accordent parfaitement avec la 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é du contenu ou atténueront les effets que l’on souhaitaient donner.

Exemple : Le site Free People joue sur des couleurs pastels complémentaires. (le site Free People)

2. Etre homogène dans la charte graphique

Maintenant que les couleurs s’accordent bien entre elles, il faut s’assurer que l’ensemble du site est homogène. Au-delà des couleurs, les textes et les formes sont en quelques sortes le langage du site Internet.

Tous les titres doivent être de la même taille, de la même couleur, de la même police et si possible, positionnés au même endroit. Idem pour les sous-titres et ainsi de suite. Cela permet à l’internaute d’identifier directement les différents éléments du site Internet quelque soit la page qu’il est 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 du site Internet. Par exemple, si le bouton “ajouter au panier” est vert sur les fiches produit, cette couleur doit être conservée pour valider le panier. Ces actions sont cohérentes entre elles, elles doivent donc l’être visuellement pour que l’internaute les reconnaissent sans même avoir à lire ce qui est écrit dessus.

Exemple n°1 : Tous les boutons de Brand Neusense adoptent une identité commune. (le site Brand Neusense)
Exemple n°2 : Tous les boutons du menu de Rock Pillars sont en rapport au thème du site (le site Rock Pillars)

3. Éviter la surcharge sur le site web

Il est toujours très tentant de mettre beaucoup d’informations en avant sur la première page d’un site Internet. On veut mettre en avant les produits, les nouveautés, les promotions … En même temps, on souhait absolument capter l’attention du visiteur pour l’inciter à rester sur le site. Malheureusement, plus il y a d’informations, plus l’attention du visiteur est dispersée et les informations mises en avant deviennent de moins en moins pertinentes.

Les informations affichées doivent donc être un subtil équilibre entre l’envie de diffuser des informations et l’attention des visiteurs qui doit évidemment être garder.

Exemple n°1 : Winestore propose une entrée très épurée avec directement un produit. (le site Winestore )
Exemple n°2 : LK Bennet met en avant un grand visuel sous forme de carrousel. (le site LK Bennet)

4. Respecter l’identité visuelle

Se mettre à la place d’un internaute qui ne connait pas un site web. L’identité, si elle est bien réalisée, lui permettra de définir plusieurs choses essentielles en une fraction de seconde.

Le secteur d’activité, certaines activités ont des codes implicites. Par exemple, si l’on propose des articles de golf, le vert et blanc sont de rigueur. Ce sont des couleurs associées au golf dans l’inconscient collectif.

Le positionnement, afficher un “-50%” en rouge dans une étoile rouge donnera tout de suite une impression de “discount” alors qu’une police blanche fine sur un fond noir avec un petit reflet positionnera plutôt comme une enseigne de luxe. Certaines couleurs sont également plus nobles que d’autres. Il faut s’assure que le positionnement soit clair dès le premier coup d’oeil.

Exemple n°1 : Poiray a une charte graphique illustrant le luxe de la joaillerie. (le site Poiray)
Exemple n°2 : Le site Dior Couture affirme son positionnement haut-de-gamme. (le site Dior)
Exemple n°3 : CDiscount s’affirme discounter avec une page chargée et des promotions (CDiscount)

5. S’adresser directement à la 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 … Il faut choisir judicieusement le design entre des formes rondes ou carrées, un design simple ou plus travaillé, des menus synthétiques ou complets, …

On peut se servir des statistiques du site Internet pour décider de ce que l’on doit mettre en avant, par exemple en choisissant les meilleures ventes.

Exemple : Fond noir et polices épaisses pour un design très masculin chez Dsquared2 (le site Dsquared2)

Article de C2i info proposé par Sylvain CHARRIER