Le plan secret pour que le site ne se perde plus
On démonte pour mieux reconstruire
Avant de passer au design, j’ai d’abord sorti ma loupe (imaginaire… mais quand même) pour analyser la structure actuelle du site. En clair : quelles pages existent, comment elles se parlent, et surtout… est-ce que tout ça donne envie de cliquer ?
Spoiler : pas vraiment. L’ancienne version était très linéaire : on suit un chemin et c’est tout. Pas beaucoup d’occasions de se balader librement ou de tomber sur un contenu intéressant par surprise.
J’ai donc repensé la structure pour créer une navigation plus fluide, plus intuitive et surtout plus agréable pour l’utilisateur.
Chaque page a désormais un rôle précis :
- Accueil : accueillir et donner le ton et la première bonne impression.
- Réalisations et Blog : explorer et éveiller la curiosité avec les contenus phares.
- Services et Agence : comprendre et expliquer clairement l’offre et le savoir-faire.
- Projets et Réalisations : rassurer et montrer des preuves concrètes qu’on sait ce qu’on fait.
- Contact et appels à l’action sur tout le site (même sur la 404 !) : convertir et encourager le passage à l’action (contact, devis…).
Le tout, relié par des liens internes bien placés pour éviter les « culs-de-sac » numériques et guider en douceur vers les infos clés.
Mettre chaque pièce au bon endroit
Une fois la nouvelle structure globale calée, j’ai détaillé chaque page en sections. Imagine une check-list : intro, contenu principal, éléments visuels, appels à l’action… Tout est pensé pour que la lecture soit fluide et que l’utilisateur trouve rapidement ce qu’il cherche (même s’il ne sait pas exactement quoi au départ).
Et pour être sûre de viser juste… j’ai marché dans les chaussures des visiteurs. J’ai donc repris les trois profils-types vus dans l’article 2 :
- Julie, la pragmatique : elle veut aller droit au but. Comprendre rapidement l’offre, voir des preuves concrètes, puis passer à l’action. Si c’est trop long ou confus, elle décroche.
- Lila, l’esthète : elle cherche avant tout le style et l’émotion. Elle veut être inspirée, ressentir une connexion humaine et découvrir un univers visuel fort.
- Maxime, le flâneur : il n’a pas d’objectif précis. Il se laisse guider par la navigation et l’ambiance. Si quelque chose attire vraiment son attention, il reviendra.
En suivant leur parcours, j’ai pu repérer les moments où ils pourraient décrocher… et prévoir les bons contenus ou interactions pour les garder dans la boucle.
Ainsi j’obtiens une structure qui fonctionne pour tout le monde, que tu sois pressé, rêveur… ou juste en train de traîner.
Mettre le site en slip avant de l’habiller
Une fois l’arborescence validée, on ne passe pas direct au design. Non, non. Avant de sortir les jolies couleurs et les images qui valorisent, il faut d’abord faire passer le site par l’étape « en slip » : les wireframes.
C’est le moment où on dessine la structure, sans superflues. Pas de photo, pas de déco, juste des rectangles gris et du faux-texte (qu’on appelle « texte de substitution », le plus utiliser est le lorem ipsum) pour dire « ici, il y aura un titre », « là, un bouton », « plus bas, une image ». Un peu comme un plan d’architecte avant de construire une maison : si les fondations ne sont pas bonnes, peu importe la peinture, ça ne tiendra pas.
Les wireframes servent à :
- Structurer l’info et lui donner un ordre logique.
- Hiérarchiser les éléments pour que la lecture soit fluide.
- Optimiser le parcours utilisateur pour qu’il arrive à l’info qu’il veut… même s’il ne sait pas trop ce qu’il cherche.
- Éviter les erreurs avant de passer au design final (parce qu’un bloc mal placé en noir et blanc, ça se corrige vite… en couleur, beaucoup moins).
Comme je travaille en solo sur ce projet, je n’ai pas eu à aligner toute une équipe, mais les wireframes jouent aussi ce rôle quand on bosse à plusieurs : tout le monde se cale sur la même vision.
L’idée, c’est que chaque clic amène naturellement vers la prochaine étape, qu’il s’agisse de découvrir un service, de s’inspirer avec un projet ou de remplir le formulaire de contact. À la fin, on se retrouve avec une base solide qui donne déjà la direction… même avant d’avoir ajouté la moindre couleur.
Le moment où le site prend des couleurs
Une fois les wireframes validés, il était temps de sortir les pinceaux (numériques) et d’enfiler la tenue de gala du site : les maquettes.
La première étape, c’est simple : on prend la structure en noir et blanc et on y ajoute les couleurs de la charte graphique, les typographies définies et juste une image test pour visualiser l’ambiance.
J’ai donc gardé le fil rouge :
- Fond sombre qui donne de la profondeur et ce petit côté cinématographique propre à O3il.
- Les éléments bleus pour guider l’œil, mettre en valeur les points importants, rythmer et structurer la navigation.
- Hiérarchie claire des sections pour savoir où on est et où aller.
- Appels à l’action visibles (mais pas agressifs) pour encourager le clic au bon moment.
C’est le moment où le site commence à ressembler à quelque chose, mais où on garde encore assez de recul pour changer ce qui ne fonctionne pas.
Ensuite, je suis allée chez Clémence pour passer à l’étape « personnalisation ultime » : choisir les vraies images pour chaque page. On a décidé que chaque visuel serait pris dans l’environnement de l’agence, pour coller au maximum à son identité et à son univers. Pas de banque d’images génériques ici : chaque photo raconte quelque chose d’authentique, en lien direct avec O3il Production.
Chaque maquette a été pensée pour fonctionner sur tous les supports, que ce soit sur un écran d’ordinateur large, une tablette ou un smartphone. Ainsi, le site offre une expérience fluide, harmonieuse et engageante, qui donne envie d’explorer sans jamais se sentir perdu.
