Six principes de web design (hiérarchie, espace blanc, contraste, alignement, proximité, taille des zones tactiles), chacun présenté sous forme de démo avant et après à basculer en direct, avec le CSS du correctif.
Un bon web design repose surtout sur six habitudes : hiérarchiser le contenu avec une hiérarchie visuelle claire, laisser assez d'espace blanc, garder un contraste de texte d'au moins 4.5:1, aligner les éléments sur des bords communs, regrouper les éléments liés, et prévoir des zones tactiles d'au moins 24 pixels de côté. Basculez chaque démo ci-dessous entre avant et après pour voir la différence.
Les six principes et le CSS qui les corrige généralement
Les articles sur les principes de design les décrivent avec des mots et des photos d'illustration. Ici, chaque principe est une petite fiche produit ou un formulaire dessiné deux fois, raté puis corrigé, pour que vous puissiez basculer entre les deux et voir exactement ce qui a changé.
Ceux qui comptent le plus au quotidien sont la hiérarchie, l'espace blanc, le contraste, l'alignement, la proximité et des zones tactiles confortables. La cohérence les relie : les mêmes espacements, tailles de texte et couleurs répétés sur toutes les pages.
La hiérarchie visuelle est l'ordre dans lequel les gens remarquent les éléments d'une page. Les designers la contrôlent avec la taille, la graisse, la couleur, la position et l'espace, pour que le titre soit vu en premier, les détails ensuite, et que l'action principale soit facile à trouver.
Le critère de succès WCAG 2.2 1.4.3, niveau AA, demande au moins 4.5:1 pour le texte normal et 3:1 pour le grand texte, défini comme au moins 18 points, ou 14 points en gras.
Il décrit la façon dont les gens parcourent souvent les pages riches en texte : en travers du haut, de nouveau en travers un peu plus bas, puis vers le bas le long du côté gauche. La leçon pratique est de placer les mots clés au début des titres et des lignes, et de ne pas enfouir les points importants au milieu d'un paragraphe.
Le critère WCAG 2.2 2.5.8, niveau AA, fixe un minimum de 24 sur 24 pixels CSS pour les cibles de pointeur, avec quelques exceptions comme les liens au sein d'une phrase. Beaucoup d'équipes de design vont plus grand pour les boutons principaux, afin qu'ils soient faciles à toucher.
Trois paliers typographiques hiérarchisent le contenu, l'espacement suit une échelle de 8px, et le texte secondaire reste assez foncé pour atteindre 4.5:1 sur fond blanc.
Le titre, le prix et le bouton ont la même taille et la même graisse : l'œil ne sait pas où se poser.
La taille, la graisse et la couleur hiérarchisent le contenu : le titre d'abord, le prix ensuite, l'action en troisième.
Tout est collé bord à bord, ce qui paraît encombré et difficile à parcourir.
Des marges et des écarts généreux séparent les groupes et laissent respirer chaque élément.
Un texte gris clair sur blanc est bien en dessous du minimum WCAG pour le texte normal.
Un texte foncé sur blanc dépasse 4.5:1, le minimum WCAG 2.2 de niveau AA pour le texte de taille normale.
Un mélange de lignes centrées et alignées à gauche crée des bords irréguliers que l'œil doit suivre.
Un bord gauche commun transforme des lignes séparées en un seul bloc lisible.
Les libellés sont à égale distance de tous les champs : on ne sait pas quel libellé va avec quel champ.
Chaque libellé est collé à son champ et les paires sont espacées : le regroupement est évident.
De minuscules liens s'entassent et sont faciles à rater avec le doigt.
Les cibles mesurent au moins 24 sur 24 pixels CSS, le minimum WCAG 2.2 de niveau AA, avec de l'espace entre elles.
Principe
Version
Avant
Après
Avant : {text}
Après : {text}
Pain au levain
$9, cuit chaque jour
Commander
Horaires d'ouverture
Du lundi au vendredi, de 7 h du matin à 6 h du soir
Samedi, de 8 h du matin à 2 h de l'après-midi
Nous livrons dans un rayon de 5 km autour de la boutique, chaque matin avant 9 h.
Couleur de texte {hex} sur blanc
Traiteur
Plateaux pour 10 à 100 personnes.
Commandez deux jours à l'avance.
Nom
Téléphone
Menu
Horaires
Commander
Commencer gratuitement · Sans carte bancaire