Nouveau T‑Roc : un concept web pour présenter le modèle

Voir le concept web du nouveau T‑Roc en action (site en espagnol)

Un concept car, mais sur le web

Les constructeurs présentent des concept cars : des prototypes que personne n’a commandés et qui montrent une idée. Ce projet est né de la même façon.

Nous nous sommes demandé comment présenter le nouveau T‑Roc sur un seul écran : le faire tourner, changer sa couleur, passer d’une version à l’autre et regarder l’intérieur. Sans longs menus ni étapes de configurateur.

C’est une proposition de design, pas une commande : ni Volkswagen ni aucun concessionnaire ne nous l’ont demandée. Volkswagen et T‑Roc sont des marques de leurs titulaires. Les images et les données proviennent de volkswagen.es et ne servent qu’à illustrer le concept.

Le nouveau T‑Roc sur un seul écran

La deuxième génération du T‑Roc gagne 11 cm de longueur, offre jusqu’à 475 litres de coffre et des phares IQ.LIGHT Matrix LED. Toutes ses motorisations sont automatiques.

Le site résume l’essentiel dès le premier écran :

• Trois finitions : Match, Style et R‑Line.
• Onze versions : moteurs eTSI micro-hybrides (avec une petite batterie d’appoint), TSI Hybrid autorechargeable et, en R‑Line, un 2.0 de 204 ch à transmission intégrale 4Motion.
• Prix, puissance, consommation et émissions de chaque version, repris du configurateur espagnol volkswagen.es en octobre 2026.

Les flèches font passer d’une version à l’autre. Les versions voisines apparaissent sur les côtés, chacune dans sa couleur, pour montrer qu’il y en a d’autres.

Une rotation à 360° que l’on contrôle

Volkswagen montre la voiture avec 36 images prises tout autour, une tous les 10 degrés. Le site les utilise de deux façons :

• Paysage : les images d’origine, avec leur décor. On fait tourner la voiture au doigt ou à la souris, comme sur le site de la marque.
• Studio : la voiture détourée sur fond gris, comme une présentation produit. Ici, on la fait tourner avec des flèches : elle avance à vitesse constante et s’arrête toujours sur un angle net, comme l’avant, le profil ou l’arrière.

Quand on change de couleur, le titre et le halo du fond prennent la teinte de la carrosserie.

De vraies couleurs, de vrais intérieurs

Le site ne propose que ce que propose la marque. À l’extérieur, six couleurs, avec le prix de la peinture métallisée. À l’intérieur, aucune couleur inventée : chaque finition montre ses vraies garnitures.

• Match : Noir Soul avec tissu « T‑Roc ».
• Style : microfibre Noir Soul ou Gris Mistral.
• R‑Line : Noir Soul avec tissu « R‑Line » et sièges sport.

Pensé pour le mobile

Sur mobile, la voiture occupe toute la largeur et les commandes restent sous le pouce. Chaque couleur ne se charge que lorsque vous la choisissez, pour ne pas consommer de données inutilement.

Le site n’utilise ni cookies ni outils de suivi. La typographie est servie par le site lui-même, sans appel à des services externes.

Palette de couleurs

Un panneau clair et net sur un fond presque noir, avec le bleu profond de la marque sur les boutons. L’accent change avec la couleur de la voiture.

• Nuit#070B14Fond de la page
• Gris clair#ECEDF0Panneaux et scène
• Bleu profond#001E50Boutons et éléments actifs
• Bleu action#0040C5Liens et focus
• Rouge Automne#B4471FAccent : change avec la carrosserie
• Vert Millet#1F5230Appel final vers Millet Studio

Typographie

Plus Jakarta Sans, du fin au très gras. De grands titres compacts pour le nom du modèle et le prix, et des textes clairs dans les fiches techniques.

En chiffres

• 36 images par couleur pour la rotation en paysage et 26 pour le studio.
• 6 couleurs, 11 versions et 3 finitions.
• 4 garnitures, celles que propose Volkswagen dans chaque finition.

Un site comme celui-ci pour votre entreprise ?

Nous créons des sites sur mesure en une semaine et des propositions comme celle-ci pour les agences qui veulent présenter des idées à leurs clients : tout est dans l’offre agences. D’autres projets dans le portfolio.