Wireframe, maquette et prototype : maquetter une application

Un wireframe est le squelette d'un écran, en noir et blanc, qui montre la disposition des informations et des actions ; une maquette (mockup) est l'image fidèle de l'écran final, avec ses couleurs, ses polices et ses vrais contenus ; un prototype est une version interactive, qu'on peut cliquer pour tester un parcours avant de le programmer. Ce chapitre explique quand utiliser chacun, comment décrire l'enchaînement des écrans, comment maquetter et prototyper dans Figma (ou Penpot), et comment un design system garde toutes les maquettes cohérentes.

Du croquis au prototype : les niveaux de fidélité

On parle de fidélité pour dire à quel point une représentation ressemble au produit final. Plus elle est basse, plus elle est rapide à faire et à jeter ; plus elle est haute, plus elle permet de valider des détails. On monte en fidélité au fur et à mesure que les décisions se stabilisent.

Les mots varient d'une équipe à l'autre : certains appellent « maquette » tout ce qui précède le code, d'autres disent « wireframe haute fidélité ». Retiens la logique, qui, elle, ne varie pas : le wireframe montre la structure, la maquette montre l'apparence, le prototype montre le fonctionnement. Un prototype peut d'ailleurs être de basse fidélité : des wireframes reliés entre eux suffisent pour tester un parcours.

Commencer sur papier

Les premières idées se dessinent mieux au crayon qu'à la souris : on n'est pas tenté d'aligner des pixels, et on jette sans regret. Une technique simple consiste à plier une feuille A4 en huit cases et à dessiner huit variantes d'un écran en huit minutes, une par minute. La première est souvent la plus banale ; la cinquième est souvent la meilleure.

Le papier sert aussi à tester : un prototype papier est un ensemble d'écrans dessinés que tu fais défiler devant un utilisateur. Il « clique » avec le doigt, tu poses l'écran suivant. En dix minutes avec Mathis et un téléphone dessiné sur une fiche bristol, Lina a découvert qu'il cherchait le filtre par date en haut de l'écran, pas dans un menu.

L'arborescence et l'enchaînement des écrans

Avant de dessiner les écrans un par un, fais-en la liste et décris comment on passe de l'un à l'autre. L'arborescence (ou plan de site, sitemap) donne l'organisation des écrans ; le diagramme d'enchaînement (flow) montre le chemin suivi pour une tâche. Donne à chaque écran un identifiant court (ECR1 pour « écran 1 », ECR2…) : les exigences, les maquettes et les tests y renverront.

Prêt'Matos
├── ECR1  Catalogue                      (accueil des salariés)
│   └── ECR2  Fiche d'un matériel
│       └── ECR3  Réserver               (formulaire)
│           └── ECR4  Confirmation
├── ECR5  Mes réservations
│   └── ECR6  Annuler une réservation    (fenêtre de confirmation)
└── Logistique                           (visible du seul groupe Logistique)
    ├── ECR7  Aujourd'hui                (sorties et retours prévus)
    ├── ECR8  Enregistrer une sortie
    ├── ECR9  Enregistrer un retour
    ├── ECR10 Prêts en retard
    └── ECR11 Gérer le catalogue

Réserver un matériel, chemin nominal :
ECR1 Catalogue ──filtre « Disponible le 12/03 »──▶ ECR1 (liste filtrée)
     ──clic sur une carte──▶ ECR2 Fiche ──« Réserver »──▶ ECR3 Formulaire
     ──« Confirmer la réservation »──▶ ECR4 Confirmation ──« Voir mes réservations »──▶ ECR5

Chemins d'erreur :
ECR3 ──dates en conflit──▶ ECR3, message sous les dates, saisie conservée
ECR3 ──API injoignable──▶ ECR3, message en haut, bouton « Réessayer »

Ce travail fait souvent apparaître des écrans oubliés (la fenêtre de confirmation d'annulation, la page affichée quand on n'a aucune réservation) et des chemins trop longs. Il complète le diagramme de cas d'utilisation, qui dit quoi, alors que l'enchaînement des écrans dit par où.

Maquetter et prototyper avec Figma

Figma est l'outil de maquettage le plus utilisé en entreprise. Il fonctionne dans le navigateur ou en application de bureau, permet de travailler à plusieurs sur le même fichier et de partager un prototype par un simple lien. Son interface existe en français depuis octobre 2025 ; ce cours donne les noms anglais des fonctions, que tu retrouveras dans la plupart des tutoriels.

Le coût. Le plan gratuit (Starter) suffit pour découvrir l'outil, avec un nombre de fichiers limité. Figma propose surtout un plan Education gratuit : les étudiants de l'enseignement supérieur, ce qui est ton cas en BTS, obtiennent le plan Professional pour un an, renouvelable tant qu'ils restent étudiants. La demande se fait sur figma.com/education avec l'adresse électronique fournie par ton établissement (une adresse personnelle est refusée : si tu n'en as pas, demande-la à ton établissement) ; un service tiers, SheerID, vérifie ton inscription sur justificatif, un certificat de scolarité de l'année en cours par exemple, puis tu crées l'équipe Education qui accueillera tes fichiers. Les conditions changent régulièrement : vérifie-les sur le site de Figma avant de t'y fier.

Les notions à connaître :

Pour l'écran « Réserver » de Prêt'Matos, la démarche ressemble à ceci.

1. Crée une frame de téléphone (360 × 800, par exemple) : l'écran le plus contraint d'abord.
2. Pose les composants du design system : l'en-tête, deux champs de date, un champ « Motif », le bouton principal. Chaque champ est un composant avec ses variantes « normal », « focus » et « erreur ».
3. Range-les dans une frame en Auto layout vertical, avec un espacement de 16 pixels : si tu ajoutes un champ, les autres se décalent tout seuls.
4. Duplique l'écran pour ses autres états : formulaire en erreur (dates en conflit), envoi en cours, confirmation.
5. Dans l'onglet Prototype, relie le bouton « Réserver » de la fiche au formulaire, le bouton « Confirmer » à l'écran de confirmation.
6. Lance la présentation, ouvre le lien sur ton téléphone et fais l'essai toi-même, puis avec un utilisateur.

Figma propose aussi des fonctions d'intelligence artificielle (Figma Make, par exemple, incluse dans le plan Education pour les étudiants du supérieur) qui génèrent un prototype à partir d'une description. Elles produisent vite un point de départ, mais pas une interface conçue pour tes utilisateurs : le résultat doit passer par les mêmes grilles et les mêmes tests que le reste. Le cours IA générative détaille ce qu'on peut leur confier.

D'autres outils

Pour l'E6, l'outil importe peu : une maquette sur papier photographiée, un wireframe dans draw.io ou un prototype Figma prouvent tous que tu as conçu l'interface avant de la coder. Ce qui compte, c'est qu'elle corresponde au besoin et que tu saches justifier ses choix.

Mobile d'abord, grille et responsive

Commence par le plus petit écran. Sur 360 pixels de large, tu es obligé de hiérarchiser : ce qui ne tient pas n'était peut-être pas indispensable (critère de densité informationnelle). Agrandir ensuite pour la tablette et le bureau est facile ; faire l'inverse oblige à tout repenser. C'est l'approche mobile first que le cours HTML et CSS applique en responsive design.

Aligne tout sur une grille. Les équipes choisissent une unité d'espacement (4 ou 8 pixels) et n'utilisent que ses multiples : 4, 8, 16, 24, 32. Les écarts réguliers rendent l'écran calme et lisible, et les groupes visibles (loi de proximité).

Prévois les points de rupture. Pour chaque écran, décide ce qui change quand la largeur augmente : le catalogue passe d'une colonne de cartes sur téléphone à trois colonnes sur ordinateur ; le planning de la logistique, illisible sur un téléphone, devient une liste par jour.

Le design system et les jetons de design

Un design system (chapitre 3) rassemble les règles visuelles et les composants d'une organisation. Sa base est faite de jetons de design (design tokens) : des valeurs nommées, définies une fois et utilisées partout, dans la maquette comme dans le code.

Dans le code, les jetons deviennent des variables CSS, et les composants ne connaissent que les jetons :

:root {
  --couleur-primaire: #1d6b43;
  --couleur-texte: #1f2937;
  --couleur-erreur: #b91c1c;
  --couleur-bordure: #6b7280;
  --espace-2: 8px;
  --espace-3: 16px;
  --rayon: 6px;
}

.bouton-principal {
  padding: var(--espace-2) var(--espace-3);
  border: none;
  border-radius: var(--rayon);
  background-color: var(--couleur-primaire);
  color: #ffffff;
}

Changer le vert de l'entreprise revient à changer une ligne. Et chaque composant du design system décrit ses états : normal, survolé, focus clavier, désactivé, en erreur, en chargement. Un bouton dont l'état « focus » n'est pas dessiné finira sans contour visible dans le code, et sera inutilisable au clavier (chapitre 7).

Du vrai contenu, pas du lorem ipsum

Une maquette remplie de faux texte latin (lorem ipsum) et de noms courts cache les vrais problèmes. Mets-y les vraies données, et les cas difficiles :

• un nom long (« Marie-Bénédicte Delacroix-Fontaine ») et une désignation de matériel longue (« Ordinateur portable 14 pouces avec station d'accueil ») : le texte tient-il dans la carte ?
• une liste vide (« Vous n'avez aucune réservation. ») : que voit-on, et quelle action propose-t-on ?
• une liste très longue : pagination, recherche, filtre ?
• une erreur, un chargement lent, un succès.

Ce sont les états de l'écran, que la spécification devra décrire (chapitre 9). Les dessiner dans la maquette évite de les découvrir pendant la recette.

Faire valider une maquette

Une maquette sert à décider avant de coder. Présente-la à la Product Owner et à quelques utilisateurs en commençant par la tâche (« voici comment Mathis réserve le vidéoprojecteur »), pas par l'écran. Note les remarques dans l'outil, numérote les versions (« Réserver v3, 14 février »), et fais valider explicitement la version retenue : c'est elle qui sert de référence pendant le développement et à la recette. Le référentiel du BTS le rappelle : la maquette doit respecter les fonctionnalités exprimées dans le cahier des charges.

Exercices

Chemin nominal :
ECR7 Aujourd'hui ──« Enregistrer un retour »──▶ ECR9 Retour
     ──scan de l'étiquette──▶ ECR9 (matériel et emprunteur affichés, date du jour pré-remplie)
     ──choix de l'état « Bon état » + « Enregistrer le retour »──▶ ECR7, message « Retour de PC-07 enregistré »

Chemins d'erreur :
ECR9 ──étiquette illisible──▶ ECR9, recherche par numéro d'inventaire ou par nom
ECR9 ──matériel non sorti──▶ ECR9, message « PC-07 n'est pas en prêt : vérifiez l'étiquette »

┌──────────────────────────────┐
│ ☰  Prêt'Matos                │
│ Mes réservations             │  ← titre de la page
│                              │
│ EN COURS                     │
│ ┌──────────────────────────┐ │
│ │ Portable PC-07           │ │
│ │ du 12/03 au 18/03        │ │
│ │ [À rendre le 18/03]      │ │  ← badge, texte + couleur
│ └──────────────────────────┘ │
│ À VENIR                      │
│ ┌──────────────────────────┐ │
│ │ Vidéoprojecteur VP-01    │ │
│ │ du 24/03 au 26/03        │ │
│ │ Retrait : stock, bât. B, │ │
│ │ de 8 h à 17 h            │ │
│ │      [ Annuler ]         │ │  ← bouton secondaire
│ └──────────────────────────┘ │
│                              │
│ [ Réserver un matériel ]     │  ← action principale
└──────────────────────────────┘

État vide :
│ Vous n'avez aucune réservation.      │
│ [ Voir le catalogue ]                │