Mockup
Maquette visuelle. Représentation haute-fidélité du design final d'une page.
Un mockup est une représentation visuelle haute-fidélité du design final d'une page ou interface. Contrairement au wireframe (structure), le mockup inclut les couleurs, typographies, images et éléments graphiques.
Quand passer au mockup
Ouvrez cette étape seulement quand la structure est validée : contenus arbitrés, hiérarchie des blocs figée, parcours acceptés. Sinon vous discutez couleurs alors que le message n’est pas tranché. Un bon mockup s’appuie sur des textes réels, pas sur du faux latin, car la longueur des titres change complètement l’équilibre d’une page. Prévoyez enfin les variantes mobiles dès cette étape, pas après validation du desktop.
Mockup vs wireframe vs prototype
Le wireframe pose la structure en gris, le mockup habille cette structure avec la charte, la typographie et les visuels définitifs, le prototype rend le tout cliquable pour tester un parcours. Les trois répondent à des questions différentes : quoi montrer, à quoi ça ressemble, comment ça se traverse. Passer directement à l’étape 2 coûte cher en allers-retours.
Les erreurs fréquentes
Livrer un seul écran desktop parfait sans variante mobile, oublier les états réels d’une interface, erreur de formulaire, panier vide, chargement, message trop long. Négliger aussi le contraste et la taille de police : un design validé sur grand écran calibré devient illisible en plein soleil. Documentez enfin les espacements, sinon l’intégration réinvente vos règles. Précisez aussi le comportement attendu au survol et au focus clavier.
Exemple concret
Un éditeur SaaS fait valider trois mockups de page tarifaire en deux jours plutôt que de développer chaque piste. Le cycle passe de trois semaines à cinq jours, et deux allers-retours de développement évités représentent environ 6 jours-homme économisés sur le trimestre.
Termes associés
Wireframe
Maquette fil de fer. Esquisse simplifiée montrant la structure d'une page web.
Prototype
Version interactive d'une maquette permettant de tester les parcours utilisateurs.
UI
User Interface. Éléments visuels et interactifs avec lesquels l'utilisateur interagit.
Pogo-Sticking
Comportement d'un utilisateur qui clique sur un résultat, revient en arrière et clique sur un autre.
Responsive Design
Design adaptatif s'adaptant automatiquement à toutes les tailles d'écran.
TTFB
Time To First Byte. Temps entre la requête du navigateur et la réception du premier octet du serveur.
Mockup en pratique : UX & Design
Pour aller au-delà de la définition, découvrez notre expertise conversion et parcours.