Dernière mise à jour : 21 juillet 2025
La mise en page consiste en la façon de disposer différents éléments de contenu dans une page afin d'offrir à l'utilisateur une expérience accessible et cohérente à travers le site.
- Règles d’utilisation
- Bases de conception
Nomenclature
Définir les termes spécifiques d'une mise en page permet de bien en distinguer chaque élément et d'établir un vocabulaire commun pour faciliter les communications lors de la réalisation de projets numériques.
La séquence d'images ci‑dessous illustre comment les éléments s'imbriquent les uns dans les autres pour former la structure d'une page.
Chaque terme défini permet de mieux comprendre la structure d'une mise en page et d'en apprendre davantage sur son utilité et ses spécificités.
Page
Une page correspond à une destination du parcours de l'utilisateur. Elle permet de présenter à ce dernier plusieurs types de contenu sur un sujet déterminé.
Section
Une section permet de structurer la page en sous‑sujets ou par thèmes. Elle est toujours introduite par un titre sémantique (H1 ou H2).
Module
Un module est une option de mise en page préconçue pour organiser le contenu de façon standardisée.
Région
Une région représente une division dans un module ou une section. Elle permet d'y organiser le contenu en fonction des colonnes de la grille.
Composant
Un composant est un bloc de construction d'interface réutilisable et standardisé répondant à un besoin spécifique.
Bloc de contenu
Un bloc de contenu est un regroupement d'éléments ayant un lien indissociable.
Élément
Un élément correspond à la plus petite unité de contenu qu’il est possible de positionner dans une page.
Décalage
Un décalage sert à rythmer le contenu ou à améliorer sa lisibilité en espaçant, d'une ou plusieurs colonnes, les régions entre elles.
Notions de base
Comprendre les notions de base d'une mise en page permet d'établir les interrelations et d'en faire une bonne utilisation.
Section
Une section permet de structurer la page en sous‑sujets ou par thèmes. Elle est toujours introduite par un titre sémantique (H1 ou H2).
Seule la première section d'une page, soit la section héros, commence par un H1. Les sections subséquentes sont introduites par des H2.
Selon sa complexité, une section peut héberger un seul module ou plusieurs.
Deux sections comportant chacune un seul module
Un changement de couleur est un bon indicateur visuel d'un changement de section.
Une section comportant deux modules ou plus
Lorsque la section compte plus d'un module, le premier est introduit par un H2 et les suivants par un H3.
Module
Un module est une option de mise en page préconçue pour organiser le contenu de façon standardisée.
Il peut occuper une section à lui seul ou être accompagné d'autres modules pour composer une section plus complexe.
Afin de bien équilibrer les éléments dans la page, le placement des contenus sur la grille de même que les espacements sont prédéfinis à l’intérieur des modules. Par exemple, les espacements vont varier entre les modules selon qu'ils sont positionnés dans une même section ou non.
Fonctions
Pour normer et uniformiser les dispositions de contenu les plus répandues dans le site.
Pour offrir différentes options de présentation pour le contenu.
Pour concevoir rapidement des pages et des sections en combinant des modules déjà normés.
Hiérarchie des titres
Selon la position d'un module dans une page ou dans une section, voici comment définir la hiérarchie sémantique des titres.
- H1 : Si le module introduit la première section de la page (section héros).
- H2 : S'il y a un saut de section et que le module introduit celle‑ci.
- H3 : S'il y a un saut de module dans une même section.
Région
Une région représente une division dans un module ou une section. Elle permet d'y organiser le contenu en fonction des colonnes de la grille.
Une région peut accueillir un élément tel un titre, un composant ou un groupe de blocs de contenu.
Anatomie d'une région
Une région est délimitée par le nombre de colonnes qu'elle occupe sur la grille dans un module.
Ordre des éléments dans une région
Selon la taille de l'écran, les éléments d'une région passent d'une disposition horizontale, sur tablette et sur desktop, à une organisation verticale sur mobile. Il importe donc de bien établir leur ordre de présentation pour assurer la cohérence du contenu.
Bloc de contenu
Un bloc de contenu est un regroupement d'éléments ayant un lien indissociable.
Il est minimalement composé de deux éléments qui sont graphiquement reliés.
Fonctions
Pour présenter et organiser le contenu textuel à l’intérieur d’un module.
Pour uniformiser la présentation et la longueur des contenus qui composent une région.
Composition d'un bloc de contenu
Un bloc de contenu combine différents types d'éléments, que ce soit une icône, une illustration ou une image, un titre, un contenu textuel ou un appel à l'action. Le nombre d'éléments qui le composent peut varier.
Uniformité des blocs
Chaque bloc est traité comme une unité. S'il fait partie d'une série de blocs de contenu, ceux‑ci doivent avoir une composition et une longueur similaires pour créer une uniformité visuelle.
Élément
Un élément correspond à la plus petite unité de contenu qu’il est possible de positionner dans une page.
Combiné à d'autres éléments, il permet de donner forme au contenu de la page. Voici des exemples d'éléments utilisés :
- une image, une icône ou une illustration
- un titre
- un contenu textuel
Bases de conception
Les principales règles de base de conception servent de cadre de référence pour vulgariser les différents concepts de mise en page. En maîtrisant et appliquant les bases de conception, les experts sont en mesure de concevoir et de personnaliser facilement les interfaces numériques tout en respectant les standards établis.
Dans cette page
Grille
Une grille permet de structurer les différents contenus sur la page de façon organisée et harmonieuse, peu importe la taille d'écran utilisée.
Disposition des régions sur une grille de douze colonnes
Moyenne (tablette) à x-large (desktop)
Les régions peuvent occuper entre une et douze colonnes.
Disposition des régions sur une grille de quatre colonnes
Petite (mobile)
La plupart des régions vont occuper les quatre colonnes, mais il est possible de diviser les rangées au besoin.
Décalage
Un décalage sert à rythmer le contenu ou à améliorer sa lisibilité en espaçant, d'une ou plusieurs colonnes, les régions entre elles.
Il est surtout utilisé sur une grille de douze colonnes. Dans la composition d'une mise en page, on le définit en nombre de colonnes et on l'indique de la façon suivante : Xd, X correspondant au nombre de colonnes à laisser vides.
Fonctions
Pour équilibrer et harmoniser la mise en page globale d'une page.
Pour espacer les régions entre elles et laisser les contenus respirer.
Pour aligner les contenus afin de faciliter l'expérience de lecture.
Sur une grille de douze colonnes :
- Pour contrôler la longueur des éléments textuels en évitant qu'un texte occupe la pleine largeur d'un écran.
- Pour éviter de regrouper tous les éléments au centre de la page.
Espacements
Un espacement contribue à offrir un design visuellement bien équilibré, quelle que soit la taille d'écran utilisée.
On détermine les espacements en fonction du lien à établir entre les différents éléments. Il importe donc de respecter les espacements prédéfinis dans les modules et pour les composants. Il faut également veiller à appliquer les règles d'espacements définies par taille d'écran.
Fonctions
Pour créer des mises en page visuellement harmonieuses et équilibrées.
Pour communiquer un lien visuel entre deux éléments (petit espacement).
Pour distancer des éléments (grand espacement).
Pour offrir un parcours utilisateur cohérent et fluide.
Entre deux sections
Pour garantir un espace suffisant et équilibré entre deux sections, les valeurs de l’espacement total marquant la fin d'une section et le début d'une autre sont prédéterminées.
Type d'espacements à utiliser : Vertical – Plein
Entre deux modules ou des régions d'une même section
La mesure d'espacement pour séparer des régions ou assembler deux modules dans une même section est moindre que celle délimitant deux sections.
Types d'espacements à utiliser : Vertical – Demi et Vertical – Quart
Faux pied de page
Un faux pied de page survient lorsqu'un espacement trop important entre deux modules ou deux sections fait croire à l'utilisateur qu'il a atteint la fin de la page, arrêtant son parcours prématurément. Respecter les espacements prédéfinis dans les modules et pour la conception d'une page permet d'éviter ce phénomène.
Disposition et lisibilité
La meilleure expérience utilisateur réside dans un contenu facile à lire et à consulter. Il importe donc de respecter certaines règles de base pour une lisibilité optimale.
Disposition des contenus
La façon de disposer les contenus a un grand impact sur le parcours de l'utilisateur. Lorsque la page est principalement informative, il est recommandé de respecter certaines règles afin de ne pas briser le rythme de lecture.
Alignement du texte
L’alignement d’un texte permet d’établir une harmonie dans la lecture et la mise en page des différents contenus d’une page.
Deux options d’alignement sont permises, soit à gauche ou centré. Leur choix demeure à la discrétion de l’équipe de conception, mais doit suivre les règles de base présentées ci-dessous.
Alignement à gauche
Tout texte de plus de trois lignes doit être aligné à gauche.
Un alignement à gauche permet de maintenir une ligne de lecture facilitant le balayage et la compréhension tout en rendant le contenu plus accessible.
Alignement centré
Seuls les textes de moins de trois lignes peuvent être centrés. Cette règle vaut également pour la combinaison d’un titre avec un surtitre.
Cette option d’alignement permet de varier la mise en page, lorsque les contenus sont courts.
Longueur des lignes de texte
Pour des blocs ou des pavés de texte, il faut respecter un certain spectre de longueur dont les limites sont établies selon les points de rupture (breakpoints) de chaque taille d'écran.
Contenu long
La longueur idéale des lignes composant un contenu long s'échelonne sur cinq à huit colonnes.
Contenu court
Idéalement, pour un contenu court, une ligne de texte occupe entre trois et cinq colonnes.
