Grilles et espacement : les bases du design UI
Grille 8pt, colonnes, marges : les principes d'espacement et de mise en page qui rendent une interface cohérente et pro.
La grille 8pt
Convention très répandue : toutes les valeurs d'espacement (marges, paddings, tailles) sont des multiples de 8px (ou parfois 4px pour les détails fins). Garantit une cohérence visuelle et facilite l'alignement entre éléments.
Espacements courants : 4, 8, 16, 24, 32, 48, 64 px
Le multiple de 8 n'est pas arbitraire : il se divise proprement par 2 et 4, et correspond bien aux densités d'écran courantes (2x, 3x) sans arrondi disgracieux sur les appareils à forte résolution.
Grille en colonnes
Une mise en page web ou print s'appuie souvent sur une grille de 12 colonnes (parfois 16), avec des gouttières (espaces entre colonnes) régulières — permet des mises en page flexibles tout en gardant un alignement cohérent entre les blocs.
Hiérarchie d'espacement
| Niveau | Usage | Exemple |
|---|---|---|
| Micro (4-8px) | Entre un texte et son icône | Espace label/icône |
| Petit (8-16px) | Entre éléments liés | Espace entre champs d'un formulaire |
| Moyen (24-32px) | Entre sections liées | Marge entre un titre et son contenu |
| Grand (48-64px+) | Entre sections indépendantes | Séparation entre deux blocs de page |
Marges vs padding
- Marge : espace à l'extérieur d'un élément, entre lui et ses voisins.
- Padding : espace à l'intérieur d'un élément, entre son bord et son contenu.
Confondre les deux est une source fréquente d'incohérences visuelles dans une interface.
Échelle typographique
Comme pour l'espacement, les tailles de texte suivent souvent une progression régulière plutôt que des valeurs choisies au hasard — un ratio courant (1,25 ou 1,333, dit "gamme mineure/majeure") multiplie chaque niveau pour obtenir le suivant :
Base 16px × 1,25 → 20px → 25px → 31px → 39px (titres) Base 16px × 1,25⁻¹ → 12,8px (texte secondaire)
Breakpoints responsive courants
| Nom | Largeur typique | Cible |
|---|---|---|
| Mobile | < 640px | Smartphones |
| Tablette | 640-1024px | Tablettes, petits écrans |
| Desktop | 1024-1440px | Écrans standards |
| Large | > 1440px | Grands écrans, moniteurs externes |
Concevoir "mobile first" (partir du plus petit écran puis ajouter de la complexité pour les plus grands) produit généralement des interfaces plus simples et plus performantes qu'une démarche inverse.
Merci pour votre retour !