Un produit à forte personnalité, une page à sa mesure.
Certains produits se prêtent mal au site vitrine classique : un titre, trois photos, un bouton. Un roadster au dessin aussi marqué en fait partie. Nous avons voulu explorer comment son site pourrait devenir une expérience numérique immersive, sans perdre ce qu’un site doit faire : informer et orienter.
L’exercice a été mené comme une étude, à partir d’informations publiques, sans brief ni commande de la marque.
Faire de l’ouverture une partie de l’expérience.
- 01
Dépasser la vitrine
La page ne se contente pas de présenter la voiture : elle la met en scène, du premier écran au dernier.
- 02
Faire du hero une expérience
La vidéo d’ouverture avance quand on fait défiler la page et recule quand on remonte. Le visiteur tient le rythme.
- 03
Mouvement, matière, profondeur
Soudure, châssis, mécanique, carrosserie, puis la route : la voiture se construit avant de rouler.
- 04
Rester lisible
Les textes sont en HTML, contrastés, placés hors de la silhouette. La page se comprend sans la vidéo.
Un film d’atelier, puis la route.
Le langage emprunte au cinéma automobile : plans lents, lumière rasante, gros plans sur la matière. L’atelier occupe la première moitié de la page, la route la seconde. La typographie reste en retrait : une serif éditoriale pour les titres, une mono pour les repères, une sans-serif pour le texte, toutes des polices système, pour ne pas prêter à la marque une typographie qu’elle n’a pas choisie.
Les transitions restent discrètes : les blocs apparaissent au défilement, les images se posent. Tout mouvement s’arrête quand le visiteur demande à réduire les animations.
Sept temps, pilotés par le défilement.
L’ouverture reste en place pendant que la vidéo avance : matière, châssis, mécanique, carrosserie, finition, sortie de l’atelier, route. Une phrase et un repère de progression accompagnent chaque temps. Arrivée au bout, la section se libère et la page reprend son cours normal.
01 · Matière
03 · Mécanique
05 · Finition
07 · Route
Sur mobile, la vidéo n’est pas recadrée à la verticale : les roues et le capot seraient coupés. La page affiche l’image entière et propose le film à la demande, son coupé.
La génération d’images comme outil, pas comme argument.
Les vidéos et les images sont des visuels de synthèse : générés à partir de photos publiques de la voiture, puis contrôlés sur planches de lecture. Le reste relève du travail habituel d’un projet Lancement : structure de la page, textes, montage du défilement, intégration sans bibliothèque externe, tests sur ordinateur, mobile et clavier.
Un prototype qui fonctionne, avec ses réserves.
Le résultat est une démonstration en ligne, pas un site commandé : il n’y a ni audience ni résultat commercial à montrer, et nous n’en inventons pas. Voici ce qui a réellement été produit.
- 01
Un hero piloté par le défilement
Sept temps, fluides en descente comme en remontée, avec un repère de progression.
- 02
Huit sections éditoriales
Après l’ouverture : la route, la machine, l’atelier, le voyage, la conduite, la configuration, les déclinaisons, la manufacture.
- 03
Des replis soignés
Sur mobile, avec les animations réduites ou une connexion économe : une image fixe et le film à la demande, sans son.
- 04
Une page accessible
Navigation au clavier, lien pour passer l’animation, bouton pause sur chaque séquence lue automatiquement.
Certains plans générés s’écartent de la voiture de référence : une bande grise apparaît sur le capot à la fin du film, les sièges sont clairs dans une séquence. Ces écarts sont signalés dans la démonstration plutôt que cachés.
Voir la démoCette réalisation est une étude conceptuelle produite par allb et ne constitue pas une mission client. La Mugello 375F est un modèle du constructeur Devalliet, qui n’a ni commandé ni validé ce travail. Les visuels sont des images de synthèse.
