Maquettes de Sites Web : 7 Étapes et 5 Outils pour un Résultat Pro

Qu'est-ce qu'une maquette de site web

Une maquette de site web est une représentation visuelle statique qui reproduit l'apparence attendue d'un site, couleurs, typographies, images et disposition des éléments, sans intégrer tout le code ni toutes les interactions fonctionnelles. Elle sert de référence commune entre le commanditaire, le design et le développement. Pour approfondir ce point, consultez Refonte de Site Internet.

On rencontre souvent l'affirmation selon laquelle 72 % des projets digitaux sans maquette dépasseraient leur budget, attribuée au PMI. Nous n'avons pas retrouvé de publication primaire permettant de confirmer ce chiffre précis. Le risque opérationnel, lui, est concret : sans représentation partagée, chaque participant visualise un site différent. Le designer imagine une mise en page épurée, le client pense à un bandeau promotionnel imposant, et le développeur interprète le brief à sa manière. Les désaccords apparaissent alors au moment où les écrans sont déjà codés. La page consacrée à Vibe coder sans développeur détaille l’étape suivante.

La maquette réduit cette ambiguïté. Elle permet de valider l'arborescence du site, les contenus prioritaires, les composants et les adaptations mobiles avant l'intégration. Elle s'inscrit dans la méthode de conception en amont de la maquette : comprendre les utilisateurs, structurer leurs parcours, puis matérialiser une solution testable. Reste ensuite un choix pratique : se former pour produire et faire évoluer ses écrans, partir de modèles, ou déléguer la conception. Ce guide présente les 7 étapes, compare 5 outils et aide à choisir la bonne formule selon vos ressources.

Wireframe, maquette et prototype : les 3 niveaux de fidélité

Le maquettage d'un site web passe par trois niveaux de fidélité distincts. Les confondre mène à des erreurs de planification. Le wireframe est un schéma filaire, souvent en niveaux de gris. Il représente la structure de la page : navigation, zones de contenu, hiérarchie, footer et actions principales. Son rôle est de valider l'architecture de l'information avant d'investir dans le détail visuel. Le temps nécessaire dépend de la complexité de la page et du nombre de variantes à explorer.

La maquette graphique, ou mockup, ajoute la couche visuelle complète : couleurs conformes à la charte graphique du site, typographies, images, icônes et espacements. Elle donne une vision réaliste du rendu final, mais peut rester statique. C'est le support de validation visuelle avant le développement.

Le prototype interactif simule le comportement du site. Les boutons déclenchent des transitions, les menus s'ouvrent et les parcours sont reliés. Figma et d'autres outils de prototypage permettent ainsi de tester une navigation sans avoir terminé le développement. L'intérêt n'est pas de promettre un pourcentage universel de corrections évitées, mais de détecter plus tôt les incompréhensions, les impasses et les actions difficiles à trouver.

Pourquoi maquetter un site web avant de le développer

Maquetter un site web n'est pas une étape cosmétique. C'est un moyen de rendre les décisions visibles et réversibles avant le code. La valeur se mesure surtout dans la qualité des arbitrages : les contenus sont-ils dans le bon ordre, l'action principale est-elle évidente et chaque écran sert-il le parcours attendu ? Une démarche Lean UX peut raccourcir les cycles en faisant alterner hypothèse, maquette, test et apprentissage.

La maquette aligne toutes les parties prenantes sur une vision unique. Dans le cas existant d'un restaurateur à Lyon, le brief oral parlait d'un design « moderne et chaleureux ». La maquette a traduit cette intention en choix concrets : fond crème, typographie serif pour les menus et photos plein cadre des plats. Le client a pu commenter un support précis, plutôt que des intentions abstraites.

Elle permet aussi de détecter les problèmes d'UX/UI avant qu'ils ne deviennent des corrections en développement. Déplacer un bouton dans un wireframe est généralement plus simple que modifier un composant intégré, vérifier les régressions puis redéployer. Plus le parcours est critique, plus il est utile de confronter tôt la maquette à de vrais scénarios d'usage. Un consultant UX peut aider à cadrer ces tests quand l'équipe manque de méthode ou de recul.

Le cas existant d'un e-commerce de vêtements à Bordeaux illustre cette logique : deux variantes de page produit ont été comparées avant développement, notamment sur la visibilité de l'ajout au panier et la place donnée aux photos. Ce type d'essai ne garantit pas un gain universel. Il aide en revanche à choisir une version sur des observations, puis à mesurer le résultat sur le site réel avec un protocole d'analyse défini à l'avance.

Créer une maquette de site web en 7 étapes

La création d'une maquette suit un processus séquentiel : chaque étape s'appuie sur la précédente. Passer directement au design sans avoir clarifié le périmètre ni la structure conduit souvent à reprendre des écrans déjà détaillés. Le processus ci-dessous fonctionne pour un site vitrine comme pour un e-commerce. La durée varie selon le nombre de gabarits, les contenus disponibles, les contraintes métier et le niveau de validation attendu, mais les 7 décisions restent les mêmes.

Les 5 meilleurs outils pour maquetter un site web

Le meilleur outil dépend du contexte : nombre de contributeurs, système d'exploitation, besoin de prototypage, exigences d'hébergement et niveau de maîtrise. Le tableau ci-dessous ne classe donc pas un vainqueur absolu. Il aide à sélectionner l'environnement qui réduit les frictions dans votre projet.

Figma fonctionne dans le navigateur et met l'accent sur la collaboration en temps réel. Ses composants, variables et fonctions d'Auto Layout facilitent la production de maquettes responsive. En août 2026, la page tarifaire officielle affiche un plan Starter gratuit à accès limité et un siège complet Professional à 16 $ par mois, en dollars, pour la facturation annuelle. Les conditions et taxes peuvent varier.

Adobe XD peut encore convenir aux équipes qui possèdent déjà des fichiers et des bibliothèques dans cet environnement. Il faut toutefois évaluer le risque de continuité avant de démarrer un nouveau projet, Adobe n'ouvrant plus XD aux nouveaux clients hors certains contrats existants. Pour un projet neuf, privilégiez un outil dont la feuille de route et les modalités d'accès sont claires.

Sketch reste centré sur macOS et propose collaboration, bibliothèques, prototypage et transmission aux développeurs. En août 2026, son plan Standard est affiché à 12 $ par éditeur et par mois, facturé annuellement. C'est une option cohérente pour une équipe équipée de Mac qui apprécie une application native. Pour passer à la pratique, poursuivez avec Webflow en 2026.

Penpot est une solution open source utilisable dans le navigateur et auto-hébergeable. Elle propose composants, grilles, design tokens et prototypage. Elle intéresse les organisations qui souhaitent contrôler davantage leur infrastructure ou éviter qu'un fichier essentiel soit lié à un seul écosystème propriétaire. Vérifiez néanmoins les intégrations nécessaires avant la migration.

Canva vise un public moins spécialisé grâce à ses modèles et à son interface directe. Il peut servir à produire une intention visuelle ou une landing page simple, mais il remplace difficilement un environnement complet de composants, d'états et de transmission au développement. Canva adapte ses offres et ses prix au pays et au mode de facturation : consultez sa page tarifaire au moment de choisir, plutôt que de figer un prix en euros dans le budget.

Templates et sources d'inspiration pour vos maquettes

Partir d'une page blanche n'est pas obligatoire. Les templates fournissent une structure que vous adaptez à la charte graphique, au contenu réel et aux objectifs du projet. Ils font gagner du temps lorsque leurs composants correspondent au besoin. À l'inverse, un modèle trop éloigné peut créer une dette de conception : on passe alors plus de temps à le contourner qu'à construire une base simple.

La communauté Figma regroupe des kits pour sites e-commerce, SaaS, portfolios et sites vitrines. Avant d'en choisir un, vérifiez la licence, la date de mise à jour, le comportement mobile, la qualité des composants et la présence des états nécessaires. Un kit séduisant en capture d'écran peut être difficile à maintenir si ses éléments ne reposent sur aucune logique réutilisable.

Behance et Dribbble sont deux grandes galeries d'inspiration visuelle. Behance présente souvent des projets avec leur processus de création, tandis que Dribbble privilégie des vues isolées. Utilisez-les pour identifier une direction, pas pour copier une interface hors de son contexte. Notez ce qui vous intéresse, comme la densité, le rythme, les contrastes ou le traitement des preuves, puis reformulez ces principes pour votre propre audience.

Awwwards, CSS Design Awards et SiteInspire référencent des sites en production. Analysez les exemples proches de votre secteur et observez les patterns : taille du hero, nombre de sections, placement des CTA, ratio texte-image et comportement mobile. Testez aussi le site réel. Une animation impressionnante dans une vidéo peut être lente, inaccessible au clavier ou peu claire dans l'usage. La page consacrée à Design de site web détaille l’étape suivante.

Pour les wireframes, Whimsical et Balsamiq proposent des bibliothèques de composants filaires. Leur intérêt est de rester volontairement en basse fidélité afin de discuter de structure avant le style. Quel que soit l'outil, remplacez progressivement les contenus factices par de vrais titres, de vraies longueurs de texte et des images représentatives avant validation.

Se former au maquettage ou le déléguer

Le bon choix dépend moins du prestige de l'outil que de la fréquence des besoins. Une équipe qui produit des pages chaque mois gagne à comprendre les fondamentaux du design, les grilles, les composants et le responsive. Une équipe qui prépare un seul site peut partir de templates si son identité et ses parcours restent simples. Un projet stratégique, réglementé ou très transactionnel justifie plus souvent un accompagnement professionnel.

Se former ne signifie pas devenir designer senior en quelques jours. L'objectif est d'acquérir une méthode pour cadrer un écran, construire des composants cohérents et donner un retour exploitable. La formation Design permet précisément de structurer cette autonomie. Si le délai est court ou si les parcours comportent de nombreux états, déléguer à une agence peut rester plus efficace.

Remettre une maquette exploitable au développement

Une maquette n'est réellement terminée que lorsque l'équipe qui l'intègre peut comprendre les décisions sans les deviner. Avant la remise, faites un inventaire des gabarits et des états. Pour un bouton, montrez au minimum l'état normal, le survol, le focus clavier, le chargement et l'indisponibilité lorsque ces situations existent. Pour un formulaire, prévoyez le champ vide, rempli, invalide, valide et le message envoyé. Pour une liste, ajoutez aussi l'état vide, l'erreur de chargement et le contenu très long. Ces cas sont moins photogéniques qu'une page d'accueil idéale, mais ils déterminent la qualité du produit réel.

Organisez ensuite le fichier. Séparez les explorations, les versions validées et les composants de référence. Nommez les pages et les frames selon une convention lisible par toute l'équipe, par exemple « service / desktop / validé » plutôt que « Frame 172 ». Archivez les pistes abandonnées au lieu de les laisser à côté du livrable final. Dans le design system, utilisez des noms fonctionnels comme « action principale » ou « texte secondaire » quand la couleur peut évoluer. Une organisation claire réduit les questions répétitives et évite que le développement copie une ancienne variante.

Les mesures doivent exprimer une logique, pas seulement une collection de pixels. Documentez les largeurs maximales, les espacements récurrents, les règles de grille, les ratios d'image et les seuils où la disposition change. Indiquez ce qui est fixe, fluide ou conditionnel. Si une carte peut contenir deux lignes de titre mais pas quatre, précisez ce qui se passe au-delà. Si une image est décorative, signalez-le ; si elle porte une information, fournissez un texte alternatif pertinent. Le design responsive devient ainsi une série de règles transmissibles plutôt que trois captures isolées. Pour approfondir ce point, consultez formation Design web à Pau.

Préparez enfin une réunion de handoff centrée sur les risques. Parcourez les composants nouveaux, les interactions non standards, les données dynamiques, l'accessibilité et les dépendances techniques. Le développeur doit pouvoir signaler qu'une animation coûteuse, une police ou un comportement de scroll menace les performances. L'objectif n'est pas de défendre chaque pixel, mais de conserver l'intention tout en choisissant une implémentation robuste. Notez les décisions prises pendant la réunion dans le fichier ou dans un espace partagé afin qu'elles ne disparaissent pas dans une conversation orale.

Après l'intégration, comparez la page à la maquette sur plusieurs tailles et avec des contenus réalistes. Vérifiez l'ordre de lecture au clavier, le contraste, les zones tactiles, le retour d'erreur, la stabilité de la mise en page et la lisibilité lorsque le texte est agrandi. Une différence visuelle n'est pas automatiquement un défaut : elle peut corriger une contrainte découverte au développement. En revanche, toute différence doit être comprise et acceptée. Cette revue clôt le cycle de conception et alimente les composants réutilisables pour les prochaines pages.

Les 6 erreurs qui sabotent vos maquettes web

Les maquettes de sites web échouent rarement par manque de talent visuel. Elles échouent par manque de méthode. Voici 6 erreurs fréquentes dans les projets de création de sites web pour PME.

Première erreur : sauter le wireframe. Choisir les couleurs et les typographies sur une structure encore instable rend chaque changement plus coûteux. Avec une version filaire, on peut déplacer une preuve, un formulaire ou un CTA sans reprendre tout le détail graphique.

Deuxième erreur : ignorer le responsive. La part du trafic mobile varie selon le marché, mais elle suffit à rendre indispensable la conception des petits écrans. Une maquette uniquement desktop laisse le développeur décider seul de l'ordre des blocs, de la navigation et des tailles tactiles. Prévoyez au minimum trois largeurs de référence, puis contrôlez les transitions entre elles.

Troisième erreur : surcharger la maquette. Les micro-animations et interactions complexes se documentent dans un prototype ou des spécifications. Trop d'annotations sur le même écran noie les retours importants et ralentit la validation. Séparez la validation du contenu, du style et du comportement lorsque le projet est dense.

Quatrième erreur : utiliser du faux texte partout. Le Lorem Ipsum masque les problèmes de longueur, de ton et de hiérarchie. Un titre court ne révèle pas le comportement d'un titre sur deux lignes. Utilisez le contenu réel dès que possible et testez aussi des cas limites : nom long, prix élevé, message d'erreur et absence d'image.

Cinquième erreur : oublier le design system. Sans palette, typographies, espacements et composants standardisés, les pages divergent. Le développement reçoit alors plusieurs variantes d'un même bouton ou d'une même carte sans raison fonctionnelle. Définissez les règles minimales, nommez les composants et documentez leurs états.

Sixième erreur : confondre maquette et prototype. Expliquez clairement au moment de la présentation ce qui est statique, ce qui est cliquable et ce qui reste à spécifier. Demandez des retours liés à un objectif ou à un scénario, pas seulement « j'aime » ou « je n'aime pas ». Cette discipline rapproche les choix de design de résultats observables. Pour relier ces décisions à des données publiées, consultez aussi nos études SEO et GEO, qui montrent comment nous documentons les constats avant de recommander une action.

Quel budget prévoir pour une maquette de site web

Le coût dépend du nombre de gabarits réellement différents, du niveau de fidélité, de la quantité d'états à documenter et du professionnel engagé. Une page contact simple et un tunnel de commande en plusieurs étapes ne représentent pas le même travail. Les fourchettes ci-dessous sont des repères éditoriaux indicatifs pour cadrer une demande, pas un barème ni un devis.

Pour un wireframe simple, on rencontre des estimations de 50 à 150 € par page en freelance. Cette fourchette suppose une structure filaire, peu d'états et des contenus déjà organisés. Demandez si le cadrage, la version mobile, les annotations, le fichier source et les cycles de retours sont inclus. Sans cette précision, deux offres au même prix peuvent couvrir des livrables très différents.

Pour une maquette haute fidélité, la fourchette indicative passe souvent à 150 à 500 € par page. Une page d'accueil riche, un espace connecté ou un composant avec de nombreux états peuvent la dépasser. Pour un ensemble d'environ 5 pages, une agence peut proposer un forfait de 3 000 à 8 000 € lorsque la mission comprend direction artistique, design system, responsive, réunions et révisions. Ces montants doivent être confirmés par plusieurs devis comparables. La page consacrée à UX Designer détaille l’étape suivante.

Le prototypage n'est utile que pour les interactions à valider. Une landing page simple peut se contenter de maquettes statiques annotées. Un e-commerce, un configurateur ou un espace client gagne à rendre cliquables les étapes où une incompréhension aurait un impact important. Demandez donc un prix par parcours ou par lot d'états, plutôt qu'un supplément automatique appliqué à toutes les pages. Pour passer à la pratique, poursuivez avec chez max.

Produire en interne remplace une partie du budget financier par du temps d'apprentissage, de préparation et de contrôle. Mesurez ce coût comme n'importe quelle autre ressource : disponibilité de l'équipe, qualité attendue, fréquence des futures évolutions et risque d'erreur. Un budget de refonte de site web bien construit réserve le maquettage dès le départ. Si vous souhaitez un cadrage et des livrables sur mesure, consultez notre service de design de site web.