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

Quelles sont les différences entre zoning, wireframe, mockup et prototype ?
  • Advertising
  • Branding
  • Digital
  • Culture Pix

Bien en amont des maquettes graphiques, lors de la phase de conception d’un projet web, plusieurs livrables sont indispensables en complément du cahier des charges pour déterminer l’ergonomie d’un site.
Zoning, wireframe, mockup, prototype : comment s’y retrouver entre tous ces termes ?

 Zoning : schéma simple

Après la réalisation de l’arborescence, il est nécessaire de commencer à hiérarchiser les contenus dans la page. C’est le rôle du zoning, première étape cruciale qui schématise de manière très simple la structure des pages les plus importantes du futur site web. Il délimite les différentes zones (header, footer, navigation, …) et les fonctionnalités définies par le cahier de charges. Il met en avant le premier niveau de lecture et permet de vérifier la cohérence globale du projet.

Wireframe : maquette « fil de fer »

Vient ensuite l’étape du wireframe. Il s’appuie sur le zoning et détaille le type de contenu des blocs : images, textes (souvent du faux texte à ce stade de la conception). Il intègre également les animations et permet ainsi de montrer le fonctionnement de la page. Cette étape permet de s’assurer que l’expérience utilisateur (UX) et l’ergonomie seront en adéquation avec les objectifs. Même si aucun design n’est encore appliqué, le wireframe permet de visualiser plus concrètement le projet et les fonctionnalités.

Mock up : interactions de l’interface

Le mock up ajoute une dimension interactive au wireframe pour montrer notamment l’enchainement et la navigation entre les pages, le comportement des boutons, l’affichage de messages d’erreur des formulaires, les sliders… Avec le mock up, on va pouvoir vérifier la cohérence du parcours de l’utilisateur et scénariser les interactions avec l’application.

Prototype : Choix et validation des technologies

Pour tester les différentes technologies qui seront utilisées sur le site web avant la mise en production, on peut créer un prototype en rendant les interfaces fonctionnelles. Il pourra évoluer et servir de base au projet.

Qu’elles soient destinées à un usage interne ou au client, toutes ces étapes définissent les bases fonctionnelles et ergonomiques d’un projet web et s’assurent de sa cohérence avant le travail du graphiste. Elles permettent également un gain de temps en évitant de lourdes modifications en phase de développement du site.

Cette réflexion initiale effectuée en amont donne la possibilité de déterminer la structure la plus intuitive et la plus efficace possible en fonction des objectifs et de la cible. Elle est donc indispensable à toute conception de projet.

De la phase de conception jusqu’à la réalisation, Pix Associates vous accompagne pour établir un projet avec la meilleure expérience utilisateur possible. N’hésitez pas à contacter notre équipe.

Sources : [1] mardezordo.me ; [2] jaetheme.com ; [3] manurenaux.wp.imt.fr

De la French Tech à la French Touch : empreinte digitale et culturelle L’ePrivacy ou la guerre contre les cookies tiers
Un projet ? Contactez-nous !
Contactez-nous ! Un projet ?

À propos de nous

Agence de conseil et création en communication et marketing basée à Nice et Paris, notre approche unique allie stratégie, design et technologie pour façonner des plateformes e-commerce, expériences de marque, applications mobiles et autres projet digital ou print sur-mesure.

Depuis 0 ans, nous mobilisons nos savoir-faire au service de nos clients pour concevoir des solutions esthétiques et performantes.

Contact

NICE

16, avenue Fragonard
06100 NICE
04 93 87 03 19

PARIS

6, rue des Quatre Vents
75006 PARIS
01 42 33 58 83

Layer 1 Voir Voir
Pix Associates - Logo blanc

Pour une expérience optimale, veuillez utiliser votre mobile ou tablette en mode portrait.