Wireframe, mockup, prototype : les bases du webdesign UX/UI

Dans la conception des UX/UI, les néophytes confondent souvent les termes utilisés par les graphistes et les webdesigners. Quelles différences entre wireframe, mockup et prototype ? Free-Work fait le point.

Wireframe : l’indispensable maquette fonctionnelle lors de la création de nouvelles interfaces

Le terme wireframe désigne la maquette fonctionnelle permettant de poser des idées, de les partager et de gagner du temps lors de la phase de production du site.
Un wireframe permet en effet de communiquer les intérêts respectifs en interne, entre la direction et les différentes équipes impliquées dans le projet.
Interfaces web, mails, applications mobiles… Il est possible de poser et de prévisualiser tout type d’architecture, en réfléchissant à la bonne manière d’organiser et de hiérarchiser l’information sur un écran ou une interface, en vue d’une interaction optimale avec l’utilisateur.
Ce point de départ prévoit l’essentiel de ce que devra comporter la page, une UI très basique et la mise en page prévue.
Pas encore question d’esthétique à ce stade, en effet, mais uniquement de structure et de fonctionnalités.
Dès le début du processus d’un projet digital, la conception de wireframes repose sur la définition de différents éléments permettant d’éviter toutes sortes d’erreurs : spécifications définies en amont, prévisualisation d’écrans, flux suivis par les visiteurs, puis transformation en mockups designés et prêts à être implementés.
Le wireframe agit ainsi comme un véritable fil conducteur du projet web et/ou mobile, tout en réduisant les itérations chronophages entre les équipes dans les environnements de tests.
Le recours à ces maquettes fonctionnelles présente de nombreux bénéfices : visualisation des interfaces, concrétisation des spécifications d’un projet, clarification des idées, facilité d’utilisation des interfaces, ou encore gestion aisée des évolutions d’un site.
Incontournable et indispensable lors de la création de nouvelles interfaces, le wireframe est facile à réaliser et peu cher à produire : aucune raison de s’en priver !

Mockup : la photo de synthèse de la future interface

Le mockup désigne la maquette d’une interface utilisateur qui a pour but de représenter simplement le squelette d’une interface utilisateur.
À la différence du wireframe, il fait davantage de place à l’aspect esthétique en montrant à quoi l’interface finale doit ressembler.
On peut le comparer aux storyboards utilisés au cinéma ou pour les spots TV : cette présentation visuelle montre la succession des écrans prévue dans une application mobile, par exemple.
Il s’agit d’une image qui représente une photo de synthèse de la future interface à réaliser par les graphistes et les développeurs, leur permettant de prendre des décisions au sujet de différents éléments : charte graphique, style, typographie…
Modifiable mais non cliquable, le mockup est calibré pour pouvoir modifier rapidement une zone précise et y insérer de nouveaux éléments.

Outre les interfaces web ou mobiles, toutes sortes d’environnements peuvent être représentés : tote-bags, magazines, couvertures de livres, prospectus, pochettes d’albums de musique, emballages, t-shirts…
Le mockup pourra ainsi être inséré comme graphisme dans toute mise en situation vierge pour éviter les photographies et les prises de vue réelles chères, et permettre une projection en environnement existant.
Généralement, pour utiliser un mockup, un simple logiciel de traitement d’image (tel qu’Adobe Photoshop) suffit.
De nombreux sites permettent également de travailler son mockup sans disposer de Photoshop.

Prototypes : la représentation la plus fidèle possible du produit final

Last but not least, le prototype va donc désigner la représentation la plus fidèle du produit final.
Son but : simuler l’UI, à savoir le design d’interface utilisateur, qui permet à ce dernier de naviguer sur un site ou une application sans une trop grande concentration.
A la différence du wireframe et du mockup, le prototype est cliquable : il doit présenter le résultat d’un travail approfondi, celui de l’expérience utilisateur et de la prise en considération globale des besoins de l’utilisateur.
En effet, le défi de l’UX est simple : apporter des solutions efficaces aux besoins et aux attentes des internautes.
Pour centrer la conception utilisateur, le prototype va donc ressembler au produit final : il correspond peu ou prou à une maquette 3D et à l’échelle.
Pour devenir un produit final, il restera à coder le prototype et à valider le front-end.
Il est testé et optimal ? C’est parti, le prototype peut devenir non seulement interactif, mais fonctionnel !