Un mock-up est une représentation visuelle réaliste d’un projet, réalisée avant sa fabrication ou son développement. Pour répondre à la question « qu’est-ce qu’un mock-up », il faut distinguer deux pratiques : la mise en situation d’un visuel sur un objet (carte de visite, t-shirt, écran de téléphone) et la maquette graphique statique d’une page web ou d’une application.
Cet article définit chacun de ces sens, les situe par rapport au wireframe et au prototype, puis explique à quoi sert un mock-up et comment en créer un.
Mock-up : la définition en une phrase
Le mot vient de l’anglais et désigne une maquette, une simulation à l’échelle ou à l’apparence du produit final. On le trouve écrit « mock-up » ou « mockup », les deux graphies circulent. L’équivalent français est simplement « maquette ».
Dans les deux sens du terme, un mock-up montre un rendu final sans le produire. On y voit les couleurs, les proportions et la disposition des éléments, mais rien n’est imprimé, fabriqué ni codé.
Mockup graphique et maquette d’interface : deux usages du mot
La mise en situation d’un visuel
En graphisme, un mock-up est un fichier modifiable qui place un logo, une affiche ou une couverture de livre sur un support photographié ou modélisé : papeterie, textile, emballage, écran. Un calque prévu à cet effet reçoit le visuel, et le fichier conserve les ombres, les reflets et les déformations du support.
Remplir un mock-up consiste donc à remplacer ce calque par son propre visuel, par exemple dans Photoshop, puis à exporter l’image obtenue. Le rendu ressemble à une photo de produit, sans séance photo.
La maquette d’une page ou d’une application
En web design, le mock-up est une maquette statique haute fidélité d’une page ou d’un écran. Elle fixe les couleurs, les typographies, les images et le contenu, réel ou proche du réel, mais aucun bouton n’y réagit.
Il arrive après la structure de la page et avant le développement. Les étapes de création d’un site internet placent d’ailleurs la validation du design avant toute intégration.
Le choix de la suite dépend ensuite du budget et du besoin : constructeur de pages ou développement sur mesure partent tous deux de la même maquette validée.
Les mises en situation servent aussi à présenter un site ou une marque sur les réseaux sociaux. Un visuel de site vitrine promu sur Instagram gagne en clarté lorsqu’il est montré sur un écran de téléphone.
Enfin, certains créateurs produisent leurs visuels avec des outils d’intelligence artificielle pour créer des contenus visuels, qu’ils placent ensuite dans un mock-up.
Wireframe, mock-up, prototype : ce qui les sépare
Ces trois livrables se distinguent par leur niveau de fidélité. Le Nielsen Norman Group la mesure sur trois axes : l’interactivité, les visuels et le contenu. Un wireframe en noir et blanc est son exemple de visuel basse fidélité, alors qu’un rendu haute fidélité ressemble au système réel par ses graphismes, son espacement et sa mise en page.
| Livrable | Niveau de détail | Interactivité | Usage |
|---|---|---|---|
| Wireframe | Structure et zones, sans style | Aucune | Placer les blocs de la page |
| Mock-up | Rendu visuel complet et figé | Aucune | Faire valider le design |
| Prototype | Variable, jusqu’au rendu réaliste | Parcours cliquable | Tester l’usage avec des utilisateurs |
Un prototype peut être haute fidélité sur certains points et basse sur d’autres. Le mock-up, lui, ne se teste pas en situation : il se regarde et se commente.
Dans un projet, ces livrables se suivent plutôt qu’ils ne s’excluent : la structure du wireframe est fixée d’abord, le mock-up habille ensuite cette structure, et le prototype met le tout à l’épreuve avant le développement.
À quoi sert un mock-up
Son premier intérêt est de faire valider un projet avant d’engager des coûts. Un client ou une équipe réagit plus précisément à une image réaliste qu’à une description.
Il permet aussi de présenter un produit sans le fabriquer : une boutique en ligne ou un service d’impression à la demande montre un t-shirt ou une tasse avant toute production. La mise en situation révèle enfin des défauts de lisibilité ou de proportion qu’un fichier à plat cache, comme un logo trop petit ou un texte illisible sur un fond chargé.
Dans un projet web, le mock-up sert aussi de référence commune : le développeur y lit les marges, les tailles de texte et les couleurs à reproduire, ce qui limite les allers-retours en fin de projet.
Beaucoup de graphistes s’en servent également pour alimenter un portfolio ou des visuels de réseaux sociaux.
Comment créer un mock-up, même gratuitement
Deux voies existent. La première part d’un modèle prêt à l’emploi, fichier PSD ou modèle d’un outil en ligne comme Canva : on y remplace l’image d’exemple par la sienne. La seconde construit le mock-up soi-même, à partir d’une photo du support, d’un travail de perspective et d’un calque de remplacement.
Pour construire soi-même un mock-up de livre ou de packaging, la perspective demande le plus de soin : le visuel doit suivre les angles et la lumière de la photo, sinon l’image paraît collée. Une photo prise de face, avec un éclairage uniforme, facilite le travail.
Pour une interface, on passe plutôt par un outil de design d’interface, qui permet d’assembler écrans, composants et contenus.
Les modèles gratuits se trouvent sur des banques de ressources graphiques et dans les bibliothèques des outils eux-mêmes. Avant d’en utiliser un, vérifiez sa licence : l’usage commercial, l’attribution du créateur et la revente du modèle sont autorisés ou non selon les cas.
Un mock-up bien choisi reste un outil de présentation : la qualité du visuel qu’on y place compte plus que le décor autour.
