Benoît de Lapasse · avocat

Le défi

Benoît a plus de 15 ans d’expérience, mais son image n’avait pas suivi. Il faisait face à quatre problèmes :

• une image de marque datée qui ne reflétait plus la qualité de son travail ;

• une nouvelle activité de médiateur, difficile à intégrer de façon stratégique à son offre ;

• des demandes peu qualifiées, souvent de personnes cherchant des réponses rapides et gratuites plutôt qu’un vrai accompagnement, alors que ses clients idéaux sont des PME et des particuliers face à des dossiers complexes, du droit immobilier (notamment de la construction) au droit pénal, qui valorisent l’expertise et sont prêts à investir ;

• un site qu’il avait lui-même créé sur Jimdo, qui présentait son profil et listait ses compétences, sans réelle stratégie de contenu par domaine malgré sa riche expérience.

Cette fois, la réponse a été un site multipage complet plutôt qu’une simple landing page.

L’identité de marque

Paris est un marché saturé, qui concentre environ 40 % des avocats de France. Pour démarquer le cabinet, l’identité équilibre tradition et modernité. La palette associe le bleu pour la confiance au blanc cassé pour la clarté et la lisibilité.

La tradition se lit dans les détails : une légère texture papier sur les fonds clairs, des textures dessinées sur les fonds bleus et des images générées par IA dans le style de gravures et de croquis d’audience. Aboreto est utilisé pour les titres, pour sa clarté et son côté haut de gamme, et Source Serif 4 pour les textes longs, où la lisibilité prime.

Le logo est un emblème inspiré des armoiries, qui donne au cabinet une allure patrimoniale et haut de gamme. Il représente ses deux modes d’action : le contentieux, avec une croix de Saint-Jacques pour la justice, et la médiation, avec un rameau d’olivier. Au centre, une chouette en robe d’avocat incarne la vigilance et la discrétion. J’ai aussi dessiné des icônes sur mesure pour le cabinet, dans le même esprit.

Le processus de design

Une fois la marque posée, j’ai construit l’arborescence dans Relume, conçu les pages dans Figma, puis développé le site dans Webflow.

Asseoir la crédibilité

Chaque partie du site rassure une clientèle exigeante :

• des études de cas dynamiques, classées par domaine d’expertise ;

• une section « À propos » et une page dédiée qui mettent en valeur l’excellence de son parcours et les valeurs du cabinet ;

• des faits et chiffres clés ;

• une image de marque professionnelle et distinctive.

Clarifier chaque étape

Le site répond aux questions du visiteur dans l’ordre où elles se posent :

• les piliers de son expertise, présentés dans un cercle dynamique qui montre leur complémentarité ;

• une description des clients qu’il accompagne, pour mieux qualifier les demandes ;

• le parcours client, en étapes claires ;

• des honoraires transparents, classés par catégorie (taux horaire, consultations), avec le détail de sa façon de travailler ;

• une FAQ stratégique qui répond aux questions et objections les plus fréquentes ;

• et enfin, un formulaire de contact qualifiant.

Une arborescence pensée pour le SEO

Le site est organisé en clusters thématiques. Cinq pages piliers, une par domaine d’expertise (droit immobilier, contrats civils et commerciaux, droit des assurances, responsabilité civile et droit pénal), ciblent chacune des mots-clés orientés conversion du type « avocat + expertise + ville », comme « avocat droit de l’immobilier Paris ». J’ai mené la recherche de mots-clés pour chaque page et rédigé les textes avec l’aide d’Ubersuggest, ChatSEO et Claude.

Chaque page pilier liste ses domaines d’intervention, gérés dans le CMS, des malfaçons et de la copropriété au recouvrement de créances ou à la garde à vue. De nouveaux domaines peuvent être ajoutés ou retirés au fil du temps, chacun ciblant des recherches de longue traîne plus précises, à forte intention de conversion, et renforçant l’autorité de son pilier. Une page dédiée à la médiation s’adresse aux magistrats et aux confrères.

Comme tous les sites réalisés par L’Avocat Connecté, même les simples landing pages, le site comprend aussi des mentions légales et conditions d’utilisation, une politique de confidentialité et une page 404 sur mesure, pour ne perdre aucun visiteur tombé sur un lien cassé.

Le passage à Webflow

Ce projet a été mon premier site client dans Webflow. J’avais besoin d’un contrôle total sur le code : transitions entre pages, animations au scroll et structure SEO précise. Webflow gère la mise en page, le CMS et l’hébergement, tandis que tout le JavaScript et le CSS sur mesure vivent dans des fichiers externes hébergés sur Slater, versionnés et chargés sur chaque page.

• Transitions de page avec Barba.js : la navigation forme une expérience continue. Sur la base d’un boilerplate Barba.js structuré, chaque changement de page joue une transition construite autour de la chouette du cabinet, avec préchargement pour que la page suivante soit prête avant le clic. Lenis fluidifie le scroll et synchronise les animations.

• Animations GSAP : GSAP pilote les animations, avec des apparitions ScrollTrigger, des tracés DrawSVG, des morphings MorphSVG et des courbes d’accélération sur mesure, gardés discrets pour coller à un cabinet sobre et premium.

• MCP Webflow avec Claude : j’ai connecté Claude au projet via le serveur MCP de Webflow. Il m’a aidé à analyser des bugs, à bien intégrer le code sur mesure (notamment Barba.js) et à prendre en charge les tâches à faible valeur, comme renommer calques et classes selon la convention Client-First ou mettre en place les données structurées SEO.

Suivi continu

Au-delà de la création, je continue de gérer le site au quotidien pour le cabinet, avec un bilan trimestriel. J’ai connecté une bannière cookies open source à Webflow Analyze, pour respecter le consentement des visiteurs tout en permettant un suivi fin et durable. Je traite aussi les demandes de modifications, corrections et ajustements au fil de l’eau.

Le résultat

Le cabinet dispose désormais d’une image premium à la hauteur de sa sobriété et de sa rigueur, d’une place claire pour la médiation aux côtés du contentieux, d’une structure capable de se positionner sur des recherches larges comme précises, et d’un formulaire détaillé qui filtre les demandes non qualifiées et attire les clients recherchés.