Maquette site web (UX/UI design) : méthode, outils et fonctionnement en 2026

La plupart des projets de site internet qui dérapent ont un point commun : on est passé directement de la commande au développement, sans jamais voir à quoi ressemblerait le résultat. Le client découvre son site au fil de l'eau, sur une version à moitié construite, et formule ses retours au moment précis où chaque correction coûte le plus cher. Les allers-retours s'accumulent, le planning glisse de plusieurs semaines, et la relation se tend parce que personne n'avait validé la même chose. Dans neuf cas sur dix, le problème n'était pas le développeur ni le client : c'était l'absence d'une étape de conception.

La maquette existe pour cela. C'est le moment où l'on dessine le site avant de le construire, où l'on tranche les questions de structure, de hiérarchie et de design, et où l'on valide le résultat sur écran plutôt que dans le vide. C'est aussi l'étape la moins bien comprise par les entreprises qui commandent un site, parce qu'elle ne produit rien de « fonctionnel » et qu'elle ressemble, vue de loin, à un supplément esthétique. Ce guide vous explique ce qu'est réellement une maquette, à quoi elle sert concrètement, comment elle se fabrique étape par étape, avec quels outils, pour quel budget et à qui la confier.

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

Une maquette de site web est une représentation visuelle de vos pages, réalisée avant le développement. Elle montre exactement ce que verront vos visiteurs : la disposition des blocs, les textes, les images, les couleurs, les boutons, les espacements, sur ordinateur comme sur mobile. On la compare souvent au plan d'architecte, et la comparaison tient sur l'essentiel : on décide sur le papier avant de couler le béton, parce qu'un mur mal placé se déplace d'un trait de crayon avant construction et coûte une fortune après. La différence avec le bâtiment, c'est qu'un site se modifie ensuite plus facilement — ce qui pousse beaucoup d'entreprises à croire, à tort, qu'elles peuvent se dispenser du plan.

UI et UX : deux métiers derrière une maquette

Les deux sigles reviennent sans cesse et sont régulièrement confondus, y compris par des prestataires. L'UX design (user experience, expérience utilisateur) s'occupe du fond : quelles informations donner, dans quel ordre, pour quel parcours, jusqu'à quelle action finale. C'est lui qui décide que sur votre page d'accueil, la réponse à « qu'est-ce que vous faites et pour qui » doit tomber avant l'histoire de l'entreprise, ou que les tarifs méritent une page dédiée plutôt qu'une ligne perdue en pied de page. L'UI design (user interface, interface utilisateur) s'occupe de la forme : couleurs, typographies, espacements, styles de boutons, cohérence visuelle d'un écran à l'autre.

Les deux se complètent et ne se remplacent pas. Une belle interface posée sur un mauvais parcours produit un site que l'on admire trois secondes et que l'on quitte sans rien faire : c'est le cas classique du site d'artisan magnifique où le numéro de téléphone est introuvable sur mobile. À l'inverse, un parcours limpide mais mal habillé produit un site efficace et peu crédible, ce qui pose un vrai problème quand votre prestation se vend plusieurs milliers d'euros et que le site est le premier élément de preuve. Une maquette réussie traite les deux dimensions, et dans cet ordre : d'abord l'UX, ensuite l'UI.

Zoning, wireframe, maquette, prototype : les différences

Ces termes désignent des niveaux de précision successifs, et les confondre est la première source de malentendus entre un client et son prestataire. Le cas typique : un dirigeant reçoit des wireframes en noir et blanc, pense qu'il s'agit du design final et s'inquiète du résultat, alors qu'on lui demandait simplement de valider l'ordre des sections.

Le zoning pose des rectangles gris sur une page : ici l'accroche, là les services, plus bas les avis clients, en bas le formulaire. Le wireframe (ou fil de fer) détaille cette structure en noir et blanc, avec les vrais intitulés, les emplacements précis des images et des boutons, mais sans aucun parti pris esthétique. La maquette haute fidélité applique ensuite la direction artistique et donne à voir le rendu final, au pixel près. Le prototype, enfin, relie ces écrans entre eux pour simuler la navigation réelle, y compris l'ouverture d'un menu ou l'envoi d'un formulaire.

Pourquoi passer par tous ces niveaux plutôt que d'aller droit à la belle image ? Parce que chacun règle une catégorie de questions, et que mélanger les niveaux fait perdre du temps à tout le monde. Discuter de la couleur d'un bouton alors que l'ordre des sections n'est pas arrêté revient à choisir la peinture d'une pièce dont on ignore encore l'emplacement des fenêtres. Sur un petit site, ces étapes se compressent et peuvent tenir en quelques jours, mais l'enchaînement logique reste le même.

Ce qu'une maquette n'est pas

Une maquette n'est pas une charte graphique. La charte définit votre identité de marque — logo, couleurs, typographies, règles d'usage — pour l'ensemble de vos supports, du site aux véhicules en passant par vos documents commerciaux. La maquette, elle, applique cette identité au web et l'adapte à ses contraintes propres : lisibilité sur petit écran, contrastes suffisants, tailles de texte, comportement au survol. Si vous n'avez pas de charte, une direction artistique minimale sera définie pendant la maquette, mais elle ne remplacera pas un vrai travail de branding et d'identité de marque.

Ce n'est pas non plus un site fonctionnel : rien n'est développé, aucun formulaire n'envoie de message, aucune page ne s'affiche dans Google, aucun contenu n'est administrable. C'est une image, aussi convaincante soit-elle. Enfin, ce n'est pas un template acheté : un thème du commerce impose sa structure à votre contenu et vous oblige à entrer dans un moule pensé pour un site générique, quand une maquette part de vos contenus, de vos arguments et de vos objectifs pour définir la structure la plus adaptée.

À quoi sert vraiment une maquette (et ce qu'elle vous fait économiser)

La maquette passe parfois pour une étape de confort, un supplément esthétique qu'on pourrait sauter pour aller plus vite et payer moins cher. C'est exactement l'inverse : c'est l'étape qui fait gagner du temps et de l'argent sur tout le reste du projet, et celle dont l'absence explique la majorité des budgets qui dérivent. Voici ce qu'elle apporte concrètement.

Décider quand la modification ne coûte rien

Déplacer une section dans une maquette prend quelques minutes : on fait glisser un bloc, on réajuste deux espacements, c'est terminé. Déplacer cette même section une fois le site intégré demande de reprendre la mise en page, de revérifier les réglages d'affichage sur mobile et tablette, parfois de réécrire les contenus qui ne fonctionnent plus dans le nouvel ordre, puis de tout retester. Ce qui coûtait cinq minutes en coûte deux heures, et cette règle vaut pour chaque décision du projet. Plus une décision est prise tard, plus elle est chère : la maquette ne fait rien d'autre que concentrer toutes les décisions au moment où elles sont les moins coûteuses.

Mettre tout le monde d'accord avant de construire

Dans une entreprise, un site engage rarement une seule personne : la direction a une vision, le commercial connaît les objections des clients, l'associé a un avis très arrêté sur les couleurs, et parfois le comptable s'invite sur le budget. Sans support visuel, chacun projette un site différent sur les mêmes mots, et tout le monde acquiesce en réunion de lancement sans parler de la même chose. La maquette remplace ces interprétations par une image commune que chacun peut commenter. Elle déclenche les désaccords, ce qui est précisément son intérêt : mieux vaut trois semaines de discussions sur des écrans qu'une refonte partielle après la mise en ligne.

Fiabiliser le devis et le périmètre

Une maquette validée définit précisément ce qui sera livré : nombre de pages types, nombre de blocs par page, fonctionnalités visibles, types de contenus à produire. C'est une protection pour vous, qui savez exactement ce que vous achetez, et pour le prestataire, qui ne verra pas son périmètre s'étendre de réunion en réunion. Ce qui est maquetté est ce qui est construit ; toute demande ultérieure est identifiée comme une évolution, avec son coût et son délai propres. Sans cette référence, le fameux « on avait dit que » devient impossible à arbitrer, et se termine soit par du travail non payé, soit par une facture contestée.

Concevoir pour la conversion, pas seulement pour l'œil

Un site vitrine a un objectif mesurable : générer des appels, des demandes de devis, des réservations. La maquette est le moment où l'on décide ce que voit le visiteur dans les trois premières secondes, où se placent les preuves de confiance — avis, réalisations, certifications, années d'expérience —, combien d'appels à l'action jalonnent une page et où mène chacun d'eux. On y arbitre aussi des questions bien plus déterminantes qu'on ne le croit : afficher ou non ses tarifs, mettre un formulaire ou un numéro de téléphone en priorité, montrer des photos de chantier plutôt que des images de banque d'images. Ces décisions pèsent infiniment plus sur vos résultats que le choix d'une nuance de bleu.

Traiter le mobile comme un vrai sujet

Une large part des visites d'un site local se fait depuis un smartphone, souvent depuis une recherche Google ou une fiche d'établissement, parfois en déplacement et avec une connexion moyenne. Une maquette sérieuse comprend donc une version mobile réellement dessinée, et non un simple « ça s'adaptera automatiquement ». C'est sur mobile que se prennent les compromis les plus structurants : quels blocs disparaissent, quel texte se raccourcit, à quelle hauteur de page apparaît le bouton d'appel, comment se comporte un menu à sept entrées sur un écran de six pouces. Si personne ne tranche ces questions en amont, elles seront tranchées par défaut pendant l'intégration, sans vous.

Servir de référence à la livraison

À la fin du projet, la maquette devient la référence de recette : on compare le site livré à ce qui a été validé, page par page, bloc par bloc, sur les deux formats d'écran. Cela transforme la réception en exercice objectif, là où sans maquette elle se résume à une impression générale et à des écarts discutés de mémoire. C'est également ce qui permet de distinguer une erreur d'intégration — à corriger sans discussion — d'une demande nouvelle, qui relève d'un avenant.

Cadrer la production des contenus

Une maquette indique combien de signes tient une accroche, combien de lignes supporte la présentation d'un service, combien de photos il faut prévoir, dans quel format et dans quel cadrage. C'est un plan de travail très concret pour rédiger vos textes et préparer vos visuels, au lieu d'écrire à l'aveugle puis de découvrir que votre texte de 800 mots doit entrer dans un bloc qui en accepte 150. Sur les projets où le client fournit ses contenus, c'est souvent ce document qui débloque la rédaction : les gens écrivent beaucoup plus facilement quand ils voient où le texte ira.

La méthodologie, étape par étape

Chaque agence a ses habitudes et son vocabulaire, mais le processus de conception d'une maquette suit toujours la même logique : du général au particulier, du contenu vers la forme, du structurel vers le décoratif. Voici les dix étapes d'un projet mené correctement, avec pour chacune son livrable, sa durée indicative et l'erreur qui revient le plus souvent. Sur un petit site, plusieurs étapes se compressent en une journée ; sur un projet complexe, chacune peut occuper une semaine entière.

Étape 1 — Le cadrage

Avant de dessiner quoi que ce soit, il faut savoir pourquoi. À qui s'adresse le site, quelles actions doit-il déclencher, quels arguments font signer vos clients, quelles objections reviennent systématiquement, que font les concurrents que vous croisez dans les appels d'offres, et quelles contraintes techniques existent déjà — outil de réservation, logiciel métier, catalogue produits, hébergement en place. Cette étape se mène en atelier avec les décideurs, pas par questionnaire envoyé par mail, parce que l'essentiel sort des questions de relance. C'est aussi le moment de fixer les critères de réussite : plus de demandes de devis, moins d'appels pour des questions de base, meilleure crédibilité face à des grands comptes.

Livrable : une note de cadrage validée par écrit. Durée : de quelques heures à une semaine. Erreur fréquente : sauter cette étape en jugeant qu'« un site vitrine, c'est simple », puis découvrir en pleine maquette un besoin — un espace client, un module de prise de rendez-vous, une version anglaise — qui change toute la structure.

Étape 2 — L'arborescence

On liste toutes les pages et on les organise en niveaux : accueil, pages de services, réalisations, à propos, contact, blog, mentions légales. C'est ici que se décide la navigation, donc la facilité avec laquelle un visiteur trouve ce qu'il cherche, mais aussi une bonne partie de votre référencement : chaque page traite une intention de recherche distincte, et une prestation noyée dans une page fourre-tout ne se positionnera jamais. La règle utile : une prestation qui a son propre marché mérite sa propre page, avec son propre vocabulaire et ses propres preuves.

Livrable : un plan de site schématique, partageable. Durée : un à deux jours. Erreur fréquente : empiler les pages « au cas où », ce qui dilue le message, disperse l'autorité du site et crée des pages vides que personne ne remplira jamais.

Étape 3 — Le benchmark et la direction artistique

On regarde ce qui se fait dans votre secteur et, surtout, en dehors : les codes d'un métier finissent par produire des sites interchangeables, et c'est souvent chez les voisins qu'on trouve de quoi se différencier. On rassemble ensuite des références et on définit un territoire visuel : ambiance générale, contrastes, densité d'information, style photographique, caractère typographique, place laissée au vide. L'objectif n'est jamais de copier un site mais de s'accorder sur une direction avant de produire, pour éviter le scénario classique où la première maquette part à la corbeille parce que « ce n'était pas du tout ce que j'imaginais ». C'est aussi le moment de se situer par rapport aux tendances du moment, comme le bento design, en distinguant ce qui sert votre message de ce qui ne fera que dater votre site.

Livrable : un moodboard commenté, parfois deux pistes volontairement distinctes pour faire émerger les préférences. Durée : deux à trois jours. Erreur fréquente : valider des références sur un simple « j'aime bien », sans dire ce qu'on retient précisément de chacune — ce qui laisse le designer deviner.

Étape 4 — Le zoning et les wireframes

On structure chaque page type : ordre des sections, place des preuves de confiance, position et nombre des appels à l'action, comportement sur mobile. Travailler en noir et blanc à ce stade est un choix délibéré, pas une économie : sans couleurs ni images, la discussion porte sur ce qui compte vraiment, c'est-à-dire ce qu'on raconte et dans quel ordre. C'est souvent l'étape la plus rentable du projet, et la plus ingrate à présenter, car elle ne ressemble à rien de séduisant. Un prestataire sérieux prendra le temps d'expliquer ce qu'il attend comme retour à ce moment-là.

Livrable : les wireframes des pages types, en desktop et en mobile. Durée : trois à cinq jours pour un site vitrine. Erreur fréquente : présenter des wireframes sans prévenir qu'il ne s'agit pas du design final, et récolter des retours sur l'esthétique au lieu de la structure.

Étape 5 — Les contenus avant le design

Une maquette remplie de faux texte ment sur le résultat. Les vrais titres sont plus longs que le texte de remplissage, les vraies photos moins bien cadrées, les vrais services plus nombreux et plus difficiles à hiérarchiser, et les vrais noms de produits refusent de tenir sur une ligne. Travailler avec les contenus réels, même bruts et non relus, évite la mauvaise surprise classique : un design validé qui s'effondre dès qu'on y verse la matière. C'est aussi à ce moment qu'on identifie les contenus manquants — photos d'équipe, témoignages, chiffres clés — et qu'on planifie leur production, qui prend souvent plus de temps que le design lui-même.

Livrable : les textes et visuels des pages types, même à l'état de brouillon. Durée : très variable, c'est le poste qui retarde le plus les projets. Erreur fréquente : repousser les contenus à la fin en se disant qu'on verra plus tard, puis bloquer la mise en ligne pendant des semaines.

Étape 6 — Le design system

Avant de dessiner les pages, on définit les briques : palette de couleurs avec leurs usages, échelle typographique, grille et espacements, styles de boutons, cartes, formulaires, tableaux, plus les états associés — survol, focus, désactivé, erreur. Ce système garantit la cohérence de l'ensemble du site, accélère considérablement la production des pages suivantes et facilite toutes les évolutions futures, puisqu'on modifie une brique plutôt que trente pages. C'est également ce qui permet à quelqu'un d'autre de reprendre le site sans le dénaturer, un critère décisif si vous changez de prestataire un jour.

Livrable : une bibliothèque de composants documentée. Durée : deux à quatre jours. Erreur fréquente : dessiner les pages d'abord et tenter de rationaliser ensuite, ce qui produit un site où six nuances de gris et quatre styles de boutons cohabitent sans raison.

Étape 7 — La maquette haute fidélité

C'est l'étape que tout le monde attend : les pages prennent leur apparence définitive, avec les vraies couleurs, les vraies images et les vrais contenus, en version ordinateur et en version mobile. On maquette les pages types — accueil, page de service, page de contenu, contact, éventuellement un modèle d'article — et non l'intégralité du site : les autres pages se déduisent du design system, et les maquetter toutes reviendrait à facturer plusieurs jours pour des écrans identiques à 90 %. C'est aussi le moment où l'on vérifie que le design tient sur les cas difficiles : un service au nom à rallonge, une réalisation sans photo, un témoignage de quinze lignes.

Livrable : les maquettes validées, desktop et mobile. Durée : une à deux semaines pour un site vitrine. Erreur fréquente : ne maquetter que le desktop, et laisser l'intégrateur inventer le mobile — c'est-à-dire la version que verra la majorité de vos visiteurs.

Étape 8 — Le prototype et les tests

On relie les écrans entre eux pour rendre la maquette cliquable et simuler la navigation réelle : ouverture du menu, passage d'une page à l'autre, envoi d'un formulaire, retour en arrière. Cela permet de vérifier des parcours complets — trouver un service, comprendre le tarif, demander un devis — et de faire tester le site à quelques personnes extérieures au projet, idéalement proches de votre clientèle. Cinq personnes suffisent à faire remonter l'essentiel des problèmes d'ergonomie, et une heure de test évite régulièrement des semaines de suppositions. L'exercice est aussi un excellent moyen de désamorcer les débats internes : un parcours qui fonctionne devant trois inconnus clôt une discussion plus vite que n'importe quel argument.

Livrable : un prototype partageable par simple lien. Durée : un à deux jours. Erreur fréquente : ne faire tester qu'à des personnes qui connaissent déjà l'entreprise par cœur et qui savent donc où cliquer.

Étape 9 — La préparation à l'intégration

La maquette doit être exploitable par celui qui construira le site : nomenclature claire des calques et composants, organisation logique des pages, états prévus pour chaque élément interactif, images exportées aux bons formats et aux bonnes dimensions, indications écrites sur les comportements attendus — ce qui est cliquable, ce qui s'anime, ce qui se replie sur mobile. C'est la différence concrète entre une maquette jolie et une maquette professionnelle, et elle se mesure en heures d'intégration gagnées ou perdues. Une maquette mal préparée oblige l'intégrateur à prendre seul des dizaines de micro-décisions, avec le risque que le résultat s'éloigne de ce qui avait été validé.

Livrable : un fichier de conception documenté et transmissible. Durée : environ une journée. Erreur fréquente : concevoir sans tenir compte de l'outil d'intégration, et proposer des effets dont la reproduction coûterait plusieurs jours de développement non prévus au budget.

Étape 10 — La recette et les itérations

Une fois le site intégré, on compare le résultat à la maquette, on liste les écarts, on corrige, puis on met en ligne. Le travail ne s'arrête pas là : on observe ensuite le comportement réel des visiteurs — pages consultées, points d'abandon, taux de prise de contact — pour valider ou corriger les hypothèses de départ. Une maquette est une hypothèse documentée, pas une vérité : ce sont les données d'usage qui disent, trois mois plus tard, s'il faut remonter un bloc, raccourcir un formulaire ou reformuler une accroche. Les entreprises qui progressent le plus sont celles qui traitent la mise en ligne comme un point de départ.

Livrable : une liste de corrections, puis un suivi des indicateurs. Durée : continue. Erreur fréquente : considérer la mise en ligne comme la fin du projet et ne plus jamais toucher au site.

Où trouver l'inspiration avant de maquetter

La direction artistique ne sort pas de nulle part, et surtout pas de l'imagination pure : elle se construit en regardant beaucoup de sites, méthodiquement. L'erreur classique consiste à accumuler des captures d'écran dans un dossier sans jamais formuler ce qu'on y trouve de bon. Voici les sources qui servent vraiment, et comment les exploiter.

Les galeries de sites réellement en ligne

Awwwards, Site Inspire, Land-book, Lapa Ninja, One Page Love, Httpster ou Godly répertorient des sites qui existent vraiment et que vous pouvez visiter, parcourir et tester sur votre téléphone. C'est leur immense avantage : ces réalisations ont résisté au contenu réel, aux contraintes de responsive, aux exigences de performance et, souvent, aux demandes d'un client. Awwwards penche vers le spectaculaire et les projets à gros budget, Land-book et One Page Love vers des sites plus sobres et plus proches de ce qu'une PME peut se payer. Regardez-y autant le comportement en scrollant que l'image figée : c'est là que se juge un design web.

Les galeries de concepts et de portfolios

Dribbble et Behance regorgent de propositions spectaculaires et servent de vitrine à des milliers de designers. Une précaution s'impose, et elle vaut d'être dite à vos clients comme à vous-même : une grande partie de ce qu'on y trouve n'a jamais été intégrée. Ce sont des concepts pensés pour être beaux en vignette, avec des textes idéalement courts, des photos parfaites et aucune contrainte de chargement, de référencement ou de gestion quotidienne. S'en inspirer pour une ambiance ou un détail typographique, oui ; en attendre un site fonctionnel équivalent avec vos contenus et votre budget, rarement.

Les bibliothèques de patterns et de parcours

Mobbin, Refero, SaaS Landing Page, UI Garage ou Collect UI classent les exemples par problème à résoudre plutôt que par esthétique : un tunnel de contact, une page tarifs, un menu à nombreuses entrées, une page de réservation, un formulaire long. C'est infiniment plus utile qu'une galerie générale quand on bute sur un cas précis, parce qu'on y voit comment dix équipes différentes ont traité la même difficulté. Ces bibliothèques sont aussi un bon argument face à un client qui doute d'un choix : montrer trois références connues qui font pareil vaut mieux qu'une explication théorique.

Les templates comme source d'idées

Les galeries de templates Webflow ou Framer, ainsi que les kits partagés dans la communauté Figma, constituent d'excellents réservoirs de structures éprouvées : sections d'accueil, grilles de services, présentations d'équipe, pages tarifaires. Deux nuances, cependant. S'inspirer d'un template n'est pas l'acheter, et reproduire à l'identique un modèle largement diffusé revient à ressembler à des centaines d'autres entreprises. Par ailleurs, un template conçu pour un outil donné ne se transpose pas mécaniquement dans un autre environnement : l'apparence peut se reproduire, mais tout sera reconstruit, et le gain de temps espéré est souvent inférieur à ce qu'on imagine.

Comment s'en servir sans copier

La bonne méthode tient en une phrase : rassemblez dix à quinze références et notez, pour chacune, ce que vous en retenez précisément. Pas « j'aime bien », mais « la hiérarchie des titres rend la page lisible en diagonale », « le rythme alterne blocs denses et respirations », « les photos en noir et blanc unifient des visuels de qualité inégale », « les tarifs sont affichés sans devis, ce qui filtre les demandes ». Un moodboard annoté de cette façon devient une direction artistique exploitable, qui permet de trancher pendant la maquette. Sans ces annotations, vous n'aurez qu'un dossier d'images, et les débats reviendront à chaque validation.

Avec quels outils fabrique-t-on une maquette ?

Les outils se choisissent selon l'étape du projet, et non selon la mode du moment. En empiler dix ne sert à rien ; savoir lequel intervient à quel moment, et pourquoi, change en revanche la qualité du résultat. Voici le panorama complet, dans l'ordre où les outils apparaissent dans un projet.

Arborescence et plan de site

Octopus.do, FlowMapp, GlooMaps ou Slickplan permettent de construire un plan de site visuel, partageable par lien, que le client peut commenter sans installer quoi que ce soit. Certains proposent un premier niveau de wireframe directement rattaché à chaque page, ce qui aide à montrer très tôt ce que contiendra chaque écran. Des outils plus généralistes comme Whimsical ou Miro font parfaitement l'affaire, surtout en atelier : on déplace des étiquettes à plusieurs, en direct, et l'arborescence se construit pendant la réunion plutôt qu'après. Sur un petit site, une simple liste hiérarchisée suffit — l'important est que le périmètre soit écrit et validé.

Wireframes et basse fidélité

Balsamiq reste la référence du genre, avec son rendu volontairement grossier, presque dessiné à la main, qui rend impossible toute discussion prématurée sur l'esthétique : personne ne débat de la couleur d'un bouton en croquis. Excalidraw et FigJam servent aux schémas rapides et aux ateliers collaboratifs, Moqups et Wireframe.cc aux structures simples réalisées en quelques minutes, et Justinmind aux projets plus complexes qui demandent déjà de la logique conditionnelle et des composants réutilisables. Beaucoup de designers font aujourd'hui leurs wireframes directement dans Figma, ce qui évite un changement d'outil entre les étapes, au prix d'une tentation permanente de trop styliser trop tôt.

Maquette haute fidélité

Figma est devenu le standard incontesté du marché, et pour de bonnes raisons : travail collaboratif en temps réel, composants et variables pour construire un design system, mode prototype intégré, partage par simple lien sans installation pour le client, et un écosystème de plugins considérable. C'est aussi devenu le langage commun entre designers, développeurs et intégrateurs, ce qui compte énormément si vous changez de prestataire. Penpot constitue l'alternative libre et auto-hébergeable, un argument sérieux pour les collectivités, les structures publiques ou les entreprises attentives à la localisation de leurs données. Sketch conserve une communauté fidèle sur macOS mais a perdu la bataille du collaboratif, et Framer brouille volontairement la frontière entre maquette et site en ligne, puisqu'on y publie directement.

Un mot sur Adobe XD, encore cité comme une option par beaucoup d'articles francophones : Adobe l'a placé en maintenance après l'échec de son rachat de Figma fin 2023. Il n'est plus vendu comme application autonome, ne reçoit plus de nouvelles fonctionnalités et n'a plus d'avenir annoncé. Si un prestataire vous propose aujourd'hui de travailler sous XD, c'est un signal à prendre au sérieux sur sa veille technique. Les fichiers existants restent lisibles, mais tout nouveau projet doit démarrer ailleurs.

Prototypage et tests

Le mode prototype de Figma couvre l'immense majorité des besoins : relier des écrans, simuler l'ouverture d'un menu, gérer quelques transitions. ProtoPie va nettement plus loin pour les animations complexes et les micro-interactions, au prix d'un apprentissage réel et d'un intérêt limité pour un site vitrine. Maze permet de faire tester un prototype à distance à un panel et d'en tirer des statistiques de parcours, utile quand les décisions doivent être défendues devant plusieurs interlocuteurs. Une fois le site en ligne, Hotjar ou Microsoft Clarity prennent le relais : enregistrements de sessions et cartes de chaleur montrent le comportement réel et valident — ou démentent — les hypothèses posées en maquette.

Bibliothèques de composants et design systems

Untitled UI, Relume, Tailwind UI ou shadcn/ui fournissent des systèmes de composants prêts à adapter : boutons, formulaires, cartes, navigations, grilles, pages types. Ils expliquent pourquoi un professionnel ne repart jamais d'une page absolument blanche. L'enjeu n'est pas de gagner du temps sur le dessin d'un bouton, mais de réinvestir ce temps là où il crée de la valeur, c'est-à-dire dans la structure, le message et les preuves. Le risque, en revanche, est bien réel : utilisées sans travail d'appropriation, ces bibliothèques produisent des sites reconnaissables au premier coup d'œil et interchangeables d'un secteur à l'autre.

Les outils d'IA générative

Figma Make, Uizard, v0, Lovable ou Relume produisent en quelques secondes des écrans complets à partir d'une simple description, et leur progression depuis deux ans est spectaculaire. Ils sont redoutablement efficaces pour explorer des pistes, sortir de la page blanche ou montrer rapidement une intention à un client hésitant. Leur limite est tout aussi réelle : ils génèrent des interfaces conformes aux standards du moment, séduisantes mais génériques, sans aucune connaissance de votre marché, de vos arguments commerciaux, de vos objections clients ou de vos contraintes de production de contenu. Ils remplacent du temps de production, pas le travail de cadrage et de stratégie — et c'est précisément ce travail-là qui détermine si un site rapporte des clients ou se contente d'exister.

La boîte à outils qui gravite autour

Google Fonts et Fontshare pour la typographie, Coolors ou Realtime Colors pour construire et tester une palette en conditions réelles, Lucide et Phosphor pour des jeux d'icônes cohérents, Unsplash et Pexels pour les visuels de calage en attendant vos photos, et un vérificateur de contrastes pour s'assurer que chaque texte reste lisible, y compris par les personnes malvoyantes. Ce dernier point mérite plus d'attention qu'il n'en reçoit : le gris clair sur fond blanc passe très bien sur l'écran du designer, beaucoup moins sur un téléphone en plein soleil.

Combien coûte une maquette de site web ?

La maquette est rarement vendue seule : elle fait partie du prix global du site, au même titre que l'intégration, les contenus ou la mise en ligne. Elle représente le plus souvent entre un quart et un tiers du budget total d'un projet vitrine, et davantage lorsque le design est très personnalisé ou qu'il faut créer une identité visuelle en parallèle. Certains prestataires la facturent toutefois comme une prestation autonome, ce qui a du sens si vous souhaitez faire réaliser le développement ailleurs, ou simplement tester une collaboration avant de vous engager sur un projet complet.

Plusieurs facteurs font varier ces montants, et il est utile de les connaître avant de comparer deux devis. Le nombre de pages types à dessiner arrive en tête, suivi de la nécessité ou non de créer une identité visuelle : partir d'une charte existante fait gagner plusieurs jours. Viennent ensuite le niveau de personnalisation attendu — un design sur-mesure n'a rien à voir avec l'adaptation d'un système existant —, le nombre d'allers-retours inclus au contrat, la production ou non d'un design system complet, et la présence de cas particuliers à traiter comme un configurateur, un espace client ou un catalogue à filtres.

À qui confier la conception de sa maquette ?

Plusieurs profils savent produire une maquette, avec des budgets, des méthodes et des risques très différents. Le bon choix dépend moins de votre budget que de la question suivante : qui sera responsable du résultat final, c'est-à-dire du site en ligne, et non du fichier de conception.

Le freelance UI/UX designer

Souvent le meilleur rapport qualité-prix pour un projet bien cadré. Vous travaillez directement avec la personne qui dessine, sans intermédiaire ni chef de projet à convaincre, les échanges sont rapides et le tarif reste contenu. Les bons profils apportent une vraie méthode et une culture du web à jour, parfois supérieure à celle de structures plus grosses. Les limites tiennent à la structure même : une disponibilité qui dépend de ses autres missions, un point de défaillance unique en cas d'imprévu, et surtout la question de la suite — le designer s'arrête généralement au fichier, et il faudra trouver, briefer et coordonner celui qui intégrera.

Le studio de design ou l'agence de branding

Excellent choix lorsque l'enjeu est l'identité de marque autant que le site : création ou refonte de logo, univers visuel complet, cohérence entre le web, l'impression et les réseaux sociaux. Ces structures produisent des directions artistiques fortes et savent défendre un parti pris, ce qui évite les sites tièdes. Le point à vérifier concerne leur maîtrise des contraintes du web réel : responsive, performance, accessibilité, référencement, facilité de mise à jour par le client. Une maquette superbe mais pensée comme une affiche se paie ensuite en heures d'intégration, en lenteur de chargement ou en site que personne n'ose modifier.

L'agence web qui maquette et intègre

L'avantage principal est la continuité : la personne qui conçoit sait exactement ce que l'intégration permet, dans quel budget et avec quelles conséquences sur la performance. Personne ne peut renvoyer la responsabilité sur l'autre en cas d'écart entre la maquette et le site livré, puisqu'il s'agit du même interlocuteur du cadrage jusqu'à la mise en ligne, puis pour la maintenance et les évolutions. C'est aussi ce qui permet d'arbitrer intelligemment en cours de route : renoncer à un effet coûteux pour financer une vraie page de service, par exemple. Le budget est logiquement supérieur à celui d'un freelance, et c'est le modèle que nous appliquons pour la création de site internet à Saint-Étienne.

Les plateformes low-cost et l'offshore

Des maquettes à quelques centaines d'euros existent, produites à distance, souvent très vite, parfois par des designers compétents. Le prix s'explique par ce qui disparaît : le cadrage se réduit à un formulaire, personne ne connaît votre marché ni vos clients, les contenus utilisés sont factices, aucun test n'est mené et chaque aller-retour est facturé à l'unité. Cela peut convenir à un projet simple pour lequel vous avez déjà tout défini et rédigé, et où vous savez exactement ce que vous voulez. C'est nettement plus risqué dès que le site porte un enjeu commercial réel, car vous payez alors deux fois : une fois la maquette, une fois sa correction.

Le faire soi-même avec un outil d'IA

Techniquement à la portée de tous aujourd'hui, et ce n'est pas une mauvaise idée en soi : produire trois écrans avec un outil génératif est une excellente façon de clarifier ce que vous voulez et de le montrer à un prestataire, bien plus efficace qu'une description écrite. Cela devient insuffisant dès qu'il s'agit du site définitif d'une entreprise. Ce qui manque n'est pas la capacité à produire des écrans corrects, mais le travail d'analyse qui décide de ce que ces écrans doivent dire, à qui, dans quel ordre et avec quelles preuves. Le résultat typique est un site propre, rapide à obtenir, et parfaitement interchangeable avec celui de vos concurrents.

Les questions à poser avant de choisir

Que comprend exactement le livrable ? Pages types ou toutes les pages, version mobile incluse ou non, design system ou écrans isolés, états interactifs prévus ou non. Deux devis qui affichent le même montant peuvent recouvrir un travail du simple au double.

Combien d'allers-retours sont prévus ? Et surtout, que se passe-t-il au-delà : facturation à l'heure, forfait complémentaire, arbitrage à l'amiable. Un prestataire qui annonce des retours illimités a soit intégré la marge correspondante, soit prévu de vous décourager en cours de route.

À qui appartiennent les fichiers de conception ? Vous devez pouvoir récupérer votre fichier et le confier à un autre prestataire un jour, sans négociation. C'est une clause à vérifier avant signature, pas au moment de la rupture.

Qui intègrera la maquette ? C'est la question la plus déterminante de la liste. Une maquette magnifique mais irréalisable dans le budget de développement prévu ne vaut rien, et l'écart se découvre toujours trop tard.

Le prestataire connaît-il l'environnement technique visé ? Concevoir pour WordPress avec un constructeur de pages, pour une solution e-commerce ou pour un développement sur-mesure n'impose ni les mêmes contraintes, ni les mêmes possibilités. Un designer qui n'a jamais vu l'outil final produira des maquettes coûteuses à reproduire.

Les contenus sont-ils inclus ? Rédaction, photographies, retouches, traductions : ces postes bloquent la majorité des projets et doivent être attribués nommément dès le devis, avec un calendrier. « Le client fournit les contenus » est la phrase qui retarde le plus de mises en ligne.

Les erreurs qui plombent une maquette

Certaines se repèrent tôt et se corrigent en une réunion, d'autres ne se paient qu'à la livraison. Les voici, par ordre de fréquence constatée.

Maquetter avec du faux texte. Le lorem ipsum produit un rendu parfaitement équilibré qui ne survit pas aux contenus réels : titres plus longs, paragraphes inégaux, noms de produits interminables. Le design validé se déforme dès la première page remplie, et l'intégrateur improvise.

Oublier la version mobile. Une maquette desktop seule reporte toutes les décisions difficiles sur l'intégrateur, qui les prendra sans vous et sans arbitrage stratégique, sur la version que consulte pourtant la majorité de vos visiteurs.

Valider en comité. Au-delà de trois décideurs, le design se transforme en compromis et perd tout caractère. Désignez une personne qui tranche, quitte à consulter largement en amont : l'avis de chacun est utile, le vote de chacun ne l'est pas.

Se passer de design system. Chaque page devient un cas particulier, les incohérences s'accumulent, et la moindre évolution — ajouter une page de service, changer une couleur — demande de reprendre le travail page par page pendant des années.

Ignorer les contraintes techniques. Un effet spectaculaire peut coûter plusieurs jours d'intégration, dégrader la vitesse du site et pénaliser son référencement. La question à poser avant de valider n'est pas seulement « est-ce beau », mais « à quel prix et avec quelles conséquences ».

Ne dessiner que l'état idéal. Un site réel comporte des survols, des champs en erreur, des messages de confirmation, des pages sans résultat de recherche, des listes vides le temps que le contenu arrive. Ce qui n'est pas dessiné sera improvisé.

Négliger l'accessibilité. Contrastes insuffisants, textes trop petits, zones cliquables minuscules, informations transmises par la seule couleur : autant de visiteurs qui renoncent, et un risque réglementaire qui se renforce d'année en année pour beaucoup d'organisations.

Confondre goût personnel et efficacité. La question n'est jamais « est-ce que ça me plaît », mais « est-ce que ça amène un visiteur à nous contacter ». Les deux se rejoignent souvent, mais quand elles divergent, c'est la seconde qui doit l'emporter.

De la maquette au site en ligne

Une maquette validée n'est pas une fin en soi : c'est le cahier des charges visuel de l'intégration. Vient ensuite le choix de l'environnement technique qui la fera vivre — un CMS comme WordPress associé à un constructeur de pages, une solution e-commerce dédiée, ou un développement sur-mesure. Ce choix se prépare idéalement dès le cadrage, car il conditionne ce qu'il est raisonnable de dessiner. Dans le cas d'une refonte, s'ajoute une contrainte de plus : préserver l'existant qui fonctionne, à commencer par les pages déjà positionnées sur Google.

Il a des conséquences directes et durables : fidélité du rendu par rapport à la maquette, vitesse de chargement, facilité avec laquelle vous pourrez modifier vos contenus sans intervention extérieure, et coût des évolutions futures. Deux sites visuellement identiques peuvent ainsi se comporter très différemment sur ces quatre points, selon l'environnement retenu et la façon dont la maquette y a été transposée.

Dernier point souvent négligé : la maquette doit rester accessible et à jour après le projet. C'est elle qui servira de base à la prochaine page, à la prochaine campagne, à la prochaine évolution du site — et à la refonte suivante, dans quelques années. Un fichier de conception bien tenu est un actif de l'entreprise, au même titre que sa charte graphique.

Questions fréquentes sur les maquettes de site web

Peut-on se passer de maquette ?

Techniquement oui, et cela arrive sur de très petits projets construits à partir d'un modèle existant, avec peu de contenus et un budget serré. Mais vous perdez le point de validation le moins coûteux du projet : les corrections se reportent alors sur la phase d'intégration, où elles prennent dix fois plus de temps. En pratique, l'économie réalisée sur la conception se retrouve presque toujours dans les allers-retours, avec en prime un projet plus long et plus tendu.

Quelle différence entre une maquette et un prototype ?

La maquette est une image fixe qui montre le rendu final d'une page. Le prototype relie ces images entre elles pour simuler la navigation : on clique, on ouvre le menu, on passe à la page suivante. On conçoit d'abord les maquettes, puis on les rend cliquables, et le prototype sert surtout à valider les parcours et à faire tester le site avant développement.

Une maquette, est-ce la même chose qu'une charte graphique ?

Non, et la confusion coûte cher en devis mal comparés. La charte graphique définit votre identité de marque pour tous vos supports, du logo aux documents commerciaux. La maquette applique cette identité à votre site et l'adapte aux contraintes du web. Si vous n'avez pas de charte, une direction artistique minimale sera définie pendant la maquette, mais elle ne remplace pas un travail de marque complet.

Faut-il maquetter toutes les pages du site ?

Rarement, et personne n'a intérêt à ce que ce soit le cas. On maquette les pages types — accueil, page de service, page de contenu, contact, modèle d'article — et le design system permet d'en déduire les autres. Maquetter trente pages identiques à 90 % gonfle la facture sans réduire les risques. En revanche, toute page réellement différente, comme une page tarifs ou un configurateur, doit être dessinée.

Combien d'allers-retours faut-il prévoir ?

Deux à trois séries de retours par étape suffisent sur un projet bien cadré, à condition que les retours soient regroupés et arbitrés en interne avant d'être transmis. Au-delà, le problème vient presque toujours d'un cadrage insuffisant au départ ou de décideurs consultés trop tard. Un bon réflexe : envoyer une seule liste de retours consolidée par étape, plutôt que six mails successifs qui se contredisent.

Qui est propriétaire des fichiers de conception ?

Cela dépend du contrat, et c'est précisément pour cela qu'il faut le vérifier avant de signer. Une pratique saine consiste à vous donner accès au fichier de conception en fin de projet, afin que vous ne soyez jamais prisonnier d'un prestataire. Demandez-le explicitement : beaucoup de devis restent silencieux sur ce point, sans mauvaise intention, simplement parce que la question n'est jamais posée.

Figma est-il gratuit ?

Il existe une version gratuite, largement suffisante pour consulter une maquette, laisser des commentaires et parcourir un prototype : en tant que client, vous n'aurez généralement rien à payer. Les fonctions avancées de travail en équipe, de bibliothèques partagées et de design system relèvent des offres payantes, qui concernent les professionnels. Vous n'avez pas non plus besoin d'installer quoi que ce soit : tout fonctionne dans le navigateur.

L'intelligence artificielle peut-elle remplacer un designer ?

Elle remplace une partie de la production, pas la réflexion. Générer des écrans corrects est devenu trivial et le sera de plus en plus ; décider de ce qu'ils doivent contenir, dans quel ordre, avec quelles preuves et pour convaincre quel type de client reste un travail d'analyse ancré dans votre marché. Le risque du tout-IA n'est pas un site raté, c'est un site correct et parfaitement interchangeable avec ceux de vos concurrents, donc incapable de justifier vos tarifs.

Combien de temps avant de voir une première maquette ?

Sur un site vitrine, comptez une à deux semaines après le cadrage pour les wireframes, puis une à deux semaines supplémentaires pour la maquette habillée. Ces délais supposent des validations rapides de votre côté : une semaine d'attente sur un retour décale tout le reste du planning. Le facteur qui allonge le plus les projets n'est d'ailleurs jamais le design, mais la disponibilité des contenus et des photos.

Que faire si la maquette ne me plaît pas ?

Le dire immédiatement, et sans culpabilité : c'est exactement à cela qu'elle sert, et un prestataire expérimenté s'y attend. Formulez des retours concrets — quel élément ne fonctionne pas, pour quelle raison, à quel endroit, et ce que vous craignez que vos clients en pensent — plutôt qu'une impression générale du type « ça manque de peps ». Un bon prestataire transformera ces retours en propositions argumentées, et vous expliquera le cas échéant pourquoi il maintient un choix.

Conclusion : la maquette n'est pas une option

Concevoir une maquette, c'est prendre les bonnes décisions au moment où elles ne coûtent presque rien : quand le site n'existe encore que sous forme d'écrans. Structure, hiérarchie de l'information, parcours de conversion, design, version mobile, cas particuliers — tout se règle là, avec des arbitrages visibles par tous. Ce qui est validé devient ensuite un contrat clair entre vous et celui qui construira le site, et une référence objective au moment de la livraison.

Le reste est une question de méthode : cadrer avant de dessiner, structurer avant d'habiller, travailler avec de vrais contenus, dessiner le mobile autant que le desktop, et confier le travail à quelqu'un qui sait précisément ce que l'intégration permettra. Un site réussi n'est presque jamais le fruit d'une inspiration : c'est le résultat d'un processus tenu du début à la fin. C'est la méthode que nous appliquons chez Gokuu, agence de communication à Saint-Étienne, sur chacun de nos projets web.