Les bases d’un bon design Web

Lorsque l’on pense au design, on pense souvent au design de mode. Toutefois, si le design de mode penche plutôt vers l’art, le design graphique est quant à lui d’abord et avant tout un outil de communication. Comme le disait Frédéric Metz, ancien directeur du Centre de Design de l’UQAM, « Un bon design se trouve à la rencontre de la forme et de la fonction ». Un exemple, qui illustre cette phrase, serait le presse-agrumes du grand designer industriel, Philippe Starck.

C’est donc à cette intersection entre le beau et l’efficace que devraient prendre racine vos outils de communication. Si vous ne savez pas trop comment différencier un bon design d’un mauvais, voici quelques conseils qui devraient orienter votre réflexion.

1.   Assurez-vous que votre contenu est lisible :

Vos textes doivent être facilement lisibles. Pour cela, assurez-vous qu’ils sont suffisamment gros. Une police d’une taille de 16 points est habituellement recommandée.

Le contraste entre les éléments importants et leur fond doit également être suffisamment élevé. Voici un petit outil gratuit qui vous permettra facilement de vérifier les contrastes : https://webaim.org/resources/contrastchecker/

2.   Créez une hiérarchie visuelle :

Comme pour le texte, la structure doit indiquer à l’usager l’importance des éléments. Si vous cherchez sur le sujet, vous entendrez parler de disposition en « F » ou en « Z ». Retenez surtout que l’important est de diriger l’œil de l’internaute de manière à l’amener à l’action voulue (achat, inscription à l’infolettre, etc.).

3.   N’ayez pas peur du vide :

Le vide graphique permet à vos visiteurs de reposer leurs yeux. La consultation de vos pages nécessitera donc un moins grand effort pour eux et leur concentration sera meilleure et de plus longue durée. De plus, le fait d’aérer les éléments, permettra de mieux les distinguer et vous éviterez donc de redonner une information qui se trouve déjà sur votre site Web.

4.   Pensez au responsive :

Avec la consultation par téléphone qui dépasse parfois celle sur ordinateur, le design « responsive » (ou adaptatif) n’est plus un bel ajout. Il faut garder en tête que votre page ne se présentera pas de la même manière pour tous. Éviter les images cadrées trop serrées, car vous pourriez vous retrouver avec des têtes partiellement ou totalement coupées. L’alignement justifié de vos textes est également à ranger au placard pour éviter les lézardes (aussi appelée rivières ou cheminées).

5.   Créer des boutons que l’on sait pouvoir cliquer :

Le fameux bouton blanc sur fond blanc cintré par une fine ligne de contour, c’est bien joli, mais très peu efficace. Vos boutons doivent être visibles. On doit savoir que c’est un élément cliquable. Évitez les fonds transparents, les polices de caractères stylisées et assurez-vous d’avoir les différents états du bouton (normal, survolé et cliqué). Vos boutons d’action c’est votre gagne-pain donc, assurez-vous qu’on les voit bien.

6.   Permettez-vous de faire des tests

Comme personne n’est infaillible, planifiez des tests de type A/B et raffinez vos pages. Ne changez qu’une variable à la fois si vous voulez avoir des données qui ont du sens. Si vous voulez aller plus loin, des outils comme « Hotjar » vous permettront de voir ce qui est le plus vu ou cliqué sur vos pages ou même de voir le comportement d’un internaute pendant qu’il navigue sur votre site Web.

Avec ces quelques conseils, vous devriez être à même de porter un regard critique sur votre site Web, que vous le produisiez vous-même ou que vous donniez ce mandat à une agence. Un site n’est pas une brochure, il est donc facile de le modifier s’il ne répond pas tout à fait à vos attentes. En terminant, n’oubliez pas que le plus beau design n’est pas toujours le plus efficace!

Merci et à très bientôt,



Jonathan Roy
Responsable de l’expérience client