La réponse en bref
Le wireframe, la maquette et le prototype sont trois étapes successives de la conception d’un site ou d’une application. Le wireframe est le plan : il montre ce que contient chaque page et dans quel ordre, sans couleurs ni images. La maquette montre le rendu final : couleurs, typographies, images, mise en page exacte. Le prototype rend la maquette cliquable : on navigue d’une page à l’autre comme dans le futur site, avant qu’une seule ligne de code soit écrite. Chaque étape répond à une question différente, et les sauter coûte en général plus cher qu’elles ne font gagner.
Trois étapes, trois questions
- Le wireframe : qu’y a-t-il sur la page ? Des blocs gris, des titres, des textes provisoires et des boutons. On décide de la structure, de la hiérarchie des contenus et des parcours, sans débat sur les couleurs.
- La maquette : à quoi ressemblera la page ? La structure validée reçoit l’identité visuelle : palette, typographies, photos, icônes, espacements. C’est l’image fidèle de l’écran final.
- Le prototype : comment s’utilise le site ? Les maquettes sont reliées entre elles : menus, boutons, formulaires et transitions réagissent au clic. On teste un parcours complet, sur ordinateur comme sur téléphone.
Ce que chaque étape permet de décider
- Les contenus. Le wireframe révèle tôt ce qui manque : un texte à écrire, une photo à produire, une information que le visiteur cherche et que personne n’avait prévue.
- Les priorités. Sur un wireframe, on voit immédiatement ce qui est en haut de page et ce qui est relégué en bas : c’est le bon moment pour arbitrer.
- L’image de marque. La maquette vérifie que le site prolonge vraiment l’identité visuelle, et qu’il reste lisible : contrastes, tailles de texte, place des boutons.
- L’ergonomie. Le prototype montre si un visiteur trouve ce qu’il cherche et arrive au bout d’une demande de contact, d’un devis ou d’un achat.
Comment nous enchaînons les étapes
- L’arborescence. La liste des pages et leur organisation dans les menus, validée avant tout dessin.
- Les wireframes des pages clés, dans Figma, en version ordinateur et mobile. Les allers-retours sont rapides : modifier un bloc prend quelques minutes.
- Les maquettes graphiques, dans le prolongement de votre identité visuelle, avec un système de composants réutilisables (boutons, cartes, formulaires).
- Le prototype cliquable, partagé par un simple lien : vous le parcourez sur votre ordinateur et sur votre téléphone, et vous commentez directement dans Figma.
- Les tests, si l’enjeu le justifie. Sur demande, nous observons de vrais utilisateurs sur le prototype pour corriger ce qui bloque avant le développement.
Les erreurs fréquentes
- Passer directement à la maquette. On débat de couleurs alors que la structure n’est pas validée, et chaque changement de contenu oblige à redessiner des écrans finis.
- Valider un wireframe comme une maquette. Le wireframe n’est pas moche par erreur : il est volontairement neutre pour que l’on juge le fond, pas la forme.
- Oublier le mobile. La majorité des visites se font sur téléphone : une page pensée uniquement pour un grand écran se découvre trop tard illisible en petit.
- Découvrir le parcours au développement. Sans prototype, on comprend qu’un formulaire est trop long ou qu’un menu est confus une fois le site codé, quand corriger coûte des jours au lieu de minutes.
Pour aller plus loin
Le wireframe et le prototype font partie de chacun de nos projets de site : voir le wireframe, le web design UX/UI et la création de site web.
Questions fréquentes
Quelle est la différence entre un wireframe et une maquette ?
Le wireframe montre la structure et les contenus d’une page, sans habillage graphique. La maquette montre le rendu final : couleurs, typographies, images et mise en page exacte.
Un prototype est-il un site ?
Non. C’est une simulation : les pages s’enchaînent au clic, mais rien n’est développé. Il sert à valider la navigation avant d’engager le développement.
Peut-on se passer du wireframe pour un petit site ?
On peut le simplifier, rarement le supprimer. Même pour quelques pages, une heure passée sur la structure évite de redessiner des maquettes entières ensuite.
Avec quel outil sont réalisés wireframes, maquettes et prototypes ?
Chez Harvest, avec Figma : les trois étapes vivent dans le même fichier, que vous consultez et commentez en ligne, sur ordinateur comme sur téléphone.