Mockup (Maquette) : Définition
Le Mockup (ou maquette) est une représentation visuelle statique et haute-fidélité d'une interface web ou mobile. Contrairement au wireframe qui reste schématique, le mockup intègre les couleurs, typographies, images et identité visuelle définitives. Il permet de valider l'aspect graphique avant le développement, sans inclure d'interactions fonctionnelles comme le ferait un prototype. Le mockup sert de référence visuelle pour les développeurs et les clients.
Qu'est-ce que le Mockup et pourquoi est-ce important ?
Le mockup représente l'étape intermédiaire cruciale dans le processus de conception d'interface. Il se situe entre le wireframe (structure filaire basique) et le prototype (version interactive). Alors que le wireframe définit l'architecture et la hiérarchie du contenu en noir et blanc, le mockup applique l'identité visuelle complète : charte graphique, palette de couleurs, typographies, images réelles et éléments de branding.
La différence fondamentale avec le prototype réside dans l'absence d'interactivité. Un mockup est une image statique qui montre l'apparence finale de l'interface, tandis qu'un prototype permet de cliquer, naviguer et tester les parcours utilisateurs. Le mockup répond à la question "À quoi ça ressemblera ?", le prototype à "Comment ça fonctionnera ?".
Les mockups sont essentiels pour obtenir la validation des parties prenantes sur l'aspect visuel avant d'investir dans le développement. Ils permettent d'identifier les problèmes de design, d'aligner les équipes sur la vision graphique et de fournir aux développeurs des spécifications visuelles précises (espacements, tailles, couleurs, assets). Des outils comme Figma, Adobe XD ou Sketch facilitent leur création et leur partage.
Exemple concret
Une agence web travaille sur la refonte du site e-commerce d'un client dans le secteur du luxe. Après avoir validé les wireframes (structure en gris avec blocs de contenu), le designer UX/UI crée les mockups des pages principales : homepage, fiche produit, panier et tunnel de commande.
Ces mockups intègrent la charte graphique du client (noir, or, typographie élégante Playfair Display), les photos produits haute-résolution, les icônes personnalisées et tous les détails visuels finaux. Le client valide l'esthétique, demande d'ajuster la taille des boutons CTA et de renforcer le contraste sur les prix.
Une fois les mockups approuvés, l'équipe crée un prototype interactif dans Figma pour tester le parcours d'achat complet. Les développeurs utilisent ensuite les mockups comme référence pixel-perfect pour l'intégration front-end, en exportant les assets et en récupérant les codes couleurs précis.
Questions fréquentes
Quelle est la différence entre wireframe, mockup et prototype ?
Le wireframe est une structure filaire en noir et blanc qui définit l'architecture du contenu. Le mockup est une image statique haute-fidélité avec tous les éléments visuels (couleurs, typographies, images). Le prototype est une version interactive cliquable qui simule les interactions et parcours utilisateurs. Ordre logique : wireframe → mockup → prototype → développement.
Quels outils pour créer des mockups ?
Les outils leaders sont Figma (collaboratif en ligne, gratuit pour démarrer), Adobe XD (intégré à Creative Cloud), Sketch (Mac uniquement, référence historique) et Photoshop (pour mockups très détaillés). Figma domine aujourd'hui grâce à sa collaboration temps réel et sa gratuité pour petites équipes.
Faut-il toujours créer des mockups avant de développer ?
Oui, pour les projets web/app significatifs. Les mockups évitent les allers-retours coûteux en développement, alignent les équipes sur la vision graphique et permettent de valider l'UX avant l'investissement technique. Pour des projets très simples ou des MVP ultra-rapides, on peut passer directement du wireframe au prototype fonctionnel.
Comment présenter un mockup à un client ?
Contextualisez le mockup en montrant les écrans dans des devices réalistes (laptop, mobile), expliquez les choix de design (hiérarchie visuelle, couleurs, typographies), montrez les déclinaisons responsive et préparez une vue avec annotations des espacements et interactions. Utilisez des outils de présentation comme Figma Prototype mode ou InVision pour une expérience immersive.
Quelle résolution pour un mockup web ?
Pour le desktop, créez en 1920×1080px (Full HD) avec une zone de contenu centrée à 1440px ou 1200px de large. Pour mobile, utilisez 375×812px (iPhone standard) et/ou 360×640px (Android courant). Travaillez toujours en résolution 1x dans l'outil de design, les assets seront exportés en @2x et @3x pour les écrans Retina.
Termes connexes
Besoin d'aide pour comprendre vos métriques ?
On peut vous accompagner dans l'analyse de vos données et l'optimisation de vos performances marketing.