Le premier cabinet d’avocats français
certifié Great Place To Work
Jaberson, cabinet d’avocats et de conseil présent dans 6 villes, nous a confié sa migration de WordPress à Webflow. Nous l’avons conçu et développé sur Webflow pour guider chaque client parmi ses 27 expertises.
Jaberson réunit des avocats et des consultants, de Marseille à Lille. Le cabinet changeait de dimension, avec une offre de conseil, de nouveaux bureaux. Son site devait suivre.
Notre rôle
Zoning
Wireframes
Design d’interface
Cadre éditorial
Développement Webflow
CMS
Outils
Figma
Webflow
HubSpot
Enjeux
Les enjeux, nos réponses
01
L’enjeu2 métiers, le droit et le conseil, à présenter sans les confondre.
Notre réponseUne marque, un site, et 2 familles d’expertises clairement séparées dans la navigation.
02
L’enjeu27 expertises, que le visiteur ne sait pas toujours nommer.
Notre réponseUne entrée par profil de client, du dirigeant de PME au DRH, qui mène aux bonnes expertises.
03
L’enjeuUne équipe nombreuse, répartie entre 6 bureaux, et qui bouge souvent.
Notre réponseDes fiches gérées dans le CMS, où chaque membre est relié à ses expertises.
Ce que nous avons fait
01Cadrage et zoning
02Identité de marque
03Design et gabarits
04Rédaction
05Version mobile
06Développement Webflow
01Stratégie et UX
Cadrage et zoning
Le projet part d’une conviction du cabinet. Un dirigeant arrive rarement avec le nom d’une spécialité en tête. Il arrive avec un problème, une levée de fonds, une cession, un conflit.
Le zoning, validé avec l’agence SEO du cabinet, range donc les expertises par besoins et par profils de clients. La première version se concentre sur l’essentiel, avec l’idée assumée d’améliorer ensuite (viser la perfection du premier coup aurait coûté des mois).
Le menu s’ouvre sur « Nos clients », avant les expertises. PME, ETI, start-up, directeur juridique, DRH, DAF, 9 profils en tout, et chacun retrouve les sujets qui le concernent. Viennent ensuite les 2 familles d’expertises, avocats et conseil, puis les bureaux, les valeurs et l’équipe.
Un seul appel à l’action traverse tout le site. Prendre rendez-vous.
Accueil46 pages
Nos clients9
Profil de client× 9
Expertises avocats22
Toutes les expertises
Expertise× 21
Expertises conseils1
Six expertises, une page
Nos bureaux7
Bureau× 7
Le cabinet4
Valeurs
Équipes
Recrutement
Contact
Entrée du menu
Page
Gabarit, page template CMS
Le plan du site : les profils de clients d’abord, puis les 2 familles d’expertises, les bureaux et le cabinet.
Entrée 1
Par profil
Neuf profils de clients
Du dirigeant de PME au DRH
Les expertises utiles à chacun
Entrée 2
Par expertise
21 expertises d’avocats
6 expertises de conseil
Les membres de l’équipe concernés
Les 2 façons d’entrer dans le site.
Le zoning de la page d’accueil.
02Branding et direction artistique
Identité de marque
Le site part de la marque Jaberson, un nom en capitales à empattements, d’un seul tenant, et sa version empilée en 3 lignes, JA, BER, SON, en pied de page et sur la carte de visite. Le J, seul, sert d’icône au site. 2 couleurs portent l’ensemble, le bleu marine et un beige clair.
Jaberson
Le logo Jaberson en contour, sur sa grille : la hauteur des capitales, la ligne de base, et le J qui se glisse sous le A.
Le logo en contour et ses repères : la hauteur des capitales, la ligne de base, et le J qui se glisse sous le A.
Le logo sur les fonds du site.
Le J, seul, sur les fonds du site, plein ou en contour, et le logo empilé.
Marine#0F1736Principale
Marine 80#0F1736CC
Brun#261C17
Bleu clair#BDD7EE
Beige#EEEBE6Fond
Beige 80#EEEBE6CC
Blanc#FFFFFF
Les couleurs du site, relevées dans ses variables : le marine, le brun, un bleu clair, le beige et le blanc.
03Design d’interface
Design et gabarits
Le parti pris est sobre, des gris, du blanc, des blocs bien structurés. Les portraits de l’équipe existaient déjà, tous différents. Plutôt qu’un nouveau shooting, nous les avons détourés et posés sur un même fond. L’équipe a enfin l’air d’une équipe.
Les gabarits couvrent les expertises, les profils de clients, les bureaux et les fiches des membres.
Titres
AaBbCc
LT Afficher Neue Regular
LT Afficher Neue Medium
LT Afficher Neue Bold
Un cabinet d’avocats et consultants à l’écoute des décideurs.
LT Afficher Neue pour les titres, Neue Montreal pour le texte.
Typographie
Aa
LT Afficher Neue et Neue Montreal
Graisses
LT Afficher Neue Bold700
LT Afficher Neue Medium500
Neue Montreal Regular400
Neue Montreal Medium500
Échelle
Un cabinet d’avocats et consultants à l’écoute des décideursTitre / 48 px / LT Afficher Neue Bold
Expertises avocats et conseilSous-titre / 38 px / LT Afficher Neue Bold
Corporate, M&A, Stratégie RHLibellé / 20 px / Neue Montreal Regular
Prendre rendez-vousBouton / 16 px / Neue Montreal Medium
Marine#0F1736Titres, boutons, sections sombres
Beige#EEEBE6Fond des pages, bouton clair
Blanc#FFFFFFFonds alternés, en-tête
Brun#261C17Bloc d’appel avant le pied de page
Bleu clair#BDD7EEBouton des ressources
Marine 80#0F1736CCTexte courant
Boutons
Prendre rendez-vousConsulter toutes nos expertisesVoir nos expertises
Nous contacter
Profils et questions
Président, Gérant, DGDRHDAFDirecteur juridique
À quoi sert un avocat en droit des sociétés pour mon entreprise ou mon groupe ?
Pourquoi faire rédiger un pacte d’associés par mon avocat ?
Comment sécuriser les opérations intragroupe dans un groupe d’entreprises ?
Le design system du site, de la typographie aux composants.
04Design d’interface
Rédaction
Le cabinet a écrit ses contenus, nous avons fourni le cadre. Un gabarit éditorial fixe pour chaque page ce qu’il faut dire et en combien de mots (60 pour une introduction, 30 à 50 pour une expertise). Les titres et les appels à l’action sont travaillés pour un lecteur pressé, celui qui décide.
Court. Clair. Direct.
Les trois règles du gabarit éditorial.
L’accueil, premier écran.
Nos clients : un profil, une entrée.
Le premier cabinet français certifié Great Place To Work, puis les compétences d’une expertise.
La page équipe, sur un MacBook.
Les questions fréquentes d’une page expertise.
La page du bureau de Marseille.
05Design d’interface
Version mobile
Les mêmes gabarits passent sur mobile. Le menu se range derrière un bouton, les profils et les expertises défilent en carrousel, et les boutons du premier écran restent à portée du pouce.
L’accueil, la page PME et la page équipe, sur mobile.
Le bureau de Marseille en main, la page Corporate à deux mains.
Les mêmes gabarits sur mobile : le conseil et la présentation du cabinet.
06Développement Webflow
Développement Webflow
Le site quitte WordPress pour Webflow, où il est développé par Le Studio. Tout ce qui change souvent vit dans le CMS, les expertises, les membres, les témoignages, les bureaux. Chaque membre est relié à ses expertises, si bien qu’une arrivée au cabinet se règle en une fiche, sans toucher aux pages. Le formulaire de contact alimente directement HubSpot.
Le zoning a été validé avec l’agence SEO du cabinet avant le premier écran, et les optimisations techniques (balises, temps de chargement, accessibilité) ont été traitées à l’intégration. Le site a aussi changé d’adresse, pour jaberson.fr.
Le bureau de Marseille en main, la page Corporate à 2 mains.
Marseille, Paris, Lille : trois bureaux, un seul gabarit.
La page équipe et ses filtres : chaque fiche vient du CMS, avec ses expertises et son bureau.
Résultats
Mis en ligne, puis le cabinet nous a confié la suite
2727
expertises, reliées aux membres de l’équipe.
99
profils de clients, chacun avec son entrée.
Jaberson avait choisi d’avancer par versions. Le site a été mis en ligne en 2025, puis le cabinet nous a confié la suite, un blog, des pages membres et des landing pages. Entre-temps, chaque arrivée au cabinet se règle en une fiche, sans passer par nous.
Nos expertises : stratégie, UX, CRO, branding, UI, développement web, SEO.
StratégieUXCROBrandingUIDéveloppement webSEO
StratégieUXCROBrandingUIDéveloppement webSEO
Cookies
Avec votre accord, nous utilisons des cookies de mesure d’audience pour comprendre comment le site est consulté et l’améliorer. Refuser n’empêche pas la navigation. En savoir plus