✔ Présenter TOPIAR et la mission de l’association « Pays heureux » dès le premier écran
✔ Mettre en avant quatre domaines : conception paysagère, fourniture et plantation, toitures végétalisées et éclairage
✔ Convaincre par les réalisations – des maisons individuelles aux ensembles résidentiels et bâtiments commerciaux
✔ Faire connaître l’équipe et les chiffres de l’entreprise
✔ Amener le visiteur à demander une consultation gratuite
✔ Partager son savoir-faire dans le blog
Un aménagement paysager se choisit avec les yeux : avant d’appeler, on veut voir les jardins, terrasses et toitures que l’entreprise a déjà réalisés et savoir qui se cache derrière. TOPIAR avait besoin d’un site qui montre ses réalisations en grand, explique ses quatre domaines d’activité et mène à une demande de consultation gratuite.
J’ai intégré l’accueil et les pages intérieures autour de grandes photos, dans une palette noir et blanc avec un accent vert, en misant sur le mouvement : premier écran, bloc « Mission », chiffres de l’entreprise, portfolio, avis, appel à l’action et formulaire de contact sont animés, et les services se dévoilent au survol – la photo change, une description et un bouton apparaissent.
Résultat : un site à dix types de pages – accueil, services et page de service, portfolio filtrable et fiche projet, blog et article, « À propos », contacts et politique de confidentialité – avec, sur chaque page, un chemin court vers la consultation.
Un site où les réalisations s’affichent en grand et où chaque bloc s’anime au défilement et au survol.
Premier écran, mission, chiffres, portfolio, avis, appel à l’action et formulaire s’animent
Au survol du nom d’un service, la photo change et une description avec bouton apparaît
Tout, bâtiments commerciaux, ensembles résidentiels et maisons individuelles – avec pagination
Le projet, l’équipe, la surface, le statut et les travaux ; atouts et description du service
Fil d’articles filtrable par catégorie et article avec sommaire
Appel à l’action sur les pages intérieures et formulaire avec consentement aux données
Grandes photos des réalisations, animations vivantes et chemin court vers la demande : le visiteur voit ce dont l’entreprise est capable et peut demander une consultation tout de suite.
Le site répond à plusieurs objectifs principaux :
Réponse garantie sous 24h.
Premier échange gratuit et sans engagement.
Le site d’une entreprise de paysagisme vend avant tout par l’image : des jardins luxuriants, des toitures végétalisées et des allées éclairées convainquent mieux qu’une liste de services. À travers l’exemple de TOPIAR, je vous explique comment j’ai développé un site d’entreprise avec un accueil animé, des services qui se dévoilent au survol, un portfolio filtrable par type de projet et des formulaires de demande.
TOPIAR est une entreprise d’aménagement paysager basée à Kyiv. Elle conçoit des jardins et des terrains, fournit et plante des végétaux, végétalise des toitures et installe de l’éclairage paysager. Sur son site, l’entreprise se présente aux côtés de l’association « Pays heureux », qui défend une idée simple : l’environnement autour de la maison influence la santé, l’humeur et la qualité de vie, et un terrain bien pensé n’est pas un luxe, mais une condition de vie normale. L’entreprise se résume en chiffres : 13 ans sur le marché ukrainien, 150 clients dans tout le pays, 120 spécialistes dans l’équipe et 500 projets réalisés.
Un aménagement paysager se choisit d’abord avec les yeux. Avant d’appeler, on veut voir les jardins, les terrasses et les toitures que l’entreprise a déjà réalisés, comprendre ce qu’elle fait et qui y travaille. Le site devait donc montrer les réalisations en grand, expliquer brièvement les quatre domaines d’activité, inspirer confiance grâce à l’équipe et aux avis clients, et amener le visiteur, depuis n’importe quelle page, à demander une consultation gratuite. Le site est en ukrainien.
L’en-tête est une bande sombre avec le logo TOPIAR et le menu : « Accueil », « Portfolio », « Projets », « Blog », « À propos », « Documents », « Contacts ». Dessous, la photo d’une maison contemporaine avec terrasse et éclairage, et au centre de l’image une « lentille » ronde avec le nom de l’association et un bouton « Nous contacter ». De part et d’autre, deux légendes reliées par de fines lignes : le type d’organisation et son message central sur l’importance de transformer son cadre de vie. Le premier écran est animé, et sur les pages intérieures le bloc d’en-tête avec le titre a lui aussi sa propre animation.
Juste après vient le bloc « Mission » : un grand titre, un court texte expliquant que l’association promeut un aménagement paysager moderne et réfléchi, et un graphisme linéaire – cercles et lignes entrecroisées dans le vert de la marque. Ce bloc est animé lui aussi, et sur la page « À propos » les blocs mission et vision prennent vie de la même façon.
Le bloc « Services » est un large bandeau de quatre photos séparées par de fines lignes verticales. En bas de chaque colonne, le nom d’un domaine :
La particularité du bloc, c’est sa réaction au survol. Il suffit de passer la souris sur le nom d’un service pour que la photo change et qu’une description et un bouton apparaissent par-dessus. Le texte sur l’éclairage paysager, par exemple, précise que les spécialistes de l’entreprise le conçoivent, l’assemblent et l’installent à Kyiv, y compris sur de grands terrains et pour des demandes atypiques. Un seul bloc contient ainsi quatre courtes présentations, et la page reste légère. Sous le bandeau, un lien « Tous les projets » mène à la page de tous les services.
Le bloc « À propos » repose sur un fond clair à motif discret : une large photo de jardin fleuri, surmontée d’une carte semi-transparente qui présente une équipe de passionnés voulant rendre le cadre de vie des Ukrainiens plus agréable, avec un bouton « Nous contacter ». Viennent ensuite les quatre chiffres de l’entreprise en grands caractères verts : 13 ans sur le marché, 150 clients, 120 spécialistes et 500 projets. Les chiffres sont animés et s’activent quand le bloc apparaît à l’écran.
Puis le bloc sombre « Blog » : trois cartes d’articles avec photo, titre, date et chapeau, et un lien « Tous les articles ». Après lui, une carte verte « Demander une consultation gratuite » avec bouton, sur fond de silhouettes d’herbes claires. Ce bloc d’appel à l’action est animé lui aussi et revient sur les pages intérieures : le chemin vers la demande reste toujours à portée de main.
Sur l’accueil, le portfolio est une section sombre avec trois projets : deux images en haut et une large photo dessous, chacune avec le nom du projet sur une étiquette claire. Le bloc est animé, et le lien « Toutes les réalisations » mène à la page portfolio. Suit « Notre équipe » : un carrousel de photos des collaborateurs en tenue de l’entreprise, avec nom et fonction, que l’on fait défiler avec des flèches.
Les avis clients s’affichent sur la photo d’une allée d’arbustes taillés : deux cartes semi-transparentes avec une icône de guillemets, le texte et le nom de l’auteur. L’accueil se termine par le bloc « Contactez-nous » – une carte verte avec les champs « Nom », « Téléphone », « E-mail » et « Message », une case de consentement au traitement des données personnelles et un bouton noir. Comme les avis, le formulaire apparaît avec une animation.
Les pages intérieures s’ouvrent sur un bloc sombre avec titre, courte introduction et le même graphisme linéaire. La page des services est une grille de cartes avec photo et nom. La page « Nos réalisations » suit le même principe, mais un filtre par type de projet surmonte la grille :
L’onglet actif est souligné en vert, et une pagination avec flèches suit la grille. Plus bas sur la page, on retrouve les avis et le bloc de consultation gratuite : le visiteur qui vient de parcourir les réalisations peut envoyer sa demande dans la foulée.
La fiche projet entre dans le détail : une partie « À propos du projet », l’équipe qui y a travaillé, la surface, le statut et le déroulement des travaux. La page de service s’ouvre sur une grande photo avec son nom, puis viennent une introduction et une liste à icônes, trois atouts – « Souhaits du client respectés à 100 % », « Toujours joignables en ligne », « Une meilleure qualité de vie » – et une partie descriptive où photos et textes alternent en quinconce.
Dans le blog, on peut filtrer les articles par rubrique, et chaque carte affiche photo, date et chapeau. La page d’article comprend titre, date, texte avec intertitres et sommaire. La page « À propos » présente la mission et la vision de l’association, les contacts ont leur propre page, et la politique de confidentialité indique la date de dernière mise à jour et comporte des sections sur les cookies. Le pied de page réunit le logo, un menu avec plan du site, les icônes des réseaux sociaux et un lien vers la politique.
Un aménagement paysager coûte cher et prend du temps : le client choisit son prestataire avec beaucoup de soin. D’après ce projet, le site d’une telle entreprise fonctionne quand :
Si vous travaillez dans le paysagisme, la végétalisation ou la construction, commencez votre site par une question : que veut voir le client avant d’appeler ? Le plus souvent, des réalisations terminées, des services clairs et les personnes qui interviendront chez lui. Votre site devient alors bien plus qu’une carte de visite : une vitrine qui vous apporte des demandes.
