Les maquettes sont très utiles pour présenter vos designs de manière créative. Elles sont souvent photoréalistes, ce qui donne un aperçu de l’apparence ou du fonctionnement d’un design donné une fois affiché dans le monde réel. Autrement dit, mettre en œuvre l’une de ces 4 techniques vous permettra d’obtenir un aperçu de ce à quoi ressemblera tel logo une fois imprimé sur un sac, telle application une fois entre les mains d’un utilisateur, ou même telle vitrine de magasin une fois entièrement décorée. Pour créer des maquettes de design convaincantes, il est essentiel de connaître les techniques des pros, et c’est justement ce que nous allons voir dans cet article.

Bien qu’elles soient composées d’images, les maquettes de design sont de puissants outils pour raconter une histoire. L’attention et les détails apportés à cette histoire détermineront si vos clients la trouveront convaincante ou…. pas du tout.

Un ensemble de photos montrant différentes maquettes de design
Dans cet article, nous verrons les 4 meilleures techniques pour créer des maquettes de design efficaces et professionnelles

Une bonne maquette repose principalement sur deux éléments : une mise en scène créative et une inclusion réaliste du design en question. Nous avons déjà abordé le premier élément dans un article sur la formulation d’un concept de maquette et la sélection des bonnes images pour raconter une histoire. Dans cet article, nous allons voir les aspects techniques avec les 4 méthodes les plus courantes pour créer des maquettes de design.

Voici les 4 meilleures techniques pour créer des maquettes de design : 

  1. Créer une maquette personnalisée de toutes pièces
  2. Créer des modèles de maquettes réutilisables
  3. Utiliser un générateur de maquettes en ligne
  4. Utiliser un plug-in de création de maquettes

1. Créer une maquette personnalisée de toutes pièces

Une maquette personnalisée est une maquette entièrement adaptée à un design précis. Si vous souhaitez réaliser des maquettes uniques et sur mesure, c’est la technique qu’il vous faut. Étant donné que le but d’une maquette est de présenter un projet, et donc de persuader (c’est-à-dire de vendre un concept de design), il va de soi que la maquette la plus convaincante est celle qui est la plus adaptée à un client spécifique.

Design de logo et maquettes de design pour une marque de boissons
Les maquettes personnalisées permettent de présenter un design précis en contexte. Design réalisé par Logo Dish

Mais bien sûr, créer une maquette de toutes pièces pour chaque projet n’est pas l’approche la plus pratique… Cela demande beaucoup de temps et d’efforts pour quelque chose qui ne vous servira qu’une seule fois. Aussi, il est inutile de créer une maquette de toutes pièces si le concept que vous voulez présenter n’est pas très original et ne se différenciera pas vraiment d’un modèle quelconque. C’est finalement à vous de décider si vous êtes suffisamment passionné par le projet (ou le client) en question pour faire cet effort supplémentaire.

Design de logo et présentation de maquettes pour une marque dans la tech
En plus de créer une scène spéciale, les maquettes de Sevarika sont soigneusement présentées avec les couleurs de la marque, rendant cette présentation très convaincante

Pour créer une maquette vraiment personnalisée, vous aurez besoin de photos. Ainsi, vous pourrez recréer votre concept dans votre maquette. Si vous utilisez des photos stock, votre maquette sera forcément beaucoup plus générique. Si vous avez l’équipement, l’expérience et le temps, prenez vous-même les photos dont vous avez besoin. Et dans ce cas, n’oubliez pas de réfléchir au préalable à ce que vous voulez faire, et n’hésitez pas à créer un story-board.

Vous pouvez également faire appel à un photographe professionnel, mais cela vous coûtera bien sûr de l’argent, et tous les designers ne peuvent pas forcément se le permettre. Mais sachez que vous pouvez également utiliser les photos de votre client. C’est ce qu’a fait le designer goopanic pour Academia de Artes, en utilisant les photos de l’école en question et de ses étudiants. Même si elles ne sont pas aussi d’aussi bonne qualité que des photos stock professionnelles, elles donneront au client une image plus authentique de la façon dont le design apparaîtra une fois terminé.

Design de logo et présentation de maquette pour une école d'art
Design réalisé par goopanic

Une fois que vous avez les photos, utilisez un logiciel de retouche pour y ajouter votre design. La plupart des gens utilisent Adobe Photoshop, mais Affinity Photo et Gimp sont d’excellentes alternatives. Ces programmes fournissent une variété d’outils et de tutoriels permettant d’obtenir des résultats réalistes, notamment grâce aux fonctions suivantes :

  • Outils de transformation pour adapter un design à une image
  • Modes de fusion pour incorporer la texture de la photo originale
  • Calques pour jouer sur l’éclairage, la couleur, et le contraste

Si vous voulez créer des animations personnalisées, utilisez un logiciel d’animation comme After Effects. Cela vous permettra par exemple d’utiliser des masques de calque pour créer des animations de défilement sur une photo de téléphone pour recréer le fonctionnement d’une application mobile.

Outils nécessaires

  • Matériel de photographie
  • Logiciel de retouche photo (Photoshop, Serif Photo, Gimp)
  • Logiciel d’animation (optionnel — Adobe After Effects)

Coût

  • Modéré à élevé

Avantages

  • Permet de créer des maquettes plus personnalisées et plus fidèles au concept du designer
  • Images originales, pas de filigrane ni besoin d’acheter des licences

Inconvénients

  • Coûteux en temps et en efforts, nécessite des connaissances logicielles plus avancées
  • Inefficace et chronophage

2. Créer des modèles de maquettes réutilisables

Les modèles de maquettes personnalisés sont des maquettes que les designers créent eux-mêmes, mais qui sont suffisamment générales pour être réutilisées pour plusieurs projets. Comme nous l’avons souligné plus haut, créer des maquettes personnalisées pour chaque projet peut être peu pratique et onéreux, tandis que cette technique permet de créer des maquettes à la fois originales et réutilisables, et de réduire ainsi les coûts.

C’est également un moyen pour le designer d’ajouter son propre branding ou sa signature.

Maquette de design d'application mobile montrant une personne en train d'utiliser un iPhone dans un café
L’arrière-plan de cette maquette a de la personnalité tout en étant suffisamment général pour être réutilisé. Design réalisé par googa

Le processus de création des modèles de maquette est essentiellement le même que celui de création de maquettes personnalisées : il vous faut des photos et un programme de retouches pour y ajouter votre design. En revanche, l’approche n’est pas la même : votre maquette doit être suffisamment générale pour fonctionner avec plusieurs projets et clients. Par exemple, au lieu d’utiliser un décor identifiable, la designer Daria V. choisit des arrière-plans illustrés qui peuvent être utilisés dans plusieurs contextes.

Illustrated product packaging mockup design
Design réalisé par Daria V.
Illustrated product packaging mockup design
Design réalisé par Daria V.

Pensez également à regrouper vos clients en fonction de thèmes communs, comme leur secteur d’activité (vous pouvez par exemple créer un modèle de maquette par secteur). Cela vous facilite ensuite la tâche lorsque vous devrez sélectionner les images.

Pour les produits physiques, certains graphistes créent des rendus de produits vierges à l’aide d’un logiciel 3D tel qu’Adobe Dimension. Cela a l’avantage supplémentaire de vous permettre de créer des maquettes animées et rotatives.

Maquette pivotante animé 3D mockup du packaging de design d'une boîte
Design réalisé par Mahmoud Shahin

Dans Photoshop, votre objectif doit perte de configurer votre document de sorte à pouvoir facilement changer de design par la suite, tout en concernant vos modifications. Pour cela, deux outils vous seront utiles :

Objets connectés :

Un objet connecté est essentiellement un conteneur qui stocke une image dans un document lié à lui, permettant ainsi d’y apporter des modifications sans affecter l’image d’origine. Si vous remplacez l’image dans l’objet connecté, elle se met à jour dans la composition avec toutes les modifications qui lui sont appliquées.

Ainsi, pour les maquettes, tout ce que vous avez à faire est de convertir votre calque en objet connecté au début de votre projet (Calque > Objets connectés > Convertir en objet connecté). Il vous suffira ensuite de remplacer le design à l’intérieur de l’objet connecté la prochaine fois que vous aurez besoin d’une maquette.

Actions Photoshop :

Les actions enregistrent les modifications que vous avez apportées à un document Photoshop afin que vous puissiez reproduire ces étapes en appuyant simplement sur un bouton. Ainsi, pour vos maquettes, vous pouvez utiliser une action pour enregistrer toutes les transformations et tous les effets que vous appliquez à un design pour qu’elle s’adapte à une photo, et appliquer ces mêmes modifications à un autre design à l’avenir, simplement en appuyant sur un bouton.

Logo design and gold foil business card mockup
Design réalisé par ultrastjarna
Logo design and gold foil business card mockup
Design réalisé par ultrastjarna

Outil nécessaires

  • Matériel de photographie
  • Logiciel de retouche photo (Photoshop, Serif Photo, Gimp)
  • Logiciel 3D (optionnel) pour créer des rendus de produits

Coût

  • Modéré

Avantages

  • Une utilisation répétée vaut la peine de créer maquettes personnalisées
  • Images originales, pas de filigrane ni besoin d’acheter des licences

Inconvénients

  • Nécessite des connaissances logicielles plus avancées
  • Peut être considéré comme du temps perdu si les résultats ne sont pas suffisamment différents d’un modèle quelconque

3. Utiliser un générateur de maquettes en ligne

Les générateurs de maquettes sont des des plateformes en ligne qui utilisent des images stock et un logiciel d’IA (intelligence artificielle) pour créer automatiquement une maquette à partir d’un modèle. En règle générale, le graphiste n’a qu’à télécharger son design. Le logiciel prend en charge tout le reste.

Capture d'écran du site de Placeit, un générateur de maquettes de design
Design via Placeit

Cette technique est de loin la solution la moins chère et la plus simple, mais elle présente néanmoins certains inconvénients. Les maquettes produites ne sont pas originales, et étant donné que de nombreux graphistes auront eux aussi utilisé le même service, il n’est pas rare de voir exactement les mêmes images de maquette apparaître ad nauseam sur tous les portfolios. Cela dit, ça peut être utile, et à moins que votre client ne soit un puriste, il y a de grandes chances que ça ne le dérange pas.

Faites attention aux points suivants pour choisir quel service utiliser : le prix, la qualité, et la pertinence. De nombreux générateurs de maquettes sont gratuits, même s’il faut alors se méfier des inconvénients « cachés » comme le nom du service en filigrane ou un choix limité de modèles. Sinon, il s’agit souvent d’abonnements, et la plupart des services que j’ai examinés sont compris entre 10 et 20 dollars par mois.

Assortiment de maquettes de design génériques pour des entreprises
Faites des recherches pour vous assurer que votre modèle n’est pas trop générique

La qualité peut dépendre de vos goûts personnels, mais il est important de passer du temps à faire des recherches sur les sites des autres graphistes afin de vous assurer que les modèles que vous choisissez ne sont pas trop génériques. Vous pouvez également utiliser un service comme Trustpilot pour trouver des avis d’utilisateurs et vous faire une idée.

Capture d'écran des maquettes de design proposées sur Artboard Studio
Designs via Artboard Studio
Capture d'écran de la page d'accueil de Smartmockups, un générateur de maquettes de design
Design via Smartmockups

Enfin, les générateurs de maquettes sont parfois spécialisés dans un type de maquettes précis. Faites donc votre choix en conséquence, surtout si vous devez vous abonner. Par exemple, Artboard Studio et Mockup Mark se spécialisent dans les maquettes d’impression et de vêtements. AppMockUp et Mockuuups Studio sont spécialisés dans les maquettes de design numériques, alors que Smartmockups, renderforest, et Placeit proposent des modèles de maquette généraux pour l’impression et le numérique.

Outils nécessaires

  • Connexion Internet fiable
  • Abonnement au site choisi (optionnel)

Coût

  • Gratuit ou peu cher

Avantages

  • Rapide et pratique ; aucune connaissance logicielle nécessaire
  • La qualité peut parfois être proche de celle des maquettes personnalisées

Inconvénients

  • Résultats génériques avec des images utilisées par de nombreux designers
  • Le modèle d’abonnement n’est avantageux que si vous avez besoin de plusieurs maquettes

4. Utiliser un plug-in de création de maquettes

Les plug-ins sont des intégrations tierces qui se connectent à un logiciel de design pour générer des maquettes. Ce sont essentiellement des applications qui permettent aux graphistes de créer et de réaliser des maquettes dans un seul et même programme, avec l’avantage supplémentaire de pouvoir utiliser les outils du programme en question pour modifier les maquettes générées.

Capture d'écran de Mokup Frames, un plug-in de maquettes de design
Design via Mokup Frames

C’est en quelque sorte le meilleur des deux mondes : un modèle peu cher avec un grand potentiel de personnalisation. Cela dit, cette technique est généralement réservée aux conceptions numériques, car la plupart des plug-ins ciblent les logiciels de prototypage d’applications comme Sketch, Figma, et Adobe XD.

Capture d'écran d'Angle design, un plug-in de maquettes de design
Design via Angle
Capture d'écran de Rotato design, un plug-in de maquettes de design
Design via Rotato

Il existe quelques services populaires qui fournissent des plug-ins téléchargeables, comme Angle, Rotato et Mokup Frames.  Étant donné que ces logiciels sont téléchargeables, ils ont généralement un coût unique. Ce prix est généralement plus élevé que celui des générateurs de maquettes de design, mais sera plus rentable sur le long terme, car vous ne devrez pas payer de frais d’abonnement.

Une fois téléchargé, vous devrez suivre les instructions du plug-in en question pour savoir comment l’installer dans votre logiciel. Vous aurez ensuite la possibilité d’appliquer un design depuis votre logiciel à une maquette. Le processus est similaire à celui des générateurs de maquette : le plug-in crée automatiquement votre maquette et vous utiliserez des outils de personnalisation pour la finaliser.

Prérequis

  • Logiciel de design (Sketch, Figma, Adobe XD)
  • Licence de plug-in et téléchargement

Coût

  • Peu cher

Avantages

  • Rapide et pratique ; peu de connaissances logicielles requises
  • Les maquettes sont créées dans le logiciel de design

Inconvénients

  • Résultats génériques avec des images utilisées par de nombreux designers
  • Les résultats ne sont pas significativement différents de ceux obtenus avec les générateurs de maquettes

À vous de créer des maquettes de design originales

Les maquettes de design sont des outils de présentation incroyablement utiles et qui permettent non seulement de vendre un concept, mais qui offrent aussi aux clients une idée concrète de ce à quoi ce concept ressemblera une fois implémenté. Lorsqu’elles sont bien faites, les maquettes sont extrêmement convaincantes.

Comme nous l’avons vu dans cet article, il existe de nombreuses façons de créer des maquettes, et chacune a ses avantages et ses inconvénients. Mais, quelle que soit la technique pour laquelle vous optez, les résultats dépendront, en fin de compte, de vos qualités en tant que graphiste et de votre détermination à créer une maquette unique et réaliste.

Vous voulez un design personnalisé de qualité ?
Nos designers peuvent vous aider à mettre en forme toutes vos idées.

Cet article a au départ été écrit par Rebecca Creger et publié en 2013. Il a été mis à jour avec de nouveaux exemples et informations.