À quoi sert un mockup
Une capture d'écran brute est plate et sans contexte. La même capture dans un téléphone montre un produit qu'on pourrait tenir en main. Ça paraît anodin. Sur une page de store ou dans une publicité, c'est pourtant souvent ce qui fait la différence entre un défilement et un clic.
On trouve des mockups dans :
- les captures de l'App Store et de Google Play ;
- les visuels d'accueil et les vidéos produit des sites web ;
- les posts Instagram, TikTok et LinkedIn ;
- les présentations clients et les portfolios ;
- les pitch decks pour investisseurs.
Pour un designer, il y a aussi un côté pratique. Un client qui regarde un PNG à plat finit toujours par demander : « Et sur un téléphone, ça donne quoi ? » Le mockup répond avant la question.
Les types de mockup
On en croise trois aujourd'hui, et chacun a son point fort.
Le mockup à plat (2D)
La capture est posée dans un cadre d'appareil vu de face. Rapide à faire, fichiers légers, souvent suffisant pour les stores. Mais tout est vu sous le même angle, et une page remplie de mockups 2D devient vite monotone.
Le mockup photo
Quelqu'un photographie un vrai appareil, par exemple un téléphone en main ou un portable sur un bureau. On repère la zone de l'écran, puis votre design y est placé avec la bonne perspective. La lumière et le décor sont réels, d'où un rendu très naturel, idéal pour les réseaux sociaux et les sites.
Le mockup 3D et la vidéo mockup
Un modèle de l'appareil en trois dimensions. Vous tournez le téléphone dans tous les sens, déplacez la lumière et l'ombre suit. Sa vraie force, c'est le mouvement : l'appareil pivote ou le portable s'ouvre pendant que votre app défile à l'écran. Pour les vidéos de lancement et les aperçus App Store, c'est devenu le type le plus utilisé.
Mockup, wireframe et prototype
On les confond sans arrêt. Le wireframe est le squelette d'un écran : des blocs, des traits, du texte provisoire, pas de couleur. Il sert à se mettre d'accord sur ce qui va où. Le prototype est cliquable : on touche un bouton, l'écran suivant s'ouvre. C'est ce qu'on fait tester aux utilisateurs.
Le mockup montre le design fini, ou presque, dans un cadre réaliste. On ne clique pas dessus : il est fait pour être regardé.
Comment créer un mockup
Il y avait deux chemins : ouvrir un PSD à objets dynamiques dans Photoshop, ou monter une scène dans un logiciel 3D comme Blender ou Cinema 4D. Le premier est rapide mais limité. Le second est puissant mais demande des semaines d'apprentissage.
Il existe maintenant des apps faites pour ça. Dans Mockup Center :
- Glissez votre capture ou votre enregistrement d'écran dans l'app.
- Choisissez un appareil (iPhone, Galaxy, iPad, MacBook, Apple Watch et d'autres) ou ouvrez un modèle animé.
- Réglez l'angle, la lumière et le fond, puis exportez en PNG ou en vidéo.
Le guide comment créer un mockup détaille chaque étape.
Ce qui fait un bon mockup
À force de regarder des pages de store et des posts de lancement, on retrouve toujours les mêmes habitudes chez les bons :
- La capture est nette. Un écran flou rend cheap même une scène 3D soignée. Faites-la à la résolution réelle de l'appareil.
- La barre d'état est propre : 9:41, batterie pleine, pas de notifications. Un détail, mais ça se remarque.
- Le fond ne concurrence pas le produit.
- Chaque image dit une seule chose, avec une fonction et un titre.
