Maquette de site web : méthode, outils et prix (2026)

Tu veux créer un site internet mais tu ne sais pas par où commencer ? La maquette, c’est la phase qui sépare un projet flou d’un projet réussi.

Chez Palmsquare, on conçoit toutes nos maquettes avant de créer une seule page sur WordPress. Pourquoi ? Parce qu’attaquer un développement sans maquette, c’est comme construire une maison sans plan. On peut le faire, mais pas sûr que le résultat ressemble à quelque chose.

Dans cet article, je t’explique comment réaliser une maquettes de site web phase par phase, quels outils utiliser, combien ça coûte, et les erreurs à éviter.

Qu’est-ce qu’une maquette de site web ? Définition

Par définition, une maquette de site web, c’est le plan de ton futur site internet. Imagine : avant de construire une maison et d’y emménager, tu veux voir à quoi elle ressemble. La maquette c’est exactement ça pour ton site.

Concrètement, la maquette c’est un rendu visuel qui te permet de voir au pixel près à quoi ton site va ressembler : la disposition des éléments, les couleurs, les visuels, les typographies, la navigation entre les pages. Tout est là, sauf que rien ne fonctionne encore. C’est une vue statique, pas un site en ligne.

Wireframe, maquette, prototype : les 3 niveaux

On fait souvent l’amalgame entre ces trois termes. Sur le papier, ce sont trois « maquette » de ton site, mais dans les faits, ce sont trois phases très différentes du processus.

Le wireframe (ou zoning), c’est le brouillon. Un schéma gris, sans couleurs, sans visuels, sans habillage graphique. Il sert à réfléchir aux emplacements : les sections, les boutons, le contenu texte, les blocs de la page. Son objectif, c’est d’organiser le parcours des utilisateurs et la hiérarchie de l’information avant de penser à l’esthétique.

La maquette, c’est le schéma auquel on a ajouté le graphisme. On y intègre les couleurs, la typographie, les visuels, le style visuel. C’est une représentation haute fidélité de ce que le site final va donner.

Le prototype, c’est un rendu interactif. On peut cliquer sur les boutons, voir les animations, naviguer entre les pages. C’est comme si la plateforme existait déjà, sauf qu’il n’y a pas de code derrière.

Chez Palmsquare, on ne fait pas de prototype. Par gain de temps, on explique les animations au commanditaire et on les intègre directement lors du développement. Ça évite une phase supplémentaire sans réelle plus-value pour la plupart des missions.

Pourquoi créer une maquette avant de développer ton site

La maquette n’a rien d’un luxe, c’est un passage indispensable pour tout projet de site internet sérieux. Voici pourquoi :

Visualiser avant de créer

Quand on bascule sur WordPress et Elementor pour reproduire les pages, on sait exactement ce qu’on va faire. On n’improvise pas le design en live. Le processus de développement n’est pas un tâtonnement et le résultat bien meilleur.

Valider avec le client

La maquette permet au client de se projeter concrètement. Il voit le rendu final, il donne ses retours, on ajuste. C’est mille fois plus efficace que de lui demander de valider un site à moitié développé. Sans ce passage, tu t’exposes à des allers-retours qui coûtent cher en temps et en énergie.

Optimiser le parcours des utilisateurs

En maquettant, on a une vue dégagée sur la navigation, la disposition du contenu, la hiérarchie visuelle. On peut tester différentes pistes avant de s’engager dans le code. C’est là qu’on repère les problèmes d’interface et d’expérience, et qu’on les corrige.

Penser le responsive dès le départ

On va pouvoir réfléchir à la fois à la déclinaison PC et à la déclinaison téléphone. En 2026, ignorer le smartphone n’a plus de sens : sur beaucoup de sites, plus de 60 % des utilisateurs arrivent depuis leur portable.

Améliorer le référencement naturel

Quand on construit le squelette fonctionnel, on pense aussi au contenu, aux mots-clés, aux titres, à l’architecture des pages. Quelle est la hiérarchie des informations ? Qu’est-ce que les utilisateurs recherchent ? Cette étape aide à poser ces fondations avant le développement.

Exemple de cahier des charges identité visuelle

Télécharger gratuitement

Les 5 phases pour créer ta maquette

Voici les phases par lesquelles on passe chez Palmsquare quand on conçoit la maquette d’un site. Ce processus peut varier selon le prestataire, mais la logique reste la même.

1. Définir l’arborescence

Premier palier avant de toucher au moindre pixel : réfléchir à l’architecture du site et au parcours des utilisateurs. On crée une arborescence claire qui définit toutes les pages, leur organisation, et les liens entre elles.

Chez nous, on utilise Octopus pour visualiser le plan du site. C’est un outil simple et efficace qui permet de voir d’un coup d’oeil la navigation. Ce socle est indispensable : sans arborescence validée, impossible d’avancer sur le zoning.

2. Construire le wireframe

Ici, on construit les différentes sections du site sans aucun graphisme. On place les éléments clés (textes, images, boutons, formulaires) selon l’arborescence validée. L’objectif, c’est d’optimiser le parcours utilisateur en définissant la disposition stratégique de chaque composant sur l’écran avant de passer à la direction artistique.

Le schéma fonctionnel, c’est le moment où on réfléchit vraiment à l’agencement : quel contenu apparaît en premier ? Où sont les appels à l’action ? Comment le flux d’utilisateurs s’organise d’une page à l’autre ? On travaille sur la structure, pas sur le joli.

3. Créer la direction artistique

Une fois le zoning validé, on passe à la réflexion sur l’univers graphique. On se fonde sur la charte graphique existante, ou on en crée une si besoin.

L’idée, c’est de ne pas tout habiller d’un coup. On prend la page d’accueil et on travaille 2 à 3 propositions graphiques. C’est comme si on te demandait de fabriquer un produit : tu usines d’abord des échantillons, tu valides le rendu, et ensuite seulement tu lances la production. C’est pas au bout de 10 000 exemplaires qu’on va te dire « finalement, le bouton je le voulais plutôt à droite ».

Le client choisit la direction qui lui correspond, et on avance sur cette base pour donner vie au graphisme final.

4. Décliner le webdesign

Cette phase consiste à décliner la direction artistique sur l’ensemble des pages. On finalise le rendu de toutes les sections, on intègre les retours des clients, on ajuste les détails pour obtenir un résultat esthétique, cohérent et performant.

C’est le gros du travail de conception. Chaque gabarit de page (accueil, à propos, services, contact, blog, etc.) reçoit son habillage dédié. On ne décline pas toutes les pages individuellement, on crée des gabarits réutilisables. Un site de 30 pages peut n’avoir que 6 à 8 layouts différents.

5. Adapter sur mobile

Dernière phase : adapter le rendu pour les différents appareils. En 2026, penser le téléphone n’a plus rien d’optionnel, c’est une nécessité.

On ne parle pas d’adapter la déclinaison PC sur un petit écran. On parle de repenser la mise en page, la navigation et la disposition des éléments pour que le parcours soit au même niveau sur smartphone que sur desktop. Le flux est différent, l’ergonomie est différente, mais l’objectif reste le même : que chaque utilisateur trouve ce qu’il cherche rapidement.

Mon avis sur la tablette : personnellement, on ne prépare jamais la déclinaison tablette. En 2026, moins de 1 % des visiteurs naviguent sur tablette, et la plupart affichent simplement le format desktop. On n’a plus l’ère des tablettes verticales.

Quelle résolution utiliser pour une maquette

La question revient souvent. Voici les standards qu’on utilise en agence :

• Desktop : 1440 px de largeur. C’est la résolution standard qui s’adapte à la grande majorité des moniteurs actuels.
• Smartphone : 393 px de largeur. C’est la résolution des téléphones récents (derniers modèles d’iPhone). Tu couvres ainsi la majorité des appareils.
• Tablette : 768 px. Optionnel. Comme je le disais, on ne le fait quasiment jamais.

Pourquoi le mobile-first est important : on ne fait pas systématiquement de maquette dédié au téléphone, mais sur les gros projet, c’est indispensable. Énormément de visiteurs arrivent depuis leur smartphone. On ne peut plus se dire « on fait le format PC et on adapte ».

Il faut penser le portable comme un support à part entière, avec son propre parcours et sa propre ergonomie. Après, honnêtement, le vrai mobile-first (penser d’abord téléphone puis PC), je l’ai rarement vu appliqué en dehors des applications web. Sur un site vitrine ou e-commerce classique, on pense PC et téléphone en même temps, l’un après l’autre, mais on optimise les deux.

Les meilleurs outils pour réaliser une maquette

Figma : notre recommandation

Figma, c’est l’outil numéro 1 pour le maquettage en 2026. C’est le logiciel qu’on utilise pour toutes nos missions chez Palmsquare, et c’est celui que la grande majorité des agences et freelances utilisent.

Pourquoi Figma ? Il est disponible en ligne (pas besoin d’installer quoi que ce soit), il fonctionne en freemium, il permet la collaboration en temps réel avec ton équipe, et la communauté est énorme : tu trouveras des milliers de templates, de kits UI et de ressources prêtes à l’emploi.
C’est un peu technique à prendre en main au premier abord, mais une fois lancé, c’est un jeu d’enfant.

Canva : pour les non-designers

Canva peut convenir à ceux qui ne maîtrisent pas le graphisme et qui veulent maquetter leur site rapidement avec un générateur de mockup simple. Le logiciel propose des maquettes de sites web gratuites et un système de drag & drop accessible.

Mais soyons clairs : si ton prestataire te livre un rendu fait sur Canva, pose-toi des questions. C’est un outil limité pour un usage professionnel, et le résultat ne sera pas comparable à ce qu’on peut faire sur un outil pro.

Les outils IA

L’intelligence artificielle change la donne pour la création de maquette. Des solutions comme Figma make permettent de générer des rendus en quelques minutes.

Personnellement, je pourrais très bien utiliser un outil comme Claude pour créer une base avant d’aller le construire dans l’outil. L’IA peut aussi aider les personnes qui n’ont aucune compétence en graphisme et qui veulent montrer un exemple de ce qu’elles veulent à leur prestataire.

Mais attention : ces solutions évoluent tellement vite que ce que je te recommande aujourd’hui sera peut-être dépassé dans 6 mois. Et surtout, l’IA ne remplacera pas l’expertise humaine pour un rendu de qualité.

Miro : la plateforme collaborative

Miro, c’est un tableau blanc collaboratif que j’utilise souvent en formation. L’application propose des modèles de sites et des canevas de brouillon qui peuvent te permettre de commencer à réfléchir à l’architecture.

C’est un bon premier pas pour brainstormer avec ton équipe ou tes apprenants, mais on ne peut pas faire un vrai rendu dessus. Ça reste limité. Par contre, pour la phase de réflexion et de zoning rapide, c’est un bon complément.

Adobe XD : en perte de vitesse

Celui-là, clairement, je te dirai de ne pas l’utiliser. L’éditeur a stoppé les mises à jour d’Adobe XD, le logiciel est mort. On rencontre encore des irréductibles qui font des rendus avec, comme d’autres qui font encore leurs planches sur Photoshop avec des fichiers PSD. Ce n’a jamais été le bon outil pour du maquettage web, et les fichiers PSD restent cantonnés au print. MockFlow ou même Canva sont des alternatives bien plus adaptées.

Combien coûte une maquette en 2026

Personnellement, dans notre agence, on facture rarement juste une maquette. Souvent, le rendu fait partie d’un forfait global (site au complet). Mais si on isole la partie maquettage, voici ce que ça représente.

La règle : une maquette de votre site, c’est environ 40 % du budget total d’un forfait web. Si le forfait coûte 6 000 €, tu peux compter 2 000 à 3 000 € dédiés a la maquette C’est une part importante, mais c’est normal : c’est là que tout se joue.

Ce qui fait varier le budget

Le budget d’une maquette de votre site peut fortement évoluer selon plusieurs critères :

• Le niveau de livrable : un zoning, une maquette ou un prototype abouti, ce n’a pas du tout le même coût. Un prototype avec animations, format PC, téléphone et tablette coûtera bien plus cher qu’un simple schéma fonctionnel.
• Le nombre de layouts : 4 pages types ou 12, le forfait diffère.
• La complexité graphique : un site vitrine simple versus un site avec des animations, du motion et une ergonomie sur mesure.
• Le prestataire : un freelance débutant sera moins cher qu’un directeur artistique en agence. Mais les résultats ne seront pas comparables en termes d’originalité et d’optimisation.

Exemple de devis pour une identité visuelle

Télécharger gratuitement

Template vs sur-mesure

Exemples et inspiration pour tes maquettes de sites web gratuites

Tu cherches des pistes pour te lancer ou pour briefer ton prestataire ? Voici les meilleures sources d’inspiration, disponibles en ligne.

La communauté Figma

Dans l’onglet Communauté de la plateforme, tu trouveras des milliers de maquettes de sites web gratuites. Ce sont des maquettes partagés par la communauté que tu peux dupliquer et éditer librement. Tu y trouveras à la fois des planches abouties et des UI/UX kits : des bibliothèques d’éléments (boutons, formulaires, cartes, menus) qui permettent de créer facilement tes zonings ou tes maquettes.

Marketplaces de templates

Envato Market (ThemeForest) pour WordPress, les marketplaces de Webflow ou de Framer sont d’excellentes sources d’inspiration. Nous-mêmes, quand on fait notre veille avant de créer un site, on va chercher des repères sur ce genre de plateforme. Ce ne sont pas des maquettes à proprement parler, mais les templates donnent un bon aperçu de ce qui se fait en termes de webdesign.

Sites d’inspiration

Pour stimuler ta créativité, voici les sites qu’on consulte régulièrement :

• Awwwards : les meilleurs sites du web, sélectionnés par un jury de professionnels
• Dribbble : des maquettes et des créations de graphistes du monde entier
• Pinterest : bien pour constituer des moodboards rapides

On a d’ailleurs rédigé un article sur l’inspiration web si tu veux aller plus loin.

Les erreurs courantes quand on crée une maquettes de site

On voit souvent les mêmes erreurs, que ce soit chez des commanditaires qui ont fait leur maquettes seuls ou chez des prestataires peu expérimentés.

Sauter le wireframe pour passer direct au design. C’est tentant de vouloir tout de suite voir du beau, mais sans schéma fonctionnel, tu construis sur des fondations bancales. L’ossature doit être validée avant de commencer l’habillage visuel.

Ne pas penser responsive dès le départ

Si tu attends la fin de la création de ton site pour te demander comment le site rend sur téléphone, tu vas avoir des mauvaises surprises. Le smartphone doit être pensé en même temps que le desktop, pas après.

Maquetter toutes les pages au lieu de créer des gabarits

Un site de 30 pages ne nécessite pas 30 pages maquetté . Il faut réaliser une maquette par layout type (accueil, page de service, article de blog, contact…) et décliner ensuite. C’est plus rapide et plus cohérent.

Ignorer le contenu réel

Travailler avec du Lorem Ipsum, c’est possible mais c’est une mauvaise idée. Le rendu doit s’adapter au contenu, pas l’inverse. Si tu n’as pas encore tes textes, rédige au moins un socle réaliste pour chaque page.

FAQ