La conception graphique pour les sites web

La conception graphique d'un site web n'est pas une couche d'esthétique appliquée à la fin. C'est le système qui décide de ce qu'un visiteur voit en premier, de ce qu'il comprend en trois secondes, et de ce qu'il fait ensuite. Un site peut être joli et illisible ; il peut être sobre et redoutablement efficace.

La hiérarchie visuelle avant tout

Sur un écran, l'œil ne lit pas : il balaye. Le rôle du designer est de créer une pente que le regard descend naturellement. Cela s'obtient avec trois outils seulement : la taille, le contraste et l'espace. Un titre deux fois plus grand que le reste, un bouton d'une couleur qui n'existe nulle part ailleurs, et du vide autour des éléments importants suffisent à guider n'importe quel visiteur.

La typographie fait 90 % du travail

• Deux familles maximum. Une pour les titres, une pour le texte courant. Au-delà, le site perd son identité et gagne du poids de chargement.
• Une échelle, pas des tailles au hasard. Définissez cinq ou six tailles cohérentes et n'en sortez jamais.
• Une longueur de ligne entre 55 et 75 caractères. C'est la règle la plus violée et la plus rentable à respecter : au-delà, l'œil perd le début de la ligne suivante.
• Une interligne généreuse. 1,6 à 1,75 sur le texte courant ; davantage encore en arabe, dont les hampes et les ligatures demandent de l'air.

Concevoir en arabe : ce qui change vraiment

Un site trilingue ne se conçoit pas en français puis « traduit ». En arabe, la lecture va de droite à gauche : la navigation, les flèches, les progressions, les icônes directionnelles doivent basculer. Les polices latines élégantes n'ont pas d'équivalent arabe automatique : il faut choisir une famille arabe compatible, souvent plus haute, et réajuster les tailles. Enfin, le texte arabe est en moyenne 15 à 25 % plus court que le français : les blocs se déséquilibrent si la maquette a été calibrée sur le français seul.

La couleur : un outil fonctionnel, pas décoratif

Un site professionnel se pilote avec une couleur dominante neutre, une couleur d'accent réservée aux actions, et deux ou trois nuances de gris. L'accent ne doit apparaître que là où vous voulez un clic. Dès qu'il sert aussi à décorer un titre ou une bordure, il perd son pouvoir d'appel. Vérifiez systématiquement le contraste : 4,5:1 minimum pour le texte courant, 3:1 pour les grands titres.

Du visuel à la conversion

1. Définissez l'action prioritaire de chaque page avant d'ouvrir un outil de design.
2. Placez cette action au-dessus de la ligne de flottaison, puis répétez-la en bas de page.
3. Supprimez tout élément qui n'aide ni à comprendre, ni à décider, ni à agir.
4. Vérifiez le rendu réel sur un téléphone de milieu de gamme, pas sur un écran de studio.

La conception graphique d'un site web réussi se remarque rarement. Ce que le visiteur remarque, c'est qu'il a trouvé ce qu'il cherchait sans effort : et c'est précisément le résultat d'un travail de design invisible mais rigoureux.