Le maquettage est le processus de conception visuelle qui précède tout développement web ou applicatif. Avant d’écrire une seule ligne de code, le designer produit des représentations progressives de l’interface : d’abord un squelette fonctionnel, puis une version graphique complète, enfin un prototype cliquable. Ces trois phases constituent ce qu’on appelle le maquettage.
Sur un projet e-commerce de 80 pages, cette étape représente 30 à 40 % du temps total de conception. Sur une application métier complexe, elle peut dépasser le temps de développement lui-même. Autant comprendre précisément ce qu’elle recouvre, qui la réalise, et avec quels outils aujourd’hui.
Qu’est-ce que le maquettage ?
Le maquettage est le processus qui transforme un besoin client en représentations visuelles progressives d’une interface digitale. Il couvre trois niveaux de fidélité distincts : le wireframe (basse fidélité), la maquette graphique (haute fidélité) et le prototype (interactif).
La notion de fidélité est centrale. Une représentation de basse fidélité se concentre sur la structure, sans couleur ni typographie définitive. Une représentation de haute fidélité ressemble au rendu final, pixel pour pixel. Entre les deux, chaque étape sert un objectif précis : aligner les équipes, valider les choix, convaincre les décisionnaires.
Le maquettage n’est pas du ressort du développeur frontend. Un développeur intègre ce qu’on lui donne. C’est le designer UI/UX qui produit les maquettes, parfois en collaboration avec un UX researcher sur les projets complexes.
Les 3 étapes du maquettage : wireframe, maquette graphique, prototype
1. Le wireframe
Le wireframe est une représentation en basse fidélité. Pas de couleur, pas de typographie finale, pas d’images réelles. Des blocs gris, des titres génériques, des zones réservées. L’objectif est de fixer la structure de l’information avant toute décision graphique.
Il répond à des questions très concrètes : dans quel ordre l’utilisateur lit-il cette page ? Où se trouve le CTA principal ? Combien d’écrans faut-il pour compléter ce parcours ?
Sur un site vitrine de 10 pages, un wireframe se produit en 1 à 3 jours. Sur une application avec plusieurs dizaines d’écrans et des logiques de rôles utilisateurs, on peut dépasser deux semaines. C’est aussi ce que le développeur reçoit pour estimer la durée du projet : sans wireframe, aucune estimation sérieuse n’est possible.
2. La maquette graphique
La maquette graphique est l’étape suivante. Elle reprend la structure du wireframe et l’habille : couleurs, typographie, iconographie, espacement, photographies. Le résultat est une image statique haute fidélité qui ressemble au produit final.
C’est à cette étape que le client voit vraiment à quoi ressemblera son site ou son application. Et c’est souvent là que les demandes de modification arrivent, ce qui est exactement l’objectif. Identifier les incohérences visuelles avant le développement coûte infiniment moins cher qu’après.
La maquette graphique est produite avec un outil de design, exportée en fichier partageable, et soumise à validation client avant que le développement commence.
3. Le prototype
Le prototype est une maquette cliquable. Les écrans sont liés entre eux, les interactions simulées, les transitions animées. Il ne s’agit pas de code : tout est simulé à l’intérieur de l’outil de design.
L’intérêt du prototype est de tester les flux utilisateurs avant le développement. Est-ce que l’enchaînement des écrans est logique ? L’utilisateur trouve-t-il le bouton sans aide ? Ces questions ont une réponse beaucoup moins coûteuse à obtenir au stade du prototype qu’après intégration.
Selon le Nielsen Norman Group, les tests effectués sur prototype permettent de réduire jusqu’à 50 % les corrections post-développement. Sur un projet à 20 000 € de développement, cette étape peut s’autofinancer plusieurs fois.
Ce que contient une maquette graphique
Une maquette graphique complète intègre six éléments que le designer doit traiter explicitement sur chaque écran.
La disposition du contenu détermine dans quel ordre et selon quelle hiérarchie les informations s’affichent. Les patterns les plus courants suivent une lecture en F (pages articles), en Z (landing pages) ou centrée (pages produit).
La palette de couleurs traduit l’identité visuelle dans l’interface. Chaque couleur a une fonction : couleur primaire pour les CTAs, secondaire pour les accents, neutres pour les textes et les fonds. Le ratio de contraste entre texte et fond doit respecter les normes WCAG 2.1, soit un minimum de 4,5:1 pour du texte courant.
La typographie couvre le choix des familles de polices, les tailles, les graisses et l’interlignage. Une hiérarchie typographique claire (H1, H2, corps, légende) facilite la lecture et contribue au référencement naturel de la page.
L’espacement définit les marges, paddings et espaces négatifs. L’espace vide n’est pas un vide : c’est un outil de mise en valeur. Une interface trop dense perd l’utilisateur aussi sûrement qu’une interface trop vide.
Les visuels de navigation définissent comment l’utilisateur se déplace dans l’interface : menu principal, fil d’Ariane, pagination, liens de retour. Ces éléments doivent être cohérents sur l’ensemble des écrans.
Les autres visuels regroupent les images, icônes, illustrations et éléments décoratifs. Leur style doit être unifié pour ne pas casser la cohérence graphique d’ensemble.
Pour aller plus loin sur la conception d’interfaces, notre service UI design couvre l’ensemble de ces étapes, du wireframe à la maquette validée.
Quels outils de maquettage utiliser en 2026 ?
Le marché des outils de design a beaucoup évolué ces deux dernières années. Voici un état des lieux honnête.
Figma est l’outil dominant. Selon les données publiées en 2024, Figma détient plus de 31 % du marché des outils de design et UX. Sa force : 100 % cloud, collaboration en temps réel, export développeur intégré, écosystème de plugins très riche. C’est l’outil de référence pour produire wireframes, maquettes graphiques et prototypes dans un seul environnement. La version gratuite couvre la majorité des besoins pour un freelance ou une petite équipe.
Balsamiq reste pertinent pour les wireframes rapides en basse fidélité. Son style volontairement brouillon force les équipes à ne pas se perdre dans les détails graphiques trop tôt. Utile en phase de cadrage, moins adapté à la production de maquettes haute fidélité.
Sketch est fonctionnel mais limité à macOS. Il maintient une base d’utilisateurs fidèles grâce à son écosystème de plugins, mais son développement stagne face à Figma.
Adobe XD : à éviter pour tout nouveau projet. Adobe a officiellement annoncé l’arrêt du développement d’XD en 2024 et oriente ses clients vers d’autres solutions. Les fichiers existants peuvent encore être ouverts, mais choisir XD aujourd’hui pour un nouveau projet, c’est s’engager dans une impasse.
Les outils IA (Uizard, extensions IA intégrées à Figma) permettent de générer des wireframes à partir d’un brief textuel ou d’une capture d’écran. Utiles pour explorer rapidement des pistes en début de projet. Ils ne remplacent pas une réflexion UX sérieuse, mais réduisent le temps de production des premières itérations.
Pourquoi faire une maquette avant de développer ?
Réduire le coût des corrections. Modifier une couleur ou repositionner un bloc dans Figma prend quelques secondes. Faire la même modification après intégration HTML/CSS peut prendre plusieurs heures, voire déclencher une refonte partielle de la mise en page. Selon le Nielsen Norman Group (2024), les tests effectués sur maquette ou prototype peuvent réduire de 50 % les coûts de correction post-développement.
Aligner toutes les parties prenantes avant de commencer. Sur un projet avec plusieurs décisionnaires, la maquette crée un référentiel visuel commun. Elle remplace une dizaine d’échanges d’emails vagues par une validation sur document concret. C’est aussi ce qui permet d’obtenir une estimation de développement fiable : un développeur ne peut pas chiffrer un projet sans savoir précisément ce qu’il devra coder.
Tester les flux utilisateurs sans code. Un prototype cliquable permet de faire tester le parcours utilisateur avant toute ligne de code. Est-ce que l’utilisateur trouve le formulaire de contact sans aide ? Est-ce que l’enchaînement des étapes d’un tunnel d’achat est logique ? Ces réponses coûtent quelques heures sur prototype. Elles coûtent des semaines si la question se pose après le lancement.
Questions fréquentes
Maquettage : les questions fréquentes
Une maquette graphique est une représentation statique haute fidélité d’une interface web ou applicative. Elle intègre les couleurs, typographies, espacements et visuels de navigation définitifs. C’est ce que le client valide visuellement avant que le développement commence.
Le wireframe est une représentation en basse fidélité : pas de couleur, pas de typographie finale, des blocs gris pour matérialiser la structure. La maquette graphique reprend cette structure et l’habille avec les éléments visuels définitifs. Le wireframe répond à la question de l’organisation. La maquette répond à la question de l’apparence.
La maquette est statique : c’est une image haute fidélité, aussi précise soit-elle. Le prototype est cliquable : les écrans sont liés entre eux, les interactions simulées. Le prototype permet de tester les flux utilisateurs avant le développement, sans écrire une ligne de code.
Figma est l’outil dominant, utilisé pour les wireframes, maquettes graphiques et prototypes dans un seul environnement. Balsamiq est utile pour les wireframes rapides en basse fidélité. Adobe XD est à éviter : Adobe a annoncé l’arrêt de son développement en 2024. Les extensions IA de Figma et des outils comme Uizard permettent de générer de premières pistes rapidement à partir d’un brief textuel.
Pour trois raisons principales : réduire le coût des corrections (modifier un élément dans Figma prend quelques secondes, après intégration cela peut prendre des heures), aligner toutes les parties prenantes sur un document visuel concret avant de commencer, et obtenir une estimation de développement fiable. Un développeur ne peut pas estimer un projet sans savoir précisément ce qu’il devra coder.
Pour découvrir nos services de création d’interface UI/UX, de création d’identité visuelle ou de design graphique, visitez nos pages dédiées. Si votre projet intègre des animations, consultez également notre service motion design.
