Zoning, Wireframe, Maquette ?
Zoning, Wireframe, Maquette … KEZAKO ?
- La définition de l’arborescence ou squelette du site : organisation et hiérarchisation de l’information, des contenus et des fonctionnalités ;
- La conception de la navigation (ex. Menu principal, système de navigation secondaire, navigation contextuelle) ;
- La conception de l’interface utilisateur : sélection et disposition des éléments d’interface qui permettent aux utilisateurs d’interagir avec les contenus et fonctionnalités (menus, boutons d’actions, champs de saisie, menu déroulant, boutons radios, …) ;
- La conception graphique de l’interface traduite par une maquette (identité visuelle, polices, choix des visuels, …).
Qu’est-ce qu’un zoning ?
Le zoning est une représentation globale d’une page permet de schématiser “grossièrement” une page web grâce à l’utilisation de blocs. L’objectif est de présenter l’emplacement des zones de contenu et des grandes fonctionnalités.
C’est une première étape déterminante pour définir l’organisation générale des pages d’un projet. Elle arrive juste après la création d’une arborescence.
Le zoning permet de présenter une première approche d’une page web afin d’en valider les grands axes (zones de contenu, fonctionnalités, hiérarchie, …).
La validation des zonings constitue une étape déterminante, préalable à la définition des Wireframes. Les zonings permettent par exemple d’identifier une surcharge d’information sur la page d’accueil d’un site web.
Qu’est-ce qu’un Wireframe ?
Les wireframes exploitent les zoning réalisés lors de la phase précédente pour préciser chaque bloc en introduisant les contenus présents. Un wireframe est équivalent au squelette ou à la structure simple d’une page web ou de l’écran d’une application mobile. Il est beaucoup plus détaillé que le zoning.
Le wireframe est la suite logique du zoning. Chaque bloc réalisé lors de l’étape précédente se voit doté d’image(s), de texte(s) ou de vidéo(s). Ce contenu peut être fictif (ex. Lorem Ipsum) car les informations finales ne sont pas toujours connues à ce stade du projet. De plus l’étape de “wireframing” se concentre sur l’ergonomie, et utiliser de vrais textes lors de cette étape détournerait l’attention de cet objectif principal. Le wireframe n’est pas une maquette !
Un wireframe, aussi appelé “maquette fil de fer” en français, est donc une représentation filaire d’un site internet en noir et blanc, et dépourvus de couleurs, de choix de polices, de logos qui décrit la taille, l’organisation et l’emplacement précis des éléments de la page, les fonctionnalités du site, moteur de recherche, les boutons d’action (CTA) et les éléments de navigation de votre site Web sans aucune notion graphique. L’aspect visuel ne sera traité que lors de la phase suivante de maquettage.
Cette étape est d’autant plus importante lors de la définition d’une page produit sur un site e-commerce.
Lors d’un atelier de conception web, le Wireframe place l’ergonomie au premier plan (simplicité de navigation, lisibilité, …). Les wireframes permettent aux différents membres du groupe projet de se projeter et de valider définitivement les fonctionnalités attendues.
Les Wireframes sont aussi parfois utilisés dans le cadre de la rédaction de spécifications fonctionnelles pour mieux présenter chaque fonctionnalité.
Créer des wireframes permet de rendre le processus de conception itératif. Il permet de gagner du temps lors de la phase de maquettage et de design graphique. Il permet ensuite d’en gagner également lors de la phase de réalisation car les équipes de développement comprendront plus facilement le résultat final attendu. Construiriez-vous une maison sans les plans en commençant par la décoration ? Probablement, non. Et bien c’est la même chose pour une site web. C’est assez logique et l’expérience montre que cela fonctionne !
Qu’est-ce qu’un mockup ?
Un Mockup permet de transformer une wireframe en page web ou écran interactif. Il est alors possible d’ajouter des liens afin de présenter les principes de navigation du projet. Il est même possible de rendre un formulaire fonctionnel afin de faire des simulations, en intégrant les exigences techniques et donc, l’affichage de messages d’erreur ou de confirmation en fonction des informations saisies.
La frontière entre wireframe et mockup est mince. Un wireframe est donc un mockup lorsque l’interface est interactive. Le mockup n’est pas une étape systématique, ni toujours nécessaire.
Qu’est-ce qu’une maquette ?