Envie de savoir à quoi va ressembler un produit au cours de la phase de design sans devoir l’imprimer ou achever sa conception ? Le mockup permet d’avoir un aperçu du rendu final en plaquant l’image sur le support désiré pour le mettre en situation : page web sur un écran de smartphone, logo sur une casquette, affiche sur un immeuble… Tout est possible grâce aux fonctionnalités d’édition d’images de logiciels comme Photoshop.
Voyons cela de plus près !

Un mockup, c’est quoi ?

Le mockup, c’est la projection d’un design (visuel) sur son support (écran, éléments imprimés, objets divers…).
Cela est très utile pour imaginer le rendu d’un logo en cours de conception, tester un site web sur différents appareils ou bien même communiquer sur un produit qui n’est pas encore sorti.

Le mockup est utile dans toutes sortes de domaines :

• Branding et supports de communication
• Vêtements et objets
• Packaging
• Site web et posts de réseaux sociaux
• Signalétique et publicité
• Décoration d’intérieur

Un mockup, comment ça marche ?

Pour réaliser un mockup, il faut deux images : le fond — un écran, une pile de cartes de visite, un poster… — et le design à appliquer dessus — maquette de homepage, illustration, photographie…
À partir de ces images, des logiciels de retouche d’image comme Photoshop permettent d’obtenir un rendu réaliste et naturel qui projettera le design sur le support choisi pour avoir un aperçu du rendu final ou encore pour faire sa promotion auprès du public cible.

Deux approches :

• À partir d’une photographie prise soi-même : le mockup est plus concret et fidèle à la réalité, il est unique et sur mesure.
• À partir de fichiers téléchargés sur internet (gratuits ou payants) : il est plus facile d’avoir un rendu professionnel, mais il ne sera pas unique ; d’autres utilisateurs peuvent utiliser la même base pour leur mockup.

Exemples de mockups à compléter

Pour aller plus loin

• La galerie 3D Cali’co pour découvrir les mockups de Cali’co
• Creatsy sur Behance, créateur de mockups en tous genres