Phase 5 — Maquettes (Wireframes & Mockups)
Principe clé
« Une maquette n'est pas une décoration, c'est un outil de test. »
La maquette permet de détecter les problèmes avant d'écrire du code. Corriger une maquette prend 5 minutes. Corriger du code peut prendre des heures.
Pourquoi maquetter ?
Les avantages
| Avantage | Explication |
|---|---|
| Économie de temps | Détecter les erreurs avant le code |
| Communication | Visualiser les idées pour les partager |
| Validation | Tester avec les utilisateurs |
| Itération rapide | Modifier facilement |
| Documentation | Référence pour le développement |
Sans maquette vs avec maquette
Les niveaux de fidélité
1. Croquis (Sketch)
Fidélité : Très basse
Dessin rapide à la main ou au tableau blanc.
┌─────────────────────────────┐
│ LOGO [___] 🔍 │
├─────────────────────────────┤
│ │
│ ┌─────┐ ┌─────┐ ┌─────┐│
│ │ │ │ │ │ ││
│ │ IMG │ │ IMG │ │ IMG ││
│ │ │ │ │ │ ││
│ └─────┘ └─────┘ └─────┘│
│ Produit Produit Produit│
│ │
│ ┌────────────────────────┐│
│ │ VOIR PLUS → ││
│ └────────────────────────┘│
└─────────────────────────────┘Quand l'utiliser :
- Brainstorming initial
- Explorer plusieurs idées rapidement
- Discussion en équipe
Temps : 5-15 minutes par page
2. Wireframe (Basse fidélité)
Fidélité : Basse
Structure de la page sans couleurs ni détails visuels.
┌──────────────────────────────────────────────────────┐
│ ▓▓▓▓▓▓ [____] [Connexion] │
│ LOGO │
├──────────────────────────────────────────────────────┤
│ Accueil Produits À propos Contact │
├──────────────────────────────────────────────────────┤
│ │
│ ┌────────────────────────────────────────────────┐ │
│ │ │ │
│ │ BANNIÈRE PRINCIPALE │ │
│ │ │ │
│ │ Titre accrocheur ici │ │
│ │ Sous-titre descriptif │ │
│ │ │ │
│ │ [ Découvrir ] │ │
│ │ │ │
│ └────────────────────────────────────────────────┘ │
│ │
│ Nos produits phares │
│ ───────────────────── │
│ │
│ ┌──────────┐ ┌──────────┐ ┌──────────┐ │
│ │ │ │ │ │ │ │
│ │ [IMG] │ │ [IMG] │ │ [IMG] │ │
│ │ │ │ │ │ │ │
│ ├──────────┤ ├──────────┤ ├──────────┤ │
│ │ Produit 1│ │ Produit 2│ │ Produit 3│ │
│ │ 29.90 € │ │ 39.90 € │ │ 49.90 € │ │
│ │ [Ajouter]│ │ [Ajouter]│ │ [Ajouter]│ │
│ └──────────┘ └──────────┘ └──────────┘ │
│ │
└──────────────────────────────────────────────────────┘Quand l'utiliser :
- Définir la structure de l'information
- Valider l'architecture avec les parties prenantes
- Premiers tests utilisateurs
Temps : 30 min - 2h par page
3. Mockup (Haute fidélité)
Fidélité : Haute
Représentation visuelle proche du produit final, avec couleurs, typographie et images.
Quand l'utiliser :
- Design final avant développement
- Tests utilisateurs avancés
- Documentation pour les développeurs
- Présentation au client
Temps : 2-8h par page
Comparaison des niveaux
| Aspect | Croquis | Wireframe | Mockup |
|---|---|---|---|
| Fidélité | Très basse | Basse | Haute |
| Couleurs | Non | Non (gris) | Oui |
| Images | Placeholder | Placeholder | Réelles ou simulées |
| Typographie | Quelconque | Basique | Finale |
| Interactivité | Non | Possible | Possible |
| Temps | Minutes | Heures | Heures/Jours |
| Outil | Papier | Outil simple | Outil pro |
Quand passer d'un niveau à l'autre ?
| Passage | Condition |
|---|---|
| Croquis → Wireframe | L'idée générale est validée |
| Wireframe → Mockup | L'architecture est approuvée |
| Mockup → Code | Le design est finalisé |
Ne sautez pas les étapes !
Un mockup trop tôt fige les idées. Commencez toujours par explorer avec des croquis.
La maquette comme outil de test
Ce que vous pouvez tester
| Aspect | Question à se poser |
|---|---|
| Navigation | L'utilisateur trouve-t-il les pages ? |
| Hiérarchie | L'information importante est-elle visible ? |
| Parcours | Le chemin vers l'action est-il clair ? |
| Compréhension | Les labels sont-ils compris ? |
| Charge cognitive | Y a-t-il trop d'informations ? |
Méthode du test des 5 secondes
- Montrez la maquette pendant 5 secondes
- Cachez-la
- Demandez : « De quoi parle cette page ? »
- Analysez les réponses
Si l'utilisateur ne peut pas répondre : votre hiérarchie visuelle doit être améliorée.
Test du premier clic
- Donnez une tâche : « Vous voulez acheter ce produit »
- Demandez : « Où cliqueriez-vous en premier ? »
- Observez si le premier clic est correct
Statistique importante : Si le premier clic est correct, l'utilisateur a 87% de chances de réussir la tâche (étude Usability.gov).
Maquetter pour le responsive
Mobile First
Selon Luke Wroblewski (Mobile First), commencez par la version mobile :
- Mobile (320-480px) — L'essentiel uniquement
- Tablette (768-1024px) — Plus d'espace
- Desktop (1024px+) — Expérience complète
Exemple d'adaptation
Mobile
┌────────────────┐
│ ≡ LOGO 🛒 │
├────────────────┤
│ [HERO] │
│ Titre │
│ [Bouton] │
├────────────────┤
│ ┌──────────┐ │
│ │ Produit 1│ │
│ └──────────┘ │
│ ┌──────────┐ │
│ │ Produit 2│ │
│ └──────────┘ │
└────────────────┘Desktop
┌─────────────────────────────────────────────────────────┐
│ LOGO Accueil Produits Contact [___] 🔍 🛒 │
├─────────────────────────────────────────────────────────┤
│ │
│ ┌───────────────────────────────────────────────────┐ │
│ │ HERO │ │
│ │ Titre accrocheur │ │
│ │ [Bouton] │ │
│ └───────────────────────────────────────────────────┘ │
│ │
│ ┌──────────┐ ┌──────────┐ ┌──────────┐ ┌────────┐ │
│ │ Produit 1│ │ Produit 2│ │ Produit 3│ │Produit4│ │
│ └──────────┘ └──────────┘ └──────────┘ └────────┘ │
│ │
└─────────────────────────────────────────────────────────┘Outils de maquettage
Outils gratuits
| Outil | Type | Idéal pour | URL |
|---|---|---|---|
| Excalidraw | Croquis | Brainstorming | excalidraw.com |
| Figma (gratuit) | Wireframe/Mockup | Projets complets | figma.com |
| Penpot | Open source | Alternative à Figma | penpot.app |
| Whimsical | Wireframe | Wireframes rapides | whimsical.com |
| draw.io | Diagrammes | Schémas | draw.io |
Outils payants
| Outil | Spécialité | URL |
|---|---|---|
| Figma (pro) | Design complet | figma.com |
| Sketch | Design Mac | sketch.com |
| Adobe XD | Design Adobe | adobe.com/xd |
Papier et crayon
Ne sous-estimez pas le papier :
- ✅ Gratuit
- ✅ Rapide
- ✅ Pas de courbe d'apprentissage
- ✅ Favorise la créativité
- ✅ Idéal pour le brainstorming
Conseil
Pour un projet scolaire, commencez toujours sur papier avant d'ouvrir un logiciel.
Exercice pratique
Maquetter une page d'accueil
Croquis (15 min)
- Prenez une feuille A4
- Dessinez 3 versions différentes de la page d'accueil
- Ne vous souciez pas de l'esthétique
Choix (5 min)
- Montrez vos croquis à quelqu'un
- Demandez : « Lequel préfères-tu ? Pourquoi ? »
- Choisissez une version
Wireframe (1h)
- Utilisez Figma ou Excalidraw
- Créez une version mobile ET desktop
- Restez en niveaux de gris
Test (15 min)
- Montrez votre wireframe à 3 personnes
- Appliquez le test des 5 secondes
- Notez les retours
Itération (30 min)
- Corrigez les problèmes identifiés
- Refaites un test si nécessaire
Bonnes pratiques
À faire ✅
- Commencer par le mobile
- Utiliser une grille (8px ou 12 colonnes)
- Annoter les interactions (« Au clic → page produit »)
- Tester avec de vrais utilisateurs
- Itérer rapidement
- Documenter les décisions
À éviter ❌
- Passer directement au mockup haute fidélité
- Maquetter toutes les pages avant de tester
- Ignorer les retours utilisateurs
- Utiliser des Lorem Ipsum partout (préférez du vrai contenu)
- Négliger la version mobile
Documentation des maquettes
Pour chaque maquette, documentez :
markdown
## Maquette : Page d'accueil
### Objectif de la page
Présenter l'entreprise et orienter vers les produits.
### Éléments clés
- Hero avec CTA principal
- 4 produits mis en avant
- Témoignages clients
### Interactions
- Clic logo → Accueil
- Clic produit → Fiche produit
- Clic "Voir tous" → Catalogue
### Notes de design
- Couleur CTA : bleu principal
- Images : ratio 4:3
- Espacement : grille 8px
### Version
- v1.0 - 2024-01-15 - Version initiale
- v1.1 - 2024-01-18 - Ajout témoignagesChecklist de la Phase 5
Avant de passer à la phase suivante, vérifiez :
- [ ] Croquis réalisés pour explorer les idées
- [ ] Wireframes créés pour les pages principales
- [ ] Versions mobile ET desktop maquettées
- [ ] Tests utilisateurs effectués (5 secondes, premier clic)
- [ ] Retours utilisateurs intégrés
- [ ] Interactions documentées
- [ ] Grille de mise en page définie
- [ ] 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.