# Hiérarchie visuelle : faire lire les choses dans le bon ordre [Canonical HTML page](https://gradiently.design/fr/guide/visual-hierarchy) Toute création se lit dans un certain ordre. Si vous ne le choisissez pas, c’est l’élément le plus bruyant qui le fait. Voici comment décider de ce qui vient en premier, en deuxième et en troisième, et y parvenir. ## The short version - La hiérarchie visuelle est l’ordre dans lequel on remarque et on lit les éléments d’une création. - La hiérarchie se contrôle avec cinq outils : la taille, la graisse, la couleur et le contraste, la position et l’espace. - La plupart des créations n’ont pas besoin de plus de trois niveaux : une chose vue en premier, quelques-unes en deuxième, et les détails en dernier. - L’élément le plus contrasté par rapport à ce qui l’entoure est en général vu en premier, quelle que soit sa taille : une couleur d’accent doit donc être réservée à une seule chose. - Le test du plissement d’yeux, qui consiste à brouiller la vue jusqu’à ne voir que des formes, montre d’un coup d’œil quel élément mène réellement. La **hiérarchie visuelle** est l’ordre dans lequel on remarque et on lit les éléments d’une création. Vous la contrôlez avec cinq outils : la **taille**, la **graisse**, la **couleur et le contraste**, la **position** et l’**espace**. Une hiérarchie claire a une chose vue en premier, quelques-unes vues en deuxième, et des détails qu’on ne trouve que si on les cherche. Sans elle, tout se fait concurrence et personne ne lit rien. ## Les cinq outils de la hiérarchie visuelle Chaque outil fonctionne de la même façon : il rend un élément différent de ses voisins. Plus la différence est grande, plus l’élément est vu tôt. Utiliser plusieurs outils sur le même élément le renforce ; les utiliser sur des éléments différents les met en concurrence. | Outil | Comment il met en valeur | Exemple | | --- | --- | --- | | Taille | Plus grand est vu plus tôt | Un titre deux fois plus grand que le texte autour | | Graisse | Des traits plus épais ressortent | Une date en gras dans une ligne de texte regular | | Couleur et contraste | La couleur la plus différente l’emporte | Un seul accent doré sur une création sombre et calme | | Position | Le haut et le début du sens de lecture passent en premier | Le titre en haut à gauche | | Espace | Les éléments isolés attirent l’œil | Une seule ligne entourée de larges marges | Les cinq outils. La plupart des créations fortes en utilisent deux ou trois sur le même élément principal. ## Décider de l’ordre avant de créer Les problèmes de hiérarchie sont en général des problèmes de décision. Si vous n’avez pas décidé de ce qui compte le plus, la création ne peut pas le montrer. Avant d’ouvrir un outil de design, classez le contenu. 1. **Listez tout** Chaque texte et chaque image que la création doit contenir. 2. **Choisissez la chose principale** Si l’on ne retient qu’un seul élément, lequel doit-ce être ? C’est le niveau un. 3. **Regroupez les informations d’appui** Les deux à quatre choses dont on a besoin ensuite, comme une date, un lieu ou une courte explication. C’est le niveau deux. 4. **Tout le reste est détail** Identifiants, mentions, logos. C’est le niveau trois, petit et discret. 5. **Coupez ce qui ne trouve pas sa place** Si un élément ne trouve aucun niveau, il a sans doute sa place dans la légende ou la diapositive suivante. Une publication verticale d’événement avec Soirée de lancement en grand titre, la date au-dessus et trois courtes lignes de détails en dessous Trois niveaux : le nom de l’événement d’abord, puis la date au-dessus et les détails en dessous, chacun nettement plus petit. ## Taille et graisse La taille est l’outil le plus puissant, et le plus facile à rater par timidité. Si un titre n’est qu’un peu plus grand que le texte en dessous, les deux ressemblent à une erreur plutôt qu’à une hiérarchie. Rendez les écarts entre niveaux évidents ; une échelle typographique, décrite dans [les bases de la typographie](https://gradiently.design/fr/guide/typography-basics), les garde cohérents. ### Hiérarchie plate - Un titre à peine plus grand que le texte - Tout en gras, donc rien ne ressort - Quatre tailles différentes presque identiques - Deux titres de même poids ### Hiérarchie claire - Un titre au moins deux fois plus grand que le texte environ - Le gras réservé aux quelques mots qui doivent mener - Trois tailles avec des écarts nets entre elles - Un titre, une ligne d’appui ## Couleur et contraste L’œil va d’abord vers ce qui diffère le plus de son entourage. Une petite tache de couleur vive sur une création sombre et calme l’emporte sur un élément plus grand dans un ton sourd. La couleur d’accent est donc un budget : dépensez-la sur la seule chose qui doit mener, ou sur l’action que vous voulez faire faire, et nulle part ailleurs. - Fond: #0f1222 - Encre principale: #f5f3ee - Encre secondaire: #a7a9be - Accent, utilisé une fois: #ffb454 Une palette avec la hiérarchie intégrée. L’encre principale a le plus de contraste avec le fond (environ 16,8:1), l’encre secondaire nettement moins (environ 8:1, toujours très lisible), et l’accent est réservé à un seul élément. Baisser le contraste permet de faire reculer des éléments sans les réduire : une encre plus douce pour les légendes et les étiquettes les garde lisibles mais derrière le titre. Gardez même le texte le plus discret au-dessus des minimums présentés dans [le contraste des couleurs](https://gradiently.design/fr/guide/color-contrast-accessibility). La [règle du 60-30-10](https://gradiently.design/fr/guide/60-30-10-rule) est une autre façon de penser la quantité de chaque couleur. ## Position et sens de lecture Dans les langues qui se lisent de gauche à droite, on commence en général en haut à gauche avant d’aller vers la droite et vers le bas : les éléments placés là sont vus tôt. Dans les langues qui se lisent de droite à gauche, le coin de départ s’inverse. Les mises en page centrées et symétriques commencent au milieu et rayonnent vers l’extérieur, ce qui convient aux créations courtes à message unique comme les affiches, les citations et les annonces. La position peut aussi jouer contre vous. Sur les formats des réseaux sociaux, les commandes des plateformes couvrent une partie de l’image, et sur les miniatures un badge occupe un coin. Éloignez le premier élément de ces zones ; [le design de miniatures YouTube](https://gradiently.design/fr/guide/youtube-thumbnail-design) montre comment. ## L’espace L’espace remplit deux rôles. Autour d’un élément unique, il l’isole, et l’isolement se lit comme de l’importance : une ligne entourée de marges généreuses peut dominer un bloc de texte bien plus grand. Entre les éléments, il les regroupe : ce qui est proche se lit comme allant ensemble. Rapprochez la date et le lieu l’un de l’autre et éloignez-les du titre : on les lira comme un seul bloc de détails. Une publication verticale avec un titre annonçant douze ateliers et une ligne d’appui Les mots mènent : le titre porte la nouvelle et le détail l’appuie. Une publication verticale avec un grand chiffre 12 et les mots ateliers cet automne Un chiffre mène : le même contenu, reclassé pour que le nombre soit vu en premier. Le même contenu peut porter des hiérarchies différentes. Le choix dépend de ce que vous voulez faire retenir : l’idée, ou le chiffre. ## Comment tester la hiérarchie visuelle - **Le test du plissement d’yeux.** Fermez les yeux à moitié ou floutez la création. La forme qui ressort encore est votre vrai niveau un. Si ce n’est pas celle que vous avez choisie, ajustez. - **Le test des deux secondes.** Montrez la création à quelqu’un pendant deux secondes, puis demandez-lui ce qu’elle disait. Il doit répéter votre niveau un. - **Le test de la vignette.** Réduisez-la à la taille à laquelle elle apparaîtra sur un téléphone. Les niveaux deux et trois peuvent disparaître, c’est normal ; le niveau un, jamais. - **Le test des niveaux de gris.** Retirez la couleur. Si la hiérarchie s’effondre, elle reposait sur la teinte plutôt que sur le contraste de luminosité. La hiérarchie se complique quand le fond est chargé ou coloré, car le contraste change sous les mots ; [du texte sur un dégradé](https://gradiently.design/fr/guide/text-on-gradient) explique comment garder le niveau un lisible où qu’il se trouve. Pour les annonces, où la hiérarchie compte le plus, voir [comment créer une publication d’annonce](https://gradiently.design/fr/guide/announcement-post-design). ## FAQ ### Qu’est-ce que la hiérarchie visuelle ? La hiérarchie visuelle est l’ordre dans lequel on remarque et on lit les éléments d’une création, contrôlé par la taille, la graisse, la couleur et le contraste, la position et l’espace. ### Combien de niveaux de hiérarchie une création doit-elle avoir ? En général trois : un élément vu en premier, quelques éléments d’appui en deuxième, et les détails en dernier. ### Qu’est-ce que le test du plissement d’yeux ? Fermez les yeux à moitié ou floutez la création jusqu’à ne voir que des formes. Ce qui ressort encore est ce que les gens remarqueront en premier. ### La taille est-elle le seul moyen de créer une hiérarchie ? Non. La graisse, le contraste, la couleur, la position et l’espace créent tous de la mise en valeur, et un petit élément d’une couleur d’accent vive peut dominer un élément plus grand dans un ton sourd.