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, …).

   

   

Lors des ces différentes phases, la définition préalable des objectifs du site et des personas nous aident à définir les interfaces et les parcours utilisateurs. 

Zoning, Wireframes, Mockup, quelles sont les différences ? À quoi servent-il ? Quels outils privilégier pour votre projet et à quel stade ? Tentons de répondre à ces quelques questions et commençons par quelques petites définitions. Petit point donc sur la terminologie ! 

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 ?

UN PROJET ? CONTACTEZ-NOUS !

Vous êtes étudiant ? Vous êtes passionné par l’UX, l’UI et le Design ? Pourquoi intégrer une école de design à Rennes ?

Pour ceux qui habitent Rennes et s’imaginent travailler dans les métiers du design, saviez-vous qu’il existe une école de design à Rennes pour réaliser leur rêve !

Le design a le vent en poupe mais la concurrence sur le marché de l’emploi est rude. Même avec beaucoup de talent, se lancer en autodidacte “sans bagage” dans ces métiers est plus que risqué ! Cela est vrai que vous souhaitiez devenir chef de projet digital, designer graphique ou architecte d’intérieur par exemple. 

Dans ces métiers, il est nécessaire de disposer d’un équipement informatique à la pointe de la technologie pour pouvoir travailler dans de bonnes conditions (station graphique de travail, logiciels professionnels coûteux comme la suite Adobe, référence du marché pour les designers graphiques et directeurs artistiques par exemple).

Intégrer une école spécialisée dans le design vous donnera accès à tous ces outils gratuitement et vous permettra surtout d’acquérir les bonnes pratiques, les bases techniques et le savoir-faire nécessaire, grâce à l’expérience et à la pédagogie des professeurs lors de la formation.

Cerise sur le gâteau, se former dans une école de design permet aux étudiants de se créer un réseau et surtout de pouvoir partager des expériences avec les autres étudiants. Il n’y a pas meilleur facteur d’émulation ! Vous disposerez ainsi des clés et des moyens pour développer vos compétences et vous épanouir dans votre projet professionnel. 

Et pour vos stages, pensez-y, notre agence web intervient aussi à Rennes !