Plateforme de voyage · Site internet
Création du site
internet d'une
plateforme
de voyage
Donner une identité visuelle à un concept
Terroo est une plateforme gratuite où les voyageurs rencontrent des locaux pour de vrais moments partagés : un repas, une balade dans le quartier, une soirée. Chaque rencontre s'organise directement entre le voyageur et le local.
La mission : un site, et surtout une page d'accueil assez forte pour donner envie de rejoindre une plateforme qui n'existait pas encore. Je suis arrivé avant le moindre écran, et j'ai commencé par une direction artistique qui donnait une forme visuelle au concept de la fondatrice. J'ai ensuite conçu toutes les pages, puis je les ai intégrées sur WordPress pour qu'elle puisse gérer son site seule. Le référencement a guidé la structure et les textes dès la première maquette, au lieu d'arriver en fin de projet.
J'ai mené le projet de bout en bout, en quatre étapes : direction artistique, design system, écrans et parcours, puis thème WordPress sur mesure développé avec l'IA. Les sections ci-dessous suivent ces quatre étapes.
Logo, palette, typographies et les détails qui donnent du relief à la marque
Une bibliothèque de composants Figma : boutons, cartes, champs de formulaire et footer, prête à être développée
De la page d'accueil aux mentions légales, avec des textes en anglais, en français et en espagnol, et une structure issue de la recherche SEO
Un thème sur mesure sous Elementor, construit avec l'IA à partir de mes écrans Figma, et modifiable par la fondatrice depuis le back-office
Quatre choix qui font la marque
La plupart des startups de voyage choisissent une typo sans serif bien lisse et s'arrêtent là. J'ai associé la Fraunces, une serif au rendu légèrement brut, presque composée à la main, à l'Inter Tight pour le texte courant. La première donne sa voix à la marque, la seconde garde tout le reste lisible.
Voyager par les rencontres.
Fraunces / Inter Tight
Toutes les apps de réservation partent sur du bleu. J'ai construit la palette autour d'une couleur rouille, comme brûlée par le soleil, posée sur un crème qui rappelle le papier. On est plus près du tampon de passeport que du tableau de bord de logiciel. Avant même de lire un mot, on ressent quelque chose de chaleureux, de fait main.
J'ai été tenté de ranger les photos d'expériences dans une grille propre et régulière, comme sur tous les sites de voyage. C'était ranger Terroo parmi les sites dont elle veut justement se démarquer. En épinglant chaque photo comme une carte postale, scotch compris, chaque rencontre semble vous être envoyée personnellement.
Chaque bouton pilule a une seconde forme plus sombre décalée derrière lui, comme un tampon appliqué un peu de travers. C'est un petit détail, présent sur chaque bouton du site, et c'est lui qui donne à la marque son côté fait main, à mille lieues d'un site sorti d'un template.
Une seule bibliothèque pour toutes les pages
Ces quatre décisions sont devenues un design system dans Figma : la palette et les deux typos comme fondations, puis les composants qui servent à construire chaque page. Je l'ai structuré et nommé comme un développeur aime le recevoir, puisque le développement était l'étape suivante.
Rouille, crème et encre, Fraunces et Inter Tight
Boutons, cartes, champs de formulaire et footer
Chaque écran du site
Chaque composant recréé en widget, relié aux tokens
Un extrait de la bibliothèque de composants
Boutons, cartes, champs de formulaire et footer : tout est nommé et rangé, prêt à être transmis à un développeur.
Une marque cohérente, d'une page à l'autre
J'ai conçu tous les écrans du site : la page d'accueil, une page pour les voyageurs, une pour les locaux, la sécurité, le manifeste, le contact, le blog et les pages légales. Le tout existe en anglais, en français et en espagnol, et la recherche SEO a guidé la structure et les textes dès le premier wireframe. Voici le parcours d'un visiteur :
Six types de rencontres, les principes de sécurité et deux portes d'entrée
Découvrir, échanger, se retrouver
Ce qu'il faut savoir avant d'accueillir
Système de références, échelle de sanctions et transparence de la communauté
Le bouton vers lequel tout le site mène
Le haut de la page d'accueil, en anglais, en français et en espagnol.
L'effet carte postale de la maquette Figma, intégré à l'identique.
La sécurité d'abord, expliquée avant même la première rencontre.
La voix du manifeste revient de section en section, bien au-delà de la page d'accueil.
Même la page contact a le ton de Terroo, à mille lieues du formulaire de support classique.
Un site WordPress que la fondatrice gère sans moi
Je me suis servi de l'IA pour transformer mes écrans Figma en thème sur mesure, écrire le PHP et installer les bons plugins, toujours en suivant mes instructions. Comme j'ai dessiné les maquettes et piloté le développement, le site correspond au design au pixel près.
La bibliothèque et chaque page
Quoi construire, et avec quels plugins
Les écrans transformés en thème, le PHP écrit par l'IA
Widgets Elementor sur mesure, reliés aux tokens
Textes, images et pages, sans développeur
La fondatrice modifie son site directement depuis le back-office WordPress, sans dépendre de personne.
WordPress fait tourner plus de 40 % des sites dans le monde. N'importe quel développeur pourra reprendre le projet et s'y retrouver tout de suite, sans outil propriétaire à apprendre.
Chaque bloc est un widget Elementor sur mesure, relié aux mêmes design tokens que la bibliothèque Figma. Les nouvelles pages restent dans la charte, même quand quelqu'un d'autre les modifie.
Modification d'une page, en direct
Ce texte, la fondatrice le modifie elle-même.
Découvrez Terroo en ligne
Le site est en ligne en anglais, en français et en espagnol. Parcourez-le comme le ferait un voyageur, de la page d'accueil jusqu'aux principes, et voyez si vous avez envie de partir.
