Template de site internet pour paysagiste

Un métier magnifique, des sites qui ne le montrent pas

Le paysagisme est l'un des rares métiers dont le résultat est spectaculaire par nature. Une terrasse, une allée, une haie taillée, un bassin : c'est de la photo prête à l'emploi. Et pourtant, la quasi-totalité des sites de paysagistes que je croise ressemblent à des catalogues de matériaux — galerie en vignettes de 300 px, texte gris sur fond blanc, formulaire en bas de page.

Le décalage est brutal : un artisan qui vend du beau se présente avec une vitrine qui ne l'est pas. Ce template est né de ce constat. Ce n'est pas une commande client — c'est un parti pris que je voulais poser noir sur blanc avant d'en discuter avec un vrai paysagiste.

Le jardin traité comme une architecture

La ligne directrice tient en une phrase, qui sert d'ailleurs de baseline : « des paysages à habiter — précis comme une architecture, vivants comme une saison ». Toute la DA découle de là.

Le vert profond comme fond, pas comme accent. Le réflexe habituel est de mettre du vert sur un fond blanc, en petite touche. Ici c'est l'inverse : le vert forêt occupe tout l'écran et devient l'atmosphère. Les photos de jardin ne sont plus des vignettes posées sur du blanc, elles s'ouvrent dans la matière. Un accent vert-anis vient réveiller l'ensemble sur les éléments cliquables — c'est la seule couleur vive du système, donc l'œil va exactement là où on veut.

Une typographie à deux voix. Un serif éditorial crème pour « Cultiver », un script filaire pour « l'inattendu » — le contraste entre la structure et le végétal, littéralement mis en typographie. Le reste de l'interface (nav, labels, coordonnées) passe en sans-serif capitales très espacées, ce qui laisse le titre respirer sans concurrence.

L'arche comme signature. Le visuel principal est masqué dans une forme en arche, référence directe à la porte de jardin et à la topiaire. Un disque découpé à l'intérieur fait apparaître une seconde image : deux états du même lieu, le réel et le possible. C'est exactement ce qu'un paysagiste vend — un avant/après — mais raconté sans le slider avant/après vu mille fois.

Les détails de marge. Coordonnées GPS à la verticale, pagination « PP / 01 », indice de scroll « déplacez le regard ». Ces micro-éléments ne servent à rien fonctionnellement, et c'est le but : ils installent le sérieux d'un studio d'architecture. Un prospect qui hésite entre trois devis retient celui qui a l'air le plus professionnel.

Ce que la structure change côté conversion

Un beau site qui ne convertit pas est un échec. L'architecture du template est donc calée sur le vrai parcours d'un client de paysagiste :

1. Le CTA principal n'est pas « Contact ». Il dit « Ouvrir un projet ». Nuance importante : le visiteur n'est pas invité à envoyer un message dans le vide, il est invité à démarrer quelque chose. Le second CTA, « Entrer dans le jardin », descend vers les réalisations — parce qu'un prospect veut voir avant de parler.

2. Trois entrées seulement. Manifeste, Savoir-faire, Contact. Un paysagiste n'a pas besoin de quinze pages : il a besoin qu'on comprenne sa vision, qu'on voie son travail, et qu'on puisse le joindre. Chaque entrée supplémentaire est une occasion de perdre quelqu'un.

3. La zone d'intervention affichée dès le premier écran. « Studio de paysages · Paris & ailleurs » est placé au-dessus du titre. C'est un détail SEO local autant qu'un détail de réassurance : le premier réflexe d'un prospect est de vérifier que vous intervenez chez lui.

Sous le capot

Next.js en rendu statique, TypeScript, Tailwind, déployé sur Vercel — la même base que celle sur laquelle je livre mes sites clients.

Le vrai sujet technique d'une DA comme celle-ci, c'est de tenir la performance malgré des images plein écran. Les photos sont servies en AVIF/WebP responsive, la forme en arche est un masque CSS (aucune image découpée en plus à télécharger), et les animations restent sur transform et opacity pour ne jamais déclencher de recalcul de mise en page. Résultat : ça bouge à 60 fps sans faire vaciller le score Core Web Vitals, et sans le décalage visuel au chargement qui plombe le CLS de la plupart des sites « design ».

Les polices sont chargées en local avec font-display: swap et une métrique de repli ajustée : le titre serif ne saute pas quand la vraie police arrive.

Le rendre vôtre

Le template est construit sur des tokens de design — couleurs, échelles typographiques, rayons, durées d'animation vivent au même endroit. Passer du vert forêt à un terracotta d'entreprise de terrassement, ou du serif éditorial à quelque chose de plus franc, prend une poignée de valeurs à changer, pas une refonte.

Vous êtes paysagiste, jardinier ou entreprise d'aménagement extérieur et cette direction vous parle ? Elle peut devenir la vôtre, adaptée à vos photos, vos réalisations et votre zone d'intervention — parlons-en, ou regardez d'abord comment je chiffre un projet.