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. Toutes les composantes sont conçues en fonction du système de grille.

Mesure de base

L’ensemble du système de grille est construit à partir de multiples de 8 pixels. 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 pixels) 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.

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, évitez de placer 12 blocs de contenu dans une grille de 12 colonnes. Faites des subdivisions qui vous permettent d’avoir assez d’espace pour insérer vos contenus. 

Par exemple, pour une grille de 12 colonnes dans le format bureau, vous pouvez découper la grille 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 8 colonnes et 1 conteneur de 4 colonnes
  • 1 conteneur de 4 colonnes et 1 conteneur de 8 colonnes

Pour une grille de 8 colonnes dans le format tablette, vous pouvez découper la grille 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 pixels.

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 vous devrez inclure ou ignorer la taille de la bordure dans le calcul de la marge intérieure afin de conserver un rythme vertical cohérent et autant que possible, des dégagements horizontaux en multiples de 8 pixels.

Prenons l’exemple d’un bouton avec une bordure de 1 pixel. Celui-ci a une largeur automatique, ce qui signifie que le contenu détermine sa largeur. Une marge intérieure de 8 pixels est ajoutée à gauche et à droite du mot. On pourrait donc se questionner si on doit calculer la marge de 8 pixels 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 : 21 septembre 2021