Mockup (Maquette) : Définition
Mockup : représentation visuelle statique d'un design
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
Le <strong>wireframe</strong> est une structure filaire en noir et blanc qui définit l'architecture du contenu. Le <strong>mockup</strong> est une image statique haute-fidélité avec tous les éléments visuels (couleurs, typographies, images). Le <strong>prototype</strong> est une version interactive cliquable qui simule les interactions et parcours utilisateurs. Ordre logique : wireframe → mockup → prototype → développement.