Mockups

Choisir un outil Mockups

Qu’est-ce qu’un outil de mockups ?

Les mockups (maquettes en français) sont des représentations graphiques qui permettent d’illustrer visuellement une interface web, une application mobile, ou un produit. En d’autres termes, les mockups sont des images modifiables qui offrent la possibilité de créer des mises en situation très proches du résultat final.

Grâce à ces visuels, vous pouvez tester l’apparence et le rendu de votre design (interface d’un site ou d’une page web, présentation d’application mobile, packaging d’un produit…) ou de votre branding (logo, typographie, style, couleurs, illustrations…) sur plusieurs supports.

Pour créer un mockup, les outils proposent souvent des banques de mockups qui donnent accès à différents types de visuels téléchargeables et modifiables :

• Écrans d’ordinateur, de tablette ou de smartphone (disponibles en plusieurs tailles d’écran, et adaptés aux devices les plus populaires : appareils Android, iPhone, MacBook, iPad, Apple Watch…),
• Couvertures de livre, ebooks,
• Affiches, flyers, guides, brochures,
• Cartes de visite, papier en-tête,
• Packagings de produits.

Ces mockups peuvent par exemple être utilisés dans le cadre d’une présentation professionnelle, d’un portfolio ou encore d’une publicité. Les solutions de mockups s’adressent tout particulièrement aux professionnels du graphisme, du webdesign, de la communication et de la publicité.

Les principales fonctionnalités des générateurs de mockups

Pour réaliser des mockups, vous avez la possibilité d’utiliser des générateurs de mockups tels que Mock Magic, Previewed, Screenshot Rocks, ou encore Artboard Studio, qui proposent un éditeur intégré. Vous pouvez également utiliser des banques de mockups telles que Mockup World, puis modifier les visuels téléchargés via un logiciel de retouche photo comme Photoshop.

Parmi les principales fonctionnalités des solutions de mockups :

• Banque de mockups : la plupart des outils de mockups proposent des bibliothèques de visuels téléchargeables pour vos maquettes, et réalisés par des designers professionnels. Selon les outils, vous trouverez des visuels gratuits et premiums.
• Édition : vous pouvez importer votre visuel via un simple système de glisser-déposer, puis ajouter du texte, des boutons ou un logo et modifier l’arrière-plan (fond uni, dégradé, etc.) pour personnaliser votre mockup. Certains outils proposent également l’ajout d’objets de décoration pour améliorer le réalisme de votre maquette. Il est aussi possible de redimensionner votre visuel dans différents formats, selon les besoins de votre projet. Ainsi, vous pouvez facilement adapter vos mockups sur plusieurs devices.
• Exportation : selon les usages, vous pouvez exporter vos visuels dans différents formats tels que PNG, JPEG, SVG, PSD ou GIF.
• Intégrations : de nombreux générateurs de mockups proposent des intégrations avec des plateformes telles que Sketch, Figma, Photoshop ou Adobe XD, ce qui vous permet par exemple d’intégrer vos mockups à vos prototypes.

Comment utiliser un mockup sur Photoshop ?

Si vous souhaitez créer vos propres maquettes sans passer par un éditeur en ligne, il est possible d’utiliser Photoshop, l’outil de retouche photo de la suite Adobe.

Pour exploiter un mockup depuis cet outil, il vous suffit de télécharger un visuel en format PSD, puis de l’ouvrir avec Photoshop. La maquette contient plusieurs calques : identifiez le calque dynamique (souvent nommé “Place your design here”, ou autre mention équivalente), qui vous permet de modifier le visuel. Effectuez ensuite un double clic sur le calque, puis insérez votre design en respectant le format du mockup. Finalement, rendez-vous sur le fichier de base pour apercevoir votre design en situation. Vous pouvez modifier le calque dynamique autant de fois que nécessaire.

Il est également possible d’utiliser Illustrator ou InDesign pour retravailler l’aspect de votre mockup, ou le décliner en plusieurs maquettes.

Quelles sont les différences entre zoning, mockups, wireframe et prototype ?

Lors de la réalisation d’un site web ou d’une application mobile, de nombreuses étapes interviennent dans la conception de l’interface utilisateur (UI) et de l’expérience utilisateur (UX). Voici les étapes clés qui interviennent dans le processus :

• Zoning : il s’agit de diviser l’interface en plusieurs zones distinctes, afin de schématiser l’agencement du site web ou de l’application.
• Wireframe : cette étape permet de concevoir le squelette et l’arborescence d’un projet, en établissant les relations entre les différentes pages du site ou de l’application mobile. Lors du wireframing, l’UI reste simple et peu détaillée.
• Mockup : la réalisation de mockups permet de travailler les éléments graphiques du projet, et ainsi de rendre le wireframe esthétique.
• Prototype : la phase de prototypage est la dernière étape avant la création du site Internet, de l’application mobile ou du produit. Le prototype est une représentation fidèle du rendu final, et celui-ci prend en compte l’ensemble des éléments graphiques, tout en offrant une expérience interactive. Par ailleurs, les prototypes peuvent servir pour effectuer des tests utilisateurs.