Wireframe, maquette et prototype : à quoi sert chacun ?
Trois étapes pour dessiner un site ou une application avant de le développer : le wireframe place les contenus en blocs gris, la maquette montre l'écran final en image, le prototype relie les maquettes pour qu'on puisse cliquer.
- Design et expérience
Mis à jour le
Le wireframe, le plan
Le wireframe, ou zoning, est le plan d'un écran en noir et blanc : des blocs gris pour les images, des lignes pour les textes, des rectangles pour les boutons. Il fixe ce qui apparaît et dans quel ordre, sans couleur ni style, pour que la discussion porte sur l'organisation et pas sur le goût.
On le dessine vite, on le corrige vite : c'est le moment le moins cher pour changer d'avis.
La maquette, l'image du résultat
La maquette, aussi appelée mockup ou maquette graphique, montre l'écran tel qu'il sera : vrais textes, vraies couleurs, typographies, images, icônes. Elle sert à valider l'apparence et la cohérence de tous les écrans, avant d'écrire une ligne de code. Elle reste une image : on la regarde, on ne clique pas dedans.
Le prototype, la maquette cliquable
Le prototype relie les maquettes entre elles : on appuie sur un bouton, l'écran suivant s'affiche, comme dans le vrai produit. Il n'y a encore ni serveur ni données réelles derrière, mais on peut déjà faire essayer un parcours à de vrais utilisateurs, et voir où ils hésitent.
C'est l'outil le plus sûr pour se mettre d'accord avant de développer : chacun a vu et touché la même chose.
Les différences, en un tableau
| Wireframe | Maquette | Prototype | |
|---|---|---|---|
| Ce qu'on voit | Des blocs gris | L'écran final, en image | Les écrans finaux, reliés |
| Ce qu'on valide | L'organisation | L'apparence | Le parcours |
| Interactif | Non | Non | Oui, sans code derrière |
| Coût d'un changement | Très faible | Faible | Faible, bien moins qu'après le code |
Le MVP vient après : c'est un vrai produit, avec du code, en ligne pour de vrais utilisateurs.
Pourquoi valider avant de développer
Déplacer un bouton sur un wireframe prend une minute ; le déplacer dans une application terminée peut demander de revoir l'écran, son code et ses tests. Valider le parcours et l'apparence sur des maquettes et un prototype évite les malentendus coûteux, ceux du « ce n'est pas ce que j'imaginais » à la livraison.
Vos croquis, même à la main, et des exemples de sites ou d'applications qui vous plaisent font gagner du temps à cette étape : le cahier des charges a une question pour eux.
Un projet en tête ? Parlons-en, sans jargon.
Un appel de 30 minutes avec Clément, puis une proposition écrite avec le périmètre, le prix et la date de mise en ligne.
Sur demande, vous signez un accord de confidentialité avant l'appel.
Questions fréquentes : Wireframe, maquette et prototype
Qu'est-ce qu'un mockup ?
Mockup est le mot anglais pour maquette : une image fidèle de l'écran final, avec ses couleurs, ses textes et ses images. On parle aussi de mockup pour une image qui montre un écran dans un téléphone ou un ordinateur, pour une présentation.
Une maquette cliquable est-elle une application ?
Non. Elle en a l'apparence et l'enchaînement des écrans, mais rien ne s'enregistre : pas de comptes, pas de données, pas de paiement. Elle sert à décider ; l'application se développe ensuite, à partir d'elle.
Une autre question ?
Clément vous répond en moins de 2 h.