Web design module 1 : voir comme un designer

Jour 1 — Qu'est-ce que le design d'interface

Objectif : distinguer décoration et conception, et poser les quatre piliers du parcours.

Théorie 1/2 : le design n'est pas de la décoration

Dessiner une interface, ce n'est pas la rendre jolie : c'est décider ce que l'utilisateur voit d'abord, ce qu'il comprend sans effort et ce qu'il peut faire ensuite. Une page « bien designée » se reconnaît à trois signes : on trouve l'information sans chercher, on comprend ce qui est cliquable, et rien ne fatigue (texte lisible, contrastes suffisants, espaces qui respirent). Steve Jobs le résumait : le design n'est pas ce à quoi ça ressemble, c'est comment ça fonctionne. La beauté d'une interface est surtout la conséquence visible de décisions utiles.

Théorie 2/2 : les quatre piliers

Tout ce que vous apprendrez tient dans quatre familles de règles, qu'on retrouve sur chaque écran bien dessiné :

• La typographie : le choix des polices, leurs tailles, l'interlignage, la longueur des lignes. C'est 90 % du contenu du web.
• La couleur : une palette réduite, un rôle pour chaque couleur, des contrastes mesurés.
• L'espace : des marges et des espacements cohérents, qui groupent ce qui va ensemble.
• La hiérarchie : guider l'œil du plus important au moins important, par la taille, le poids, la couleur et la position.

Aucune de ces règles ne demande de talent de dessinateur : elles s'apprennent, se mesurent et se vérifient. C'est la bonne nouvelle du parcours.

Pratique (30 min)

1. Ouvrez trois sites que vous utilisez souvent (par exemple wikipedia.org, service-public.fr et le site de votre choix).
2. Pour chacun, répondez dans le carnet en trois lignes : qu'est-ce que je vois en premier ? Qu'est-ce qui est cliquable ? Qu'est-ce qui me fatigue éventuellement ?
3. Classez les trois sites du plus clair au plus confus, et écrivez une phrase qui explique le classement avec les mots du jour (typographie, couleur, espace, hiérarchie).

Critère de réussite : trois analyses écrites, chacune utilisant au moins deux des quatre piliers.

Tips agent : un LLM peut critiquer une capture d'écran : « Voici la page d'accueil de [site]. Dis-moi ce que l'œil voit en premier et pourquoi, en t'appuyant sur la taille, la couleur et la position. » Piège : sans la capture, il invente. Preuve à demander : qu'il cite l'élément précis (le titre, le bouton) qui justifie chaque remarque.

Synthèse (10 min)

Trois lignes : la différence entre décorer et concevoir, les quatre piliers, le signe d'une page claire. Puis refaites l'analyse du troisième site sans regarder vos notes.

Jour 2 — Typographie 1/3 : familles et anatomie

Objectif : reconnaître les grandes familles de polices et lire l'anatomie d'une lettre.

Théorie 1/2 : serif, sans-serif et les autres

Les empattements (serifs) sont les petits traits qui terminent les lettres, hérités de la gravure romaine — la colonne Trajane, à Rome, en porte de 113 après J.-C. Une police serif (Georgia, Merriweather) évoque l'imprimé et la tradition ; une sans-serif (Inter, Helvetica) évoque l'écran et la modernité. À côté : les monospace (chasse fixe, pour le code), les display (décoratives, réservées aux grands titres) et les manuscrites (à éviter dans une interface). Sur le web, la sans-serif domine le texte courant : ses formes simples restent nettes en petit sur écran. Une page utilise en général une ou deux polices, jamais plus de trois.

Théorie 2/2 : l'anatomie d'une lettre

Quatre mots suffisent pour parler d'une police avec précision :

• La hauteur d'x : la hauteur des lettres basses sans jambage (x, a, e). Plus elle est grande, plus la police semble lisible à petite taille — Inter a une hauteur d'x élevée, c'est une des raisons de son succès.
• La chasse : la largeur d'une lettre avec ses approches (l'espace qui l'entoure). Une chasse large aère, une chasse étroite condense.
• La graisse : l'épaisseur du trait, de 100 (fin) à 900 (noir). Le texte courant se lit en 400, les emphases en 600-700.
• La casse : capitales et bas de casse. Un texte TOUT EN CAPITALES se lit plus lentement — l'œil reconnaît la silhouette des mots, et les capitales sont toutes rectangulaires.

Pratique (30 min)

1. Analyse du jour : ouvrez developer.mozilla.org et wikipedia.org. Avec les outils de développement (F12, icône d'inspection), cliquez sur un titre puis sur un paragraphe de chaque site, et relevez dans l'onglet « Calculé »/« Computed » la propriété font-family de chacun.
2. Notez pour chaque site : serif ou sans-serif ? Même famille pour titres et texte ?
3. Micro-exercice : sur fonts.google.com, ouvrez Inter et Merriweather. Écrivez trois lignes dans le carnet : quelle différence de hauteur d'x et de graisse voyez-vous entre les deux, au même corps ?

Critère de réussite : quatre font-family relevées avec leur famille (serif/sans) identifiée, et la comparaison Inter/Merriweather rédigée.

Tips agent : collez à un agent la valeur font-family relevée : « Classe ces polices par famille (serif, sans-serif, monospace) et dis-moi lesquelles sont des polices système. » Piège : il peut affirmer qu'une police est payante ou libre sans le savoir. Preuve : vérifiez la licence sur fonts.google.com ou le site de la fonderie.

Synthèse (10 min)

Trois lignes : les familles de polices, les quatre mots d'anatomie, pourquoi la sans-serif domine le web. Puis récitez les quatre mots d'anatomie sans notes.

Jour 3 — Typographie 2/3 : taille, interlignage, longueur de ligne

Objectif : régler un bloc de texte courant pour une lecture confortable.

Théorie 1/2 : le corps du texte

Le corps est la taille du texte, en pixels sur le web. La taille de base des navigateurs est 16px : c'est aussi le confort de lecture de référence pour le texte courant. En dessous de 14px, la lecture fatigue ; au-dessus de 20px, le texte courant devient pataud. L'interlignage (line-height) est la distance entre deux lignes de base : trop serré, les lignes se touchent et l'œil perd sa place ; trop large, le paragraphe se disloque. Pour du texte courant en 16px, un interlignage de 1,4 à 1,6 fois le corps (22 à 26px) convient presque toujours. Les titres, plus grands, demandent un interlignage proportionnellement plus faible (1,1 à 1,3).

Théorie 2/2 : la longueur de ligne

Une ligne trop longue fatigue : arrivé au bout, l'œil peine à retrouver le début de la suivante. Une ligne trop courte hache la lecture. La mesure classique (le typographe Robert Bringhurst la popularise) est de 45 à 75 caractères par ligne, ponctuation et espaces comprises, avec un idéal autour de 66. La recommandation d'accessibilité WCAG (critère 1.4.8) fixe sa limite à 80 caractères. Sur une page web, la longueur de ligne ne se règle pas en rognant le texte mais en limitant la largeur du bloc : c'est pour cela que les colonnes de texte des sites sérieux s'arrêtent vers 650-750px de large, même sur un grand écran.

Pratique (30 min)

1. Analyse du jour : sur developer.mozilla.org, ouvrez un article. Sélectionnez un paragraphe et comptez les caractères d'une ligne complète (copiez-la dans le carnet, la plupart des éditeurs comptent les caractères). Relevez aussi font-size et line-height dans les outils de développement.
2. Faites la même mesure sur un article de wikipedia.org. Comparez les deux longueurs de ligne.
3. Micro-exercice : dans les outils de développement, modifiez en direct le max-width de la colonne d'un article (clic droit → Inspecter, puis éditez la valeur) jusqu'à obtenir environ 66 caractères par ligne. Notez la valeur trouvée.

Critère de réussite : deux longueurs de ligne mesurées et comparées, et une valeur de largeur qui donne ~66 caractères, notée au carnet.

Tips agent : « Compte les caractères de cette ligne : [collez]. Est-elle dans la fourchette 45-75 ? Sinon, propose la largeur de colonne qui la corrige pour du 16px. » Piège : le modèle peut mal compter les caractères d'une longue ligne. Preuve : faites compter par votre éditeur de texte, c'est lui qui fait foi.

Synthèse (10 min)

Trois lignes : le corps de référence, la fourchette d'interlignage, la fourchette de longueur de ligne. Puis redonnez les trois chiffres sans notes.

Jour 4 — Typographie 3/3 : l'échelle modulaire

Objectif : construire une hiérarchie de tailles de texte cohérente à partir d'un ratio.

Théorie 1/2 : pourquoi un ratio

Sur une page mal typographiée, les tailles semblent choisies au hasard : 15px ici, 17px là, 24px ailleurs. Une échelle modulaire remplace le hasard par un ratio : on part du corps du texte (16px) et on multiplie par un nombre fixe à chaque cran. Les ratios classiques portent des noms musicaux, hérités de la typographie plomb : 1,125 (seconde majeure), 1,2 (tierce mineure), 1,25 (tierce majeure), 1,333 (quarte juste), jusqu'à 1,618 (nombre d'or). Plus le ratio est grand, plus le contraste entre titres et texte est fort. Pour une interface, 1,2 ou 1,25 suffisent : les écrans ont besoin de nuances, pas d'effets d'affiche.

Théorie 2/2 : une échelle complète

Exemple avec 16px et un ratio de 1,25, arrondi à l'entier : 12 (16 ÷ 1,25 ≈ 13, arrondi à 12 pour les mentions), 16 pour le corps, 20, 25, 31, 39, 49 pour les titres croissants. Cinq à sept crans suffisent à tout un site : le corps, une petite taille (mentions, légendes), trois ou quatre niveaux de titres. L'échelle n'est pas une prison : on arrondit aux entiers, et si le cran H1 paraît trop timide on monte le ratio, pas une taille isolée. Ce qui compte est que chaque taille ait un rôle et que le même rôle porte toujours la même taille.

Pratique (30 min)

1. Micro-exercice : construisez au carnet l'échelle de base 16px, ratio 1,25, arrondie à l'entier, de la petite taille au H1 (six crans). Refaites-la avec 1,333 et comparez l'écart entre les deux H1.
2. Analyse du jour : sur stripe.com ou gov.uk, inspectez avec les outils de développement la taille du titre principal, des sous-titres et du texte courant. Les tailles relevées forment-elles une progression régulière ? Notez les valeurs.
3. Devinez le ratio du site analysé (divisez deux crans successifs) et écrivez-le au carnet.

Critère de réussite : deux échelles écrites (1,25 et 1,333) et les tailles d'un site réel relevées avec un ratio estimé.

Tips agent : « Calcule l'échelle modulaire de base 16px, ratio 1,25, sur six crans, arrondie à l'entier. » C'est le genre de calcul qu'un LLM réussit… ou pas. Piège : les arrondis successifs s'accumulent. Preuve : refaites la multiplication à la calculatrice, crant par cran.

Synthèse (10 min)

Trois lignes : ce qu'est un ratio d'échelle, les deux ratios utiles à une interface, pourquoi on arrondit. Puis récitez l'échelle 16px/1,25 de mémoire.

Jour 5 — Couleur 1/2 : teinte, saturation, luminosité

Objectif : décrire n'importe quelle couleur avec trois nombres et lire une valeur hexadécimale.

Théorie 1/2 : HSL, les trois réglages d'une couleur

Sur écran, les couleurs sont mélangées en lumière : rouge, vert et bleu additionnés (RGB) donnent du blanc. Mais pour penser une couleur, le modèle le plus pratique est HSL : teinte (hue), saturation, luminosité (lightness). La teinte est la position sur le cercle chromatique, de 0° (rouge) à 360°, en passant par le vert (120°) et le bleu (240°). La saturation est l'intensité : 0 % donne un gris, 100 % la couleur pure. La luminosité va du noir (0 %) au blanc (100 %), la couleur pure se situant à 50 %. Ce modèle est précieux parce qu'il ressemble à notre langage : « un bleu désaturé et foncé » devient trois réglages séparés au lieu d'un mélange mystérieux.

Théorie 2/2 : lire un code hexadécimal

La notation #3B82F6 est du RGB en chiffres hexadécimaux (base 16, chiffres 0-9 puis A-F) : deux chiffres par canal, rouge, vert, bleu, chacun de 00 (0) à FF (255). #3B82F6 = rouge 59, vert 130, bleu 246 : le bleu domine, c'est bien un bleu vif. Deux repères suffisent pour lire à vue : la paire la plus forte donne la teinte dominante, et la moyenne des trois donne la luminosité (#111111 très sombre, #F5F5F5 presque blanc). La forme courte #FFF duplique chaque chiffre : #FFFFFF.

Pratique (30 min)

1. Analyse du jour : sur service-public.fr, ouvrez l'inspecteur, cliquez sur le bouton principal et relevez sa couleur de fond (background-color). Relevez aussi la couleur du texte courant et celle des liens.
2. Pour chaque valeur hex relevée, écrivez au carnet sa description en HSL approximatif : teinte dominante (laquelle des trois paires domine ?), plutôt saturée ou grise, plutôt claire ou foncée. Vérifiez avec le sélecteur de couleur des outils de développement (cliquez sur le carré de couleur : il affiche la conversion HSL).
3. Micro-exercice : dans le sélecteur, prenez le bleu du site et fabriquez-en trois variantes en ne touchant que la luminosité : un clair (75 %), le pur (50 %), un foncé (25 %). Notez les trois codes.

Critère de réussite : trois couleurs relevées et décrites en langage HSL, plus trois variantes de luminosité notées avec leurs codes.

Tips agent : « Convertis #3B82F6 en HSL et propose trois variantes de luminosité (25 %, 50 %, 75 %) à saturation constante, en hex. » Piège : la conversion HSL↔RGB demande du calcul ; un LLM se trompe d'un cran sans ciller. Preuve : collez ses codes dans le sélecteur de couleur des devtools et comparez les HSL affichés.

Synthèse (10 min)

Trois lignes : les trois réglages HSL, comment lire un hex à vue, ce que change la luminosité seule. Puis redécrivez #3B82F6 sans notes.

Jour 6 — Couleur 2/2 : la règle 60-30-10

Objectif : répartir une palette sur une page et donner un rôle à chaque couleur.

Théorie 1/2 : 60-30-10, la recette qui évite la cacophonie

La règle vient de la décoration d'intérieur : 60 % de couleur dominante (les fonds, presque toujours un neutre : blanc, gris très clair ou très foncé), 30 % de couleur secondaire (les zones qui structurent : cartes, bandeaux, texte), 10 % d'accent (la couleur d'action, réservée aux boutons et liens importants). L'accent tire sa force de sa rareté : si tout est orange, plus rien ne signale l'action. C'est la règle qui explique pourquoi les pages crédibles semblent « calmes » : la couleur forte y est rationnée. Les relations entre couleurs se choisissent sur le cercle chromatique : couleurs analogues (voisines, apaisées), complémentaires (opposées, contrastées) — mais une palette d'interface tient souvent en un neutre, un accent et ses déclinaisons de luminosité.

Théorie 2/2 : les couleurs sémantiques

Au-delà de la palette, certaines couleurs ont un sens attendu : rouge pour l'erreur ou le danger, vert pour le succès, orange/jaune pour l'avertissement, bleu pour l'information et les liens. Ces conventions sont fortes : un bouton rouge « Enregistrer » déroute. Mais une couleur ne doit jamais porter l'information seule : environ 8 % des hommes et 0,5 % des femmes ont une forme de daltonisme (le plus souvent rouge-vert). Un champ en erreur se signale donc en rouge et par une icône ou un texte. C'est une exigence WCAG (critère 1.4.1) et on y reviendra au jour 24.

Pratique (30 min)

1. Analyse du jour : ouvrez stripe.com. Estimez la répartition 60-30-10 de la page d'accueil : quel est le neutre dominant, quelle est la couleur secondaire, quel est l'accent et où apparaît-il ? Notez les trois codes hex avec l'inspecteur.
2. Comptez combien de fois l'accent apparaît dans la première hauteur d'écran. Que signale-t-il à chaque fois ?
3. Micro-exercice : dans le carnet, composez votre propre trio : un neutre (ex. #FAFAF9), une couleur de texte (ex. #1C1917), un accent au choix. Écrivez une phrase : à quoi servira l'accent, et à quoi il ne servira jamais.

Critère de réussite : la répartition d'un site réel notée avec ses trois codes, et votre propre trio avec la règle d'usage de l'accent rédigée.

Tips agent : « Voici mes trois couleurs : [hex]. Critique cette palette selon la règle 60-30-10 et dis-moi si l'accent se détache assez du neutre. » Piège : le modèle juge des codes, pas l'écran — collez aussi une capture. Preuve : ouvrez les deux couleurs côte à côte et plissez les yeux : l'accent doit sauter.

Synthèse (10 min)

Trois lignes : la répartition 60-30-10, pourquoi l'accent est rationné, pourquoi la couleur ne suffit jamais seule. Puis récitez la règle et l'exception d'accessibilité sans notes.

Jour 7 — Contraste et lisibilité

Objectif : mesurer un contraste et connaître les seuils WCAG de référence.

Théorie 1/2 : le ratio de contraste

Le contraste entre un texte et son fond se mesure : c'est le rapport entre la luminance relative du plus clair et du plus foncé, de 1:1 (blanc sur blanc) à 21:1 (noir sur blanc). La norme WCAG 2.2 fixe les seuils : niveau AA, le minimum attendu d'un site public, exige 4,5:1 pour le texte courant et 3:1 pour le grand texte (au moins 24px, ou 18,5px en gras). Le niveau AAA monte à 7:1 et 4,5:1. Les composants graphiques porteurs d'information — icônes, bordures de champ, indicateurs — demandent 3:1 contre leurs voisins (critère 1.4.11). Ces chiffres ne sont pas du goût : ils mesurent la lisibilité pour les personnes malvoyantes, et au passage pour tout le monde au soleil ou sur un mauvais écran.

Théorie 2/2 : les pièges classiques

Trois erreurs reviennent partout : le gris moyen sur blanc (élégant en capture, illisible en vrai — #999999 sur blanc ne fait que 3,5:1), le texte blanc sur accent clair (un bouton orange clair #F59E0B avec texte blanc n'atteint pas 2:1), et le placeholder gris clair pris pour du texte secondaire. À l'inverse, le noir pur #000000 sur blanc pur (21:1) n'est pas obligatoire : beaucoup de designers préfèrent un gris très foncé (#1C1917, ~17:1) qui adoucit la lecture longue. La règle pratique : le texte courant vise 7:1 ou plus, les textes secondaires restent au-dessus de 4,5:1, et rien d'important ne descend sous 3:1.

Pratique (30 min)

1. Analyse du jour : sur le site d'actualités de votre choix, relevez la couleur du texte courant et celle du fond, puis calculez le ratio dans le vérificateur WebAIM. Relevez aussi la couleur des textes secondaires (dates, légendes) : passent-ils 4,5:1 ?
2. Dans les devtools Chrome ou Edge, inspectez un texte, cliquez le carré de couleur : le sélecteur affiche le ratio et les lignes AA/AAA. Vérifiez un de vos relevés avec.
3. Micro-exercice : votre trio du jour 6. Mesurez accent-sur-neutre et texte-sur-neutre. Si l'accent rate 4,5:1, fabriquez une variante plus foncée qui passe, en ne touchant que la luminosité. Notez les deux ratios.

Critère de réussite : quatre ratios mesurés (deux sur le site, deux sur votre palette) et, si besoin, un accent corrigé qui passe AA.

Tips agent : « Calcule le ratio de contraste entre #1C1917 et #FAFAF9, puis entre #F59E0B et #FFFFFF. » Piège : le calcul de luminance relative a quatre étapes ; les LLM donnent souvent un ratio plausible mais faux. Preuve non négociable : le même couple mesuré dans le vérificateur WebAIM.

Synthèse (10 min)

Trois lignes : les trois seuils (4,5 / 3 / 7), les deux pièges classiques, pourquoi le noir pur n'est pas obligatoire. Puis redonnez les seuils sans notes.

Jour 8 — Espacement 1/2 : la grille de 8 points

Objectif : espacer avec des multiples de 8 et distinguer marge intérieure et extérieure.

Théorie 1/2 : pourquoi 8

Les interfaces professionnelles n'espacent pas à l'œil : elles utilisent une échelle d'espacement, presque toujours bâtie sur 8 : 4, 8, 12, 16, 24, 32, 48, 64px. Le 4 sert aux ajustements fins (icône et son texte), le 8-16 aux espacements courants, le 32-64 à la séparation des sections. Pourquoi 8 ? Parce qu'il est divisible par 2 et 4 (les demi-mesures restent entières), parce qu'à la densité d'écran standard il tombe sur des pixels nets, et parce qu'une échelle courte tue les hésitations : la question n'est plus « 13 ou 14 ? » mais « 8 ou 16 ? ». Comme pour l'échelle typographique, la règle vaut moins que sa conséquence : le même écart signifie toujours la même relation.

Théorie 2/2 : dedans et dehors

Chaque bloc a deux familles d'espacements : le remplissage (padding), l'espace entre le contenu et le bord du bloc — l'air à l'intérieur du bouton — et la marge (margin), l'espace entre le bloc et ses voisins. L'œil lit ces deux espaces différemment : un padding généreux rend un bouton confortable et cliquable ; une marge régulière cadence la page. Règle de lecture universelle : ce qui est proche est perçu comme lié. Un titre doit donc être plus proche du paragraphe qu'il introduit que du paragraphe précédent — par exemple 32px au-dessus, 12px en dessous. Quand une page semble « brouillonne », c'est presque toujours que ces distances ne disent pas les vraies relations.

Pratique (30 min)

1. Analyse du jour : sur github.com, inspectez une carte ou un encadré. Relevez ses paddings (dans l'onglet Computed, le diagramme en boîte les affiche) et les marges entre deux cartes : sont-ce des multiples de 8 ou 4 ? Notez-les.
2. Relevez aussi l'espace au-dessus et en dessous d'un titre de section : lequel est le plus grand ?
3. Micro-exercice : écrivez au carnet votre échelle d'espacement complète (4 à 64) et, pour chaque valeur, un usage : « 4 : icône-texte ; 8 : entre éléments liés ; 16 : padding courant ; 24… ».

Critère de réussite : des mesures réelles notées avec le verdict « multiples de 8 ou non », et votre échelle annotée d'usages.

Tips agent : un agent qui a un navigateur pilotable peut extraire les espacements d'une page entière : « Releve tous les padding et margin du composant principal et dis-moi s'ils tiennent dans une échelle de 8. » Piège : il rapportera les valeurs héritées ou calculées sans distinguer. Preuve : comparez un de ses chiffres avec le diagramme en boîte de votre inspecteur.

Synthèse (10 min)

Trois lignes : pourquoi 8, la différence padding/margin, la règle du titre. Puis récitez votre échelle 4→64 sans notes.

Jour 9 — Espacement 2/2 : proximité et rythme

Objectif : utiliser l'espace pour grouper l'information, sans bordures ni filets.

Théorie 1/2 : les lois du groupement

La psychologie de la forme (Gestalt, école allemande des années 1910-1920) a mesuré comment l'œil groupe ce qu'il voit. Trois lois font le quotidien du designer : la proximité (des éléments proches sont perçus comme un groupe), la similarité (des éléments qui se ressemblent sont perçus comme liés — même couleur, même forme), la région commune (des éléments dans le même cadre sont perçus ensemble). Conséquence pratique : l'espace est un outil de sens, pas du vide. Pour séparer deux groupes, augmentez l'espace avant de tracer une ligne — la plupart des filets et bordures d'une page peuvent être remplacés par du blanc, et la page n'en devient que plus calme.

Théorie 2/2 : le rythme vertical

En descendant une page, l'œil attend une cadence : mêmes espaces entre paragraphes, même espace avant chaque section, titres qui retombent sur les mêmes intervalles. Ce rythme vertical rend la lecture prévisible, donc reposante. Certains designers alignent tout sur une grille de lignes de 8px (le texte à interlignage 24 « tombe » sur les lignes) ; à notre niveau, retenez plus simple : trois mesures suffisent — l'espace entre éléments liés (8-12px), l'espace entre paragraphes ou blocs (16-24px), l'espace entre sections (48-64px) — et chacune reste constante sur tout le site. Un rythme constant vaut mieux qu'un rythme savant.

Pratique (30 min)

1. Analyse du jour : ouvrez la page d'accueil de gov.uk. Repérez un endroit où des éléments sont groupés par la seule proximité (sans bordure ni fond), et un endroit où une région commune (fond ou cadre) crée le groupe. Notez les deux.
2. Mesurez l'espace entre deux sections de la page et entre deux liens d'un même bloc : confirmez le rythme à trois mesures.
3. Micro-exercice : recopiez au carnet la structure d'une fiche (titre, image, texte, prix, bouton — par exemple une carte produit quelconque) en indiquant pour chaque écart sa valeur dans votre échelle et ce qu'il doit dire : « ici 12px, ces deux-là vont ensemble ».

Critère de réussite : deux techniques de groupement identifiées sur un site réel, et la fiche annotée avec un écart justifié pour chaque relation.

Tips agent : collez une capture : « Identifie sur cette page les groupes créés par la proximité et ceux créés par une région commune. Y a-t-il un endroit où l'espacement contredit le sens ? » Piège : il ne voit pas toujours les pixels exacts. Preuve : vérifiez une de ses distances à la règle de l'inspecteur.

Synthèse (10 min)

Trois lignes : les trois lois Gestalt utiles, pourquoi l'espace avant la bordure, les trois mesures du rythme. Puis redessinez la fiche annotée sans notes.

Jour 10 — La hiérarchie visuelle

Objectif : diriger l'œil dans l'ordre voulu avec la taille, le poids, la couleur et la position.

Théorie 1/2 : les quatre leviers

L'œil ne lit pas une page, il la scanne. La hiérarchie visuelle est l'art de choisir ce qu'il voit en premier, en deuxième, en troisième. Quatre leviers, du plus fort au plus subtil : la taille (le plus grand gagne), la position (en haut et à gauche d'abord, dans les cultures qui lisent de gauche à droite), la couleur (l'accent rationné du jour 6 attire l'œil) et le poids (le gras dans un paragraphe, le titre noir parmi les gris). Une hiérarchie réussie se teste en plissant les yeux : le « squint test » — floutée, la page doit encore montrer ses trois éléments principaux dans le bon ordre. Si tout ressort, rien ne ressort : la hiérarchie est une décision sur ce qui est moins important.

Théorie 2/2 : les parcours de l'œil

Les études d'oculométrie du Nielsen Norman Group (à partir de 2006) ont montré deux parcours types : le parcours en F sur les pages denses en texte (l'œil balaie le haut, redescend en raccourcissant chaque ligne), et le parcours en Z sur les pages aérées (coin haut-gauche → haut-droite → bas-gauche → bas-droite). Conséquences pratiques : les premiers mots des titres et des lignes portent l'essentiel (« 50 % de réduction » bat « Offre exceptionnelle : -50 % »), et sur une page en Z, l'action principale se place au bout du parcours, en bas à droite de la zone regardée. Ces patrons décrivent des tendances, pas des lois : une hiérarchie claire les guide au lieu de les subir.

Pratique (30 min)

1. Analyse du jour : ouvrez apple.com et faites le squint test : notez les trois éléments vus dans l'ordre. Recommencez sur la page d'accueil de wikipedia.org : l'ordre est-il aussi net ? Pourquoi ?
2. Sur l'un des deux, identifiez le levier utilisé pour chaque niveau : taille ? poids ? couleur ? position ?
3. Micro-exercice : prenez la fiche du jour 9. Listez ses informations (titre, image, texte, prix, bouton) par ordre d'importance décidé par vous, puis notez quel levier vous utiliserez pour chaque rang (1 : titre en 25px gras ; 2 : prix en accent 20px…).

Critère de réussite : deux squint tests consignés avec le levier de chaque niveau, et la fiche hiérarchisée avec un levier par rang.

Tips agent : floutez votre capture (ou décrivez les blocs et leurs tailles) : « Voici ma page floutée. Quels sont les trois premiers éléments qui ressortent, dans l'ordre ? » Si sa réponse n'est pas votre ordre voulu, la hiérarchie est à reprendre. Piège : il peut deviner le contenu sous le flou — demandez-lui de se limiter à ce qu'il voit, tailles et masses.

Synthèse (10 min)

Trois lignes : les quatre leviers, le F et le Z, ce que prouve le squint test. Puis refaites la hiérarchie de la fiche sans notes.

Jour 11 — Grilles et alignement

Objectif : poser une grille à 12 colonnes et faire de l'alignement un réflexe.

Théorie 1/2 : la grille à 12 colonnes

La grille est une charpente invisible : des colonnes verticales régulières sur lesquelles chaque bloc vient s'aligner. La plus répandue compte 12 colonnes, séparées par des gouttières (gutters) de 16 à 32px, parce que 12 se divise par 2, 3, 4 et 6 : la même grille porte deux colonnes égales (6+6), trois (4+4+4), quatre (3+3+3+3) ou l'asymétrie classique contenu 8 + barre latérale 4. Les marges extérieures de la grille définissent la largeur utile de la page — souvent 1100 à 1300px au centre d'un grand écran. La grille ne se voit pas mais se sent : quand deux blocs voisins n'alignent ni leurs bords ni leurs textes, la page devient « approximative » sans qu'on sache dire pourquoi.

Théorie 2/2 : l'alignement comme discipline

Trois alignements fondent une page solide : les bords (les blocs commencent et finissent sur les mêmes verticales), les lignes de base du texte (deux textes côte à côte reposent sur la même ligne) et le centre, réservé aux compositions courtes (hero, citation) car le centrage partout rend les bords irréguliers et la lecture fatigante — le texte long s'aligne à gauche. La tentation du débutant est de « pousser à l'œil » un élément de 3px : ne le faites jamais ; si deux choses doivent s'aligner, elles partagent une valeur de la grille, sinon l'écart est assumé et visible. Le meilleur test : activez le quadrillage de votre outil et regardez ce qui ne tombe sur aucune ligne.

Pratique (30 min)

1. Analyse du jour : sur stripe.com, réduisez la fenêtre puis rouvrez-la et cherchez les lignes de grille : combien de colonnes portent la mise en page ? Notez la largeur du contenu central (inspectez le conteneur) et la gouttière entre deux cartes.
2. Repérez un alignement net (des bords qui partagent une verticale) et un endroit où l'asymétrie est assumée. Notez les deux.
3. Micro-exercice : au carnet, dessinez une grille 12 colonnes à main levée avec ses gouttières, puis placez-y la fiche des jours 9-10 : image sur 5 colonnes, texte sur 7. Notez les colonnes de début et de fin de chaque bloc.

Critère de réussite : la charpente d'un site réel mesurée (colonnes, gouttière, largeur utile) et votre fiche posée sur une grille dessinée.

Tips agent : « Voici les largeurs relevées sur ce site : conteneur 1152px, 3 cartes de 368px, gouttières 24px. Vérifie si ça tient dans une grille 12 colonnes et calcule la largeur de colonne. » Piège : il peut forcer un résultat « propre » en arrondissant sans le dire. Preuve : refaites la division (1152 − 11×24) ÷ 12 à la main.

Synthèse (10 min)

Trois lignes : pourquoi 12, les trois alignements, pourquoi on ne pousse jamais à l'œil. Puis redessinez la grille et la fiche sans notes.

Jour 12 — Cohérence et répétition

Objectif : comprendre pourquoi les interfaces se ressemblent, et en faire une force.

Théorie 1/2 : la loi de Jakob

Jakob Nielsen l'a formulée en 2000 : les utilisateurs passent l'essentiel de leur temps sur d'autres sites que le vôtre, et ils arrivent donc avec des attentes — le logo en haut à gauche ramène à l'accueil, la loupe ouvre la recherche, le lien souligné ou coloré se clique, le panier est en haut à droite. Respecter ces conventions n'est pas un manque d'originalité : c'est de la courtoisie. L'originalité se paie en effort d'apprentissage ; elle se réserve aux endroits où elle apporte quelque chose (l'identité visuelle, l'illustration), jamais à la navigation. En interne, la même logique : un bouton principal a la même couleur, la même forme et le même libellé type sur tout le site — « Enregistrer » ne devient pas « Valider » à la page suivante.

Théorie 2/2 : les patterns, briques de la cohérence

Un pattern est une solution éprouvée à un problème récurrent : la carte (image, titre, texte, action), le fil d'Ariane, l'onglet, la pagination, le message d'alerte. Les design systems publics — celui de l'État français ou celui du gouvernement britannique — en documentent des dizaines, avec pour chacun les cas d'usage et les pièges. Quand vous répétez le même pattern, l'utilisateur n'apprend qu'une fois. La cohérence se mesure simplement : tous les éléments qui se comportent pareil doivent se ressembler, et deux choses différentes doivent se distinguer. Le jour 37, cette habitude prendra un nom : le design system.

Pratique (30 min)

1. Analyse du jour : sur github.com, listez tous les styles de boutons visibles sur une page (principal, secondaire, danger, lien-bouton) : combien y en a-t-il, et qu'est-ce qui distingue chacun ? Notez couleur, fond, bordure.
2. Repérez deux patterns nommés (onglets, fil d'Ariane, carte…) et écrivez au carnet le problème que chacun résout.
3. Micro-exercice : pour votre fiche des jours précédents, définissez les conventions écrites : « bouton principal = accent, texte blanc, coins 8px ; lien = accent, souligné au survol ; prix = 20px gras ». Cinq règles minimum.

Critère de réussite : l'inventaire des boutons d'un site réel et vos cinq conventions écrites au carnet.

Tips agent : « Voici la liste des styles de boutons que j'ai relevés sur mon site : [collez]. Détecte les incohérences (deux styles pour le même rôle, ou un style pour deux rôles). » Piège : il ne peut pas deviner le rôle sans vos annotations — donnez-le lui. Preuve : chaque incohérence signalée doit citer les deux endroits concernés.

Synthèse (10 min)

Trois lignes : la loi de Jakob, ce qu'est un pattern, la règle « pareil = même aspect ». Puis récitez vos cinq conventions sans notes.

Jour 13 — Les détails qui font professionnel

Objectif : soigner les états, les bordures et les ombres — les finitions visibles au premier regard.

Théorie 1/2 : les états interactifs

Un élément interactif n'a pas une apparence mais plusieurs : repos, survol (hover — la souris est dessus), focus (il est atteint au clavier, avec Tab), actif (au clic), désactivé (action impossible), et parfois chargement. L'état de focus est le parent pauvre : or sans lui, l'utilisateur au clavier est perdu — la norme WCAG exige un indicateur de focus visible (critère 2.4.7) et contrasté à 3:1 (1.4.11). Un formulaire ajoute ses états : erreur, succès, obligatoire. Compter les états est un bon réflexe de conception : un bouton en a quatre minimum, un champ six. Les sites qui semblent « finis » sont ceux où chaque état a été dessiné, pas laissé au hasard du navigateur.

Théorie 2/2 : bordures, coins, ombres

Trois finitions trahissent un travail amateur. Les coins arrondis : choisissez un rayon (4, 6 ou 8px) et tenez-le partout — un bouton à 6px et une carte à 20px sans raison cassent la cohérence ; la forme parfaite (cercle complet) se réserve aux avatars et aux boutons icône. Les bordures : 1px suffit, dans un gris qui contraste juste assez (3:1 pour un champ de formulaire). Les ombres : une ombre réaliste est discrète — faible opacité (10-20 % de noir), flou généreux, léger décalage vertical ; deux niveaux d'ombre maximum, un pour les cartes, un pour ce qui flotte (menu, modale). Une ombre noire et dure à 100 % crie « débutant » plus sûrement que n'importe quelle faute de goût.

Pratique (30 min)

1. Analyse du jour : sur un site de votre choix, parcourez un formulaire à la souris puis uniquement au clavier (Tab, Maj+Tab, Entrée). Listez les états que vous voyez changer : survol ? focus ? erreur ? Notez ce qui manque.
2. Inspectez une carte : rayon des coins (border-radius), bordure, ombre (box-shadow). Notez les trois valeurs.
3. Micro-exercice : écrivez au carnet la fiche d'états de votre bouton principal : repos / survol / focus / actif / désactivé, avec pour chacun ce qui change (fond, curseur, contour) — valeurs de votre palette du jour 6.

Critère de réussite : les états d'un formulaire réel audités, trois finitions mesurées, et la fiche d'états de votre bouton complète (cinq états).

Tips agent : « Liste tous les états qu'un champ de formulaire doit prévoir, avec pour chacun un changement visuel qui ne repose pas sur la couleur seule. » Piège : il oubliera le focus ou le désactivé s'il n'est pas cadré — exigez la liste complète. Preuve : confrontez sa liste à votre audit clavier du jour.

Synthèse (10 min)

Trois lignes : les états d'un bouton, pourquoi le focus est vital, les trois finitions et leurs dosages. Puis récitez la fiche d'états sans notes.

Jour 14 — Bilan du module 1 : l'analyse complète

Objectif : mener seul l'audit visuel complet d'un site réel, avec la grille à six critères.

Théorie 1/2 : la grille d'analyse

Treize jours de règles se rangent en six questions, à poser dans l'ordre — les plus structurantes d'abord :

1. Hiérarchie : que vois-je en premier, en deuxième ? Le squint test le confirme-t-il ?
2. Typographie : quelles familles, quelle échelle, quelle longueur de ligne, quel interlignage ?
3. Couleur : la répartition 60-30-10 est-elle respectée ? L'accent signale-t-il l'action ?
4. Contraste : le texte courant passe-t-il 4,5:1 ? Les éléments d'interface 3:1 ?
5. Espacement : les écarts tiennent-ils dans une échelle ? Les groupes sont-ils lisibles sans bordure ?
6. Grille et alignement : les bords partagent-ils des verticales ?

L'ordre compte : une faute de hiérarchie rend les autres réglages sans objet, et une faute d'alignement se voit même quand tout le reste est juste.

Théorie 2/2 : écrire une critique utile

Une critique professionnelle suit une forme stricte : constat mesurable, puis règle invoquée, puis proposition. « C'est moche » ne dit rien ; « le texte secondaire #9CA3AF sur blanc fait 2,8:1, sous le seuil AA de 4,5:1 — passer à #6B7280 (5,7:1) » est actionnable. La critique cite ce qui fonctionne aussi : un audit qui ne trouve que des défauts est un audit raté, parce qu'il ne dit pas ce qu'il faut préserver. Visez dix constats : cinq forces, cinq problèmes, chacun avec sa mesure ou sa règle.

Pratique (30 min)

1. Choisissez un site que vous n'avez pas encore analysé (évitez ceux des jours précédents).
2. Menez l'audit complet avec la grille à six critères, dans l'ordre. Mesurez tout ce qui se mesure : tailles de texte, ratios de contraste dans le vérificateur WebAIM, espacements, gouttières.
3. Rédigez dix constats : cinq forces, cinq problèmes, chacun au format constat + règle + proposition.
4. Refermez le site et résumez l'audit en cinq lignes de mémoire.

Critère de réussite : un audit écrit, six critères couverts, dix constats au bon format, dont au moins trois avec une mesure chiffrée.

Tips agent : donnez vos dix constats à relire : « Pour chaque constat, dis s'il contient une mesure, la règle invoquée et une proposition ; signale ceux qui ne sont que des opinions. » Piège : il aura tendance à être gentil. Exigez la sévérité : « Si un constat n'a pas de mesure, dis-le franchement. » Preuve : chaque constat recalé cite le morceau manquant.

Synthèse (10 min)

Trois lignes : les six critères dans l'ordre, le format d'une critique utile, votre principale découverte de ce module. Puis récitez la grille sans notes — elle servira à chaque audit du parcours.