Design & UX
Maquette et wireframe
Représentations visuelles d'une interface avant son développement, du wireframe schématique à la maquette détaillée, pour concevoir et valider un produit à moindre coût.
Qu'est-ce qu'une maquette ?
Une maquette est une représentation visuelle d'une interface réalisée avant son développement. Elle montre à quoi ressembleront les écrans d'un site ou d'une application — leur structure, leur contenu et leur apparence — sans qu'une seule ligne de code ne soit encore écrite.
La maquette sert à concevoir, montrer et valider un produit à moindre coût. Modifier un écran dans un outil de design prend quelques minutes ; le modifier une fois développé peut prendre des jours. La maquette est donc l'étape où l'on prend les décisions, où l'on aligne les équipes et où l'on corrige avant qu'il ne soit coûteux de le faire.
Wireframe, mockup, prototype : les niveaux de finition
On distingue plusieurs niveaux de fidélité, du plus schématique au plus réaliste :
| Niveau | Nom | Ce qu'il montre |
|---|---|---|
| Basse fidélité | Wireframe | Structure et agencement, en noir et blanc, sans style |
| Haute fidélité | Mockup (maquette) | Apparence finale : couleurs, typographie, contenu réel |
| Interactif | Prototype | Maquette cliquable simulant les parcours et transitions |
- Le wireframe est un schéma fonctionnel : il répond à « quoi va où ? » sans se soucier de l'esthétique. C'est un outil de l'UX.
- Le mockup habille ce squelette avec le travail d'UI Design : couleurs, polices, images.
- Le prototype rend la maquette cliquable pour tester les enchaînements d'écrans auprès d'utilisateurs réels.
À quoi servent les maquettes ?
- Aligner les équipes et le client sur une vision commune et concrète.
- Tester les idées et les parcours avant de développer, donc à faible coût.
- Réduire les risques : on détecte les problèmes d'ergonomie en amont.
- Cadrer le développement : la maquette devient la référence à reproduire fidèlement côté frontend.
Les outils les plus courants pour les produire sont Figma, Sketch ou Adobe XD, Figma étant aujourd'hui la référence du marché.
Maquettes et projet sur-mesure
Sur un logiciel sur-mesure, la maquette est une étape clé : elle transforme un cahier des charges abstrait en écrans tangibles que l'on peut critiquer et affiner. C'est aussi le moment idéal pour poser les bases d'un design system et pour valider le périmètre d'un MVP avant d'engager le budget de développement. Mieux vaut itérer dix fois sur une maquette que deux fois sur du code.
Questions fréquentes
Wireframe ou maquette : par où commencer ? En général par le wireframe, qui fixe la structure et les parcours sans se disperser sur l'esthétique. On passe à la maquette détaillée une fois l'agencement validé.
Une maquette est-elle indispensable avant de développer ? Pour tout projet non trivial, oui : elle évite de coder des écrans qui devront être refaits. C'est l'investissement le plus rentable du cycle de conception.
Maquette et prototype, quelle différence ? La maquette est statique : elle montre les écrans. Le prototype est interactif : il les relie pour simuler l'usage réel et permettre des tests utilisateurs avant le développement.
