Ce projet est un site pour Structiv, un studio de la région de Dallas qui conçoit et construit des maisons sur mesure. Il s’ouvre sur un terrain vide qui devient un domaine achevé en quinze secondes. Ensuite, on fait défiler latéralement sept écrans : les plans, la lumière, les intérieurs, la méthode, un estimateur de coût et le studio lui-même. J’ai travaillé avec l’IA à chaque étape. Voici la vidéo, ou lisez la suite pour la version écrite.
Play videoLa vidéo suit la fabrication dans l’ordre. Cet article parle plutôt de la réflexion : pourquoi le site commence par un film, pourquoi il défile de côté, et ce que j’ai retiré une fois qu’il tournait dans un navigateur.
Quatre questions avant tout design
Le brief se résumait à quatre choses que le site devait accomplir :
- Expliquer en quelques secondes qu’une seule équipe fait tout : la conception, la construction et l’intérieur, jusqu’à la remise des clés.
- Paraître haut de gamme et marquer les esprits, sans ressembler à une annonce immobilière.
- Répondre à ce qui inquiète les clients avant de construire : combien ça coûtera, combien de temps ça prendra, et qui est responsable ?
- Attirer les bonnes demandes, et aider ceux dont le budget ou les besoins ne correspondent pas à s’en rendre compte eux-mêmes, avant que quiconque ne perde du temps au téléphone.
Il y avait aussi une vraie maison autour de laquelle tout construire. Chaque image et chaque écran devaient montrer cette même maison : la même toiture, les mêmes fenêtres, la même allée.
Le premier point comptait le plus. « Une seule équipe, du début à la fin », c’est facile à affirmer et facile à survoler. Tous les constructeurs le disent. Je voulais donc que les visiteurs le voient se produire plutôt que de le lire.
Une phrase, neuf plans
L’idée : ouvrir le site sur un seul plan continu, un terrain vide qui devient peu à peu une maison où quelqu’un vit vraiment. Pas de coupe, pas de saut d’un projet à l’autre, juste une maison, une caméra et le travail d’une équipe.
Avant de créer la moindre image, j’ai découpé ce parcours en neuf plans :
Chaque rangée a une mission. La première lance le chantier : terrain vide, pelleteuse, fondations. La deuxième donne sa forme à la maison : charpente, façade, maison achevée. La troisième passe de la construction à la vie : la porte d’entrée, une famille sur le canapé, puis l’envol au-dessus de tout le domaine.
Cette dernière rangée est le cœur du film. Le site d’un constructeur pourrait très bien s’arrêter à « maison achevée ». Mais le client n’achète pas un bâtiment, il achète le jour où il emménage. Alors le film entre à l’intérieur avant de finir.
Le storyboard fixé, j’ai créé les images de chaque plan. Il a fallu de nombreux tours de génération et de tri, et le critère n’était pas de savoir si une image seule était belle. Je mettais toute la série côte à côte en me demandant : est-ce clairement la même maison à différentes étapes ? Les fenêtres sont-elles au même endroit ? L’allée a-t-elle la même courbe ? Une belle image qui cassait la continuité partait à la poubelle, car le film ne tiendrait que si chaque plan menait au suivant.
Sur le site, le film porte quelques données en direct : un compteur de jours de Day 001 à Day 412 et l’étape en cours (terrain et fondations, charpente, enveloppe, paysage et finitions). Le titre d’ouverture est « Every estate starts as dirt. » et celui de fin « From first dig to first dinner. » Quand la caméra se pose sur la vue aérienne, cinq repères apparaissent sur la maison (le puits de lumière, la piscine, la cour d’accueil, l’oliveraie, la façade en calcaire), et chacun ouvre une petite carte avec un gros plan.
Pourquoi de côté, et pourquoi des planches
Pour le reste du site, je voulais que la navigation elle-même donne l’impression d’avancer sur un chemin, pas à pas. Il défile donc horizontalement, un écran entier à la fois.
L’idée qui a tout relié venait du monde du client. Les architectes livrent une maison sous forme de jeu de planches : A-00, A-01, A-02, etc. Chaque écran est donc devenu une planche, numérotée de A-00 à A-06, et passer à l’écran suivant revient à tourner la page vers le dessin suivant. La typographie, les filets fins, la couleur chaude du papier et l’unique accent bronze découlent tous de cette idée.
Avant tout design visuel, j’ai donné une mission à chaque planche :
| Planche | Ce qu’elle montre | La question à laquelle elle répond |
|---|---|---|
| 01 The Build | Le film, avec le compteur de jours et les repères | À quoi ressemble « une seule équipe » ? |
| 02 Elevation | Le plan d’un côté, la photo de l’autre | Savent-ils vraiment concevoir ? |
| 03 Lighting | La même maison du jour au crépuscule puis à la nuit | Pensent-ils aux détails ? |
| 04 Interiors | Le séjour, avec des repères de matériaux | L’intérieur est-il aussi réussi que l’extérieur ? |
| 05 Process | Calendrier classique contre conception-construction | Combien de temps cela prendra-t-il ? |
| 06 Estimate | Une fourchette de coût en trente secondes | Combien cela va-t-il me coûter ? |
| 07 Studio | Chiffres, témoignage, contact | Puis-je leur faire confiance, et comment commencer ? |
L’ordre est un entonnoir. Les quatre premières planches captent l’attention et installent la confiance, les deux suivantes répondent aux questions pratiques, et alors seulement le site propose un rendez-vous. En continuant après la dernière planche, on revient au terrain vide. L’histoire d’une maison achevée devient l’invitation à commencer la suivante.
Des textes qui sonnent comme un constructeur
Avant d’écrire les titres, je me suis fixé quelques règles. Court et affirmatif. Des chiffres partout où c’est possible : jours, pieds carrés, mois. Et pas de « dream home », « luxury living » ni « world-class ». Ces formules font sonner un site comme une publicité, et ce public en a vu beaucoup.
Les titres sont devenus de simples affirmations, chacune avançant ce que sa planche montre ensuite :
- Designed in-house. Built by the same hands. (Conçu chez nous. Construit par les mêmes mains.)
- Light is a material. (La lumière est un matériau.)
- Finished by the team that framed it. (Fini par l’équipe qui a monté la charpente.)
- A simpler, faster path to an exceptional home. (Un chemin plus simple et plus rapide vers une maison d’exception.)
- What will your home cost? (Combien coûtera votre maison ?)
- One team. From dirt to dinner. (Une seule équipe. Du terrain au dîner.)
La planche Elevation est l’exemple le plus clair de montrer plutôt qu’affirmer. La moitié gauche est un dessin au trait relevé sur la photo, ligne par ligne, et la moitié droite la maison achevée. Faites glisser le séparateur et le dessin devient bâtiment. Après ça, le titre n’a plus grand-chose à prouver.
L’estimateur répond à la question la plus difficile
La question qu’on ose le moins poser à un constructeur, c’est « combien ? ». Elle a donc eu sa propre planche.
Cinq paramètres : la surface, le niveau de finition, la situation du terrain, le nombre d’étages, et la piscine avec les espaces extérieurs. Le résultat est une fourchette, pas un chiffre unique : avec les valeurs par défaut, $3.8M–$4.6M et 14–18 mois, réparti entre conception, construction et intérieurs. En dessous, une ligne précise que la fourchette est indicative pour la région de Dallas et que le prix final vient après une visite du terrain.
Quelques décisions ont compté ici :
- Une fourchette, pas un devis. Un chiffre unique se lit comme une promesse que personne ne peut tenir avant d’avoir vu le terrain. Une fourchette est honnête et reste utile.
- Aucun e-mail demandé. L’estimation est là pour aider les visiteurs à décider, pas pour les capturer. Si ça leur convient, le bouton juste sous le résultat ouvre le formulaire de consultation avec l’estimation déjà remplie.
- Il filtre autant qu’il vend. Quelqu’un qui espère une maison à un million de dollars apprend en trente secondes que ce n’est pas le bon studio, et c’est un bon résultat pour les deux parties. C’était le quatrième point du brief.
Derrière, une formule simple (surface × tarif du niveau de finition, plus des montants fixes pour une piscine ou une démolition), avec tous les chiffres dans un seul fichier. Quand le client veut changer un tarif, c’est une seule modification.
La planche Process répond à « combien de temps » dans le même esprit. Deux calendriers sur une même échelle : la voie classique, où conception, permis, appel d’offres, construction et finitions se suivent sur 18 à 24 mois, et la conception-construction, où les étapes se chevauchent et se terminent en 12 à 16. La différence se voit avant même de lire un mot.
Des maquettes au vrai navigateur
Avant le développement, j’ai réalisé des maquettes détaillées de chaque planche, pour vérifier que photos, typographie et couleurs fonctionnaient ensemble et que le rythme était juste. Puis j’ai tout transformé en design system dans Claude Design, et confié le design, le brief et les notes de développement à Claude Code.
La première version était à environ 80 %. La structure et les visuels principaux correspondaient au plan. Mais quelques secondes d’utilisation suffisaient pour sentir ce qui clochait : le défilement avait une inertie étrange, le passage d’un écran à l’autre saccadait, et une partie de la typographie n’était pas celle que je voulais.
Les maquettes ne peuvent rien montrer de tout ça. Elles ne défilent pas. L’étape suivante a donc porté sur le ressenti du site, et une bonne partie du travail a consisté à retirer :
- Un écran par geste. Un trackpad continue d’envoyer des événements de défilement après qu’on a levé les doigts, si bien qu’un geste appuyé pouvait sauter deux écrans. Désormais un geste avance d’exactement un écran, et une légère poussée revient en place.
- Le film se lance tout seul. Au début, le défilement faisait avancer le film. Ça paraît astucieux, mais ça confiait le rythme de l’histoire au poignet du visiteur, et la plupart allaient trop vite ou restaient coincés. Maintenant il se joue seul, réduit à quinze secondes, et les repères apparaissent à la fin.
- Moins de décor de planche. La première version avait une règle de progression, un cartouche sur chaque planche, une grille qui balayait l’écran entre les planches et des chiffres incrustés sur le film. Chacun figurait dans la maquette ; ensemble, c’était du bruit. Je les ai retirés. L’idée de planche survit dans la structure, la typographie et la couleur du papier, et elle est plus forte d’être plus discrète.
- Les téléphones ont leur propre mise en page. Le défilement latéral est une idée pour ordinateur. Sur téléphone, les planches s’empilent verticalement, la boucle devient un bouton « Back to the beginning », et ceux qui préfèrent réduire les animations voient la vue aérienne fixe avec un bouton pour lancer le film.
Ce que je garde pour le prochain projet
- Trouver la phrase que le client doit faire passer. Ici, « une seule équipe, du début à la fin », et le film, la structure et la plupart des textes en sont issus.
- Le storyboard avant la génération. Neuf croquis ont fixé ce que chaque moment devait dire, si bien que les images avaient une direction au lieu d’être choisies une à une.
- Juger les visuels comme un ensemble. La continuité compte plus que n’importe quelle belle image isolée.
- Donner à chaque écran une question, et les ranger dans l’ordre où un client les poserait.
- S’attendre à ce que le navigateur change le plan. La maquette fixe l’apparence ; le ressenti n’apparaît qu’une fois qu’on peut faire défiler, et la solution consiste souvent à enlever quelque chose.
Vous pouvez voir les écrans et le film complet sur la page projet de Structiv, ou essayer vous-même le site en ligne.
Sur quelle partie voulez-vous que j’aille plus loin : le film de construction, le défilement horizontal, ou le passage de Claude Design à Claude Code ? Dites-le-moi dans les commentaires YouTube, et abonnez-vous ci-dessous pour recevoir le prochain article.
