01 — Index

02 — Index

Web · UX/UI · Graphisme

02 — Projet

01 — Projet

Détails

L'Avocat Connecté

Positionnement, marque et landing page de mon propre studio web pour avocats.

Client

Projet personnel (mon studio)

Rôle

Fondateur, designer de marque & web, développeur Framer

Année

2025

Compétences

Responsive design

Accessibilité

Design centré utilisateur

Framer

SEO

Direction artistique

Identité visuelle

Illustrator

Positionnement de marque

Rédaction web

L’Avocat Connecté est le studio que j'ai fondé pour aider les avocats indépendants et les petits cabinets à se démarquer en ligne grâce à une présence web crédible et distinctive, tout en respectant leur déontologie. En tant que propre client, j'ai défini le positionnement et l'offre, conçu l'identité de marque (noir, blanc cassé, une touche unique de jaune, Instrument Serif et Instrument Sans) et créé le site web sous Framer. C'est la porte d'entrée qui a permis de générer les projets de cabinets d'avocats présentés dans ce portfolio.

Page d’accueil du site L’Avocat Connecté sur ordinateur et mobile, avec l’accroche « Faites rayonner votre cabinet grâce à une présence web stratégique et distinctive »

Un positionnement fondé sur le droit

Avant de devenir designer, j’ai été formé puis j’ai exercé comme juriste d’entreprise en droit des affaires, propriété intellectuelle et nouvelles technologies. L’Avocat Connecté transforme ce parcours en promesse : une présence web conçue par quelqu’un qui comprend les contraintes des avocats, de la discrétion aux règles de leur Ordre, et qui parle leur langue.

Vue ordinateur de la section À propos : une solution conçue par un juriste pour les avocats

L’offre répond à quatre difficultés récurrentes : une image générique qui se fond dans la masse, le manque de temps et d’accompagnement, une faible visibilité sur Google et LinkedIn, et des sites verrouillés par les agences. En retour, chaque cabinet obtient un site dont il est pleinement propriétaire et qu’il peut gérer seul s’il le souhaite, une image forte et cohérente, une architecture souple pensée pour publier du contenu et renforcer son SEO (pour les sites multipages), et un accompagnement humain jusqu’à son autonomie complète.

Vue ordinateur de la section « Considérant ce qui suit… » qui liste les difficultés des cabinetsVue ordinateur de la section « Par ces motifs… » et ses quatre engagements numérotés

L’identité visuelle

L’identité visuelle mêle deux univers. D’un côté, les codes d’une marque corporate classique et premium : Instrument Serif pour les titres et une palette sobre de noir et de blanc cassé, qui inspirent le sérieux et la confiance qu’attendent les avocats. De l’autre, une touche résolument moderne : une linéale nette pour le texte courant et un jaune vif qui apporte de l’énergie et guide le regard vers les actions clés. J’ai aussi dessiné des icônes sur mesure aux angles nets et coupés, qui rappellent la précision de l’écriture juridique et donnent à la marque une signature propre.

Charte graphique de L’Avocat Connecté : monogramme AC, palette noir, blanc cassé, beige et jaune, typographies Instrument Serif et Instrument Sans, icônes sur mesure

Le site

Le site est une landing page unique réalisée dans Framer, rédigée comme des conclusions d’avocat : « Considérant ce qui suit… », « Par ces motifs… ». Elle présente les problèmes, quatre engagements, un processus simplifié en trois étapes (diagnostic, design et développement sur mesure, livraison et formation), mon parcours, des avis clients et une prise de rendez-vous en ligne simple.

Vue ordinateur de la frise « Comment ça marche »Vue ordinateur de la section contact avec réservation en ligne et formulaire

Un modèle de landing page gratuit pour avocats, téléchargeable depuis le site, sert d’aimant à prospects.

Vue ordinateur de l’offre de modèle de landing page gratuit pour avocatsTrois écrans mobiles : le processus, les avis clients et le modèle de site gratuit

En coulisses : de la landing page au site complet

Le site est en cours de refonte en coulisses. L’objectif : passer d’une landing page unique à un site plus complet, avec pages de services, études de cas et articles, structuré pour se positionner sur Google (SEO) et être cité par les moteurs de réponse IA comme ChatGPT ou Perplexity (GEO).

Page d'accueil du site L’Avocat Connecté sur ordinateur et mobile, avec la bannière d'accroche « Faites rayonner votre cabinet grâce à une présence web stratégique et distinctive »
Vue sur ordinateur de la section À propos : une solution conçue par un avocat pour les avocats
Affichage mobile de la section « Par ces motifs… » présentant les engagements du studio

L'Avocat Connecté

Positionnement, marque et landing page de mon propre studio web pour avocats.

Stratégie de marque

Framer

SEO

Génération d’images

Identité visuelle

Site web du cabinet d'avocats Aline Macron présenté sur ordinateur et mobile
Section du site web d'Aline Macron présentant les clients du cabinet
Page d'accueil mobile du site web d'Aline Macron

Aline Macron · avocate

Identité de marque et site pour un cabinet d’affaires qui conseille fondateurs et PME.

Stratégie de marque

Framer

Génération d’images

Identité visuelle

Site internet du cabinet d'avocats en droit public de Julie Ramsamy affiché sur ordinateur et mobile
Section du site web de Julie Ramsamy présentant les clients publics et privés
Section « À propos » du site web de Julie Ramsamy sur mobile, avec son portrait

Julie Ramsamy · avocate

Identité de marque et site pour un cabinet de droit public à La Réunion.

Stratégie de marque

Framer

SEO

Génération d’images

Identité visuelle

Site Webflow du cabinet d'avocats Benoît de Lapasse affiché sur ordinateur et mobile
Section de la page d'accueil présentant les cinq domaines d'expertise
Espace client du site web de Benoît de Lapasse sur mobile, avec illustrations gravées

Benoît de Lapasse · avocat

Refonte premium et site Webflow pour un cabinet parisien de contentieux et de médiation.

Stratégie de marque

Webflow

Animation JS

SEO

Génération d’images

Identité visuelle

Claude Code

Site web du cabinet d'avocats d'affaires STC Avocat affiché sur ordinateur et mobile
Section domaines d'expertise : une approche transversale du droit des affaires
Section fondatrice du site STC Avocat sur mobile, avec le portrait de Shérazade Trabelsi Chouli

STC · avocats

Identité de marque et site pour un cabinet d’affaires en Île-de-France.

Stratégie de marque

Framer

SEO

Génération d’images

Identité visuelle

Claude Code

Page d'accueil du site Trésors Grimaud sur ordinateur et mobile, avec la bannière principale « Donnez une seconde vie à vos objets » et des objets anciens
Affichage sur ordinateur de la galerie « Quelques trouvailles », présentant les dernières antiquités dénichées
Vue mobile de la bannière principale de la page Débarras Tours sur le site Trésors Grimaud

Trésors Grimaud

Naming, identité de marque et site pour une entreprise de débarras et brocante à Tours.

Stratégie de marque

Framer

SEO

Génération d’images

Identité visuelle

Page d'accueil du site Le Bonheur en Tablier sur ordinateur et mobile, avec une bannière invitant les visiteurs à coudre leur propre tablier vintage
Vue sur ordinateur de la section « Pourquoi vous allez l'adorer » avec un carrousel de photos de tabliers
Vue mobile de la section « Comment ça marche ? » avec des illustrations de couture à l'aquarelle

Le Bonheur en Tablier

Identité et page de vente pour le patron de tablier d’une créatrice Instagram.

Stratégie de marque

Framer

Génération d’images

Identité visuelle

Résultats de recherche Lightyshare repensés : trois objets en pastilles, regroupés par propriétaire, et un panneau de filtres
Parcours utilisateur d’un vidéaste qui loue du matériel à trois propriétaires différents
Page d’accueil Lightyshare en 2024, avec un champ de recherche limité à un objet à la fois

Lightyshare

Refonte de la recherche pour la première plateforme de location de matériel audiovisuel entre particuliers en France, permettant aux vidéastes de louer une liste complète d'équipements auprès du plus petit nombre de propriétaires possible.

UI design

Design systems

Figma

Recherche UX

Prototypage

Écrans de l’app Museum Companion : accueil personnalisé, audioguide d’une œuvre et chat avec le compagnon IA
Recherche documentaire : ce que les jeunes craignent et ne trouvent pas au musée, et ce qui concurrence leur temps
Page d’exposition Berthe Morisot dans l’app Museum Companion

Museum Companion

Une application mobile qui transforme les visites de musées en une expérience immersive et interactive, avec un compagnon IA qui raconte l'histoire cachée derrière chaque œuvre d'art.

UI design

Figma

Recherche UX

Prototypage

Écrans de l’app Napp : rituel du coucher, histoire du Dragon endormi et questions du matin
Parcours utilisateur de Laura, du retour à la maison à 17 h 30 jusqu’au matin fatigué après une nuit hachée
Sélecteur d’histoires Napp avec des histoires illustrées et leur durée

Napp

Une application de bien-être pour aider les parents de jeunes enfants à instaurer et maintenir des rituels du coucher — pensée pour les parents fatigués qui n'ont pas le temps de tout noter chaque soir.

UI design

Figma

Recherche UX

Prototypage

Génération d’images

Boutique en ligne Martinez : fiche produit et page d’accueil avec l’accroche Unique, Fiable, Artisanal
Joel Martinez, l’ébéniste espagnol à l’origine du projet, avec son logo et une table de chevet
Page boutique du site de meubles Martinez avec des meubles en kit

Carpenter Shop

Une boutique en ligne de meubles en kit abordables conçus par un menuisier espagnol, créée avec un seul objectif : instaurer la confiance lors de l'achat en ligne de pièces artisanales.

UI design

Figma

Recherche UX

Prototypage

App Android Twitch repensée : accueil, page Parcourir et vue du stream en paysage
Vue paysage repensée d’un stream dans l’app Android Twitch
L’écran d’accueil actuel de l’app Android Twitch, avant la refonte

Refonte Twitch

Un défi d'UI le temps d'un week-end pour réimaginer l'application Android de Twitch, afin de rendre la navigation plus vivante et plus claire, et le mode paysage encore plus immersif.

UI design

Figma

Armoiries ecclésiastiques bleu et or, chapeau noir et glands, entourées d’études au crayon, d’essais de couleur, d’un blason familial et d’une version au trait.

Armoiries LM Turpault

Deux armoiries pour un prêtre : un blason familial et une version ecclésiastique. À partir d’un armorial du XVIIᵉ siècle, j’ai étudié au crayon heaumes, phylactères et nœuds de glands, comparé les couleurs, puis redessiné les armes en vectoriel pour une impression en 20 et 40 cm.

Identité visuelle

Photoshop

Illustrator

Recto et verso d’un dépliant trois volets sur le Suaire de Turin : titres verts et jaunes, citations de l’Évangile, blocs de preuves et visage du Suaire en couverture.

Dépliant Saint-Jean-de-Matha

Un dépliant trois volets sur ce que montre le Suaire de Turin. L’enjeu : rendre un contenu dense et sensible facile à parcourir, avec deux colonnes claires, des blocs de preuves courts et des citations de l’Évangile reliées aux marques du linge par de petits pictogrammes.

InDesign

Direction artistique

Logo badge Salsa Chinita avec le portrait illustré d’une femme et des piments sur fond rouge, à côté d’une maquette de bouteille de sauce parmi des poivrons rouges.

Salsa Chinita

Un logo pour une sauce pimentée, construit autour du portrait illustré de sa créatrice. Le badge, les touches de piment et le lettrage rétro évoquent une recette de famille, lisible de l’étiquette de bouteille jusqu’à l’avatar sur les réseaux.

Logo

Identité visuelle

Illustrator

Quatre cartes illustrées alignées : une biche, un cerf, une croix de pierre moussue avec un rouge-gorge et un faon qui broute.

Illustrations de mariage

Des illustrations pour un mariage : un cerf, une biche, un faon et un calvaire moussu avec un rouge-gorge. Chacune est sur fond transparent pour être placée librement sur les faire-part, menus et marque-places.

Peinture numérique

Procreate

Deux portraits peints d’hommes barbus découpés en stickers, l’un au contour rouge, l’autre au contour jaune.

Portraits numériques

Portraits peints d’un ami et de moi-même, finis en stickers découpés au contour épais. Une étude de ressemblance et de lumière simplifiée, pensée pour se lire d’un coup d’œil à l’écran comme à l’impression.

Peinture numérique

Photoshop

Grille de portraits noir et blanc à l’encre numérique en hachures, du visage réaliste à la caricature légère.

Portraits au trait

Une série de portraits à l’encre numérique, uniquement en hachures. Chaque visage est un exercice : saisir un caractère avec le moins de traits possible, du portrait réaliste à la caricature légère.

Peinture numérique

Photoshop

Create a free website with Framer, the website builder loved by startups, designers and agencies.