Grille de 8 px
Le système de grille permet d’assurer une cohérence entre les gabarits et les éléments visuels d’une interface. Tous les composants sont conçus en fonction du système de grille.
Mesure de base
L’ensemble du système de grille est construit à partir de multiples de 8 px. De cette façon, l’espacement, l’alignement et la dimension des gabarits et des éléments suivent une seule et même logique.
Les multiples de la grille sont : 8, 16, 24, 32, 40, 48, 56, 64, 72, 80 et ainsi de suite.
Il est également possible d’utiliser la moitié de la mesure de base (4 px) pour affiner des éléments comme les icônes ou la typographie.
Rythme vertical
Créé à partir d’une ligne de base de 8 px, le rythme vertical correspond à l’espacement entre le texte et d’autres objets de l’interface (champs de formulaire, éléments de navigation, etc.).
Dans un corps de texte, la mesure de l’espace entre deux lignes de base est appelée « interligne » (line-height en CSS).
À faire
À ne pas faire
Rythme horizontal
Le rythme horizontal est créé à partir de colonnes, de marges et de gouttières adaptables à la largeur de l’écran selon l’appareil utilisé. C’est à l'intérieur de cette grille que le contenu de la page est inséré.
Colonnes
Le contenu principal de la page s’affiche dans les colonnes. Leur largeur est définie en pourcentage et le nombre de colonnes dans la grille est dépendant des points de rupture (tailles d’écran prédéterminées). Un écran plus petit affiche moins de colonnes qu’un écran plus grand.
Les éléments qui sont positionnés dans la grille peuvent occuper une ou plusieurs colonnes de large. Leur hauteur dépend du rythme vertical qui est fixe, mais leur largeur est dépendante de la dimension des colonnes. De plus, un élément peut occuper un nombre différent de colonnes selon la largeur de l’écran, par exemple, 6 colonnes dans le format bureau et 4 colonnes dans le format mobile.
Espaces intercolonnes
Les espaces intercolonnes, aussi appelées gouttières, aident à séparer le contenu. Ces espaces ont des largeurs fixes, mais changent selon le point de rupture.
La largeur d’un élément doit prendre fin à l’intérieur d’une colonne et non à la fin d’un espace intercolonne.
À faire
À ne pas faire
Marges
Les marges sont les espaces aux extrémités gauche et droite de l’écran. Elles évitent que le contenu soit collé à la limite de l’écran.
Les marges ont des largeurs fixes, mais changent selon le point de rupture. Les petits écrans ont des marges moindres que celles des écrans plus grands.
Points de rupture
Les points de rupture indiquent le nombre de colonnes, la largeur des espaces intercolonnes et la largeur des marges selon différentes tailles d’écran.
| Points de rupture | Taille d’écrans | Largeur maximale du conteneur | Nombre de colonnes | Largeur des espaces | Largeur des marges |
|---|---|---|---|---|---|
Moins de 576 px | Petit | 576 px | 4 | 16 px | 8 px |
Entre 576 et 768 px | Moyen | 576 px | 4 | 16 px | 8 px |
Entre 768 et 992 px | Grand | 768 px | 12 | 24 px | 12 px |
Entre 992 et 1200 px | Très grand | 992 px | 12 | 24 px | 12 px |
1200 px et plus | Maximum | 1200 px | 12 | 32 px | 16 px |
Disposition des éléments
La grille horizontale permet une grande flexibilité dans la disposition des blocs de contenu de la page. De façon générale, il n’est pas recommandé de placer 12 blocs de contenu dans une grille de 12 colonnes. Il est préférable de faire des subdivisions afin d’avoir assez d’espace pour insérer tous les contenus.
Par exemple, pour une grille de 12 colonnes dans le format bureau, la grille peut être découpée comme suit :
- 1 conteneur de 12 colonnes
- 2 conteneurs de 6 colonnes chacun
- 3 conteneurs de 4 colonnes chacun
- 4 conteneurs de 3 colonnes chacun
Ou en faisant des combinaisons :
- 1 conteneur de 9 colonnes et 1 conteneur de 3 colonnes
- 1 conteneur de 3 colonnes et 1 conteneur de 9 colonnes
Pour une grille de 8 colonnes dans le format tablette, la grille peut être découpée comme suit :
- 1 conteneur de 8 colonnes
- 2 conteneurs de 4 colonnes chacun
- 4 conteneurs de 2 colonnes chacun
Ou en faisant des combinaisons :
- 1 conteneur de 6 colonnes et 1 conteneur de 2 colonnes
- 1 conteneur de 2 colonnes et 1 conteneur de 6 colonnes
Pour une grille de 4 colonnes dans le format mobile, tous les éléments sont placés sur une seule colonne. Dans certains cas, les éléments peuvent être répartis en 2 colonnes, comme pour les icônes ou certains contenus courts.
Boîtes et espacements
Chaque élément de l'écran se trouve à l’intérieur d’une boîte : tout vit dans un rectangle. Les boîtes se composent de 4 éléments : l'élément lui-même, la marge intérieure, la bordure et la marge extérieure.
Élément
Chaque élément a une taille par défaut. Par exemple, la largeur d’une boîte de texte est influencée par le nombre de caractères et leur largeur, ainsi que par la dimension des colonnes dans lequel la boîte est positionnée. La hauteur de l’interligne (line-height) doit être un multiple de 8 px.
Marge intérieure (padding)
Il s’agit de l'espace intérieur entre la bordure et le contenu. L'augmentation de la marge intérieure augmente la taille de la boîte.
Bordure (border)
Il s’agit de l'épaisseur du trait autour d'un élément. Les logiciels de conception ne comptent pas les bordures comme le fait un navigateur Web. Ils ajoutent des bordures à l'intérieur ou à l'extérieur d'une forme, ce qui ne compte pas dans la taille de la forme.
Il faut garder en tête cette particularité, car l’inclusion ou non de la taille de la bordure aura un impact sur le calcul de la marge intérieure. Il est important de conserver un rythme vertical cohérent et autant que possible, des dégagements horizontaux en multiples de 8 px.
Prenons l’exemple d’un bouton avec une bordure de 1 px. Celui-ci a une largeur automatique, ce qui signifie que le contenu détermine sa largeur. Une marge intérieure de 8 px est ajoutée à gauche et à droite du mot. On pourrait donc se questionner si on doit calculer la marge de 8 px entre la fin du mot et l’extérieur de la bordure, ou entre la fin du mot et l’intérieur de la bordure.
Pour simplifier le code CSS à produire, la deuxième option est à privilégier.
Marge extérieure (margin)
Il s’agit de l'espace entre les bordures d'un élément et les objets voisins. L'augmentation des marges extérieures augmentera l'espace autour de la boîte, repoussant les autres éléments autour.
Dernière mise à jour : 6 novembre 2023