Catégories
Article

Les mockups

Qu’est-ce que c’est? Comment ça marche? Quel plaisir peut-on y trouver?

Qu’est-ce c’est?

Mockup est un terme anglais que l’on peut traduire par maquette à l’échelle 1:1. L’échelle est importante. On peut parler du mockup d’une cabine de pilotage mais le terme ne convient pas pour vos petites voitures au 1:43. La raison tient à la fonction d’un mockup: fournir au designer un retour du client ou des futurs utilisateurs par rapport au produit qu’il est en train d’élaborer. Plus la maquette sera réaliste, meilleur sera le feedback.

En informatique, on parle également de mockup de l’interface logicielle d’une application. Une application n’a rien de matériel! me direz-vous. Bien évidemment mais les applications les plus utilisées par le grand public, où les trouve-t-on? Sur les écrans, de votre téléphone, de votre tablette, de votre ordinateur. Quoi de mieux dans ces conditions qu’une série de photographies montrant une page de votre futur site web sur ces différents écrans, avec une mise en scène soignée: bureau impeccable, décoré juste ce qu’il faut pour que le•s écran•s reste•nt le sujet avec si possible une jolie correspondance de couleurs entre le design et le décor? Par exemple, si vos écrans sont marron foncé, les meubles le seront également et la photographie sera légèrement sombre.

C’était il y a quelques années. Depuis l’usage du mockup s’est généralisé. Pour plein de projets, pour les professionnels mais aussi pour le grand public. Vous avez trouvé un super logo et un super slogan pour votre futur site web, à quoi cela ressemblera-til sur un tote bag ou sur un tee-shirt? Ou sur l’arrêt de bus près de chez vous? Il est facile de trouver des mockups prêts à l’emploi sur le net. Si l’on ne vise pas une haute qualité, juste pour diffuser sur le web, les mockups gratuits que l’on peut réaliser directement sur des générateurs en ligne sont intéressants. Si on est plus exigeant, soit pour la vraisemblance soit parce que l’on souhaite imprimer l’image, l’outil incontournable reste Photoshop. Les plus beaux mockups sont rarement gratuits mais leur usage n’a rien de compliqué et peut s’avérer très rentable dans un cadre professionnel.

Mockup Photoshop (gratuit) d’un arrêt de bus proposé sur le site mockupworld.co

Comment ça marche?

Pour les générateurs en ligne, suivre les instructions. Avant d’importer son image, prendre soin de la rééchantillonner (ou la recader) aux dimensions indiquées.

Les mockups PSD (Photoshop) font appel aux smart layers, objets dynamiques en français. Tout ce que vous avez à faire avec un fichier mockup PSD de ce type, c’est de lui faire comprendre que les images sources de sa/ses objets dynamiques ont changé; ce sont les vôtres. Il suffit de double-cliquer un objet dynamique pour le modifier (voir images ci-dessous). S’affiche alors un autre fichier que celui du mockup. Insérer dans ce fichier l’image de votre choix (avec les bonnes dimensions), supprimer éventuellement l’image précédente devenue inutile, enregistrer. Le fichier mockup se met à jour automatiquement.

Voici l’arrière-plan du fichier PSD qui me sert pour la une du site (fichier Adobe libre de droits). Ci-après les calques correspondants.

J’ai décoché les cases devant les trois calques Affiche 1 à 3. Cela explique pourquoi les tableaux de la photo ci-dessus sont vides. Vous remarquerez que des ombres portées sont visibles à l’intérieur (bord gauche) et à l’extérieur des tableaux et que la luminosité n’est pas la même sur les trois cadres.

Les trois calques Affiche sont conçus de façon identique. De bas en haut,

  1. l’objet dynamique —mon fichier image— avec un masque correspondant à l’intérieur du tableau; le badge lien qui s’affiche en bas à droite de la vignette indique qu’il s’agit d’un objet dynamique dont la source est ailleurs.
  2. deux calques d’ombres, avec masque, dont la fonction est de superposer les ombres de la photo initiale au-dessus de ma photo et d’en régler la luminosité.

Bien gérer les ombres et la colorimétrie est très important pour le réalisme du résultat. Sans les ombres notamment, on aurait l’impression d’un collage artificiel.

Quel plaisir peut-on y trouver?

On comprend facilement l’intérêt que le responsable d’un site marchand peut trouver à utiliser des mockups: mise en situation flatteuse des produits, surtout avec des maquettes réalisées par des professionnels, moins coûteuse que les services d’un photographe et d’une styliste. Il en va de même pour les concepteurs et les commerciaux qui peuvent ainsi montrer au client à quoi ressembleront les tote bags, les emballages, les publicités urbaines, etc. avec le logo de sa marque.

Mais qu’en est-il pour un photographe amateur comme vous et moi? Ben moi, ça m’amuse. Je suis narcissique. Voir mes photographies pendues aux cimaises de ce qui, dans mon imagination, est un grand musée mais qui, dans la réalité, sera dans le meilleur des cas le café du coin ou la maison de quartier, je trouve cela original, décalé, loufoque, curieux, peu importe. Il y a un peu de moi dans cette démarche, et c’est là l’essentiel. N’est-il pas?

Quand j’ai réalisé mon premier mockup, celui de la photo de couverture de cet article, je l’ai publié sur facebook accompagné d’un commentaire délirant où je disais avoir rêvé d’être, 20 ans plus tard, un artiste célébré, exposé dans les plus grands musées, qu’enfin mon génie était reconnu. Que croyez-vous qu’il m’arriva après ce petit délire? Eh bien j’ai reçu ce commentaire: « Bernard, surtout ne change rien! Reste comme tu es. » J’étais aux anges.

Par bernardbouthors

Photographe amateur

3 réponses sur « Les mockups »

Répondre à bernardbouthors Annuler la réponse.

Entrez vos coordonnées ci-dessous ou cliquez sur une icône pour vous connecter:

Logo WordPress.com

Vous commentez à l’aide de votre compte WordPress.com. Déconnexion /  Changer )

Photo Google

Vous commentez à l’aide de votre compte Google. Déconnexion /  Changer )

Image Twitter

Vous commentez à l’aide de votre compte Twitter. Déconnexion /  Changer )

Photo Facebook

Vous commentez à l’aide de votre compte Facebook. Déconnexion /  Changer )

Connexion à %s

Ce site utilise Akismet pour réduire les indésirables. En savoir plus sur la façon dont les données de vos commentaires sont traitées.