Quatre prénoms, une méthode en quatre étapes et des chiffres vérifiables. On sait à qui on parle avant d’appeler.
PROJET 07 · SITE WEB
PROJET WEB CMS & WEBFLOWSOLSTICE · 2026
PAYSAGISTE FICTIF · OCCITANIE
UN JARDIN QUI CHANGE AVEC LA SAISON.
Le site d’un atelier de paysage imaginaire en Occitanie. Une page qui suit l’année du jardinier, une carte des communes couvertes, des réalisations en avant/après tirées du CMS. Design, textes et développement Webflow.
UX / UICMSWEBFLOW
02. LE CONTEXTE
VENDRE UN JARDIN QUI N’EXISTE PAS ENCORE.
Solstice est un projet personnel : un atelier de quatre personnes qui dessine, construit et suit des jardins autour de Toulouse. Un seul chantier à la fois, pas de sous-traitance.
Les sites de paysagistes montrent presque tous la même pelouse verte sous un ciel bleu. Ici, le client doit comprendre trois choses vite : comment on travaille, jusqu’où on se déplace, et à quoi ressemble un jardin qui boit peu.
Une carte de 120 km autour de l’atelier, avec trois zones. Le client voit tout de suite si sa commune est couverte.
Chaque jardin livré se lit en avant/après, avec la commune, la surface et les choix techniques.
01CADRAGE
02STRUCTURE
03CMS
04WEBFLOW
03. STRUCTURE & WIREFRAMES
UNE LANDING DEVENUE UN VRAI SITE.
SAISONTERRAINPREUVECONTACT
Solstice est parti d’une seule page. Au fil du projet, les réalisations sont passées dans le CMS, avec leur page liste et une fiche par jardin, et la navigation s’est rebranchée sur ces vraies pages.
La home suit le chemin d’un client : le manifeste, les sept métiers, la méthode, les jardins livrés, la zone couverte, l’équipe, l’eau, puis la demande de devis. Le responsive est calé de 390 à 1440 px, sans aucun débordement.
04. UI DESIGN
UN VERT PROFOND ET UNE LUMIÈRE D’OCRE.
Un vert presque noir pour l’ombre des haies, un crème de papier kraft, une sauge pour les feuillages secs et un ocre qui rappelle la terre du Lauragais. Une typographie à empattements doux pour les titres, une grotesque solide pour le reste.
LE WIREFRAME
Des blocs simples pour valider l’ordre de lecture, la place des photos et celle de la carte avant de passer au design.
LA TYPOGRAPHIE
SOLSTICE
GRIEZLY TITRES HEUVEL GROTESK TEXTE & INTERFACE
HEUVEL GROTESK · TEXTE COURANT
LA PALETTE
Vert profond, crème, sauge et ocre. Quatre couleurs tirées d’un jardin sec du Sud-Ouest, et pas une de plus.
05. ANIMATIONS & RESPONSIVE
LE SITE CHANGE DE SAISON.
01
Un sélecteur de saisons réécrit le conseil du moment et teinte la navigation : en automne, la page rappelle qu’un devis demandé aujourd’hui sera planté cet automne.
02
La méthode avance en profondeur au scroll, les chiffres se révèlent un par un, la carte trace ses trois zones et les icônes se dessinent trait par trait.
03
Le comparateur avant/après lit ses photos dans le CMS. Sur mobile, chaque section se recompose en colonne et toutes les animations ont une version calme pour qui la demande.
06. LES ÉCRANS FINAUX
LE MÊME JARDIN, DU BUREAU AU TÉLÉPHONE.
Sur ordinateur, la home prend le temps de raconter l’atelier. Sur mobile, elle va droit au but : la saison, les jardins livrés, la carte, et le bouton pour demander un devis.
07. LE RÉSULTAT
UN SITE QUI RASSURE AVANT LE PREMIER APPEL.
Les réalisations vivent dans une collection Webflow : ajouter un jardin met à jour la home, la liste et sa fiche, sans toucher au design.
Huit petits scripts, chacun dédié à une section, plutôt qu’une seule usine à gaz. Chaque effet a sa version calme pour qui réduit les animations.
Testé à 390, 479, 767, 991 et 1440 px : aucune section ne déborde, aucun texte ne se chevauche.
08. LE SITE LIVE