Projet web : les 8 étapes de création d’un site internet

Maquette de votre site web : comprendre l’étape du prototypage

La maquette d’un site web se fait par itération afin de passer de l’idée à un visuel prototype et définitif. Cette étape de la création du site se fait conjointement entre les webdesigners et vous. Cependant, vous pouvez grandement entamer la réflexion autour de la maquette dans le cahier des charges via plusieurs phases que nous allons expliquer ici. 

Le maquettage par zone : l’étape du zoning

Le zoning consiste à déterminer sur une page blanche les différentes zones qui vont composer les pages de votre site web. Vous pouvez commencer par le faire par la page d’accueil puis continuer avec des pages type :  produit,  service,  réalisation…

Cette page se compose donc de zones telles que :

  • Images
  • Texte
  • Bouton
  • Logo
  • Fil d’Ariane
  • Autre élément basique

Dans l’étape de zoning, la maquette sera composée de grands blocs vides avec un texte simple expliquant ce qui devra composer ce bloc. Ainsi vous aurez une vue d’ensemble des pages du site que vous pouvez facilement modifier jusqu’à trouver la structure idéale.

La maquette fonctionnelle : maquettage des wireframes du site web

La maquette fonctionnelle va plus loin que le zoning puisqu’elle inclut les titres, les sous-titres, les blocs situés dans chaque zone, etc.  sans inclure le contenu final de la page, les wireframes composant la maquette fonctionnelle seront très détaillés. Cette étape permet de se rendre compte de l’aspect esthétique final et de l’organisation des blocs réelle dans la page. 

Création de mokeups : qu’est-ce que c’est ?

Cette étape consiste à aller plus loin dans la réalisation préliminaire de la maquette en déterminant avec précision la taille de chaque bloc le visuel des boutons les typographies la taille des titres et sous-titres, etc. Cette maquette peut comprendre des animations pour voir le fonctionnement d’un bouton, l’utilisation d’un configurateur, la navigation entre plusieurs pages…

La maquette graphique :  le prototype du site (presque) prêt à être codé

Enfin, on construit la maquette graphique.  Elle représentera fidèlement ce que deviendra le futur site point elle sert de lignes directrices pour les développeurs et intégrateurs qui mettront en place le site web techniquement ensuite. On peut l’utiliser dans le cadre de tests utilisateur. Certains outils tels que Adobe XD permettent de naviguer à travers plusieurs pages au sein de la maquette et d’afficher des listes déroulantes et des fonctionnalités qui seront prévues sur le site web final. 

Selon la complexité de votre projet, ces étapes seront plus ou moins accélérées. Elles sont à réaliser par les graphistes de l’agence avec laquelle vous travailleriez. Si cela vous semble nécessaire, vous pouvez préparer la phase de zoning dans le cahier des charges. 

Et après ? Échanges et améliorations de la maquette

Il est normal que la maquette ne vous convienne pas du premier coup. Ainsi, la suite du projet web va passer par une phase d’échange avec l’agence pour améliorer au fur et à mesure la maquette pour arriver au résultat idéal. Pensez donc à impliquer toutes les personnes liées au projet en interne pour faire un retour global à l’agence. 

Les étapes de la création d’un site web :