Phase 5 — Maquettes (Wireframes & Mockups)
Principe clé
« Une maquette n'est pas une décoration, c'est un outil de test. »
Corriger une maquette prend 5 minutes. Corriger du code peut prendre des heures. La maquette permet de détecter les problèmes avant d'écrire du code.
Pourquoi maquetter ?
| Avantage | Bénéfice concret |
|---|---|
| Économie | Détecter les erreurs avant le code |
| Communication | Visualiser et partager les idées |
| Validation | Tester avec de vrais utilisateurs |
| Itération rapide | Modifier en minutes, pas en heures |
| Documentation | Référence claire pour le développement |
Les 3 niveaux de fidélité
Une maquette n'a pas besoin d'être « finie » pour être utile. Plus la fidélité est basse, plus on itère vite.
| Croquis | Wireframe | Mockup | |
|---|---|---|---|
| Fidélité | Très basse | Basse | Haute |
| Couleurs | Non | Niveaux de gris | Oui |
| Images | Cadres vides | Placeholders | Réelles |
| Typographie | Manuscrite | Basique | Finale |
| Outil | Papier, tableau | Figma, Excalidraw | Figma, Penpot |
| Quand l'utiliser | Brainstorming, exploration | Valider la structure | Valider le design final |
| Temps par page | 5-15 min | 30 min - 2h | 2-8h |
Ne sautez pas les étapes
Un mockup trop tôt fige les idées. Commencez toujours par explorer avec des croquis sur papier.
Conventions de représentation
Le wireframe est un langage visuel partagé. Ces symboles sont compris par tous les designers — pas besoin de réinventer la roue.
| Élément | Représentation |
|---|---|
| Image / photo | Rectangle avec un X diagonal |
| Titre (H1) | Ligne épaisse ou texte écrit (« TITRE ») |
| Sous-titre | Ligne moyenne sous le titre |
| Paragraphe | Plusieurs traits horizontaux fins (le dernier plus court) |
| Bouton | Rectangle (souvent arrondi) avec bordure marquée + label |
| Champ formulaire | Rectangle fin + texte placeholder à l'intérieur |
| Icône | Petit cercle ou carré, parfois pictogramme simple |
| Avatar | Cercle (avec silhouette si besoin) |
| Vidéo | Rectangle + triangle « play » centré |
| Carte / Map | Rectangle + lignes de rue + pin |
| Élément actif / sélectionné | Fond plus foncé que les autres |
Le bon réflexe
Si tu hésites sur un symbole, écris simplement le mot dans un cadre (ex: [VIDÉO], [CARTE]). Mieux vaut une étiquette claire qu'un dessin ambigu.
Maquetter pour le responsive
Selon Luke Wroblewski (Mobile First, 2011), commencez par le mobile : ses contraintes forcent à hiérarchiser l'essentiel.
| Breakpoint | Largeur | Contenu prioritaire |
|---|---|---|
| Mobile | 320-480px | L'essentiel uniquement |
| Tablette | 768-1024px | Plus d'espace, navigation visible |
| Desktop | 1024px+ | Expérience complète |
La maquette comme outil de test
Pas besoin de code pour tester l'expérience utilisateur. Deux méthodes simples et efficaces :
Test des 5 secondes
- Montrez la maquette pendant 5 secondes
- Cachez-la
- Demandez : « De quoi parle cette page ? »
Si la personne ne peut pas répondre, votre hiérarchie visuelle doit être améliorée. → Guide complet (NN/g)
Test du premier clic
- Donnez une tâche : « Vous voulez commander une pizza Margherita »
- Demandez : « Où cliqueriez-vous en premier ? »
Si le premier clic est correct, l'utilisateur a 87% de chances de réussir la tâche (étude Bob Bailey).
Outils recommandés
| Outil | Usage | Prix | Lien |
|---|---|---|---|
| Papier & crayon | Croquis, brainstorming | Gratuit | — |
| Sneakpeekit | Gabarits papier imprimables (mobile, tablette, desktop) | Gratuit | sneakpeekit.com |
| Excalidraw | Croquis numériques | Gratuit | excalidraw.com |
| Figma | Wireframe + mockup | Gratuit / Pro | figma.com |
| Penpot | Wireframe + mockup (open source, souverain) | Gratuit | penpot.app |
| Whimsical | Wireframe rapide | Gratuit | whimsical.com |
Esquisser sur papier — la méthode efficace
Pas besoin de savoir dessiner. La technique : imprimer un gabarit (cadre smartphone, tablette ou desktop), puis remplir l'intérieur au stylo. La règle aide à tracer les blocs, les post-it servent à annoter les interactions.
Pour un projet scolaire
Téléchargez les gabarits gratuits de Sneakpeekit, imprimez 5-10 feuilles, puis dessinez à plusieurs autour d'une table. Vous explorerez 3 fois plus de pistes en 30 minutes qu'en ouvrant Figma directement.
Bonnes pratiques
| ✅ À faire | ❌ À éviter |
|---|---|
| Commencer par le mobile | Sauter directement au mockup haute fidélité |
| Utiliser une grille (8px ou 12 colonnes) | Maquetter toutes les pages avant de tester |
| Annoter les interactions (« Au clic → fiche produit ») | Ignorer les retours utilisateurs |
| Tester avec 3-5 vrais utilisateurs | Lorem Ipsum partout (utilisez du contenu réaliste) |
| Itérer rapidement | Négliger la version mobile |
Exercice — Maquetter une page d'accueil
Exercice — Maquettez votre page d'accueil en 3 niveaux de fidélité.
Remplir ma fiche Maquettes| Étape | Durée | Action |
|---|---|---|
| 1. Croquis | 15 min | Dessinez 3 versions différentes sur papier |
| 2. Choix | 5 min | Faites valider une version par un camarade |
| 3. Wireframe | 1h | Reproduisez en mobile et desktop dans Figma |
| 4. Test | 15 min | 3 personnes × test des 5 secondes |
| 5. Itération | 30 min | Corrigez les problèmes identifiés |
Pour aller plus loin
- 📖 Don't Make Me Think — Steve Krug — Le classique de l'ergonomie web
- 🎨 Figma — Tutoriel officiel wireframing
- 🎯 Nielsen Norman Group — Prototyping — Articles et études
- ✏️ The Hand-Drawn Style — Excalidraw — Pourquoi le style « papier » favorise le feedback honnête
- 📄 Sneakpeekit — Sketchsheets — Gabarits PDF imprimables pour maquetter à la main
- 📐 Wikipedia — Website wireframe — Conventions visuelles et historique
- 📚 Sketching User Experiences: The Workbook (Buxton & al.) — La référence sur les conventions de croquis UX
Checklist de la Phase 5
- Croquis réalisés pour explorer plusieurs pistes
- Wireframes des pages principales en mobile et desktop
- Tests utilisateurs effectués (5 secondes, premier clic)
- Retours intégrés dans une nouvelle itération
- Interactions annotées (clic → quoi)
- Maquettes validées avant passage au code
Prochaine étape
Les maquettes sont validées. Passez à la Phase 6 — Accessibilité pour vous assurer que votre site sera utilisable par tous.