Former au web aujourd’hui, c’est aussi former à la conception d’interfaces : clarté, cohérence, accessibilité, performance et preuves par le test. Voici la stack UI 2025 — ce qu’il faut enseigner, montrer en démo, et ce qui relève du workflow pro avancé.
Conception & prototypage — du concept à l’interaction
Essentiel (à enseigner)
- Figma ✨ ❤️ — wireframes → maquettes → prototypes, collaboration temps réel, multi-OS.
- Excalidraw — tableau blanc libre pour cadrer rapidement un écran ou un flux.
Utile en démo
- Penpot.app — alternative open source/auto-hébergeable (souveraineté/RGPD).
Workflow pro avancé
- (optionnel) Framer / ProtoPie — micro-interactions et logique avancée pour projets finaux.
Exercice : refaites un parcours d’inscription (3 écrans) en wireframe Excalidraw → maquette Figma → prototype cliquable.
Design systems & bibliothèques — les fondations visuelles
Essentiel (à enseigner)
- Figma + Community UI Kits (Material, Fluent, iOS) — cohérence, espacements (8pt), états.
- Radix UI Colors — palettes accessibles (WCAG).
- Typescale — hiérarchie typo, export CSS.
Utile en démo
- Zeroheight (freemium) — documentation de design system.
Workflow pro avancé
- Tokens Studio (Figma) → design tokens ; export vers code (Style Dictionary/Specify).
Exercice : créez un mini-design system (couleurs, typo, boutons, champs) puis implémentez en CSS/Tailwind.
Accessibilité UI — non négociable
Essentiel (à enseigner)
- Stark (plugin Figma) ❤️ — contrastes, simulations, corrections dans la maquette.
- WAVE (extension) — audit visuel d’une page en ligne.
Utile en démo
- axe DevTools — audit technique dans Chrome DevTools.
Message clé : l’a11y ne s’ajoute pas à la fin — elle se conçoit dès le premier composant.
Tests UI & validation utilisateur — prouver avant de coder
Essentiel (à enseigner)
- Maze ✨ ❤️ — test non modéré d’un prototype Figma (heatmaps, replays, taux de réussite). Gratuit (3 projets).
Utile en démo
- Hotjar (freemium) — heatmaps sur projets déjà en ligne.
Workflow pro avancé
- Lookback / UserTesting — sessions modérées (coûteux, à montrer sans imposer).
Atelier : Prototype Figma → test Maze avec 5 utilisateurs → itérations guidées par les données.
Compléments utiles en formation
Essentiel (à enseigner)
- ColorHunt — palettes prêtes à l’emploi (vérifier contrastes).
- Diagrams.net — flows, architecture d’interface, états.
Utile en démo
- Haikei — fonds/illustrations SVG pour landing pages.
- Zeroheight — doc DS (fin de parcours).
À ignorer/Reporter en initiation
- Zeplin, Abstract — handoff/versions (pertinent en agence, pas en classe).
- Adobe Creative Cloud — orienté graphisme, coûteux, hors fondamentaux UI web.
- Framer (si non orienté motion) — garde-le pour un module avancé.
Grille express — quoi enseigner vs démo vs avancé
- Enseigner : Figma, Excalidraw, Radix Colors, Typescale, Stark, WAVE, Maze, Diagrams.net.
- Démo : Penpot, Hotjar, Zeroheight, axe DevTools, Haikei.
- Avancé (pro) : ProtoPie/Framer, Tokens Studio → Style Dictionary, Lookback/UserTesting.
Check-list d’évaluation (UI débutant→intermédiaire)
- Clarté visuelle : titres/typographie hiérarchisés, grille 8pt respectée.
- Cohérence : composants & états (hover/focus/disabled) documentés.
- Accessibilité : contrastes OK, focus visible, labels/formulaires corrects.
- Testabilité : scénario Maze rédigé, KPI (taux de réussite, temps de tâche).
- Handoff : styles/tokens identifiés, texte de micro-copie propre.
Conclusion — UI = clarté, cohérence, empathie (vérifiées)
Le bon formateur UI ne montre pas “un joli bouton” : il installe une méthode.
Avec Figma, Stark, Maze, Excalidraw et Radix/Typescale, tu couvres 80 % des besoins pédagogiques modernes — sans bruit.
« Une interface parfaite est celle que l’utilisateur ne remarque pas… parce qu’elle fonctionne naturellement. »
FAQ
Penpot peut-il remplacer Figma ?
Oui pour les fondamentaux (wireframe/maquette/proto), surtout si la souveraineté/RGPD est prioritaire.
Dois-je enseigner Zeplin/Abstract ?
Non en initiation : garde le temps pour design system, a11y et tests ; montre Zeplin/Abstract en démo.
Quand introduire le motion/ProtoPie ?
En fin de parcours sur un projet où l’animation sert l’usage (onboarding, feedback, états).
