Anaïs Sparesotto
UX · DesignDébutant≈ 2h · 7 chapitres

Wireframe et maquettes

Concevoir une interface avant de la coder : low-fi, hiérarchie visuelle, accessibilité dès le wireframe. Moins de refactos, plus de clarté.

À la fin du cours, tu sais

  • Savoir quand wireframer et à quel niveau de fidélité
  • Distinguer wireframe, mockup et prototype
  • Construire une hiérarchie visuelle claire
  • Intégrer l'accessibilité dès la conception
  • Choisir le bon outil entre Figma, Penpot et Excalidraw

Prérequis

  • Pas besoin d'être designer, ce cours est pour les dev
  • Avoir un projet ou une page à concevoir aide pour la pratique

Chapitre 1

Pourquoi wireframer avant de coder

Sauter l'étape design coûte cher : refactos, allers-retours, écrans bricolés. Wireframer, c'est penser avant de taper.

Ce que tu gagnes à wireframer

  • Clarifier l'intention produit avant la première ligne de code
  • Détecter les manques fonctionnels tôt (états vides, erreurs, chargement)
  • Aligner dev, design et client sur une base visuelle commune
  • Réduire drastiquement le coût du changement
  • Tester rapidement plusieurs pistes sans s'attacher au pixel

Le coût d'un changement

Modifier un rectangle dans Figma prend 30 secondes. Modifier un composant React déjà branché, testé, déployé, prend des heures. Plus tôt tu valides, moins tu paies.

Quand wireframer (et quand sauter)

Pour un mini composant interne ou un fix mineur : direct au code. Pour une nouvelle page, un parcours, une feature majeure : wireframe d'abord, toujours.

Chapitre 2

Low-fidelity vs high-fidelity

Tous les wireframes ne se valent pas. Le bon niveau de fidélité dépend de ce que tu veux valider.

Low-fidelity : valider la structure

  • Croquis papier ou Excalidraw
  • Formes grises, pas de couleurs, pas d'images réelles
  • Focus : où vont les blocs, dans quel ordre, quelle hiérarchie
  • Génère du feedback sur la structure, pas sur l'esthétique

Mid-fidelity : préciser le contenu

  • Blocs numériques propres dans Figma ou Penpot
  • Hiérarchie claire, mais sans couleurs ni typo finale
  • Vrais textes (pas de Lorem ipsum), faux mais réalistes

High-fidelity (mockup) : préciser le visuel

  • Couleurs, typo, images, icônes, espacements finaux
  • Représente fidèlement le rendu final
  • Sert de référence pour le développement

Le piège du high-fi trop tôt

Passer en high-fi avant d'avoir validé la structure, c'est se retrouver à débattre des couleurs alors que le parcours utilisateur est cassé. Règle d'or : valide la structure en low-fi, monte en fidélité ensuite.

Chapitre 3

Wireframe, mockup, prototype

Trois mots souvent confondus, trois rôles distincts. Savoir lequel tu produis te fait gagner du temps.

  • Wireframe : plan statique de la structure (où vont les blocs)
  • Mockup : rendu visuel fidèle (à quoi ça ressemble)
  • Prototype : version cliquable qui simule les interactions (comment ça marche)

Un prototype Figma branche les écrans entre eux pour tester un parcours réel : clic sur un bouton → écran suivant, ouverture d'une modale, animation. C'est l'outil pour tester un parcours auprès d'utilisateur·ices avant de coder.

Ce qu'on livre au dev

  • Mockup haute fidélité
  • Prototype navigable pour comprendre les interactions
  • Specs : tokens (couleurs, typo, espacements), états (default, hover, focus, disabled, error)
  • Comportements responsive (que devient chaque bloc en mobile)

Chapitre 4

Hiérarchie visuelle, grille, espacement

L'œil suit ce que tu mets en avant. Si tout crie, plus rien ne s'entend.

Hiérarchie visuelle

Quatre leviers pour guider la lecture : taille, poids, contraste, position. Un titre est gros et en haut, l'action principale est colorée et bien placée, le corps reste discret.

Une seule action primaire par écran

Le bouton qui doit être cliqué en priorité est seul à avoir le style primaire (plein, couleur forte). Les autres actions sont secondaires (outline) ou tertiaires (lien texte). Si tu as 3 boutons pleins de la même couleur, l'utilisateur·ice ne sait pas où cliquer.

Grille et gouttières

  • Desktop : grille 12 colonnes, c'est la norme (divisible par 2, 3, 4, 6)
  • Mobile : grille 4 colonnes
  • Gouttières régulières (16 à 24 px desktop, 16 px mobile)
  • Marges latérales identiques sur toute la page

Échelle d'espacement

Choisis une échelle et tiens-t'y : 4, 8, 16, 24, 32, 48, 64. Bannit les margin-top: 13px aléatoires. Ton design respire mieux, ton code est plus cohérent (Tailwind, design tokens).

Loi de proximité

Les éléments qui vont ensemble doivent être visuellement groupés. Un label et son input sont collés. Deux champs distincts ont plus d'espace entre eux. Ça paraît évident, c'est pourtant ce qui rend une UI lisible.

Chapitre 5

Typographie et composants réutilisables

Une typo cohérente et des composants nommés évitent la dette de design qui ralentit toute l'équipe.

Typographie

  • Maximum 2 familles : une pour les titres, une pour le texte courant
  • Échelle typographique claire : 12, 14, 16, 20, 24, 32, 48 px par exemple
  • Hauteur de ligne (line-height) : 1.4 à 1.6 pour le texte courant
  • Poids : 400 (regular), 500 ou 600 (medium), 700 (bold). Pas plus.

Penser composants

Un bouton, un champ, une carte, une alerte, une modale : chacun est un composant nommé, déclinable en états (default, hover, focus, disabled, error).

Le lien Figma → React

Une bibliothèque de composants Figma bien faite se transpose directement en composants React, Vue ou autre. Le designer et le dev parlent le même langage : le composant Button avec sa variante secondary, état disabled.

Chapitre 6

Accessibilité dès la conception

L'accessibilité ne se rajoute pas à la fin. Elle se décide dans le wireframe. Trois ou quatre réflexes suffisent à éviter 80 % des problèmes.

Contraste de couleur

  • Texte courant : contraste minimum 4.5:1 avec le fond (WCAG AA)
  • Gros texte (24 px+ ou 18 px+ bold) : 3:1 minimum
  • Texte AAA : 7:1 (objectif haut)
  • Plugin Figma Stark pour vérifier en temps réel

Cibles tactiles

Minimum 44x44 px pour toute zone cliquable sur mobile. C'est la taille moyenne d'un pouce. En dessous, l'utilisateur·ice rate sa cible.

Ordre de lecture et navigation clavier

Pense au parcours clavier dès le wireframe : Tab passe d'élément focusable en élément focusable, dans un ordre logique (gauche-droite, haut-bas). Si ton design ne suit pas cet ordre visuellement, ce sera difficile à réparer en code.

Ne pas transmettre par la couleur seule

Un message d'erreur en rouge ? OK, mais ajoute une icône et un texte. Les daltoniens et les personnes en mode dégradé visuel ne verront pas la couleur. Couleur + icône + texte : tu couvres tout le monde.

États souvent oubliés

Focus visible, état vide (aucun résultat), état d'erreur, état de chargement (skeleton). Si tu ne les dessines pas dans tes wireframes, le dev les bricole dans son coin. Mieux vaut les penser en amont.

Chapitre 7

Outils 2025 et hand-off au dev

Le marché s'est stabilisé. Trois outils couvrent 95 % des besoins. Et un bon hand-off détermine la fidélité du résultat.

Les outils

  • Figma : référence du marché, gratuit en solo, collaboratif, plugins à foison
  • Penpot : alternative open source, auto-hébergeable, fichiers ouverts (.penpot)
  • Excalidraw : croquis rapides en réunion ou en solo, parfait pour le low-fi

Plugins Figma utiles

  • Stark : contraste de couleur, simulation daltonisme
  • Iconify : milliers d'icônes prêtes à l'emploi
  • Content Reel : du faux contenu réaliste (noms, avatars, dates)
  • Variables2CSS : exporter les variables en CSS/Tailwind

Hand-off au dev

  • Composants nommés, avec leurs variantes et leurs états
  • Annoter les interactions (clic, hover, transitions, durée)
  • Lister les breakpoints (mobile, tablette, desktop) et le comportement responsive
  • Fournir les tokens (couleurs, espacements, typo) dans un format exploitable
  • Garder le fichier Figma comme source de vérité, le mettre à jour quand le code évolue

🛠️ Exercice optionnel

Wireframe d'une page profil utilisateur

Tu dois concevoir une page profil utilisateur pour une app SaaS. Le but n'est pas d'arriver à un pixel-perfect, mais de passer par toutes les étapes : low-fi, mid-fi, vérification accessibilité, déclinaison mobile.

Ta mission

  1. Low-fi sur papier ou Excalidraw : 10 minutes max, structure brute (avatar, infos, actions, contenu).
  2. Identifie l'action primaire (par exemple "Modifier le profil") et place-la avec un poids visuel.
  3. Mid-fi dans Figma ou Penpot : grille 12 colonnes, échelle d'espacement 8 px, sans couleurs finales.
  4. Décline en mobile : que devient la hiérarchie ? Quelle action reste primaire ?
  5. Vérifie : contraste du texte (plugin Stark), taille des cibles tactiles (44x44 minimum), ordre de lecture.
  6. Documente : 3 composants nommés (avatar, bouton primaire, carte info) avec leurs variantes.

Livrable : 2 écrans (desktop et mobile) + une page de composants.

Tu bloques ? Des indices, à dévoiler quand tu en as besoin.

Indice 1

Indice masqué.

Indice 2

Indice masqué.

Indice 3

Indice masqué.

✅ QCM de fin de cours

Teste tes acquis

10 questions, plusieurs réponses parfois possibles. Coche tout ce qui te semble juste, puis valide pour voir ton score et les explications.

  1. 1

    Pourquoi wireframer avant de coder ?

  2. 2

    Un wireframe low-fidelity, c'est :

  3. 3

    Quelle est la différence entre wireframe et mockup ?

  4. 4

    Quel outil est le plus adapté à des croquis rapides en réunion ?

  5. 5

    Quel est le contraste minimum recommandé pour le texte courant (WCAG AA) ?

  6. 6

    Quelle est la taille minimale d'une cible tactile sur mobile ?

  7. 7

    Combien d'actions primaires par écran ?

  8. 8

    Quelle alternative open source à Figma ?

  9. 9

    Un prototype Figma sert à :

  10. 10

    Une grille desktop standard utilise généralement :

Tu peux laisser des questions sans réponse, elles compteront comme fausses.

Tu veux ce cours pour ton équipe ?

Je peux adapter et animer ce cours pour tes formateur·ices ou tes apprenant·es, en présentiel ou en distanciel. Parlons-en pendant l'audit gratuit.

Réserver un audit gratuit →