Wireframe, maquette, prototype : quelles différences ?

Wireframe, maquette et prototype sont trois étapes de conception d'un site ou d'une application. Elles répondent à trois questions différentes : où placer chaque élément, à quoi ressemblera la page, et comment l'utilisateur va s'en servir. Les confondre conduit à discuter trop tôt de détails graphiques ou à découvrir trop tard un parcours bancal. Voici ce qui les distingue et comment les utiliser.

Qu'est-ce qu'un wireframe ?

Un wireframe, parfois appelé maquette fil de fer, est un schéma simplifié d'une page. Des rectangles gris indiquent l'emplacement du menu, des titres, des textes, des images et des boutons, sans couleurs ni typographies définitives. Il sert à valider la hiérarchie de l'information : ce qui apparaît en premier, ce qui est regroupé, où se trouve l'action principale. Il se dessine vite, sur papier ou dans un outil de conception, et se corrige en quelques minutes.

Qu'est-ce qu'une maquette ?

La maquette graphique, ou mockup, montre l'apparence réelle de la page : couleurs, typographies, images, icônes, espacements. Elle applique la charte graphique au wireframe validé. C'est une image fixe, sur laquelle on ne peut pas cliquer. Elle sert à valider l'identité visuelle et le rendu des contenus sur ordinateur et sur mobile. En français courant, le mot « maquette » désigne parfois toutes ces étapes : précisez toujours le niveau de détail dont vous parlez.

Qu'est-ce qu'un prototype ?

Un prototype est une version interactive des écrans : on clique sur un bouton, un menu s'ouvre, l'écran suivant s'affiche. Il simule le fonctionnement sans code définitif ni vraies données. Il sert à tester un parcours complet, comme une demande de devis ou une réservation, avec de futurs utilisateurs avant le développement. Un prototype peut être basse fidélité, construit à partir des wireframes, ou haute fidélité, à partir des maquettes.

Quelles sont les différences en un coup d'œil ?

Dans quel ordre les utiliser ?

1. L'arborescence fixe la liste des pages.
2. Les wireframes organisent le contenu de chaque type de page.
3. Les maquettes habillent les wireframes validés.
4. Le prototype relie les écrans pour tester les parcours importants.
5. Le développement construit le site ou l'application à partir de ces éléments validés.

Cet ordre suit une logique simple : plus une décision est prise tôt, moins elle coûte à changer. Déplacer un bloc sur un wireframe prend quelques secondes ; le déplacer une fois le site développé peut toucher plusieurs pages.

Faut-il toujours passer par les trois étapes ?

Non. Le niveau de préparation dépend de la complexité du projet.

• Site vitrine simple : des wireframes rapides, puis des maquettes des principaux modèles de pages, suffisent souvent.
• Site avec un parcours clé (devis, réservation) : un prototype de ce parcours évite les mauvaises surprises.
• Application web ou mobile : le prototype devient très utile, car les écrans s'enchaînent selon les actions et les droits de chaque utilisateur.

Comment relire chaque livrable ?

• Sur un wireframe, ne jugez pas l'esthétique : vérifiez que l'information importante est en haut et que l'action attendue est visible.
• Sur une maquette, regardez aussi la version mobile, avec des textes réels plutôt que du faux texte.
• Sur un prototype, réalisez une tâche précise sans aide et notez chaque hésitation.
• Regroupez vos remarques en un seul retour, classées par importance.

Ces étapes relèvent de l'UX, l'expérience utilisateur, qui vise à rendre un site simple à utiliser. Elles partent d'un besoin clairement exprimé, comme l'explique l'article rédiger le cahier des charges d'un site. La page développement web sur mesure présente la démarche de NexSecure.