Une maquette de site web, c’est la version visuelle de votre futur site avant qu’une seule ligne de code ne soit écrite, et c’est probablement l’étape la plus rentable de tout le processus de création. Que vous lanciez votre premier site vitrine ou que vous prépariez la refonte d’une plateforme existante, cette étape vous permet de valider les choix de structure, de navigation et de design avec des images plutôt qu’avec des mots, ce qui réduit considérablement les allers-retours et les factures pendant le développement. Voici comment construire une maquette concrète, avec quels outils et à quel prix en Suisse et en France.
Qu’est-ce qu’une maquette de site web ?
Une maquette de site web est une représentation visuelle statique de ce que vos pages afficheront une fois terminées, avec les emplacements du logo, du menu, des blocs de texte, des images et des boutons d’action, le tout dans les couleurs, les typographies et les proportions définitives.
Elle se distingue du wireframe, qui est une version plus dépouillée avec des rectangles gris, des lignes et aucune couleur ni image réelle, et du prototype, qui ajoute de l’interactivité en permettant de cliquer sur les boutons, de dérouler les menus et de passer d’une page à l’autre. Le wireframe pose la structure, la maquette habille cette structure et le prototype la rend fonctionnelle pour tester le parcours réel d’un visiteur.
Pour un indépendant ou une PME qui fait appel à un prestataire pour créer son site internet, la maquette joue un rôle de contrat visuel, parce qu’elle montre exactement ce que le prestataire va construire. Vous ne validez plus “une page d’accueil avec un bloc de présentation et trois services” décrite dans un document, vous validez une image fidèle de cette page, avec vos propres contenus et vos propres couleurs. Le décalage entre ce que vous imaginiez et ce que le développeur comprend se réduit à presque rien quand tout le monde regarde la même image.
Dans le parcours de création ou de refonte de site internet, la maquette se place généralement après le cahier des charges qui définit les objectifs, les fonctionnalités et les contenus attendus, et avant le développement technique proprement dit. C’est à ce moment précis que les choix visuels se figent, et c’est pour cette raison que cette étape est aussi précieuse : changer un bouton dans une maquette prend trente secondes, alors que changer le même bouton dans un site codé peut prendre une demi-journée de travail.
Pourquoi créer une maquette avant de développer ?
Créer une maquette avant de passer au code permet de repérer les problèmes de navigation, de hiérarchie visuelle et de logique de parcours à un moment où les corriger ne coûte quasiment rien.
Le premier bénéfice est financier, et il se mesure en francs économisés sur le développement. Quand un designer produit une maquette et que vous demandez de déplacer le formulaire de contact depuis la page “À propos” vers la page d’accueil, il faut cinq minutes de travail dans l’outil de design. Si cette même demande arrive après trois semaines de développement, il faut parfois restructurer la logique de navigation, réviser les composants déjà codés et adapter les tests automatisés, ce qui peut représenter plusieurs heures de travail facturées. Plus le projet avance, plus chaque changement coûte cher, et la maquette est le dernier moment où ces changements restent peu coûteux.
Le deuxième bénéfice concerne la communication avec votre prestataire. Un cahier des charges bien rédigé, même très détaillé, laisse toujours une marge d’interprétation quand il décrit “une navigation claire et facile à utiliser”, parce que cette description ne veut pas la même chose pour tout le monde. La maquette élimine cette ambiguïté en remplaçant les descriptions par des images, et elle donne à chaque partie prenante un document de référence commun sur lequel tout le monde peut pointer du doigt un élément précis pour en discuter.
Le troisième bénéfice est stratégique, parce que visualiser le parcours complet d’un visiteur avant le développement permet de tester si votre site remplit ses objectifs commerciaux. Votre bouton de contact est-il visible sans défiler la page sur mobile ? Un visiteur comprend-il en trois secondes ce que vous proposez ? Le parcours d’achat demande-t-il sept clics alors que trois suffiraient ? Ces questions trouvent leurs réponses dans la maquette, pas dans le code, et y répondre à ce stade est gratuit alors que les corriger plus tard représente un budget supplémentaire.
Enfin, la maquette protège votre investissement global. Un site vitrine représente typiquement un budget de 3 000 à 8 000 francs, et un site e-commerce peut dépasser les 15 000 francs. Investir entre 500 et 1 500 francs dans une maquette solide pour protéger ce budget, c’est l’équivalent d’un architecte qui dessine les plans d’une maison avant que le maçon ne pose la première brique.
Wireframe, maquette ou prototype : quelle différence ?
Le wireframe, la maquette et le prototype sont trois étapes successives de la conception visuelle d’un site, et chacune sert un objectif bien distinct dans le processus de création.
Le wireframe, parfois appelé zoning ou squelette de page, est la version la plus schématique du travail de conception. Il se compose de rectangles gris, de lignes et de blocs de texte factice disposés sur une grille, et son rôle est de définir la structure de la page : combien de colonnes, où se trouve le menu, quelle zone accueille le contenu principal et où se place l’appel à l’action. On le dessine souvent en noir et blanc, sans se soucier des couleurs, des images ou des polices de caractères, parce qu’il ne doit répondre qu’à une seule question : l’organisation de l’information sur la page est-elle logique et suffisamment claire pour que le visiteur s’y retrouve ?
La maquette reprend cette structure et lui donne son apparence finale en remplaçant les rectangles gris par des images, le texte factice par vos vrais contenus, et en appliquant les couleurs de votre identité visuelle et les typographies choisies. C’est un document statique qu’on ne peut pas cliquer ni interagir avec, mais il montre fidèlement ce que chaque page ressemblera une fois construite. La plupart des projets web pour des PME s’arrêtent à cette étape avant de passer au code, parce qu’elle fournit suffisamment d’information pour travailler sans ambiguïté.
Le prototype va un cran plus loin en ajoutant l’interactivité aux écrans de la maquette, ce qui permet de cliquer sur les boutons, de voir les menus s’ouvrir, de remplir un formulaire et de passer d’une page à l’autre comme sur un vrai site. C’est un outil particulièrement utile pour les sites e-commerce ou les applications métier, où le parcours de l’utilisateur comporte beaucoup d’étapes et où chaque friction supprime des conversions. En revanche, pour un site vitrine de cinq à dix pages, un prototype complet représente un investissement rarement justifié et la maquette suffit dans la grande majorité des cas.
La distinction pratique à retenir est simple : commencez par un wireframe rapide pour fixer la structure, passez à la maquette pour valider le design visuel avec toutes les parties prenantes, et ajoutez le prototypage uniquement si votre site implique des parcours complexes ou des fonctionnalités interactives que vous avez besoin de tester concrètement avant le développement.
Comment créer une maquette de site web en 5 étapes ?
Créer une maquette demande une méthode bien plus qu’elle ne demande des compétences de designer professionnel, et les cinq étapes ci-dessous fonctionnent aussi bien pour quelqu’un qui utilise un outil en ligne pour la première fois que pour un studio qui travaille sur Figma au quotidien.
La première étape consiste à rassembler vos contenus et vos objectifs avant d’ouvrir le moindre outil de design. Listez les pages dont votre site a besoin (accueil, services, à propos, contact, blog, mentions légales), identifiez les textes et les images que vous avez déjà, et notez l’objectif principal de chaque page : la page d’accueil doit-elle déclencher une prise de contact ou présenter votre catalogue de produits ? La page services doit-elle comparer plusieurs offres ou détailler un service unique en profondeur ? Si vous avez un cahier des charges déjà rédigé, cette étape est quasiment terminée parce que le travail de réflexion a déjà été fait.
La deuxième étape est le wireframe rapide, c’est-à-dire poser la structure de chaque page sur papier ou sur un écran avec des formes simples. Dessinez des rectangles pour chaque zone (en-tête, bloc de texte, emplacement d’image, bouton d’action, pied de page) et organisez-les verticalement dans l’ordre où le visiteur les découvrira en faisant défiler la page. À ce stade, ne vous préoccupez ni des couleurs ni des images : concentrez-vous uniquement sur la logique du parcours et sur la hiérarchie de l’information. Un wireframe de page d’accueil tient généralement sur une feuille A4, et l’ensemble des wireframes d’un site de six pages se dessine en une heure ou deux sans compétence particulière.
La troisième étape est le choix de votre identité visuelle : une palette de couleurs (trois à cinq couleurs maximum, dont une couleur d’accent pour les boutons), deux polices de caractères (une pour les titres, une pour le texte courant) et une direction pour le style des images (photographies professionnelles, illustrations ou icônes). Si votre entreprise dispose déjà d’une charte graphique, vous l’appliquez directement, sinon cette étape demande un peu plus de réflexion, mais elle est indispensable pour donner à votre maquette un aspect cohérent.
La quatrième étape est la construction de la maquette dans un outil dédié comme Figma ou Penpot. Reprenez la structure de vos wireframes et habillez-la avec vos couleurs, polices et contenus réels, en commençant par la page d’accueil qui donne le ton de tout le site, puis en déclinant le style sur les autres pages. Pensez à maquetter au moins deux largeurs d’écran : un format ordinateur (1440 pixels de large, le standard actuel) et un format mobile (375 à 390 pixels), parce que la majorité de vos visiteurs arrivera depuis un téléphone.
La cinquième étape est la relecture et la validation par des personnes extérieures au projet. Montrez la maquette à un collègue, un proche ou un client potentiel et demandez-leur de décrire ce qu’ils comprennent de chaque page en quelques secondes. Si la réponse ne correspond pas à votre objectif, la maquette a besoin d’ajustements, et cette relecture prend rarement plus d’une demi-journée.
Quels outils utiliser pour maquetter votre site ?
L’outil que vous choisissez dépend de votre niveau technique, de votre budget et de la complexité de votre projet, mais trois catégories couvrent la grande majorité des besoins actuels.
Figma est devenu le standard de l’industrie du design web, et il est entièrement gratuit pour un usage individuel avec jusqu’à trois projets actifs dans le navigateur, sans aucune installation nécessaire. Son interface permet de créer des wireframes, des maquettes et des prototypes dans le même outil, et ses composants réutilisables accélèrent le travail dès le deuxième écran maquetté. Pour un entrepreneur qui veut créer sa propre maquette, la courbe d’apprentissage demande entre deux et quatre heures de tutoriels vidéo, mais le résultat sera d’une qualité suffisante pour être directement transmis à un développeur. Figma permet aussi de partager un lien de visualisation avec votre prestataire pour qu’il ajoute ses commentaires directement sur la maquette, ce qui remplace les échanges de captures d’écran par courriel qui deviennent vite confus.
Penpot est l’alternative libre et gratuite à Figma, hébergée en Europe et sans limitation sur le nombre de projets. Son interface est très proche de celle de Figma, les formats d’export sont compatibles et, pour une PME soucieuse de garder ses données sur des serveurs européens, c’est un choix pertinent. Il lui manque encore la profondeur de l’écosystème de plugins de Figma, mais pour maquetter un site de cinq à quinze pages, les fonctionnalités disponibles sont largement suffisantes.
Canva, que beaucoup connaissent déjà pour ses visuels de réseaux sociaux, propose aussi des modèles de maquettes web qui permettent de produire un résultat visuel en une à deux heures sans aucune compétence technique, simplement en partant d’un modèle existant et en remplaçant les contenus. L’avantage est la rapidité pour quelqu’un qui n’a jamais touché à un outil de design, mais l’inconvénient est que Canva n’est pas un vrai outil de conception d’interfaces : les maquettes produites sont souvent trop rigides pour être prototypées ou transmises proprement à un développeur avec des dimensions précises au pixel. Pour un site de trois ou quatre pages, c’est un bon point de départ pour visualiser une direction avant d’investir dans une maquette plus aboutie.
Pour ceux qui veulent intégrer l’intelligence artificielle dans le processus, des outils comme Uizard ou Relume permettent de générer un premier jet de wireframe à partir d’une description textuelle de vos pages. C’est utile pour accélérer la phase de wireframe et explorer rapidement plusieurs directions, mais la maquette finale nécessitera toujours un travail humain pour aligner le résultat sur votre identité visuelle et vos objectifs commerciaux.
| Outil | Prix | Niveau requis | Points forts | Limites |
|---|---|---|---|---|
| Figma | Gratuit (plan Starter) | Intermédiaire | Standard professionnel, collaboration en temps réel, prototypage | Courbe d’apprentissage de quelques heures |
| Penpot | Gratuit et libre | Intermédiaire | Données en Europe, aucune limite de projets | Écosystème de plugins plus limité |
| Canva | Gratuit ou Pro a environ 130 CHF par an | Débutant | Rapidité, modèles prêts à l’emploi | Pas un vrai outil d’interface, export limité |
| Uizard | Gratuit ou Pro a environ 140 CHF par an | Débutant | Génération assistée par IA, wireframes rapides | Résultat générique qui nécessite du travail manuel |
Combien coûte une maquette de site web ?
Le prix d’une maquette de site web dépend de trois facteurs principaux : le nombre de pages à maquetter, le niveau de fidélité visuelle attendu et le profil de la personne qui réalise le travail.
Si vous la réalisez vous-même avec un outil gratuit comme Figma ou Penpot, le coût logiciel est nul, mais comptez entre huit et vingt heures de travail pour un site de six à dix pages, en incluant le temps d’apprentissage de l’outil si vous ne l’avez jamais utilisé. Pour un indépendant dont le temps de travail a une valeur, ce n’est pas véritablement gratuit : c’est un coût que vous payez en heures plutôt qu’en francs, et il faut se demander si ces heures ne seraient pas mieux investies dans votre activité principale pendant qu’un professionnel s’occupe de la maquette.
Un designer indépendant spécialisé en UX/UI facture généralement entre 800 et 2 500 francs pour la maquette complète d’un site vitrine de cinq à huit pages, avec deux à trois allers-retours de correction inclus dans ce tarif. Ce prix comprend le wireframe initial, la maquette haute fidélité dans les versions ordinateur et mobile, et un fichier Figma propre et structuré avec des composants nommés et des styles définis que votre développeur pourra utiliser directement comme référence. Pour un site e-commerce de vingt à trente pages avec des parcours d’achat, des filtres produit et un espace client, le budget monte à 3 000 - 5 000 francs, parce que chaque écran supplémentaire représente du travail de conception et de test.
Une agence web facture la maquette dans une fourchette plus haute, typiquement entre 2 000 et 6 000 francs pour un site vitrine et entre 5 000 et 12 000 francs pour un e-commerce, mais le tarif inclut souvent la phase de stratégie en amont avec des ateliers de découverte, la définition des parcours utilisateurs et l’analyse de la concurrence. Chez certains prestataires, le coût de la maquette est intégré au devis global de création du site, ce qui signifie que vous ne le payez pas séparément, mais que son montant est bien compris dans le prix total du projet.
Le rapport qualité-prix optimal pour une PME se situe généralement du côté du designer indépendant spécialisé, parce que vous obtenez une maquette professionnelle à un tarif raisonnable sans les coûts de structure d’une agence. L’élément déterminant est que le prestataire livre un fichier Figma ou Penpot organisé avec des composants nommés et des styles définis, parce que c’est ce fichier qui servira de référence pendant tout le développement : un simple PDF ou une image statique ne permet pas d’inspecter les dimensions et les espacements avec la précision nécessaire.
Votre maquette est prête, et ensuite ?
La maquette validée, la suite logique est de la transmettre à la personne ou à l’équipe qui construira le site, accompagnée du cahier des charges et de l’ensemble des contenus définitifs que vous avez rassemblés.
Si vous travaillez avec un prestataire externe, demandez-lui de vous envoyer une première version fonctionnelle qui reproduit fidèlement la maquette sur au moins deux pages, la page d’accueil et une page intérieure, avant de développer le reste du site dans son intégralité. Cette approche vous permet de corriger les éventuelles divergences entre la maquette et le résultat technique dès le début du projet, plutôt que de découvrir des écarts une fois que l’ensemble du site est construit et que les corrections deviennent coûteuses.
Gardez le fichier Figma ou Penpot accessible pendant toute la durée du développement, parce qu’il sert de source unique de vérité pour trancher les questions de design qui surgissent inévitablement au cours du projet. Quand le développeur se demande si un bouton doit être vert ou bleu, ou si la marge entre deux sections mesure 40 ou 60 pixels, la réponse se trouve dans le fichier en trente secondes, ce qui transforme des débats subjectifs en vérifications factuelles et accélère le travail de chacun.
Si vous êtes au stade de réfléchir à votre projet de site internet et que vous souhaitez travailler avec quelqu’un qui intègre la maquette dans le processus de création, prenez contact pour en discuter.
