Guide : les process de création d’un site internet Webflow

Il y a plusieurs manières de créer un site web de nos jours. Chaque agence a son process. Toutefois, elle s’accorde toutes sur le fait qu’il est important de ne pas se lancer à corps perdu dans le développement de son site internet en réfléchissant aux sections au fur et à mesure.

Définir les étapes à l'avance

Il est important lorsque l’on crée un site web de réfléchir à chacune des étapes de création du site. Se poser d’abord la question de pourquoi on fait ce site ? Quels sont les objectifs ? Cela permettra à l’agence de dessiner le wireframe : un premier aperçu de la maquette (souvent sans design). Une fois cette étape validée, il ne reste plus qu’à ajouter la charte graphique de l’entreprise et à « embellir » le tout.

Notre case study : le SPA l'Odyssée

Il y a quelques mois, nous avons lancé une nouvelle marque : Le Spa l’Odyssée. Aujourd’hui, leur tout nouveau site web est en ligne, prêt à accueillir plein d’utilisateurs. Nous allons vous décrire les différentes étapes de création de leur site.

Un premier brief s’impose

Cela va de soi, mais il est important de le rappeler : il faut toujours (je dis bien toujours) se mettre d’accord avec l’entreprise de ses objectifs, de la raison pour laquelle elle crée ce site. De cette manière, l’agence pourra mieux définir le but qu’elle doit atteindre (la création du site n’étant jamais l’objectif). Ainsi, nous pouvons poser certaines questions aux clients comme ses utilisateurs type, le style qu’il souhaite adopter, s’il a déjà des inspirations de site qu’il aime bien (qu’est ce qu’il aime bien et qu’est-ce qu’il n’aime pas dans chacun de ses sites etc…).

Commencer par réfléchir aux contenus et à l’arborescence

Ces premiers échanges nous permettront de créer la première version de wireframe du site web. Un wireframe est un aperçu des différentes interfaces sans aucun design, avec seulement les contenus (textes et images). Cela nous permet de nous mettre d’accord sur la stratégie à suivre. Cela représente la structure du site internet (son squelette). Cela nous permet de voir combien de pages nous auront, ce qu’il y aura dans chacune des pages etc..

Une maquette en 2 étapes

Chez Elias, nous créons une maquette en deux temps : nous demandons d’abord à nos clients « que voulez-vous dire dans votre site web » avant de leur demander « à quoi souhaitez-vous que cela ressemble ». Beaucoup de personnes ont tendance à faire l’un avec l’autre, cela est une erreur car cela biaise tout simplement leur discours et le message qu’ils souhaitent communiquer à leurs utilisateurs.

Par exemple, nous pouvons voir sur d’autres une section équipe très sympa. Cependant, cela ne sert à rien de communiquer dessus si cela n’aide à ne pas atteindre les objectifs que nous nous sommes fixés au départ.

‍

Passer une couche de design, et obtenir l’aperçu final

Une fois que nous avons réalisé notre wireframe, nous pouvons passer à l’étape du design, pour cela, nous récupérons tous les éléments de la charte graphique afin d’habiller véritablement le site web. Cela peut se faire sur desktop et mobile dans certains cas. C’est à ce moment qu’il faudra faire preuve de créativité, c’est aussi une étape qu’on appelle « UI » (pour User Interface).

L'objectif d'une maquette

L’avantage avec cette étape est qu’elle nous permet de réellement nous projeter dans le projet. Jusque-là, nous avions discuté, nous avions élaboré un wireframe qui n’était construits que de cases et de textes. Avec la maquette, nous avons un aperçu final du site ! Nous savons exactement à quoi cela va rassembler une fois mis en ligne (cela évite les mauvaises surprises entre autres).

Il est bon de noter qu’il ne sera pas possible sur une maquette de bien se rendre compte du responsive, des animations du site web, de tout l’aspect « dynamique » (une maquette est purement statique).

‍

Intégrer le tout sur Webflow

Nous voici enfin arrivés à la fameuse étape du développement webflow. C’est à ce moment que la magie opère. Grâce au lien « .webflow.io » l’entreprise pourra d’ailleurs régulièrement suivre les avancées du site.

Bien plus qu'une simple intégration

Pendant cette étape, le développeur webflow pourra intégrer la maquette en reproduisant au pixel prêt le design réalisé précédemment. Il pourra ajouter et paramétrer le responsive du site, ajouter tous les réglages SEO pour s’assurer de la performance du site.

L'intervention de plusieurs experts

Veillez à faire appel à une équipe compétente sur cette étape, car le développement d’un site sur Webflow demande plus de paramètres qu’il n’y parait. Chez Elias, nous faisons souvent appel à des experts growth pour vérifier les performances du site et, bien souvent, connecter ce site à des outils tiers.

Tester jusqu’à la mise en ligne

C’est une des étapes les plus importantes du projet. On croit bien souvent que le projet est terminé lorsque le développeur nous envoie, « c’est bon, j’ai terminé ». Cela est entièrement faux.

En effet, la réussite du projet repose souvent sur cette dernière étape et les tests qui seront réalisés. Pour cela, il n’y a pas de règles : nous pouvons faire tester le site partout et à tout le monde : un enfant, un adulte, une personne âgée, Homme, femme, sur ordinateur, tablette ou mobile.

‍

Reprenez le brief initial avant la mise en ligne

Cette étape est très importante pour vous assurer que le site est fonctionnel, fluide, qu’il remplisse ses objectifs... Bref, qu’il correspond aux attentes de l’entreprise !

‍

‍

Bonus : aller plus loin avec un "Wahou effect"

n'oubliez pas qu'avoir un site pour avoir un site ne sert à rien, cherchez à convertir vos utlisateurs en suscitant des émotions. Le studio Elias vous montre comment obtenir un effet wahou à l'arrivée sur votre site Webflow.

‍