Un mockup d'appareil est une image photoréaliste d'un téléphone, d'un ordinateur portable, d'une tablette ou d'une montre qui affiche votre design à l'écran. Les designers s'en servent pour les captures de l'App Store, les visuels de landing page, les publicités et les réseaux sociaux. Les outils récents comme MochiMockup calculent chaque mockup en vraie 3D, au lieu de coller une capture plate sur la photo figée d'un appareil.
Pourquoi les designers utilisent des mockups
Une capture d'écran brute se lit mal. Elle paraît abstraite, n'a aucun contexte physique et ne ressemble pas à la façon dont on utilise vraiment le produit. Posée sur un téléphone en 3D, la même capture devient tout de suite concrète : le visiteur comprend « c'est une appli » sans avoir à y penser.
Les trois usages principaux
- 01Les captures de l'App Store et de Google Play : selon Apple, 73 % des visiteurs ne regardent que les deux premières captures d'une fiche, donc un bon mockup en première position fait directement monter les installations.
- 02Le visuel principal d'une landing page : un téléphone incliné ou un ordinateur qui flotte, c'est le moyen le plus rapide de rendre une appli web tangible dès le premier écran.
- 03Les réseaux sociaux et la publicité : sur LinkedIn, X et Instagram, les posts avec un mockup génèrent plus d'engagement que les captures brutes (benchmarks B2B LinkedIn, 2024).
Montage à plat ou vrai rendu 3D
Tous les mockups ne se valent pas. L'ancienne génération d'outils repose sur des montages à plat en PSD ou en PNG : en gros, la photo d'un téléphone à l'écran vide, sur laquelle on colle sa capture. Les outils plus récents comme MochiMockup calculent chaque scène en vraie 3D : l'écran suit la courbure de l'appareil, la lumière est physiquement juste et les reflets de l'interface apparaissent correctement sur la vitre.
| Approche | Montage à plat | Vrai rendu 3D |
|---|---|---|
| Justesse de la lumière | Figée, peut jurer avec l'interface | Calculée physiquement |
| Courbure de l'écran | Plate | Suit la géométrie de l'appareil |
| Reflets | Incrustés dans la photo | Générés pour chaque écran |
| Modification | Bloqué sur l'angle de la photo | Caméra réglable en direct |
| Outils typiques | Mockuuups Studio, Mockup Photos | MochiMockup, Rotato, Shots.so |
Qui a inventé les mockups ?
Les mockups d'appareil existent depuis la sortie du premier iPhone en 2007 : les photos produit d'Apple sont devenues le modèle que tous les designers ont repris. Le premier outil dédié (Placeit) est sorti en 2014, et la catégorie s'est depuis divisée en deux familles : les bibliothèques de photos (Mockuuups Studio, Mockup Photos) et les outils nés en 3D (Rotato, Shots.so, MochiMockup).
“Un bon mockup fait la différence entre un visiteur qui comprend votre produit en une demi-seconde et un visiteur qui continue de faire défiler. Chaque landing page SaaS en a besoin d'au moins un.”
Créer son premier mockup
- 01Exportez votre écran depuis Figma en PNG, en 2x ou 3x.
- 02Ouvrez MochiMockup et choisissez un type d'appareil : téléphone, ordinateur, tablette ou montre.
- 03Glissez votre PNG sur l'appareil : l'écran se met en place tout seul.
- 04Choisissez une scène (studio, mise en situation, dégradé).
- 05Exportez en 2K (gratuit) ou en 4K (Pro), puis placez l'image sur votre landing page, votre fiche App Store ou votre publicité.