La présentation de projets avec le mockup

Mockup ? Ce terme interpelle les néophytes qui ne sont pas habitués au domaine de la création digitale. Le mockup est utilisé dans l'univers informatique et est un fichier image modifiable assez basique. Déchiffrons les spécificités du mockup pour en tirer parti.

Qu'est-ce qu'un mockup ?

La définition du mockup est une maquette très simple qui est conçue pour modifier rapidement certaines parties d'un visuel. On peut y ajouter ou supprimer des éléments. Cette maquette représente l'interface utilisateur d'un site internet, le visuel d'une carte de visite ou encore d'un magazine. Elle est volontairement très simple pour se focaliser principalement sur les fonctionnalités ou pour une vision rapide de l'interface. Il ne s'agit pas de la version finale d'un visuel, mais d'une ébauche.

Ce mock-up est modifiable aisément afin de pouvoir aider le graphiste à trouver une meilleure présentation en fonction des remarques de son client ou de l'équipe de collaborateurs. De nombreuses situations nécessitent la création d'un mockup. On pense notamment à une affiche de concert, à l'impression sur un t-shirt, au graphisme d'une pochette de disque ou encore à la création d'une étiquette pour une bouteille de soda. La plupart des supports du graphiste peuvent devenir mockups.

Le mockup est aussi un prototype de l'interface utilisateur d'un logiciel. Il permet la présentation du logiciel avant la phase finale de création. Le PSD mockup est une forme de protoype Photoshop imaginé pour affiner la proposition au client ou aux équipes de création.

À quoi sert un mockup ?

Le mockup est une précieuse aide pour la réalisation d'un projet et la création graphique. Il est aussi bien utilisé en e-commerce que pour la création d'un portfolio physique. Il est le support parfait pour présenter une ébauche déjà avancée d'un projet avant validation. Le mockup est présenté pour recevoir les commentaires des clients. Il offre une bonne visibilité sur le projet final. Il existe une grande variété de mockup que l'on peut télécharger sur internet et adapter selon ses besoins.

Il existe plusieurs situations où le mockup peut être particulièrement utile.

La création d'un site web

Le mockup est alors à l'origine du projet. Il est très utile pour essayer de séduire les futurs visiteurs d'un site web. Il permet d'afficher l'interface telle qu'elle apparaîtra quand le site internet sera en ligne. L'image que l'on obtient aide à faire le choix de la position des photos, de l'aperçu d'un contenu ou de la résolution d'une vidéo. La charte graphique peut être adaptée pour une meilleure répartition des couleurs, on peut changer l'arrière-plan ou encore réduire la taille d'un paragraphe. Le but du mockup dans cette situation est d'offrir une navigation optimale et une ergonomie fluide au visiteur. L'impression doit être agréable, attrayante et inciter le visiteur à rester sur le site internet plus longtemps voire à naviguer dans les autres pages du site.

Les catégories d'un e-book

Afin que l'e-book soit intéressant, il est important de catégoriser le contenu et de le répartir de façon chronologique ou par degré d'importance. Les modules à disposition sont alors modifiés grâce au mockup. Les catégories peuvent être déplacées pour un choix plus judicieux. Les mockups offrent une vraie maniabilité et assurent des modifications rapides avant la présentation finale de l'e-book.

Les documents publicitaires d'une entreprise

Le mockup est également très pratique pour la création d'un document publicitaire. On pense ici principalement aux flyers, dépliants commerciaux, brochures à la française ou pochettes à rabats. Les mockups permettent de créer et de faire évoluer le support de communication avant l'impression. Pour ces documents print, le visuel doit être attractif et le contenu doit être perçu en quelques secondes. Il faut réellement attraper l'attention du prospect au vol. Le modèle est alors travaillé via le mockup pour obtenir la version la plus intéressante. Le concepteur du document s'appuie sur le mockup pour accompagner son client ou pour proposer un visuel à ses collaborateurs. Les modifications sont alors réalisées en direct pour affiner la conception.

Une application ou logiciel pour smartphone et ordinateur

On imagine la grande variété des utilisations possible dès lors que le mockup est utilisé pour la création d'une application mobile ou pour un ordinateur. L'utilisation d'une application sur internet ne souffre pas la médiocrité. Les utilisateurs risqueraient de vite l'abandonner si elle n'était pas facilement utilisable et agréable. Les smartmockups sont alors indispensables pour tester la version bêta d'une application. De même la création d'un logiciel est facilitée par le mockup. La modélisation est alors très aisée. Le schéma de fonctionnement est adaptable. Il est aussi possible d'imaginer l'utilisation d'un logiciel depuis l'installation sur le bureau jusqu'à l'utilisation des fonctionnalités les plus poussées. L'outil est perfectionné avant la mise sur le marché ou l'utilisation par différents professionnels d'une entreprise.

Le portfolio par le biais de Photoshop

Le portfolio est un outil très apprécié pour gagner en visibilité ou pour étoffer son portefeuille client. Le visuel du mockup aide à la conception d'un portfolio de qualité. On peut y afficher les visuels pour mettre en valeur les projets déjà réalisés et les présenter à sa clientèle. Il est alors possible de déplacer une photo sur la gauche, d'utiliser Photoshop pour améliorer l'apparence d'une photo. Le portfolio doit être illustré de telle manière qu'il suscite l'envie et la reconnaissance d'un travail de qualité.

Comment créer un mockup par étapes ?

Pour créer son propre mockup, il est très intéressant d'utiliser les modèles téléchargeables. Ces maquettes prêtes à l'emploi sont facilement dénichées sur internet. Il faut prendre garde au copyright et plutôt choisir des versions gratuites et libres de droits. La plupart du temps les mockups sont créés pour fonctionner avec Photoshop et sont d'ailleurs enregistrés sous un format photoshop.psd.

• Télécharger le mockup désiré sur l'un des sites gratuits ou choisissez un logiciel adapté.
• Ouvrir le fichier dans le logiciel Adobe Photoshop et sélectionner le calque adapté aux besoins du projet.
• Cliquer sur l'icône qui indique "your screen" et cela ouvre le calque à personnaliser.
• Insérer une image, un logo ou le contenu. Il est ensuite possible de modifier la taille de la police, d'ajouter un fond plus attractif ou d'améliorer l'environnement du visuel.
• Enregistrer le projet puis l'exporter si nécessaire.

Il est aussi possible d'utiliser un mockup même si l'on ne possède pas Photoshop. Direction le navigateur ! Certains sites internet proposent l'utilisation de mockups en ligne. Ces plateformes donnent l'opportunité d'intégrer le visuel en ligne sur leurs propres calques. Cette solution peut toutefois être limitée par l'offre gratuite. La bibliothèque de visuels ou les options peuvent être réduites. Les outils sont alors moins variés pour la version gratuite en ligne. Mais cela peut suffire pour une entreprise qui n'a besoin que d'un visuel. Si le projet est plus ambitieux, il est recommandé de passer à une offre professionnelle plus aboutie.

Quels logiciels utiliser ?

On les appelle logiciels mockups ou wireframe en ligne ou sur poste. Il existe une grande variété de logiciels faciles à utiliser. Voici une liste non exhaustive des outils les plus utilisés.

Whimsical (freemium)

Cet outil en ligne est très utile pour obtenir un visuel rapide d'un projet en utilisant un panel très large de fonctionnalité. La bibliothèque de composants est aussi bien fournie. Il est possible d'obtenir un résultat de qualité en quelques minutes.

Pencil (gratuit)

Ce logiciel gratuit en open source est un bel outil doté d'une bibliothèque de templates très fournie. Le projet obtenu est très professionnel. Pencil est particulièrement agréable à utiliser grâce à une ergonomie intuitive et agréable. Il aussi bien utilisable sur un iMac que sur un PC.

Moqups (freemium)

Moqups est une application en ligne très simple, mais pourtant également très complète. On peut aussi utiliser Moqups avec Confluence et JIRA. C'est parfait pour un travail collaboratif. Les mockups peuvent être reliés entre eux. On peut trouver Moqups en version gratuite, mais l'utilisateur n'aura alors pas accès à toutes les fonctionnalités. Avec une version de base, il est ensuite possible d'exporter des brouillons sous différents formats.

Balsamiq (payant)

C'est l'un des outils mockups les plus appréciés. Il est très facile à utiliser et ne demande pas de grandes connaissances en informatique pour le manipuler. Avec Balsamiq, l'utilisateur a accès à une grande bibliothèque d'éléments de base. On obtient un visuel très lisible et précis. Ce logiciel peut être testé gratuitement pendant 1 mois. Puis il faudra passer à une version payante pour bénéficier de toutes les options. Le degré de personnalisation proposé par Balsamiq est très intéressant. En quelques coups de crayon, le mockup prend vie.

Axure (payant)

Axure propose également une période d'essai avant de passer à une offre payante. Ce logiciel est utilisé dans le domaine du graphisme, car il est très complet. Les prototypes sont alors beaucoup plus complexes que pour une version gratuite d'un mockup. Si l'on est à la recherche d'un logiciel professionnel pour mockups, Axure est assurément la solution idéale.

Wireframe.cc (freemium)

Avec Wireframe.cc, on opte pour l'efficacité. Les mockups créés sont simples, mais particulièrement efficaces. Ce logiciel offre un panel assez réduit de fonctions et d'options, mais le résultat est digne d'un logiciel professionnel. En peu de temps, on obtient un mockup de qualité. Il est aussi possible de laisser des notes pour un travail collaboratif et de partager l'url. Wireframe.cc est mis à disposition gratuitement. Mais pour exporter les projets, il faut partir sur une version payante.

MockupFlow (freemium)

MockupFlow existe en version gratuite. Pour un panel de fonctionnalités plus étendu, il faudra également passer sur le logiciel payant. Cette version payante permet d'ailleurs de travailler sur un nombre illimité de créations. Le logiciel permet de suivre pas à pas la création de son mockup jusqu'à la présentation finale.

MarvalApp (freemium)

Cet outil en ligne aide à la conception de mockup directement depuis le navigateur. Il permet aussi le partage sur projet avec des collaborateurs. Il est totalement gratuit, mais est limité à un seul utilisateur et un projet à la fois.

Le mockup offre la possibilité de mettre en valeur des créations graphiques et d'affiner les projets avant impression ou mise en ligne. Présentation en entreprise, conception d'une carte de visite, application sur smartwache, le mockup est l'outil indispensable pour mettre en situation le visuel et pouvoir faire évoluer le projet. Il n'est pas nécessaire d'avoir des connaissances poussées en graphisme pour réussir à concevoir son mockup. Grâce aux différents outils à disposition, il est très aisé de créer son mockup pour une présentation professionnelle à un partenaire, un client ou à des collaborateurs.