[Dossier] Les grandes étapes de création d’un site internet – Zoning, wireframe et maquettage

[Dossier] Les grandes étapes de création d’un site internet – Zoning, wireframe et maquettage

Abordons maintenant la 2ème étape de notre dossier “Créer un site Internet de A à Z”.

Dans le précédent article, nous abordions l’étape de cadrage, essentielle dans la réalisation de tout projet.

Une fois les besoins précisément définis, il est temps de rentrer dans le vif du sujet, avec la phase de zoning, wireframing et maquettage.

Suivront ensuite les étapes de développement et intégration, recettage et mise en production.

Créer son site internet : commencer par la phase de zoning

Une fois les fonctionnalités de votre site définies et l’arborescence établie, la première étape est simple et consiste à dessiner l’ébauche de votre site sur une simple feuille de papier. Il est également possible de créer cette ébauche sur des logiciels en ligne tels que Balsamiq ou Mockflow ou sur des logiciels bureautiques Mac et PC aux fonctions poussées tels que Sketch, Illustrator ou Affinity Designer.

Le principe de la phase de zoning, comme son nom l’indique, est de diviser le site en plusieurs zones,  permettant au client de voir un premier niveau d’agencement de son site internet.

La phase de wireframing lors de la création de son site

[Dossier] Les grandes étapes de création d'un site internet - Zoning, wireframe et maquettage

Ensuite, une fois le zoning réalisé, on pourra travailler sur le wireframing, étape dont le but est de rajouter un niveau de détails supplémentaire au schéma précédent.

En reprenant son zoning, il faut alors décrire le contenu de chacune des zones définies. Si le contenu existe, il est également possible de l’ajouter directement dans le wireframe.

A cette étape du projet, il ne s’agit pas encore de définir les couleurs et tailles des différents éléments.

Il est également possible d’aller plus loin en réalisant un prototype consistant à lier les pages du wireframe en elles, laissant au client la possibilité de se projeter un peu plus dans la réalisation de son site internet et la navigation entre chacune des pages.

Brief créatif : une part du cahier des charges de votre projet de site internet

En général, cette partie est la responsabilité du graphiste. Lors de la rédaction du cahier des charges, vous devez prévoir une partie concernant la direction artistique de votre projet.

Les éléments suivants y sont décrits : Couleurs, polices, logo, photos et tout élément composant votre site internet.

Ces éléments permettront au graphiste de développer, grâce au travail réalisé lors du Wireframing, des maquettes complètes du site internet.

La phase de protypage dans la création de son site web

[Dossier] Les grandes étapes de création d'un site internet - Zoning, wireframe et maquettage

La phase de prototypage s’appuie sur le travail réalisé à l’étape du maquettage graphique. Elle permet d’ajouter un dimension interactive complète au client, en simulant le résultat quasi-final du futur site web.

Tests, images, charte graphique seront présents et cliquables, laissant le client se projeter complètement.

Une fois cette étape validée, les développements peuvent commencer.

Pour éviter toute mauvaise surprise, les différentes étapes seront validées régulièrement avec le client.