%% nav-debut : généré par gen_navigation.py, ne pas modifier à la main %% > [!nav] > ↩ [[Design et Création Numérique/Design/User Interface/User Interface|Accueil · User Interface]] > > | | [[Design et Création Numérique/Design/User Interface/2 Typographie et couleur\|Typographie et couleur →]] | > |:---|---:| %% nav-fin %% # 📘 1. Hiérarchie visuelle et grille Un écran se lit dans un ordre. Le concepteur décide de cet ordre. La hiérarchie visuelle dit ce que l'œil voit en premier, la grille dit où chaque chose se place. Cette page donne les deux. ## 1.1 L'ordre de lecture L'œil va d'abord vers ce qui est gros, contrasté, coloré ou isolé. Il suit ensuite les lignes de force de la page : de haut en bas, de gauche à droite dans une culture qui écrit ainsi. Un écran bien conçu fixe trois niveaux : | Niveau | Ce qu'il porte | Moyens | |---|---|---| | **Premier** | Ce que l'utilisateur vient chercher ou faire : le titre de la compétence, le bouton d'inscription. | Taille, couleur d'accent, position haute, espace autour. | | **Deuxième** | Ce qui aide à décider : les XP, le type, les pré-requis. | Taille intermédiaire, graisse, regroupement. | | **Troisième** | Ce qui sert parfois : la date de mise à jour, le responsable, les liens secondaires. | Petite taille, gris, position basse. | Un test simple : plisser les yeux devant l'écran. Ce qui reste visible est le premier niveau. Si tout reste visible ou si rien ne reste visible, la hiérarchie manque. ## 1.2 Le poids visuel Cinq leviers font qu'un élément pèse plus qu'un autre : - la **taille** ; - la **graisse** du texte ; - le **contraste** avec le fond ; - la **couleur**, une seule couleur d'accent sur l'écran ; - l'**espace** vide autour, qui isole. Chaque levier employé sur un élément est retiré aux autres. Un écran où tout est gros et coloré est un écran où rien ne ressort. ## 1.3 La grille Une grille divise la largeur de l'écran en colonnes égales séparées par des gouttières. Les éléments s'alignent sur les colonnes. La grille de 12 colonnes est la plus répandue : elle se divise en 2, 3, 4 ou 6 blocs égaux. - Sur ordinateur : 12 colonnes, gouttière de 24 pixels, marges latérales de 24 à 80 pixels. - Sur tablette : 8 colonnes, gouttière de 16 pixels. - Sur téléphone : 4 colonnes, gouttière de 16 pixels, marges de 16 pixels. La grille rend les alignements automatiques. Deux éléments posés sur la même colonne sont alignés sans qu'on y pense. **À manipuler :** faites varier la largeur de l'écran. Le composant affiche le nombre de colonnes, la gouttière et les marges du point de rupture courant. ```sq-grille largeur: 1440 mode: grille ``` ## 1.4 L'espacement régulier Les distances entre les éléments suivent une échelle fixe, en multiples d'une unité de base. L'unité la plus employée est 8 pixels : 8, 16, 24, 32, 48, 64. - Les éléments d'un même groupe sont séparés par une petite distance : 8 ou 16. - Les groupes sont séparés par une grande distance : 32 ou 48. - La distance dit l'appartenance. Un libellé collé à son champ appartient au champ. Un libellé à égale distance de deux champs est ambigu. ## 1.5 L'alignement - Un seul bord d'alignement pour le texte d'un bloc : à gauche pour un texte courant. - Les chiffres d'un tableau s'alignent à droite, pour comparer les ordres de grandeur. - Les boutons d'une même rangée ont la même hauteur et la même ligne de base. - Un élément centré seul sur une page alignée à gauche attire l'œil sans raison. ## 1.6 Exercice Ouvrez la page d'une compétence dans l'application SkillQuest. Notez les trois niveaux de hiérarchie que vous percevez. Comparez avec ce que l'écran devrait mettre en premier : le nom, les XP et le bouton d'inscription. Repérez un élément qui pèse plus que son niveau le justifie. ## 1.7 À retenir - Trois niveaux de hiérarchie, décidés avant de dessiner. - Une seule couleur d'accent par écran, pour l'action principale. - Une grille de 12, 8 ou 4 colonnes selon l'appareil. - Un espacement en multiples de 8 pixels, petit dans un groupe, grand entre les groupes. %% nav-debut : généré par gen_navigation.py, ne pas modifier à la main %% > [!nav] > ↩ [[Design et Création Numérique/Design/User Interface/User Interface|Accueil · User Interface]] > > | | [[Design et Création Numérique/Design/User Interface/2 Typographie et couleur\|Typographie et couleur →]] | > |:---|---:| %% nav-fin %% --- 🗓️ Historique Dernière mise à jour : `26 septembre 2026` Rédigé par : [[Julien DUQUENNOY]]