Zoning, Wireframe, Prototype, Mock-up… c’est quoi ?

Si l’on pouvait découper la création d’un site web en deux phases, on distinguerait alors :

  • la conception (ou la réflexion)
  • la création (ou l’habillage)

Dans chacune d’elles, chaque étape correspond à l’avancement des maquettes du site qui s’enchaînent de la manière suivante : Zoning > Wireframe > Prototype > Moodboard > Style tiles > Mock-up.

Le zoning

Comme son nom le suggère, le zoning sert à définir et à identifier les différentes zones d’un site web. Il est utile pour la hiérarchisation des éléments (titres, textes, etc.) afin d’établir les premiers niveaux de lecture. Il renseigne aussi les acteurs du projet sur les proportions et l’importance donnée à chaque élément. Le zoning est une étape indispensable qui définit l’organisation générale des pages. Il sert également de support de discussion avec le client. On peut réaliser un zoning sous forme de schéma manuscrit, ou à l’aide d’outils numériques.

Le wireframe

Le wireframe vient se positionner en complément du zoning en le précisant. En effet, on détaille les titres et le contenu présent dans chaque bloc de la page. Aucun habillage n’est fait sur cette étape purement fonctionnelle, qui permet de proposer une expérience utilisateur adaptée aux objectifs. Comme pour le mock-up, le wireframe peut être réalisé à la main ou via un logiciel.

Le prototype

C’est la suite logique du zoning et du wireframe. Le prototype rend interactives et fonctionnelles les différentes pages. Il détermine également les technologies qui seront utilisées pour la mise en production du site internet et peut être unique ou évolutif. Pour le créer, on passe par des logiciels de prototypage.

Le Moodboard et la Style Tile

La moodboard, aussi appelée “planche d’inspiration”, peut être comparée à un tableau sur lequel on épingle toutes les idées en lien avec le style et l’esthétique du projet. Les webdesigners et les directeurs artistiques l’utilisent pour développer leurs concepts et communiquer avec les autres membres de l’équipe.

La style tile ou “planche tendance”, permet de se positionner sur un style graphique et vient en prémice de la charte graphique.

Attention, ces planches tendances ne remplacent pas les maquettes : elles assurent simplement la cohérence et la hiérarchie des éléments mis en scènes.

Le Mock-up

Le mock-up, ou maquette graphique, est la version la plus détaillée et la plus fidèle au produit livré. Elle permet de valider l’apparence graphique des différentes pages du site et de mettre d’accord les acteurs du projet avant de passer à sa production.

On appelle aussi “mock-up” les mises en situation du produit, qui permettent aux prestataires et aux commanditaires de voir le site dans une situation “type”.

Sources : Romy.Tetue, Ergognome, Clever Age, Le Train de 13h37

Partages 0

Laisser un commentaire

Votre adresse de messagerie ne sera pas publiée. Les champs obligatoires sont indiqués avec *