Une maquette de site web est une représentation visuelle de votre futur site, réalisée avant de le construire. C’est le plan de votre maison, version numérique : on y dessine l’emplacement du logo, des menus, des textes, des boutons et des photos, page par page. On la conçoit en cinq temps : lister les pages, poser la structure en gris (le wireframe), habiller avec les couleurs et la typo, faire valider, puis passer à la réalisation. L’intérêt ? Voir et corriger votre site sur écran avant que la moindre ligne de code n’existe. Moins d’allers-retours, moins de mauvaises surprises.
L’essentiel en 4 points
- La maquette est un aperçu visuel du site, créé avant sa construction.
- Elle sert à valider la structure, le design et le parcours sans coder.
- On distingue le wireframe (structure en gris) du mockup (maquette habillée).
- Elle évite les erreurs coûteuses et fait gagner du temps sur tout le projet.
Vous vous lancez dans la création de votre site et vous avez peur de découvrir le résultat trop tard, une fois qu’il est trop tard justement pour tout changer ? C’est exactement le rôle de la maquette de site web. Elle vous montre à quoi ressemblera votre site avant qu’il n’existe vraiment. On vous explique ce que c’est, pourquoi c’est l’étape à ne pas sauter, et comment elle se déroule quand on dirige une TPE.
Qu’est-ce qu’une maquette de site web ?
Imaginez que vous fassiez construire une maison. Vous ne demanderiez pas au maçon de poser les murs sans plan, en espérant que tout tombe juste. La maquette de site web, c’est ce plan. Une image, ou une série d’images, qui montre l’organisation de chaque page : où se place le logo, comment se répartissent les rubriques, à quel endroit apparaît le bouton de contact.
Elle se crée avec des outils de design (Figma, Adobe XD, Canva et d’autres) ou parfois, pour aller vite, sur une simple feuille de papier. Le but n’est pas la beauté à ce stade. Le but, c’est de décider. Où mettre quoi, dans quel ordre, avec quelle logique. Une maquette valide vos choix avant l’investissement en développement.
Wireframe, mockup, prototype : ne pas confondre
Trois mots reviennent souvent, et on les mélange facilement. Voici la distinction, en clair.
| Terme | Ce que c’est | À quel moment |
|---|---|---|
| Wireframe | Structure en noir et blanc, sans design | Au tout début |
| Mockup | Maquette habillée (couleurs, images, typo) | Ensuite |
| Prototype | Maquette cliquable, on teste la navigation | Avant le développement |
Le wireframe pose les fondations : blocs gris, faux textes, aucune couleur. On raisonne structure pure. Le mockup vient ensuite l’habiller avec votre identité visuelle. Le prototype, lui, rend le tout cliquable pour vérifier que le parcours tient debout. Pour une TPE, on va rarement jusqu’au prototype poussé : un bon wireframe suivi d’un mockup soigné suffit largement.
Pourquoi la maquette est l’étape à ne jamais sauter
Sauter la maquette, c’est construire à l’aveugle. Une étude de référence en ergonomie web a montré qu’un internaute se forge une première impression d’un site en 50 millisecondes : autant décider à l’avance de ce qu’il verra. Et corriger un site déjà développé coûte bien plus cher que de déplacer un bloc sur un dessin. Voici ce qu’elle vous apporte concrètement.
- Vous voyez avant de payer. Le rendu s’affiche sous vos yeux. Un menu mal placé ? On le bouge en deux minutes, pas en deux jours de dev.
- Vous parlez le même langage. Fini le « je ne l’imaginais pas comme ça ». La maquette met tout le monde d’accord, vous et l’équipe qui crée le site.
- Vous pensez au visiteur. On place les informations là où l’internaute les cherche, et le bouton de contact là où il clique. C’est le cœur d’une bonne expérience utilisateur (UX).
- Vous anticipez le mobile. Une maquette sérieuse prévoit aussi l’affichage sur téléphone, pour un rendu responsive impeccable.
⚠️ L’erreur classique. Vouloir tout mettre sur la page d’accueil. Une maquette surchargée donne un site illisible. On hiérarchise : l’essentiel en haut, le reste plus bas ou sur d’autres pages. Le vide n’est pas votre ennemi, c’est ce qui rend un message lisible.
Comment faire une maquette de site web, étape par étape
Voici la méthode qu’on applique, et que vous pouvez suivre pour préparer votre projet, même sans être designer.
- Listez vos pages. Accueil, services, réalisations, contact… Notez ce dont vous avez besoin. C’est le socle de votre cahier des charges.
- Dessinez la structure (wireframe). Pour chaque page, placez les grands blocs en gris : en-tête, contenu, boutons, pied de page. Sans couleur, sans photo.
- Habillez la maquette (mockup). Ajoutez vos couleurs, votre logo, vos polices, quelques visuels. Votre identité prend forme.
- Faites valider. Montrez-la autour de vous, à un client fidèle, à un proche. Un regard neuf repère ce qu’on ne voit plus.
- Passez à la réalisation. Une fois la maquette validée, place à la construction. Le plus dur est fait : les décisions sont prises.
💡 Pas le temps de tout gérer ? Créer une maquette qui tient la route demande du métier : hiérarchie de l’information, ergonomie mobile, cohérence visuelle. Chez Le Site Français, la maquette fait partie du parcours de création de site internet. On vous montre votre site avant de le construire, on ajuste avec vous, puis on livre. Accompagnement humain, à partir de 49 €/mois, site en ligne en une dizaine de jours. Démarrez votre projet en quelques minutes.
Maquette et création de site pour un artisan local
Un artisan a des besoins très concrets, et la maquette les traduit. Prenez un menuisier à Lyon : sa maquette placera en évidence ses réalisations en photo, sa zone d’intervention et un bouton « Demander un devis » dès la première page. Pas de fioritures, du direct.
Pour un commerce de quartier, la maquette mettra en avant les horaires, l’adresse et un plan d’accès. Chaque métier a ses priorités, et c’est justement à l’étape maquette qu’on les identifie. On construit un site qui sert votre activité locale, pas un modèle passe-partout qui ne ressemble à personne.
Maquette gratuite ou accompagnement pro : que choisir ?
Vous pouvez esquisser une première maquette seul, avec un outil gratuit comme Canva ou même du papier. C’est un excellent exercice pour clarifier vos idées, et on le recommande avant tout rendez-vous. Mais la maquette finale, celle qui guide la construction, gagne à être travaillée par quelqu’un qui connaît les codes du web : lisibilité, ergonomie mobile, placement des appels à l’action. Le bon compromis pour une TPE ? Arriver avec vos idées et vos exemples, et laisser un professionnel les transformer en une maquette solide, prête à devenir un vrai site.
FAQ — Maquette de site web
Commencez simple. Listez les pages dont vous avez besoin, puis dessinez chaque page en plaçant les grands blocs : en-tête, contenu, boutons, pied de page. Un outil gratuit comme Canva ou une feuille de papier suffisent pour cette première version. L’objectif n’est pas la beauté, mais la clarté : décider où va chaque élément. Vous pourrez ensuite confier cette base à un professionnel qui l’affinera et prévoira l’affichage mobile.
Le wireframe est la toute première étape : une structure en noir et blanc, sans couleur ni image, qui pose l’emplacement des éléments. La maquette (ou mockup) vient ensuite : elle habille cette structure avec vos couleurs, votre logo et vos visuels pour donner un aperçu réaliste. En résumé, le wireframe décide de l’organisation, la maquette décide de l’apparence. Les deux se suivent dans le bon ordre.
Les professionnels utilisent surtout Figma et Adobe XD, qui permettent de concevoir et de partager facilement. Pour une première esquisse sans compétences techniques, Canva ou un simple crayon font l’affaire. Le choix de l’outil compte moins que la démarche : réfléchir à la structure avant de construire. Un artisan n’a pas besoin de maîtriser Figma ; il a besoin d’exprimer clairement ses priorités, qu’un professionnel traduira ensuite en maquette.
Chez la plupart des prestataires sérieux, oui : la maquette fait partie intégrante du projet, car elle sécurise tout le reste. Elle permet de valider ensemble le rendu avant la construction, ce qui évite les mauvaises surprises et les corrections coûteuses. Chez Le Site Français, elle s’inscrit dans un accompagnement complet, du premier échange jusqu’à la mise en ligne du site, généralement en une dizaine de jours.
Envie de voir votre site avant même qu’il existe ?
⭐ Près de 119 avis 5 étoiles · Accompagnement français · Sans engagement. Site professionnel livré en une dizaine de jours, à partir de 49 €/mois.
