Parcours web design : 59 jours pour des interfaces belles et utilisables
Cinquante-neuf séances d'une heure, en quatre modules, pour apprendre à concevoir des interfaces web à la fois belles et utilisables. Aucune expérience requise : le premier module n'ouvre aucun logiciel, il apprend à regarder. À la fin, vous aurez dessiné de bout en bout une page personnelle complète, critiquée et corrigée.
Le design web, en deux mots
Le design d'interface n'est pas de la décoration : c'est l'art de rendre un service compréhensible et agréable à utiliser. Une page bien dessinée guide l'œil vers ce qui compte, se lit sans effort, se parcourt au clavier, reste lisible au soleil comme en mode sombre. Ces qualités ne sont pas un don : elles reposent sur un petit nombre de règles — typographie, couleur, espacement, hiérarchie, contraste — que ce parcours enseigne une par une, avec des exemples pris sur de vrais sites.
La méthode, la même chaque jour
| Temps | Phase | Ce que vous faites |
|---|---|---|
| 20 min | Théorie | Le cours de la séance (sur la page du module), prise de notes dans le carnet. |
| 30 min | Pratique | Analyser un vrai site, ou dessiner dans Penpot : un seul exercice, un critère de réussite explicite. |
| 10 min | Synthèse | Trois lignes dans le carnet, puis refaire l'exercice du jour sans notes. |
La synthèse est la phase qu'on saute, et c'est celle qui fait retenir : refaire de mémoire, c'est s'obliger à retrouver l'information, et c'est ce qui l'ancre. En design, c'est aussi ce qui transforme une règle lue en réflexe.
Les outils, tous gratuits (à installer au jour 1)
- Penpot, l'outil de design libre et open source : il tourne dans le navigateur, un compte gratuit sur design.penpot.app suffit pour tout le parcours. (Figma a un niveau gratuit, mais Penpot est libre et suffit à tout ce que nous ferons.)
- Les outils de développement de votre navigateur (F12) : inspecter les tailles, les couleurs et les contrastes de n'importe quel site, et le mode appareil pour simuler un mobile.
- Le vérificateur de contraste de WebAIM, gratuit en ligne, pour mesurer un ratio de contraste.
- Google Fonts, catalogue de polices libres (Inter, Merriweather, Source Sans…).
- Un carnet numérique : Obsidian, ou un simple dossier de fichiers texte, un fichier par jour.
Aucun logiciel payant, aucun abonnement. Un écran correctement réglé suffit ; une tablette n'est pas nécessaire.
La règle d'or
Mieux vaut une heure tous les jours que sept heures le dimanche. Si vous ratez un jour, vous ne rattrapez pas le lendemain : vous décalez tout d'un jour, et vous rognez sur le module 4. Les séances sont numérotées de J1 à J59, sans dates : seules comptent l'ordre et la régularité.
Apprendre avec une IA, sans la laisser dessiner à votre place
Ce parcours se suit avec une IA comme répétiteur, de préférence un modèle qui tourne chez vous (voir votre premier modèle local) : vos captures et vos maquettes ne quittent pas votre machine. Elle vous fait gagner du temps si elle vous fait travailler, et vous en fait perdre si elle travaille à votre place.
- Demandez-lui de critiquer votre palette, de vous interroger sur les règles du jour, de relire vos textes. Pas de dessiner l'écran à votre place : le jour où vous présenterez votre projet, c'est votre œil qui parlera.
- Ne recopiez jamais une valeur qu'elle donne sans la vérifier. Un modèle peut annoncer avec aplomb un ratio de contraste faux : le calcul se refait dans le vérificateur WebAIM, pas dans sa tête.
- Ne lui collez ni donnée personnelle, ni capture contenant des informations privées.
Chaque séance se termine par un encadré « Tips agent » : deux à quatre lignes sur ce qu'un agent LLM (Claude Code, Kimi Code, OpenFox) peut faire pour cette tâche une fois que vous l'avez faite à la main — le prompt type, le piège à éviter et la preuve à exiger. On apprend à la main, et au passage on apprend à déléguer sans se faire piéger.
Les quatre modules
Chaque module est une page : les séances s'y suivent, chacune avec son objectif, son cours, sa pratique pas à pas et sa synthèse. Cochez un module quand toutes ses séances sont faites ; votre progression reste dans votre navigateur.
- Voir comme un designer (J1–J14) : typographie, couleur, espacement, hiérarchie, grilles — en analysant chaque jour un vrai site.
- Les outils et les règles (J15–J28) : Penpot pris en main, wireframes, composants, et l'accessibilité WCAG en langage clair.
- Responsive et systèmes (J29–J42) : mobile-first, mode sombre, design tokens, design systems, micro-interactions et prototypage.
- Le projet (J43–J59) : une page personnelle complète, du brief à la maquette aboutie, critiquée puis itérée.
Ressources gratuites recommandées
- Le guide officiel de Penpot (modules 2 et 3)
- Le référentiel WCAG 2.2 filtrable du W3C (modules 2 et 3 ; la norme, pas un résumé)
- Laws of UX, les grands principes de psychologie du design, chacun expliqué en une page
- La check-list du A11Y Project (modules 2 et 4)
- La référence CSS de MDN, pour comprendre ce que vos choix deviennent dans le navigateur
- Deux design systems publics à consulter comme des livres ouverts : le Système de Design de l'État français (DSFR) et le GOV.UK Design System
La check-list de fin de parcours
- Je nomme ce qui cloche sur une page : hiérarchie, contraste, espacement, alignement.
- Je construis une palette en 60-30-10 et je vérifie ses contrastes AA.
- Je compose une échelle typographique et je sais ce qu'est une longueur de ligne confortable.
- Je dessine dans Penpot : composants, variantes, grille, prototype cliquable.
- Je décline un écran en mobile, en desktop et en mode sombre.
- Je nomme mes couleurs et mes espacements en design tokens.
- Je parcours une interface au clavier et je vérifie le focus visible.
- J'ai un projet complet à montrer, avec les itérations qui l'ont amélioré.
Une case qui ne se coche pas n'est pas un échec : c'est la liste de ce que vous retravaillerez en premier, carnet ouvert.
- 1Web design module 1 : voir comme un designerJours 1 à 14 : typographie, couleur, espacement, hiérarchie visuelle et grilles, appris en analysant chaque jour un vrai site, une heure par jour.
- 2Web design module 2 : les outils et les règlesJours 15 à 28 : Penpot pris en main, wireframes, grilles et composants, puis l'accessibilité WCAG, le langage clair, les formulaires et la navigation.
- 3Web design module 3 : responsive, tokens et systèmesJours 29 à 42 : unités relatives et mobile-first, mode sombre, design tokens, design systems, micro-interactions, et le prototypage d'une petite application écran par écran.
- 4Web design module 4 : le projet — une page personnelle complèteJours 43 à 59 : concevoir une page personnelle de bout en bout — brief, benchmark, contenu, wireframes, direction artistique, maquettes, audit, prototype, critique, itération.