Avant de construire un site, on le dessine. La maquette est ce plan visuel : elle montre à quoi ressemblera chaque page, avant la moindre ligne de code. C'est l'étape qui évite de payer un développement pour découvrir, trop tard, que la mise en page ne va pas. Ce guide explique ce qu'est une maquette, comment la créer, avec quels outils, et où elle se place dans la création d'un site web.
Qu'est-ce qu'une maquette de site web ?
Une maquette de site web est une représentation visuelle des pages d'un site, réalisée avant le développement. Elle fixe la mise en page, les couleurs, les typographies et le contenu de chaque écran, pour valider le rendu final avant de coder. C'est le plan sur lequel s'accordent le client et le concepteur.
Le mot recouvre en réalité plusieurs niveaux de détail, du simple croquis en gris au visuel proche du site final. On les distingue par leur fidélité, c'est-à-dire leur degré de ressemblance avec le résultat.
Wireframe, maquette, prototype : les trois niveaux de fidélité
Ces trois mots sont souvent confondus. Ils désignent trois étapes de précision croissante, chacune avec un but différent.
- Le wireframe : un schéma en gris, sans couleur ni image. Il fixe la structure et l'emplacement des blocs. On valide l'agencement, pas le style.
- La maquette : le visuel haute fidélité. Elle applique les couleurs, les typographies, les images et le vrai contenu. On valide le design, mais rien n'est cliquable.
- Le prototype : la maquette rendue interactive. Les liens et les boutons fonctionnent, on peut naviguer comme sur le vrai site. On valide l'expérience et le parcours.
| Critère | Wireframe | Maquette | Prototype |
|---|---|---|---|
| Fidélité | Basse (blocs gris) | Haute (couleurs, typo, images) | Haute + interactions |
| Ce qu'on valide | La structure | Le design visuel | Le parcours et l'expérience |
| Interactif | Non | Non | Oui, cliquable |
| Étape | Cadrage | Conception | Test avant développement |
Les trois s'enchaînent : on structure en wireframe, on habille en maquette, on rend le tout cliquable en prototype. Selon le projet, on ne passe pas toujours par les trois.
À quoi sert une maquette de site web ?
Maquetter avant de développer répond à un principe connu en génie logiciel, la courbe du coût du changement décrite par Barry Boehm : un problème coûte de plus en plus cher à corriger à mesure que le projet avance. Déplacer un bloc sur une maquette prend une minute ; le refaire sur un site codé peut prendre des jours.
Un exemple concret : dès le wireframe, un client voit que son menu à huit entrées noie l'action principale, et le réduit à quatre, avant qu'une seule ligne soit codée. La maquette sert exactement à ça, décider tôt.
- Aligner tout le monde : client, designer et développeur voient la même chose et valident avant de lancer le chantier. Fini le "ce n'est pas ce que j'avais imaginé" en fin de projet.
- Décider avant de payer : on juge la mise en page et le design sur un visuel concret, pas sur une description. Les allers-retours se font sur la maquette, pas sur le développement.
- Vérifier le responsive : on dessine chaque page pour mobile, tablette et ordinateur. Comme environ 60 % du trafic web est mobile (Statista, 2024), cet écran se conçoit en premier, pas en dernier.
- Cadrer le développement : le développeur reçoit un plan précis à suivre, ce qui accélère et fiabilise la construction du site.
Comment créer une maquette de site web, étape par étape
La démarche va du plan au visuel finalisé. Chaque étape prépare la suivante.
- Définir les objectifs et les pages : listez les pages du site, leur but et le contenu clé de chacune. On maquette une structure, pas une intuition.
- Wireframer chaque page : posez les blocs en gris, sans style, pour valider l'agencement et la hiérarchie de l'information avant de penser au design.
- Appliquer la charte graphique : la maquette reprend les couleurs, typographies et composants déjà définis dans votre charte graphique. On applique une identité existante, on ne la crée pas à cette étape.
- Dessiner la maquette haute fidélité : habillez les pages avec le vrai contenu, en commençant par la page d'accueil, puis déclinez le style sur les autres.
- Décliner en responsive : adaptez chaque page pour mobile, tablette et ordinateur. Une maquette qui n'existe qu'en version bureau est une maquette à moitié faite.
- Présenter, valider et itérer : montrez la maquette aux parties prenantes, recueillez les retours et corrigez avant le développement. Pour tester le parcours sur de vrais utilisateurs, un prototype cliquable et la démarche d'UX design prennent le relais.
Les outils pour maquetter un site web
Le choix de l'outil dépend de votre niveau et de vos besoins de collaboration. Un même projet peut n'en utiliser qu'un.
| Outil | Pour qui | Points forts | Prix |
|---|---|---|---|
| Figma | Équipes et pros | Le standard du secteur, collaboratif en temps réel, prototypage intégré | Gratuit puis payant |
| Balsamiq | Wireframes rapides | Spécialisé basse fidélité, très simple pour cadrer une structure | Payant |
| Penpot | Ceux qui veulent du libre | Open source, dans le navigateur, sans limite de fichiers | Gratuit |
| Canva | Débutants | Simple, par glisser-déposer, modèles prêts | Gratuit puis payant |
| Sketch | Designers sur Mac | Référence historique sur macOS, riche en plugins | Payant |
Figma s'est imposé comme la référence : la plupart des studios et agences y travaillent, ce qui facilite le partage et la reprise du fichier. Pour un premier essai gratuit, Penpot ou Canva suffisent largement.
Pour s'inspirer ou partir d'un modèle gratuit, la communauté Figma, Behance et Dribbble regorgent de maquettes de sites à étudier avant de se lancer.
Peut-on générer une maquette avec l'IA ?
Oui, en partie, et c'est là que tout se joue. Des outils comme Uizard ou v0 génèrent une maquette à partir d'une simple description ou d'une capture : vous décrivez la page, l'IA propose une mise en page habillée en quelques secondes. Pour dégrossir une idée, le gain de temps est réel.
Mais l'IA génère une maquette de départ, pas une maquette finale, cohérente avec votre marque et pensée pour convertir. Elle aligne des blocs ; elle ignore votre stratégie et vos utilisateurs. Le designer reprend la proposition et corrige ce que l'IA ne voit pas.
- La cohérence avec la charte : l'IA ne connaît ni vos couleurs, ni vos typographies, ni votre logo. Elle produit un style générique.
- La hiérarchie de conversion : elle empile des sections, sans savoir ce qui doit attirer l'oeil ni mener à l'action.
- Le contraste et l'accessibilité : une maquette générée est rarement lisible par tous du premier coup.
- Le vrai contenu : elle remplit de faux texte ; or le message réel change souvent la mise en page.
Le bon usage : laisser l'IA proposer une première piste, puis la confier à un humain qui l'adapte à vos objectifs. L'IA maquette vite, elle ne décide pas à votre place.
Combien coûte une maquette de site web ?
Il n'y a pas de prix unique. Le coût dépend surtout du niveau de fidélité (un wireframe se paie bien moins qu'un prototype complet), du nombre de pages, des versions responsive à décliner et du caractère sur-mesure ou basé sur un modèle.
Faite soi-même sur un outil gratuit, une maquette ne coûte que du temps ; réalisée par un professionnel, elle se chiffre selon ces critères. Pour un ordre d'idée sur un projet complet, voyez notre guide sur le prix d'un site vitrine.
Où se place la maquette dans un projet web ?
La maquette est une étape charnière, entre l'identité et le code. Elle vient après la charte graphique, dont elle applique les couleurs et les typographies, et juste avant le développement, qu'elle guide.
Elle n'est pas isolée : elle traduit en écrans le travail d'expérience utilisateur (le parcours, la logique), puis sert de plan à la construction d'un site vitrine ou d'un site plus large. Bien pensée, elle anticipe déjà un site clair, rapide et facile à faire évoluer.
Les erreurs fréquentes en maquettage
Quelques réflexes sabotent une maquette, même soignée.
- Sauter le wireframe : passer direct au visuel détaillé, c'est décider du style avant d'avoir validé la structure. On refait tout ensuite.
- Oublier le mobile : maquetter seulement pour l'ordinateur alors que la majorité des visites vient du téléphone.
- Garder le faux texte : le Lorem Ipsum masque les vrais problèmes de longueur et de hiérarchie. Maquettez avec du contenu réel.
- Confondre maquette et prototype : présenter une maquette figée comme si elle était cliquable crée de faux espoirs sur ce qui est validé.
En résumé
Une maquette de site web est le plan visuel des pages, réalisé avant le développement. Elle se décline en trois niveaux de fidélité (wireframe, maquette, prototype), se construit par étapes (des objectifs au responsive) avec des outils comme Figma, et l'IA aide désormais à la dégrossir. Elle applique la charte et prépare la création du site.
Vous avez un projet de site et voulez le voir avant de le construire ? Réservez un échange avec In Soo : on cadre ensemble vos pages et la maquette qui servira de plan, sans engagement.
