Wireframe, Zoning et prototype : La deuxième étape d'un projet web

La deuxième étape du projet web en quelques mots

Il est souvent difficile de se retrouver dans le vocabulaire de la conception web, car plus souvent d'origine anglophone. Il convient toutefois de noter que pour doter notre projet d'une bonne ergonomie, certains termes tels wireframe, zoning, et prototype doivent être maîtrisés. La question que vous vous posez sûrement est celle de savoir la signification tous ces termes et comment ils peuvent vous aider dans la réalisation de votre projet ?

Wireframe, zoning et prototype, des termes importants pour la réussite d'un projet

Que vous confiez la réalisation de votre projet à une agence web ou que vous décidiez de le réaliser vous-même, la phase de conception des interfaces est une étape cruciale qui intervient au début de chaque projet et évolue avec celui-ci. Chaque étape apporte donc son lot d'amélioration (organisation des contenus, etc.) qu'il convient de situer dans son contexte. Il convient par conséquent de bien comprendre chacun de ces termes, afin de savoir où va quoi !

Le zoning, c'est quoi ?

C'est un terme qui permet de schématiser de façon "grossière" une page web à travers l'emploi de blocs. Son but est donc de présenter la position des différentes zones de contenus, ainsi que celles des grandes fonctionnalités.
Cette étape permet donc de définir l'organisation générale des pages d'un projet web. Elle intervient après la conception d'une arborescence, ou peut se réaliser de manière simultanée. Outre le fait de permettre la présentation d'une première approche du projet pour validation ou réajustement, cette étape permet également de s'assurer que les souhaits du client sont adaptés ou non au projet, avant de passer à l'étape suivante.

La seconde étape, le wireframe

Ou en français "maquette fil de fer", cette étape exploite ce qui a été réalisé à l'étape précédente, dans l'optique de préciser chaque bloc en insérant les contenus présents (textes, images, vidéos, etc.). Son objectif est donc de définir avec précision et sans notion graphique l'organisation, les formes (d'une manière générale), les contenus présents et la structure des éléments. Ici, les interfaces seront donc conçues en tenant compte des souhaits et standards ergonomiques.<br /> Il est généralement employé dans la rédaction d'un cahier des charges fonctionnel, afin de mieux présenter chaque fonctionnalité tout en l'associant à ses spécifications fonctionnelles.

Le prototype, l'étape de la transformation

Il s'agit à cette étape de transformer chacune des pages réalisées à l'étape précédente en pages interactives. Il sera donc possible à vous ou à l'agence web d'insérer des liens pour présenter les principes de navigation du projet web. Cette étape permet également de rendre un formulaire fonctionnel, pour réaliser des simulations, en associant les contraintes techniques, ainsi que l'affichage de messages de confirmation ou d'erreur en fonction des informations fournies.
Cette étape est généralement suivie d'un mockup ou maquette graphique dont le but présenter le plus fidèlement le résultat final du site.

Découvrez les autres étapes d'un projet web

Comment bien rédiger le cahier des charges ? : La première étape d'un projet web

La maquette du site web : La troisième étape d'un projet web

L'intégration et le développement: La quatrième étape d'un projet web

La recette informatique : La cinquième étape d'un projet web

La mise en ligne et le suivi: La sixième étape d'un projet web