La réalisation des maquettes est une étape déterminante dans la création d’un site internet, et elle pèse sur son prix. Pour que votre site soit agréable, il faut soigner le design de l’interface, mais surtout, pour qu’il soit efficace, construire une mise en page intelligente, adaptée à vos objectifs et à vos contenus. Le maquettage passe par plusieurs niveaux, du design fonctionnel en noir et blanc au design graphique intégrant votre identité et vos couleurs.
Comment créer la maquette d’un site web ? Partez de l’arborescence, puis réalisez d’abord des maquettes fonctionnelles (wireframes) en noir et blanc pour caler la structure et l’ergonomie, en itérant avec des retours extérieurs. Isolez ensuite les composants réutilisables, avant de passer à la maquette graphique qui applique couleurs et identité de marque. Des outils comme Balsamiq, Figma ou Axure couvrent l’essentiel du travail de maquettage, du wireframe au prototype.
Dans cet article, nous partageons la démarche que nous appliquons pour réussir cette phase fondamentale de tout projet web. Que ce soit une agence ou vous-même qui réalisiez les maquettes, il est utile d’avoir les idées claires avant de commencer. Si vous cherchez plutôt à comparer les outils entre eux, consultez notre sélection de logiciels de mockup et de wireframe.
Les deux types de maquette d’un site internet
Maquette, wireframe, mockup, interface graphique : les professionnels du web sont créatifs en matière de vocabulaire, et il existe près d’une dizaine de termes pour parler d’une maquette. Cette richesse sémantique ne doit pas masquer l’essentiel : le mot « maquette » recouvre deux réalités bien différentes.
La maquette fonctionnelle (wireframe)
Il s’agit de définir en noir et blanc la mise en page, l’organisation des éléments, voire les principaux textes. C’est ce type de maquette qu’on appelle wireframe. Le terme mockup qualifie une maquette fonctionnelle représentée à l’échelle 1:1, et le zoning une maquette composée uniquement de blocs, la toute première étape du wireframe.
La maquette graphique
Prolongement de la maquette fonctionnelle, la maquette graphique intègre les couleurs et l’identité de marque. C’est une représentation précise de la page qui devra ensuite être intégrée (codée en HTML et CSS) par les développeurs, à l’exception parfois des textes, souvent encore du faux texte (lorem ipsum). Les maquettes graphiques sont généralement réalisées sous des logiciels professionnels de design d’interface.
Pourquoi prendre le temps de bien maquetter ?
Changer la mise en page ou l’identité graphique d’un site une fois construit n’est jamais évident, même avec un logiciel de création de site. Le meilleur moyen d’arriver à des maquettes graphiques efficaces dès le départ, c’est de prendre le temps de réaliser correctement les maquettes fonctionnelles des pages principales, et surtout d’itérer : une première version, un avis, une reprise du wireframe, un nouvel avis, et ainsi de suite.
Cette exigence prend un sens différent selon la manière dont le site est développé :
- Si la création est confiée à un prestataire, invitez dès le départ l’agence à prévoir suffisamment de temps pour les maquettes fonctionnelles. Les agences cherchent souvent à boucler vite, et il est courant que le wireframing se réduise à une semaine avec un seul aller-retour client.
- Si vous développez vous-même, la difficulté est de vous forcer à réaliser et à itérer sur des maquettes fonctionnelles avant de passer à l’interface de votre CMS. On croit souvent avoir une idée assez précise de la mise en page pour s’en dispenser, mais les retours obtenus sur un wireframe simple sont précieux.
Quels outils pour maquetter un site web ?
Les solutions traditionnelles
Beaucoup de projets démarrent encore avec des solutions simples, qui ont l’avantage d’être immédiates même si elles gèrent mal les proportions entre formats d’écran :
- Le papier : rapide, accessible et souple, il garde de fervents défenseurs pour le wireframing. Le Nielsen Norman Group documente d’ailleurs l’intérêt du prototypage papier pour tester une interface très tôt.
- Le tableur ou le logiciel de présentation : PowerPoint ou Keynote, grâce à leur souplesse pour manipuler des formes simples, dépannent pour un wireframing basique, même si ce n’est pas leur vocation.
Les logiciels de wireframe et de maquettage
Ces outils, le plus souvent en SaaS utilisables depuis un navigateur, sont pensés pour réaliser les maquettes fonctionnelles de pages web. La plupart gèrent l’échelle et les proportions, et surtout ils sont collaboratifs. Il en existe des dizaines : nous en présentons trois, très différents, pour illustrer plusieurs approches. Pour une comparaison complète, reportez-vous à notre sélection de logiciels de mockup. La définition et les usages du wireframe sont par ailleurs bien synthétisés par l’Interaction Design Foundation.
Balsamiq est une référence du wireframing basse fidélité, à la fois simple et efficace pour poser rapidement des maquettes en style « esquisse ». L’outil propose un essai gratuit de 14 jours, puis un abonnement à partir de 16 $ par mois et par éditeur (offre Starter, facturation annuelle), tarifs relevés le 6 juillet 2026.
Figma est devenu le standard du design d’interface collaboratif. Fonctionnant dans le navigateur, il permet de passer du wireframe au prototype interactif à plusieurs sur un même fichier. Son forfait de base est gratuit, les offres payantes démarrant à 16 € par mois et par éditeur (forfait Professionnel), tarifs relevés le 6 juillet 2026 sur sa page française.
Axure RP est l’un des outils les plus complets pour le prototypage avancé et les interactions poussées. Il vise plutôt les designers et agences chevronnés, avec une prise en main plus exigeante. Comptez, après un essai de 30 jours, 29 $ par mois et par utilisateur pour l’offre Pro (facturation annuelle), tarifs relevés le 6 juillet 2026.
Les logiciels de design graphique
Une fois les maquettes fonctionnelles validées et confrontées à votre entourage, il est temps de passer au maquettage graphique. Pendant longtemps, Adobe Photoshop a régné sur cette étape, au point que son format de fichier, le .PSD, est devenu un mot du jargon des professionnels du web. Ce n’est plus le cas aujourd’hui : pour le design d’interface web, la référence est désormais Figma, aux côtés de Sketch (sur Mac) et de l’alternative open source Penpot. Photoshop reste utile pour le travail sur les images, mais n’est plus l’outil central de la maquette graphique.
Comment créer une maquette de site internet, étape par étape
Pour organiser cette phase, voici les principales étapes de notre démarche. À adapter, bien sûr, aux besoins et aux contraintes de votre projet.
Arborescence
Avant de penser à la mise en page, il faut une vue d’ensemble du site pour identifier les « modèles » de page, c’est-à-dire les structures communes à plusieurs pages (le modèle « article de blog », le modèle « fiche produit », etc.). Ce sont ces modèles que vous maquetterez en premier. L’arborescence est aussi précieuse pour concevoir des parcours efficaces et préparer le maillage interne. Pour aller plus loin, consultez notre guide sur l’arborescence d’un site.
Wireframes des pages principales
Réalisez d’abord uniquement les wireframes des pages, ou des modèles de pages, principales. Cela vous permet d’identifier les composants graphiques à réutiliser dans les pages secondaires, et il est courant qu’en maquettant les pages clés on modifie l’arborescence initiale. Concrètement : dessinez rapidement les trois pages clés du parcours, demandez des avis, retravaillez-les en entrant un peu plus dans le détail, puis ajoutez-en trois autres, et ainsi de suite. Une démarche itérative de ce type est très efficace, mais elle suppose souvent un changement d’état d’esprit.
Définition des composants et wireframes détaillées
Une fois les wireframes des pages principales validés, rapprochez l’ensemble des pages pour repérer les composants communs (blocs, tableaux, onglets, tous les objets réutilisables). L’enjeu n’est pas seulement de gagner un peu de temps de développement : c’est surtout indispensable pour créer une expérience de navigation cohérente. Vous pouvez alors entrer dans le détail des pages plus secondaires. Le niveau de détail optimal d’un wireframe est un vaste débat (textes, alignements, marges) : tout dépend du webdesigner avec qui vous travaillez, une question qu’il vaut mieux aborder dès la première discussion.
Maquettes graphiques
Le travail de maquettage graphique est plus créatif : il faut laisser davantage de liberté au webdesigner. En tant que porteur du projet, donnez des inspirations et expliquez bien le positionnement de votre marque, sans brider la créativité par des instructions trop détaillées. Si vous transmettez des maquettes fonctionnelles claires et un brief créatif précis, votre designer aura toutes les cartes en main pour livrer des maquettes à la hauteur.
Notre méthode
La démarche décrite ici reflète la manière dont nous cadrons la phase de maquettage sur nos projets, du wireframe à la maquette graphique. Les trois outils mis en avant (Balsamiq, Figma, Axure) ont été vérifiés en ligne le 6 juillet 2026, et leurs tarifs relevés le même jour sur leurs pages officielles ; nous les citons dans la devise affichée par chaque éditeur (dollars pour Balsamiq et Axure, euros pour Figma). Nous n’avons pas conduit de test comparatif sur la durée : ce sont des points de repère, pas un classement. La comparaison exhaustive vit dans notre sélection de logiciels de mockup.
En conclusion, consacrer du temps à la phase de maquettage est un investissement rentable : c’est une étape clé pour construire un site à la fois agréable et efficace. Et pour qu’il soit vraiment adapté à sa cible, confrontez dès que possible vos maquettes à des personnes extérieures au projet. Créer une expérience utilisateur forte est un métier à part entière, celui d’UX designer, dont les qualités essentielles restent l’écoute et l’amélioration continue.
