freedzhost.cloud

Web design module 4 : le projet — une page personnelle complète

Niveau DébutantTemps estimé 17 hÀ lire avant Web design module 3 : responsive, tokens et systèmesUn mot inconnu ? Lexique

Dix-sept séances, un seul livrable : votre page personnelle, conçue de bout en bout avec la méthode complète du parcours — brief, contenu réel, wireframes, direction artistique, maquettes mobile et desktop, mode sombre, audit d'accessibilité, prototype, critique et itération. C'est le module que vous montrerez ; il est volontairement le plus long, et c'est lui qu'on rogne si la vie s'en mêle.

Jour 43 — Le brief

Objectif : écrire le brief de votre page personnelle : une page, cinq réponses.

Théorie 1/2 : le brief protège le projet

Le brief est le document qui décide avant de dessiner : sans lui, chaque choix se re-négocie à chaque séance. Un brief de page personnelle répond à cinq questions en une page maximum : qui (vous, en une ligne : ce que vous faites, ce que vous cherchez), pour qui (le visiteur type : recruteur, client, pair — un seul), quoi (l'objectif mesurable : être contacté, montrer trois projets), avec quoi (les contenus disponibles : bio, projets, liens — pas ceux qu'il faudrait créer), comment (les contraintes : une seule page, deux largeurs, deux thèmes, délai). La question « pour qui » est celle qui change tout : une page pour recruteur met l'expérience en premier, une page pour clients met les réalisations en premier.

La question du brief qui change le plus la structure de la page est…

  1. la palette de couleurs
  2. pour qui est la page
  3. le choix de l'hébergeur
Réponse

Le visiteur type décide de l'ordre des sections : recruteur → l'expérience d'abord ; client → les réalisations d'abord.

Théorie 2/2 : les engagements chiffrés

Un brief utile contient des engagements mesurables, qui serviront de critères d'acceptation au jour 59 : « l'objectif (me contacter) est visible sans scroll sur mobile et desktop », « le contraste du texte courant ≥ 4,5:1 dans les deux thèmes », « la page tient en cinq sections maximum », « le contenu est réel à 100 % — zéro lorem ipsum ». Écrivez aussi les non-objectifs : ce que la page ne fera pas (pas de blog, pas de portfolio de vingt projets, pas de formulaire complexe). Un brief sans non-objectifs est un projet sans fin : c'est lui qu'on relira au jour 57 pour arbitrer la critique.

Les non-objectifs du brief servent à…

  1. remplir la page
  2. justifier les retards
  3. borner le périmètre : ce qui n'y est pas ne sera pas fait
Réponse

Ils ferment les portes : chaque « pas de X » est une discussion évitée au jour 55.

Pratique (30 min)

  1. Rédigez votre brief au carnet : les cinq questions, dix lignes maximum chacune.
  2. Ajoutez quatre engagements chiffrés (visibilité de l'objectif, contraste, nombre de sections, contenu réel) et trois non-objectifs.
  3. Relisez à voix haute : toute phrase floue (« une page moderne ») est remplacée par un fait (« le visiteur trouve mon adresse de contact en un clic »).

Critère de réussite : une page de brief avec cinq réponses, quatre engagements chiffrés, trois non-objectifs — et zéro adjectif sans mesure.

Tips agent : « Voici mon brief : [collez]. Repère chaque affirmation non mesurable et propose sa version chiffrée ; signale toute contradiction entre objectif et contenus. » Piège : il ajoutera des ambitions au lieu de tailler. Exigez : « ne propose rien à ajouter, seulement à préciser ou à retirer ». Preuve : chaque remarque cite la ligne du brief concernée.

Synthèse (10 min)

Trois lignes : les cinq questions, ce qu'est un engagement chiffré, le rôle des non-objectifs. Puis récitez vos cinq réponses sans notes.

Jour 44 — Le benchmark

Objectif : analyser cinq pages personnelles réelles pour en tirer des choix, pas des copies.

Théorie 1/2 : analyser pour décider

Le benchmark n'est pas un vol d'idées : c'est l'application de la grille du jour 14 à des pages qui jouent le même rôle que la vôtre. Cinq pages suffisent, choisies dans votre domaine : pour chacune, les six critères (hiérarchie, typographie, couleur, contraste, espacement, grille) plus deux questions propres au projet : que voit le visiteur sans scroll, et comment la page remplit son objectif. On note ce qui fonctionne (à réutiliser : un pattern, un ordre de sections), ce qui échoue (à éviter) et ce qui distingue (ce que personne ne fait et qui servirait votre visiteur). La synthèse tient en un tableau : une ligne par page, une colonne par critère.

Théorie 2/2 : les patterns des pages personnelles

Les pages personnelles réussies partagent des patrons : le hero qui répond en une phrase à « qui êtes-vous et pour qui travaillez-vous », les preuves (projets, clients, chiffres) immédiatement après, l'action unique répétée (le même bouton « me contacter » en haut et en bas), et la sobriété des sections — quatre à six, pas davantage. Le défaut le plus courant est le contraire du brief : une page qui veut parler à tout le monde finit sans ordre, avec douze sections. Le benchmark le montre mieux qu'aucun cours : comparez la page la plus claire et la plus confuse de vos cinq, et écrivez ce qui les sépare en une phrase.

Le défaut le plus courant d'une page personnelle est…

  1. vouloir parler à tout le monde : douze sections, aucun ordre
  2. une police trop petite
  3. un fond blanc
Réponse

L'absence de visiteur type : tout y est, rien ne prime. Le brief du jour 43 est le remède préventif.

Pratique (30 min)

  1. Choisissez cinq pages personnelles de personnes de votre domaine (cherchez « portfolio » + votre métier).
  2. Remplissez le tableau : six critères + « sans scroll » + « objectif ». Une ligne par page, des mots courts.
  3. Écrivez trois lignes de décisions : un pattern à réutiliser, une faute à éviter, une distinction à tenter.

Critère de réussite : le tableau rempli pour cinq pages, et trois décisions écrites qui nourriront le zoning du jour 46.

Tips agent : « Voici l'URL de cinq pages personnelles : […]. Pour chacune, dis ce qu'on voit sans scroll et comment elle remplit son objectif. » Piège : sans navigateur, un LLM ne voit rien et décrira d'après sa mémoire — donnez-lui des captures, pas des URL. Preuve : chaque observation cite un élément visible sur la capture.

Synthèse (10 min)

Trois lignes : la méthode du benchmark, les quatre patrons des pages personnelles, vos trois décisions. Puis récitez les patrons sans notes.

Jour 45 — Le contenu d'abord

Objectif : rédiger tous les textes de la page, avant tout dessin.

Théorie 1/2 : le design sert le contenu, pas l'inverse

Le jour 19 l'a posé : pas de lorem ipsum. Aujourd'hui, on écrit le vrai contenu complet — et c'est souvent la séance la plus dure du parcours, parce qu'écrire « qui je suis » en une phrase oblige à le décider. Le contenu d'une page personnelle : le titre (qui vous êtes, pour qui, en une phrase — « Développeuse web, j'aide les associations à… »), la présentation (trois à cinq phrases, première personne, faits avant adjectifs), les preuves (trois projets avec pour chacun : le problème, votre rôle, le résultat — deux phrases chacun), les liens (profil professionnel, code, courriel). Tout se relit à voix haute (jour 25) : ce qui sonne creux part.

La présentation d'un projet, sur une page personnelle, contient…

  1. la liste des technologies et rien d'autre
  2. le problème, votre rôle, le résultat
  3. une longue histoire personnelle
Réponse

Problème, rôle, résultat : c'est ce qu'un recruteur ou un client cherche. La liste des technologies est une preuve parmi d'autres, pas le récit.

Théorie 2/2 : écrire court est un choix de design

Chaque mot de moins est un réglage typographique de moins : un titre de cinq mots tient sur une ligne mobile, un projet de deux phrases tient dans une carte. Les repères honnêtes pour une page personnelle : titre ≤ 8 mots, présentation ≤ 60 mots, projet ≤ 40 mots, et une seule idée par phrase (jour 25). Écrivez les variantes courtes avant de dessiner : le libellé du bouton principal (« Me contacter »), le message de la section contact, les textes alternatifs des images (jour 24 — l'alt est du contenu, il se rédige ici). Ce fichier texte est la source de vérité du projet : la maquette ne contiendra rien qui n'y figure.

Le texte alternatif des images se rédige…

  1. ici, avec le reste du contenu — c'est du contenu
  2. au moment de coder
  3. jamais, c'est automatique
Réponse

L'alt est un contenu rédigé, pas une option technique : il se décide avec les textes de la page.

Pratique (30 min)

  1. Rédigez le fichier de contenu complet : titre, présentation, trois projets (problème/rôle/résultat), contact, libellés, alts.
  2. Appliquez les bornes : titre ≤ 8 mots, présentation ≤ 60, projets ≤ 40 chacun. Comptez.
  3. Lisez tout à voix haute ; coupez chaque phrase qui essouffle.
  4. Vérifiez contre le brief du jour 43 : chaque texte sert le visiteur type et l'objectif. Ce qui ne sert pas sort.

Critère de réussite : un fichier de contenu complet, dans les bornes, relu à voix haute, validé contre le brief.

Tips agent : terrain de prédilection du LLM : « Voici ma présentation : [collez]. Coupe-la à 60 mots sans perdre les faits ; liste ce que tu as retiré. » Piège : il lissera jusqu'au vide (« passionné par… »). Exigez : « garde chaque fait, retire chaque adjectif ». Preuve : les deux versions côte à côte, chaque fait de la vôtre survit dans la sienne.

Synthèse (10 min)

Trois lignes : les quatre blocs de contenu, les bornes, pourquoi le fichier texte est la source de vérité. Puis réécrivez votre titre sans notes.

Jour 46 — Arborescence et zoning

Objectif : ordonner les sections de la page et dessiner son zoning.

Théorie 1/2 : l'ordre est un argument

Sur une page unique, l'ordre des sections est l'argumentaire : ce que le visiteur lit en second dépend de ce qu'il a accepté en premier. L'ordre éprouvé pour une page personnelle : hero (qui, pour qui, action), preuves (les trois projets), présentation (une fois la crédibilité établie), contact (au moment où l'envie existe), pied de page. Le brief peut l'infléchir — un recruteur voudra peut-être l'expérience avant les projets — mais jamais au hasard : chaque section gagne sa place en répondant à la question que la précédente a laissée. Testez l'ordre à voix haute : « vous cherchez X → voici que je fais X → voici les preuves → voici qui je suis → écrivez-moi ». Si la phrase sonne juste, l'ordre l'est.

Dans l'ordre classique d'une page personnelle, la présentation détaillée vient…

  1. en premier, avant tout
  2. dans le pied de page
  3. après les preuves, une fois la crédibilité établie
Réponse

Après les preuves : on lit « qui je suis » quand on a déjà vu ce que je fais. Le hero porte la version en une phrase.

Théorie 2/2 : le zoning

Le zoning est le plan des sections : un rectangle par section, dans l'ordre vertical, avec pour chacune sa fonction et son contenu principal (« preuves : trois cartes projet »). Il est encore plus pauvre que le wireframe : aucun détail interne, juste la partition de la page. Son rôle est de faire apparaître l'équilibre : trois sections de preuve d'affilée fatiguent, une alternance de rythmes (pleine largeur / cartes / texte) respire. C'est aussi le document où se décide la longueur : chaque section doit mériter le scroll qu'elle coûte. Si une section ne sert ni l'objectif ni la compréhension, elle sort — c'est le brief qui arbitre.

Le zoning se distingue du wireframe en ce qu'il…

  1. est en couleur
  2. ne montre que la partition en sections, sans détail interne
  3. est dessiné dans Penpot
Réponse

Zoning : la partition et l'ordre des sections. Wireframe : le détail interne de chaque section. L'un décide le plan, l'autre les meubles.

Pratique (30 min)

  1. Listez vos sections candidates à partir du fichier de contenu du jour 45.
  2. Ordonnez-les selon l'argumentaire ; lisez l'ordre à voix haute au format « vous cherchez X → … ».
  3. Dessinez le zoning au carnet : un rectangle par section, fonction + contenu principal annotés, rythme des largeurs noté.
  4. Arbitrez : toute section qui ne sert ni l'objectif ni la compréhension sort, et le brief est cité à l'appui.

Critère de réussite : un zoning de quatre à six sections, ordre justifié à voix haute, chaque section reliée à l'objectif du brief.

Tips agent : « Voici mes sections et mon brief : [collez]. Critique l'ordre comme le ferait mon visiteur type : quelle question chaque section laisse-t-elle, la suivante y répond-elle ? » Piège : il proposera l'ordre standard même si votre brief l'infléchit. Preuve : chaque critique cite le brief, pas un usage général.

Synthèse (10 min)

Trois lignes : l'ordre comme argumentaire, la différence zoning/wireframe, l'arbitrage par le brief. Puis redessinez votre zoning sans notes.

Jour 47 — Wireframe mobile

Objectif : dessiner le wireframe mobile complet de la page, avec le vrai contenu.

Théorie 1/2 : le mobile fixe la structure

Le jour 30 a posé le mobile-first : on commence par l'écran étroit. Aujourd'hui c'est pour de vrai : un board 375px dans Penpot, toutes les sections du zoning, empilées dans l'ordre décidé. Les conventions du jour 18 s'appliquent (barres, rectangles croisés, boutons libellés), avec une différence : le contenu du jour 45 est réel, donc les barres de texte ont la longueur des vrais textes — comptez les mots, dessinez la ligne correspondante. Ce wireframe est le premier test de longueur : le titre de huit mots tient-il en deux lignes ? La carte projet respire-t-elle ? Ce qui déborde en gris débordera en couleurs : corrigez maintenant, ça coûte un trait.

Théorie 2/2 : les contrôles de basse fidélité

Avant de passer au desktop, quatre contrôles : la hiérarchie verticale (en une colonne, l'ordre est la hiérarchie — jour 20 : l'œil ne peut pas sauter de section), les cibles (chaque bouton fait 44px de haut, jour 24), le rythme (les espacements entre sections sont constants — votre space.12 ou space.16, jour 36) et la complétude (tout le contenu du fichier a une place, rien n'est ajouté). Le wireframe mobile est le document le plus important du projet : chaque décision qu'il fixe correctement est une décision que les maquettes n'auront pas à reprendre.

Pourquoi dessiner le mobile avant le desktop ?

  1. c'est plus rapide
  2. l'écran étroit force l'ordre et les priorités ; l'élargissement ajoutera au lieu de supprimer
  3. le desktop est dépassé
Réponse

Mobile-first : la contrainte décide des priorités. En une colonne, l'ordre vertical est la hiérarchie elle-même.

Pratique (30 min)

  1. Dans Penpot, board mobile 375×812 (plus haut : la page défile — étirez le board à la hauteur du contenu).
  2. Dessinez chaque section du zoning en gris : barres à la longueur des vrais textes, rectangles croisés pour les visuels, boutons libellés.
  3. Passez les quatre contrôles : hiérarchie, cibles 44px, rythme constant, complétude du contenu.
  4. Corrigez ce qui déborde ou ce qui manque, au crayon gris, pas en ajoutant du style.

Critère de réussite : le wireframe mobile complet, quatre contrôles passés et notés, zéro couleur.

Tips agent : décrivez votre wireframe section par section : « Vérifie ma complétude : voici mon fichier de contenu et la liste des blocs dessinés — qu'est-ce qui n'a pas de place ? » Piège : il proposera d'ajouter des sections. Exigez : « signale les manques, n'ajoute rien ». Preuve : chaque ligne du fichier de contenu pointe vers un bloc.

Synthèse (10 min)

Trois lignes : pourquoi le mobile d'abord, les quatre contrôles, pourquoi les barres à la vraie longueur. Puis redessinez le wireframe de mémoire, au carnet.

Jour 48 — Wireframe desktop

Objectif : décliner le wireframe sur la grille 12 colonnes, sans trahir la hiérarchie mobile.

Théorie 1/2 : enrichir, pas remplir

Le desktop offre la largeur ; le danger est de la remplir. La déclinaison reprend les patrons du jour 31 à l'envers : l'empilement devient colonnes (le texte du hero sur 7, le visuel sur 5 ; les trois projets en trois cartes de 4), la substitution se déplie (la navigation redevient une barre visible), mais la hiérarchie ne change pas : ce qui était premier en mobile reste premier en regard. La grille du jour 20 se pose d'abord (12 colonnes, gouttière 24, marges ~96) et le wireframe s'y aligne bloc par bloc. La largeur utile rappelle le jour 3 : les colonnes de texte restent bornées à ~65-75 caractères — un paragraphe sur 12 colonnes est une faute, même sur un écran de 27 pouces.

Sur desktop, un paragraphe de texte courant occupe au plus…

  1. les 12 colonnes
  2. la moitié, toujours
  3. la largeur qui garde 45-75 caractères par ligne — souvent 6 à 8 colonnes
Réponse

La longueur de ligne borne le texte, pas la grille : 6-8 colonnes selon la maquette. Douze colonnes de texte courant sont illisibles.

Théorie 2/2 : le premier écran

La partie visible sans scroll (la « ligne de flottaison ») porte un poids particulier : le benchmark du jour 44 l'a montré, elle doit contenir qui + pour qui + action. Sur desktop, le hero dispose d'espace horizontal : le texte à gauche, un visuel éventuel à droite — mais l'action principale reste dans le premier écran, sans exception. Méfiez-vous du hero plein écran à la mode : s'il occupe 100 % de la hauteur, le visiteur ne sait pas qu'il y a une suite. Gardez un fragment de la section suivante visible en bas : c'est la promesse du scroll.

Un hero qui occupe exactement 100 % de la hauteur d'écran risque…

  1. que le visiteur ignore qu'il y a une suite : garder un fragment visible promet le scroll
  2. d'être mal référencé
  3. rien, c'est la pratique standard
Réponse

Le plein écran exact ressemble à une page complète. Un fragment de la suite visible en bas dit « continuez ».

Pratique (30 min)

  1. Dans Penpot, board desktop 1440px + grille 12 colonnes (gouttière 24, marges 96).
  2. Déclinez chaque section du wireframe mobile sur la grille : colonnes, cartes, barre de navigation visible.
  3. Vérifiez : hiérarchie identique au mobile, textes bornés à 6-8 colonnes, action principale dans le premier écran, fragment de la section suivante visible.
  4. Squint test des deux wireframes côte à côte : même ordre de lecture.

Critère de réussite : le wireframe desktop aligné sur la grille, hiérarchie identique, premier écran complet (qui/pour qui/action).

Tips agent : « Voici mon wireframe mobile décrit bloc par bloc : […]. Propose la répartition en colonnes (sur 12) de chaque section pour le desktop, en justifiant par la hiérarchie. » Piège : il équilibrera tout en colonnes égales — l'asymétrie (7/5) sert la hiérarchie. Preuve : chaque proposition cite le rang du bloc dans la hiérarchie mobile.

Synthèse (10 min)

Trois lignes : enrichir sans remplir, la borne des colonnes de texte, la promesse du scroll. Puis redessinez la répartition en colonnes sans notes.

Jour 49 — Direction artistique 1/2 : le moodboard

Objectif : explorer deux à trois directions visuelles et les matérialiser en moodboard.

Théorie 1/2 : décider l'atmosphère avant les couleurs

La direction artistique est le choix d'une atmosphère au service du message : « sobre et précis », « chaleureux et artisanal », « audacieux et dense ». Elle se décide par mots d'abord : trois adjectifs tirés du brief (votre visiteur type doit s'y reconnaître, pas seulement vous), puis par un moodboard : une planche qui juxtapose des captures, des polices candidates, des couleurs, des textures — non pour copier, mais pour voir si les morceaux font système. Deux ou trois directions distinctes, pas dix : la variété forcée (une direction « classique », une « vivante ») clarifie le choix. Le moodboard n'est jamais montré tel quel au client ou au recruteur : c'est un outil de décision, pas un livrable.

Théorie 2/2 : les polices portent la moitié de l'atmosphère

Le jour 2 l'a montré : serif et sans-serif ne disent pas la même chose. Pour une page personnelle, deux stratégies suffisent : une seule famille sans-serif à plusieurs graisses (Inter, Source Sans — la voie sûre, la distinction vient des tailles et des graisses), ou deux familles contrastées (une serif pour les titres — Merriweather, Fraunces — une sans-serif pour le texte : plus de caractère, plus de risques). Les règles d'association : contraster les rôles, pas les familles proches (deux sans-serif voisines = faute de goût invisible mais sensible), et vérifier les deux candidats sur du texte réel français — les accents, les capitales accentuées et la ponctuation haute trahissent une police mal équipée.

Associer deux polices sans-serif proches (Inter + Roboto) est…

  1. une bonne pratique
  2. une faute : le contraste de rôle doit être net — soit une seule famille, soit des familles franchement différentes
  3. obligatoire sur le web
Réponse

Deux familles proches se ressemblent assez pour jurer, pas assez pour fusionner. Une famille à graisses, ou deux familles franchement contrastées.

Pratique (30 min)

  1. Tirez trois adjectifs de votre brief ; écrivez-les en tête du carnet.
  2. Constituez deux moodboards (deux pages Penpot ou deux pages du carnet) : pour chacun, une police candidate testée sur votre vrai titre (Google Fonts), une couleur d'accent candidate, deux captures d'inspiration.
  3. Écrivez sous chaque moodboard en quoi il sert les trois adjectifs — et ce qu'il risque.

Critère de réussite : deux directions distinctes, chacune reliée aux adjectifs du brief, polices testées sur le vrai titre français.

Tips agent : « Mon brief dit : [3 adjectifs]. Compare ces deux directions : [décrire polices + couleurs]. Laquelle sert le mieux chaque adjectif, et que risque chacune ? » Piège : il choisira la plus « tendance ». Exigez un arbitrage adjectif par adjectif. Preuve : chaque argument cite un adjectif du brief et une propriété visible (graisse, empattements, saturation).

Synthèse (10 min)

Trois lignes : adjectifs d'abord, moodboard ensuite ; les deux stratégies typographiques ; le test du texte français. Puis récitez vos trois adjectifs sans notes.

Jour 50 — Direction artistique 2/2 : palette et tokens

Objectif : figer la direction choisie en palette mesurée et en tokens nommés.

Théorie 1/2 : de l'atmosphère aux valeurs

Aujourd'hui, on choisit — et on prouve. La direction retenue devient : une palette 60-30-10 (neutre de fond, couleur de texte, accent, plus les sémantiques erreur/succès), une échelle typographique (base 16px, ratio choisi, jour 4) et les finitions (rayon des coins, style d'ombre, épaisseur des bordures — jour 13). Chaque valeur devient un token (jour 35), mesurée avant d'entrer : chaque couple texte/fond passe AA dans WebAIM (jour 23), la version sombre est dérivée dès maintenant (jour 33) — la découvrir au jour 54 coûterait une refonte. C'est la séance où le projet cesse d'être une intention : tout ce qui suit n'applique plus que des décisions prises.

Théorie 2/2 : la feuille de style du projet

Consignez tout au carnet en une page, la « feuille de style » : tokens primitifs et sémantiques (deux jeux : clair, sombre), échelle de texte avec les rôles (corps, petit, titre-section, hero), échelle d'espacement, rayon, ombre, durées (jour 39). Cette page est la promesse faite au futur vous-même : aucune valeur hors de cette feuille n'entrera dans la maquette. Quand la tentation viendra d'un gris « un peu différent », la réponse sera : on ajoute un token, ou on renonce. Les jours 51 à 54 dessineront vite, parce que tout est déjà décidé.

Pourquoi dériver la palette sombre dès le jour 50 ?

  1. parce qu'un contraste mesuré tard coûte une refonte : on mesure les deux thèmes avant de dessiner
  2. parce que le mode sombre est obligatoire
  3. pour impressionner au benchmark
Réponse

Mesurer tôt : chaque couple des deux thèmes passe AA avant la première maquette. Découvrir un échec au jour 54, c'est refaire quatre jours.

Pratique (30 min)

  1. Choisissez la direction (relisez les risques écrits au jour 49) ; écrivez au carnet pourquoi l'autre est écartée.
  2. Fixez la palette complète et mesurez chaque couple dans WebAIM, thème clair puis sombre. Corrigez par la luminosité.
  3. Écrivez la feuille de style : tous les tokens, les deux jeux de valeurs, les échelles, les finitions.
  4. Saisissez les tokens dans Penpot (jeux + thèmes, jour 36).

Critère de réussite : une feuille de style d'une page, tous couples AA dans les deux thèmes, tokens saisis dans Penpot.

Tips agent : « Voici ma palette claire et ses ratios mesurés : […]. Dérive la palette sombre (règles du jour 33) et liste les couples à re-mesurer. » Piège et preuve, inchangés depuis le jour 23 : ses ratios ne comptent pas, seul WebAIM compte. Faites-lui produire la liste, mesurez vous-même.

Synthèse (10 min)

Trois lignes : ce que la direction devient, pourquoi mesurer les deux thèmes maintenant, la promesse de la feuille de style. Puis réécrivez vos tokens principaux sans notes.

Jour 51 — Maquette 1/4 : en-tête et hero

Objectif : dessiner l'en-tête et le hero mobile, entièrement à partir des tokens.

Théorie 1/2 : le hero est une phrase dessinée

Le hero reprend les trois éléments du brief : qui, pour qui, action. Son dessin applique tout le module 1 : le titre au plus grand cran de l'échelle, interlignage resserré (1,1-1,2 — les grandes tailles en demandent moins, jour 3), la présentation-courte au corps, le bouton principal en accent, cible 44px, et l'espacement qui groupe : titre et bouton liés, l'ensemble détaché de la suite (jour 9). L'en-tête mobile : logo ou nom à gauche, hamburger libellé « Menu » à droite (jour 27). Chaque valeur vient des tokens du jour 50 — si une valeur manque, on ne l'invente pas : on ajoute le token à la feuille de style, puis on l'applique.

Théorie 2/2 : travailler en couches, toujours

L'ordre du jour 19 reste la loi : typographie d'abord (les styles de la bibliothèque appliqués aux vrais textes), couleur ensuite (les tokens), espacements (Flex layout si la section s'y prête, jour 21), détails à la fin. La tentation de « finir » le bouton avant d'avoir posé le titre est le chemin le plus court vers les retouches en boucle : chaque couche stabilise les dimensions de la suivante. À la fin de la séance, le premier écran mobile existe : squint test, puis protocole du jour 32 (étapes 2 et 8).

Si une valeur manque à la feuille de style en cours de dessin, on…

  1. l'invente au jugé
  2. ajoute le token à la feuille de style, puis on l'applique
  3. copie celle du voisin
Réponse

La feuille de style d'abord : une valeur improvisée est une divergence programmée entre les écrans et les thèmes.

Pratique (30 min)

  1. Sur un board mobile 375px, dessinez l'en-tête (nom + hamburger libellé) avec vos tokens.
  2. Dessinez le hero : vrai titre (grand cran, interlignage 1,15), présentation courte, bouton principal (composant du jour 17 si réutilisable).
  3. Appliquez les couches dans l'ordre ; toute valeur nouvelle passe d'abord par la feuille de style.
  4. Squint test + vérification des contrastes du couple bouton et du titre.

Critère de réussite : en-tête + hero mobile finis, 100 % tokens, squint test conforme, contrastes AA vérifiés.

Tips agent : « Voici mon hero décrit (tailles, tokens, espacements) : […]. Vérifie-le contre les règles : interlignage des grandes tailles, cible du bouton, groupement par proximité. » Piège : il flattera. Exigez : « cite chaque écart, ou dis explicitement qu'il n'y en a pas ». Preuve : chaque écart cité se retrouve dans la maquette.

Synthèse (10 min)

Trois lignes : les trois éléments du hero, l'ordre des couches, la règle du token manquant. Puis redessinez le hero au carnet sans notes.

Jour 52 — Maquette 2/4 : les sections

Objectif : dessiner les sections de contenu mobile : projets, présentation, contact.

Théorie 1/2 : la carte projet, molécule du jour

La carte projet est la molécule centrale de la page : visuel (ou initiales si vous n'en avez pas — un rectangle teinté d'accent désaturé fait très bien), titre du projet, deux phrases (problème/rôle/résultat, jour 45), lien ou bouton discret. Construisez-la en Flex layout (jour 21 : la carte grandit avec le texte), factorisez-la en composant (jour 17) : les trois projets sont trois copies du même composant, seuls les contenus changent. C'est la règle du jour 12 appliquée à votre propre page : trois cartes identiques en structure, la cohérence fait le professionnalisme. La section projets les empile (mobile) avec l'écart constant de votre échelle.

Théorie 2/2 : les sections de texte et le contact

La présentation est une section de texte : titre de section, paragraphe borné à la longueur de ligne confortable même sur mobile (le mobile à 375px y est naturellement, jour 3). La section contact répète l'action principale : même bouton, même libellé que le hero (jour 12 — « Enregistrer » ne devient pas « Valider »), plus les liens en texte souligné. Rythme vertical : entre sections, votre plus grand espacement ; à l'intérieur, les espacements liés (jour 9). Chaque section finie passe le même micro-protocole : squint test, contraste des nouveaux couples, cibles.

Le bouton de la section contact utilise…

  1. un libellé différent pour varier
  2. un style différent pour marquer la fin
  3. le même composant et le même libellé que le hero
Réponse

Même composant, même libellé : la répétition de l'action unique est une convention qui sert l'objectif du brief.

Pratique (30 min)

  1. Construisez la carte projet en Flex layout ; créez-en un composant ; placez trois copies avec les vrais contenus.
  2. Dessinez les sections présentation et contact (action principale répétée, liens soulignés).
  3. Réglez le rythme vertical : espacement inter-sections constant, espacements internes liés.
  4. Micro-protocole sur chaque section : squint, contrastes, cibles.

Critère de réussite : la page mobile est complète du haut au contact, trois cartes issues d'un composant, rythme constant, micro-protocole passé.

Tips agent : « Voici la structure de ma carte projet : […]. Liste tout ce qui doit rester identique entre les trois copies et ce qui peut varier. » Piège : il fera varier la structure « pour la personnalité ». Preuve : les trois copies diffèrent par le contenu seul — vérifiez en comparant les calques dans Penpot.

Synthèse (10 min)

Trois lignes : l'anatomie de la carte projet, pourquoi un composant, le rythme à deux niveaux. Puis redessinez la carte sans notes.

Jour 53 — Maquette 3/4 : pied de page et états

Objectif : terminer la page mobile : pied de page, états interactifs, cas limites.

Théorie 1/2 : le pied de page et les états

Le pied de page est le filet de sécurité : celui qui arrive en bas sans avoir cliqué y cherche le contact, les liens, les mentions. Il reprend l'action principale une dernière fois, les liens secondaires, et reste visuellement calme (fond légèrement distinct — un token surface, jour 34). Puis viennent les états : reprenez chaque élément interactif de la page et vérifiez que ses états existent (jour 13) : boutons (cinq), liens (survol, focus), champs s'il y en a. Dessinez la bande d'états à côté de la page : ce sera le premier livrable de la documentation (jour 38). Enfin, les cas limites du jour 19 : le titre de projet le plus long, la présentation la plus longue — la page doit les absorber sans casser.

Théorie 2/2 : la relecture « à froid »

Avant de décliner, une discipline : laissez la page reposer une nuit (ou une heure), puis relisez-la comme un visiteur. Trois questions, dans l'ordre : qu'est-ce que cette page me propose ? (le hero répond-il en cinq secondes ?) ; qu'est-ce qui me le prouve ? (les projets sont-ils crédibles et lisibles ?) ; que puis-je faire maintenant ? (l'action est-elle visible, répétée, libellée ?). Chaque « bof » devient un constat au format du jour 14 : mesurable, règle citée, correction proposée. C'est la dernière passe facile : après le desktop et le sombre, chaque correction coûtera trois fois plus cher.

On relit la maquette « à froid » avant de décliner parce que…

  1. chaque correction coûtera davantage une fois les autres largeurs et thèmes dessinés
  2. le mobile ne compte pas
  3. il faut remplir la séance
Réponse

Le coût d'une correction croît avec le nombre de déclinaisons : mobile seul aujourd'hui, ×4 demain. Relire maintenant est l'économie du projet.

Pratique (30 min)

  1. Dessinez le pied de page : action répétée, liens secondaires, fond surface.
  2. Dessinez la bande d'états de tous les interactifs de la page (boutons, liens) : repos, survol, focus, actif, désactivé.
  3. Testez les cas limites : titre de projet le plus long, présentation la plus longue, dans le composant.
  4. Fermez tout ; reprenez après une pause et notez trois constats au format complet ; corrigez ce qui est mesurable.

Critère de réussite : page mobile finie (pied compris), bande d'états dessinée, cas limites absorbés, trois constats de relecture traités.

Tips agent : « Voici ma page mobile décrite section par section : […]. Joue le visiteur qui découvre : réponds aux trois questions (quoi, preuve, action) en citant les éléments précis. » Piège : il comblera les trous par politesse. Exigez : « si une réponse n'est pas lisible dans ma description, dis "introuvable" ». Preuve : chaque réponse cite un élément existant.

Synthèse (10 min)

Trois lignes : le rôle du pied de page, la bande d'états, les trois questions à froid. Puis récitez les trois questions sans notes.

Jour 54 — Maquette 4/4 : desktop et mode sombre

Objectif : décliner la page complète en desktop, puis basculer les deux en sombre.

Théorie 1/2 : la déclinaison disciplinée

Le wireframe desktop du jour 48 a déjà pris les décisions de structure ; aujourd'hui on l'habille, section par section, avec les mêmes tokens et les mêmes composants. Le discipline tient en une phrase : aucune décision nouvelle — la hiérarchie, les textes, les couleurs, les états sont ceux du mobile ; seule la géométrie change (colonnes, grille, barre de navigation visible, cartes côte à côte). Si une valeur manque, même règle qu'au jour 51 : le token rejoint la feuille de style d'abord. La déclinaison bien faite est presque ennuyeuse : c'est la preuve que le système (tokens + composants) travaille à votre place.

Théorie 2/2 : la bascule de thème

Les tokens et leurs deux thèmes (jour 36, 50) font leur preuve aujourd'hui : basculez le thème dans Penpot et parcourez les deux largeurs en sombre. Ce qui casse est un oubli de token (une couleur tapée à la main quelque part) ou un asset non prévu (jour 34 : images, ombres). Corrigez à la source : la couleur devient un token, jamais une retouche locale. Terminez par la re-mesure des couples clés en sombre (texte courant, accent, focus) — mesurés au jour 50, confirmés aujourd'hui sur le dessin réel.

Une couleur casse à la bascule sombre. La correction est…

  1. retoucher cette occurrence à la main
  2. la remplacer par le token de rôle : la correction se fait une fois, à la source
  3. supprimer le mode sombre
Réponse

À la source : une retouche locale recrée la divergence que les tokens existent pour empêcher.

Pratique (30 min)

  1. Dessinez la page desktop complète sur sa grille, section par section, tokens et composants du mobile.
  2. Basculez les deux largeurs en thème sombre ; traquez chaque cassure et corrigez-la à la source (token).
  3. Re-mesurez en sombre : texte courant, bouton, focus — WebAIM, trois ratios notés.
  4. Protocole du jour 32 sur les quatre versions (étapes 2, 3, 4, 8) : une ligne par étape au carnet.

Critère de réussite : quatre versions (mobile/desktop × clair/sombre) cohérentes, zéro couleur hors tokens, ratios sombres confirmés.

Tips agent : « Voici la liste de mes tokens et leurs deux valeurs : […]. Détecte les incohérences entre thèmes (un rôle sans valeur sombre, deux rôles avec la même valeur). » Piège : il signalera des « risques » imaginaires. Exigez : « uniquement les manques et les doublons ». Preuve : chaque ligne signalée se vérifie dans la feuille de style.

Synthèse (10 min)

Trois lignes : aucune décision nouvelle, la bascule comme test des tokens, la correction à la source. Puis racontez la déclinaison sans notes.

Jour 55 — L'audit d'accessibilité du projet

Objectif : passer le projet complet au crible d'accessibilité et corriger ce qui échoue.

Théorie 1/2 : la check-list du projet

L'audit reprend, dans l'ordre, tout ce que les jours 22 à 24 ont posé : contrastes (chaque couple texte/fond des deux thèmes mesuré — pas ceux de la feuille de style, ceux du dessin réel), typographie (corps ≥ 16px, interlignage 1,4-1,6, lignes ≤ 75 caractères), cibles (tout interactif ≥ 24px, 44 visé), focus (un indicateur dessiné pour chaque interactif, 3:1), couleur seule (liens soulignés, erreurs iconées + texte, test niveaux de gris), contenus (alts rédigés, libellés d'action, pas de référence à la position ou à la couleur), mouvement (version réduite prévue pour chaque animation). La check-list du A11Y Project sert de référence croisée.

Théorie 2/2 : corriger sans casser

Chaque échec se traite au format du jour 28 : constat mesuré, règle, correction — à la source (token, composant), jamais à l'occurrence. Et chaque correction repasse le contrôle qu'elle risque de casser : assombrir un accent change son contraste sur trois fonds, pas un. L'audit se termine par le tableau de conformité au carnet : une ligne par contrôle, OK ou corrigé + preuve. Ce tableau est la partie la plus précieuse du dossier : c'est elle qu'un recruteur ou un client peut vérifier sans vous croire sur parole.

Un accent assombri pour passer AA sur le fond doit être re-mesuré…

  1. seulement sur ce fond
  2. jamais, le calcul suffit
  3. sur tous les fonds où il porte du texte
Réponse

Sur tous les fonds : la correction à la source change le token, donc chaque couple qui l'emploie.

Pratique (30 min)

  1. Écrivez la check-list au carnet, sept familles, une ligne par contrôle.
  2. Passez chaque contrôle sur les quatre versions de la page ; mesurez, ne supposez pas.
  3. Corrigez chaque échec à la source et re-mesurez les couples touchés.
  4. Terminez le tableau de conformité : chaque ligne OK ou corrigé + preuve chiffrée.

Critère de réussite : le tableau de conformité complet, sept familles, chaque échec corrigé à la source avec sa preuve.

Tips agent : « Voici mon tableau de conformité : […]. Liste les contrôles WCAG 2.2 AA qu'une page comme celle-ci devrait aussi passer et qui n'y figurent pas. » Piège : il listera des critères de code (ARIA) hors de portée d'une maquette. Exigez : « uniquement ce qui se vérifie sur un dessin ». Preuve : chaque ajout est cité avec son numéro de critère, vérifié dans le quickref du W3C.

Synthèse (10 min)

Trois lignes : les sept familles, la correction à la source, le tableau comme preuve. Puis récitez les sept familles sans notes.

Jour 56 — Le prototype du projet

Objectif : relier la page en prototype partageable, avec son état réduit de mouvement documenté.

Théorie 1/2 : prototyper une page unique

Une page personnelle se prototype autrement qu'une application : le parcours est vertical. Les liens à créer : l'en-tête vers ses ancres (le bouton « Contact » descend à la section), le menu mobile qui s'ouvre (une superposition — overlay — depuis le hamburger), les liens sortants (simulés), et le retour en haut. Dans Penpot, l'onglet Prototype relie les boards ; l'overlay se règle en « open overlay » positionné manuellement. Gardez le prototype léger : il doit permettre à un testeur de parcourir la page et d'ouvrir le menu, pas simuler un site entier. Créez le lien de partage en fin de séance — c'est l'objet du test du jour 57.

Théorie 2/2 : documenter le mouvement

Le prototype Penpot ne portera pas vos animations finales : elles se documentent. Reprenez la fiche du jour 39 : pour chaque micro-interaction de la page (survols, ouverture du menu, retour en haut), écrivez au carnet la ligne complète : déclencheur, changement, durée, courbe, version prefers-reduced-motion. Trois à cinq lignes suffisent — une page personnelle sobre n'a pas davantage. Ce document rejoint le dossier : le développeur qui réalisera la page n'aura rien à deviner, et vous, vous aurez prouvé que le mouvement était pensé, pas subi.

Dans le dossier, chaque micro-interaction est documentée avec…

  1. déclencheur, changement, durée, courbe, version reduced-motion
  2. une vidéo
  3. rien, les animations se jugent à l'œil
Réponse

La ligne complète du jour 39 : ce qui n'est pas écrit sera improvisé — et le reduced-motion est le premier sacrifié.

Pratique (30 min)

  1. Dans Penpot, reliez : ancres de navigation, hamburger → overlay du menu, retour en haut.
  2. Testez le parcours complet en View mode, mobile et desktop.
  3. Créez le lien de partage et vérifiez-le dans une fenêtre de navigation privée (sans compte).
  4. Rédigez la fiche mouvement : une ligne complète par micro-interaction.

Critère de réussite : un prototype partageable sans impasse, menu fonctionnel, et la fiche mouvement au carnet.

Tips agent : « Voici les liens de mon prototype : [liste]. Construis le graphe et signale toute impasse ou tout élément interactif sans destination. » Piège : comme au jour 40, il supposera des liens évidents. Exigez la liste déclarée seule. Preuve : chaque impasse signalée se reproduit en View mode.

Synthèse (10 min)

Trois lignes : ce que le prototype d'une page unique doit permettre, la fiche mouvement, le lien testé hors compte. Puis récitez les liens obligatoires sans notes.

Jour 57 — La critique

Objectif : soumettre le projet à une critique externe et à l'auto-critique, et trier les retours.

Théorie 1/2 : le test avec un humain

La méthode du jour 41, cette fois pour de vrai : deux tâches (« qui est cette personne et que propose-t-elle ? », « contactez-la »), le lien du prototype, le silence, l'observation. Ajoutez le test des cinq secondes sur le hero : page montrée cinq secondes, cachée, « que retenez-vous ? ». Si la réponse n'est pas votre phrase du brief, le hero ne travaille pas. Un testeur suffit aujourd'hui ; deux valent mieux. Tout se consigne au format comportement / suggestion / goût — et le brief du jour 43 arbitre : un retour qui sert le visiteur type pèse, un retour de goût personnel s'archive sans culpabilité.

Théorie 2/2 : l'auto-critique au tableau

En parallèle, l'auto-critique : la grille à six critères du jour 14 appliquée à vos quatre versions, plus la relecture du dossier (brief → contenu → zoning → wireframes → maquettes → tokens → audit → prototype) à la recherche des ruptures de chaîne — une décision du brief absente de la maquette, un token orphelin, un engagement chiffré non vérifié. La critique honnête se conclut par une liste d'itérations priorisées : usage d'abord (ce qui a bloqué le testeur), mesures ensuite (un contraste, une cible), confort à la fin (un rythme, un alignement). C'est la liste de travail du jour 58, pas un inventaire de regrets.

Face à un retour « je n'aime pas le bleu », le brief sert à…

  1. changer le bleu immédiatement
  2. arbitrer : le goût personnel s'archive, seuls pèsent les retours qui servent le visiteur type
  3. supprimer le brief
Réponse

Le brief arbitre : il a décidé du visiteur et de l'objectif ; le goût d'un testeur ne les change pas.

Pratique (30 min)

  1. Menez le test humain (deux tâches + cinq secondes). Consignez chaque observation.
  2. Menez l'auto-critique : six critères sur les quatre versions, relecture de la chaîne complète.
  3. Fusionnez en une liste d'itérations priorisée : usage, mesures, confort. Chaque ligne au format constat + règle + proposition.

Critère de réussite : un test mené et consigné, l'auto-critique écrite, une liste d'itérations priorisée prête pour demain.

Tips agent : « Voici mon projet décrit (brief, sections, tokens, audit) : […]. Joue trois testeurs distincts — un recruteur pressé, un pair du métier, un novice — et rapporte ce que chacun voit en cinq secondes et où il hésite. » Piège : trois avis simulés ne valent pas un humain ; le LLM prépare et complète le test, il ne le remplace pas. Preuve : les hésitations citées désignent des éléments réels de la maquette.

Synthèse (10 min)

Trois lignes : le protocole de test, l'arbitrage par le brief, l'ordre de priorité des itérations. Puis récitez les trois priorités sans notes.

Jour 58 — Itérer

Objectif : appliquer les itérations priorisées, mesurer chaque correction, figer le résultat.

Théorie 1/2 : itérer, c'est corriger à la source

La liste du jour 57 s'exécute dans son ordre — usage, mesures, confort — et chaque correction suit la règle du jour 54 : à la source (token, composant, contenu), jamais à l'occurrence ; puis propagée aux quatre versions ; puis re-mesurée (le contrôle qu'elle sert et ceux qu'elle touche, jour 55). Une itération se clôt quand sa preuve existe : « la testeuse n'a pas vu le bouton contact → bouton doublé dans la section projets → re-test : trouvé en 4 secondes ». Sans preuve, une correction est une espérance. Si une correction en révèle une autre, elle rejoint la liste à sa priorité — on ne « profite pas » d'être dans le fichier pour réparer au passage sans le noter.

Théorie 2/2 : savoir figer

Le dernier risque du projet est l'itération sans fin : il y aura toujours un gris plus juste. Le critère de gel est écrit depuis le jour 43 : les engagements chiffrés du brief. Tous tenus + liste d'itérations « usage » et « mesures » à zéro = le projet est fini. Ce qui reste dans la colonne « confort » rejoint une liste « plus tard » explicite — c'est la version polie du non-objectif : pas « oublié », mais « pas maintenant, écrit ici ». Figer n'est pas renoncer : c'est rendre le projet montrable, et la montre fait partie du métier.

Le projet se fige quand…

  1. on n'a plus d'idées
  2. le délai est passé
  3. les engagements du brief sont tenus et les itérations usage/mesures soldées, preuves à l'appui
Réponse

Le brief décide de la fin : engagements tenus, priorités hautes soldées et prouvées. Le reste rejoint la liste « plus tard », écrite.

Pratique (30 min)

  1. Exécutez la liste d'itérations dans l'ordre : correction à la source, propagation aux quatre versions, re-mesure.
  2. Pour chaque itération « usage », re-testez le point précis (vous-même à froid, ou le testeur s'il est disponible).
  3. Clôturez : vérifiez chaque engagement du brief un par un, écrivez la liste « plus tard ».
  4. Exportez les captures finales (quatre versions) depuis Penpot — elles rejoignent le dossier.

Critère de réussite : chaque itération soldée a sa preuve, les engagements du brief sont tous cochés, les exports finaux sont faits.

Tips agent : « Voici ma liste d'itérations et mes corrections : […]. Vérifie que chaque correction a sa preuve (mesure ou re-test) et signale celles qui n'en ont pas. » Piège : il déclarera la preuve « implicite ». Exigez : « une preuve est un chiffre ou un test, sinon la ligne n'est pas soldée ». Preuve : chaque ligne soldée cite son chiffre.

Synthèse (10 min)

Trois lignes : correction à la source + propagation + re-mesure, la preuve d'une itération, le critère de gel. Puis récitez le critère de gel sans notes.

Jour 59 — Check-list finale et bilan

Objectif : boucler le dossier du projet, vérifier la check-list du parcours, décider de la suite.

Théorie 1/2 : le dossier final

Le livrable que vous montrez n'est pas une image : c'est un dossier en huit pièces — le brief (J43), le benchmark (J44), le contenu (J45), le zoning et les wireframes (J46-48), la feuille de style et les tokens (J50), les maquettes en quatre versions (J51-54), le tableau de conformité (J55) et le prototype avec sa fiche mouvement (J56), clos par le journal des itérations (J57-58). Ce dossier dit exactement ce qu'un employeur ou un client veut savoir : cette personne décide avec des règles, mesure ce qu'elle affirme, et finit ce qu'elle commence. Publiez-le : le lien de partage Penpot, les captures, le carnet nettoyé — une page de votre futur site, justement.

Théorie 2/2 : la suite

Le parcours finit, la pratique continue — le design ne s'entretient que par l'exercice. Trois voies : refondre une page réelle par mois avec la méthode du jour 28 (le carnet garde vos avant/après) ; lire les systèmes publics (DSFR, GOV.UK, Carbon) comme des cours continus — chaque fiche de composant y est une leçon ; et coder vos maquettes : HTML/CSS est le prolongement naturel de ce parcours (les tokens deviennent des variables, les composants des éléments), le parcours de développement web du site prend le relais. Gardez le rythme : une heure régulière vaut mieux qu'une semaine héroïque — vous le savez, vous l'avez fait cinquante-neuf fois.

Le dossier final prouve avant tout que…

  1. vous décidez avec des règles, mesurez ce que vous affirmez et finissez ce que vous commencez
  2. vous savez utiliser Penpot
  3. vous avez bon goût
Réponse

L'outil et le goût ne se prouvent pas ; la méthode, si. C'est elle que le dossier documente, pièce par pièce.

Pratique (30 min)

  1. Assemblez le dossier : les huit pièces, dans l'ordre, chacune à jour.
  2. Passez la check-list de la page d'accueil du parcours, item par item. Pour chaque case cochée, citez la preuve (séance, mesure, livrable).
  3. Écrivez le bilan au carnet : ce que vous faites sans notes aujourd'hui et que vous ne saviez pas faire au jour 1 ; les deux points que vous retravaillerez en premier.
  4. Publiez ou partagez le dossier à une personne de votre choix.

Critère de réussite : le dossier complet, la check-list passée avec ses preuves, et le bilan écrit. Le parcours est fini quand le dossier est montrable.

Tips agent : « Voici mon dossier en huit pièces : [résumés]. Joue le recruteur : qu'est-ce qui te convainc, qu'est-ce qui te laisse sur ta faim ? » Piège : il jugera le résumé, pas les pièces — ses remarques sont des pistes de relecture, pas un verdict. Preuve : chaque réserve citée se vérifie dans la pièce concernée.

Synthèse (10 min)

Trois lignes : les huit pièces, ce que le dossier prouve, votre voie de suite. Puis — dernière fois — récitez la méthode complète sans notes : regarder, mesurer, décider, prouver.

Utile ? Dites-nous ce qu'il faut mesurer ensuite.

Commentaires

Ni compte ni traceur : un commentaire est lu par un humain avant d'apparaître.