Mockup : définition, intérêt et création (+ outils gratuits)

Le mockup, dans sa traduction littérale, désigne la maquette d'une création, dessinée sur support papier ou au format numérique. Elle permet de matérialiser une représentation du produit à concevoir, avant de le lancer en production. Les graphistes l'utilisent traditionnellement dans le cadre de commandes d'affiches et de flyers, ou de packagings, de mugs ou encore de tee-shirts personnalisés. Le mockup est également utile dans le processus de développement logiciel. Lorsque l'entreprise a un projet de site web ou d'application mobile, par exemple, le mockup sert à présenter visuellement les idées, notamment en modélisant la future interface utilisateur.

L'étape du mockup intervient tôt dans le cycle de vie du produit, immédiatement après que l'idée a émergé. Selon la nature du produit, le mockup précède :

• L'impression des supports de communication.
• La fabrication des produits personnalisés.
• Le développement du logiciel.

Pourquoi faire un mockup ?

Le graphiste fait un mockup pour soumettre ses propositions créatives au client, et modifier facilement les versions de travail successives conformément aux demandes du client. Illustration : une entreprise souhaite faire imprimer des casquettes au logo de la marque ; le mockup permet de visualiser l'emplacement et la taille du logo sur la casquette, puis d'y apporter toutes modifications utiles avant de lancer la fabrication.

Faire un mockup est particulièrement utile dans le domaine du développement logiciel. La maquette permet non seulement de représenter les caractéristiques esthétiques de l'interface, mais aussi de modéliser ses caractéristiques fonctionnelles. L'entreprise qui développe le produit digital utilise ainsi le mockup : le designer dessine des versions successives de la maquette, les décisionnaires valident, puis les développeurs conçoivent le prototype sur cette base. Concrètement, faire un mockup sert à :

• Formaliser les idées : la présentation permet de visualiser comment l'utilisateur interagit avec le logiciel. Exemple : une diapositive du diaporama de présentation indique que l'utilisateur peut cliquer sur un bouton de commande, la diapositive suivante représente la page d'atterrissage lorsque l'utilisateur a cliqué.
• Travailler facilement sur un support numérique modifiable : l'outil de création de mockup permet de modifier aisément la maquette aux fins de personnalisation, grâce à des fonctionnalités telles que le glisser-déposer, l'ajout d'encarts de texte ou encore le changement de couleur d'arrière-plan. Le mockup en outre peut être partagé en ligne avec les collaborateurs concernés ou avec le client, qui émettent leurs observations : le designer effectue les modifications sans délai, le travail est accéléré.
• Faire une démonstration de la future interface web ou mobile : les décisionnaires ont un aperçu fiable du rendu final. Ils évaluent ainsi les différents aspects fondamentaux de l'interface, notamment la charte graphique et l'organisation de l'information, et simulent son fonctionnement pour vérifier l'ergonomie et l'intuitivité de l'interface utilisateur. La phase de développement peut alors commencer.
• Développer l'interface à moindres risques : le mockup a permis de détecter, et de lever, les éventuels obstacles à une expérience utilisateur fluide. Les décisionnaires en outre ont vérifié que l'ensemble des fonctionnalités requises ont été prises en compte et que le design est conforme à l'identité visuelle de la marque. Enfin, le mockup a mis en évidence les particularités liées au développement de l'interface, ce qui permet à l'entreprise d'estimer la durée de conception eu égard à sa complexité. Dès lors, les développeurs disposent d'un support fiable pour travailler à leur tour, le résultat est sécurisé.

Conseils pour réaliser un bon mockup

Dans le cadre d'un projet de développement d'interface digitale, réaliser un bon mockup implique de respecter les bonnes pratiques.

• Attribuer les rôles : de nombreuses compétences interviennent dans le cadre du product design, à chacun son rôle. Le mockup relève de la compétence du designer : il maîtrise les outils pour travailler vite et bien, conformément aux idées soumises par le product designer.
• Encadrer l'étape du mockup dans la durée : le développement d'un produit digital doit être rapide, et d'autant plus dans le cadre d'un projet innovant. La maquette doit être parfaitement conforme aux exigences de l'entreprise, pour autant l'entreprise ne peut pas se permettre de multiplier les allers-retours entre les différents intervenants au projet : elle fixe une deadline pour la conception du prototype.
• Collaborer efficacement : la maquette est de nouveau soumise à l'équipe à chaque modification, et les collaborateurs font preuve de réactivité au moment de formuler leurs observations sur la nouvelle version de travail.
• Penser utilisateur tout au long du maquettage : le mockup modélise la future interface utilisateur. Pour en assurer l'ergonomie et l'intuitivité, il faut se mettre à la place de cet utilisateur, dont le profil a été déterminé en amont. Avant validation du mockup, l'équipe peut présenter la maquette à des collaborateurs qui ne sont pas parties prenantes au projet, pour obtenir un avis objectif.
• Utiliser un outil de création de mockup performant : le designer privilégie un outil digital pour modifier facilement et rapidement la maquette, et choisit le format le mieux adapté. Pour faire la maquette d'une interface web ou mobile, le diaporama de présentation ou la vidéo sont recommandés. Il est important en outre de vérifier les différentes fonctionnalités pour choisir le meilleur outil de mockup utile pour l'élaboration du MVP.

Placeit

Placeit est un générateur de mockups :

1. Le designer sélectionne la catégorie du produit : vêtement, support de communication, objet publicitaire ou encore interface digitale.
2. Il choisit un template parmi une vaste bibliothèque. Le site propose des templates au format vidéo.
3. Il importe son visuel : le logo ou l'image est automatiquement intégré sur le template.
4. Le designer personnalise le mockup : emplacement et taille du visuel, couleur de fond du template ou encore ajout de texte.
5. Il télécharge son mockup.

Placeit permet ainsi de présenter les caractéristiques esthétiques du produit en situation réelle, pour aider à se projeter. À noter que Placeit est gratuit dans la limite d'une sélection de templates. Pour accéder à l'ensemble des ressources, l'utilisateur paye un abonnement.

Moqups

Moqups est un logiciel SaaS de création de mockups et de wireframes d'interfaces digitales. Les fonctionnalités de Moqups :

• Le designer utilise un template ou un modèle vierge pour dessiner la maquette de l'interface. Les commandes sont intuitives, et les options de personnalisation sont nombreuses.
• Le logiciel permet de modéliser, sur un diagramme, le cheminement de l'utilisateur à travers le site web ou l'application mobile. Les caractéristiques fonctionnelles de l'interface sont ainsi mises en évidence.
• La maquette est interactive : lors de la présentation, le designer utilise les commandes pour simuler le parcours utilisateur.
• Le logiciel est collaboratif : les collaborateurs autorisés peuvent accéder aux versions de travail successives, les modifier et les commenter.

À noter que Moqups est accessible gratuitement dans la limite de deux projets. Au-delà, l'utilisateur doit souscrire un abonnement payant.

Applaunchpad

Applaunchpad génère des mockups, notamment aux fins de présentation d'une application dans les boutiques de contenus numériques. Le designer utilise des captures d'écran de l'application, et les télécharge sur le template de son choix. Applaunchpad permet ainsi de présenter le produit de manière attractive.

Le site met également à disposition des modèles de présentation de sites web et d'applications sur montres connectées, sur iMac, sur iPad ou encore sur Windows. Le designer dispose d'options pour personnaliser le mockup.

Artboard Studio

Artboard Studio est un outil de création et de présentation de mockups.

• Le designer conçoit la maquette à partir d'un template ou d'un modèle vierge.
• La plateforme permet d'insérer de multiples objets en fonction du produit à présenter : divers packagings, une multitude de supports de communication, tous types de vêtements ou encore des appareils multimédia.
• Les fonctionnalités permettent de personnaliser le mockup de manière avancée. Artboard Studio inclut notamment l'ajout d'effets et de transitions, pour animer la présentation.
• Une fois la maquette terminée, le designer l'importe au format de son choix.

L'outil est accessible gratuitement. Certains templates et certaines fonctionnalités néanmoins sont réservés aux abonnés.

Marvel

Marvel est un site pour faire des mockups de produits digitaux. Le designer peut y créer la maquette, puis générer des présentations dynamiques du projet. La fonctionnalité de test utilisateur permet en outre de proposer une simulation du produit à un panel cible, afin de vérifier l'attractivité de l'interface et d'étudier le comportement utilisateur. Marvel dispose également de fonctionnalités de partage collaboratif, pour échanger avec les parties prenantes au projet.

Le site est accessible gratuitement dans la limite d'un projet. Au-delà, il faut souscrire un abonnement mensuel payant.

Mockingbird

Mockingbird est un éditeur d'interfaces digitales en ligne. Facile à prendre en main, il permet au designer de dessiner la maquette à l'aide des commandes basiques. La conception est effectuée page par page, chacune pouvant être exportée aux formats PDF ou PNG. Une fois les différents fichiers exportés, le designer peut en faire une présentation statique. Une fonctionnalité de partage permet de collaborer sur le projet.

Mockingbird est accessible gratuitement en version d'essai, pendant sept jours.

Justinmind

Justinmind est un site de mockups pour tous types de projets web et mobile.

• Le designer choisit un template mobile ou web.
• Il personnalise l'aspect et les fonctionnalités de l'interface, dans le respect de la charte graphique imposée et des idées soumises par le product designer.
• Justinmind propose de réaliser une présentation interactive du projet : l'interface est ainsi visualisée en conditions d'utilisation.

Cet éditeur de mockups est gratuit. La version payante permet toutefois d'accéder à des fonctionnalités avancées.

Proto.io

Proto.io est un éditeur de mockups très intuitif pour réaliser des maquettes de produits digitaux. Il met à disposition une vaste bibliothèque de templates, et chacun peut être personnalisé de manière avancée. Son, vidéo, effets ou encore transitions : la présentation est dynamique et interactive. Grâce aux fonctionnalités de partage de Proto.io, le designer obtient des retours et des commentaires des collaborateurs ou des clients.

Le site propose de tester gratuitement l'ensemble des fonctionnalités pendant quinze jours.

Pour aller plus loin, téléchargez ce guide gratuit et découvrez comment planifier efficacement votre lancement de produit et favoriser sa réussite.