Aller au contenu
Alba

BIG DAY

Landing d'un studio de tableaux d'argent avec configurateur : l'aperçu est rendu entièrement en CSS et produit un brief prêt pour le manager.

Défi

Le studio réalise à la main des tableaux d'argent et des tables — un produit que le client veut voir avant de commander. Il n'y a pas de grille tarifaire publique : un calculateur classique n'avait donc pas lieu d'être, mais la pièce devait quand même se montrer.

Solution

Une page qui détaille l'anatomie de la pièce couche par couche, six collections et une galerie filtrable avec lightbox. Au centre, le configurateur : format, devise, artefacts à l'intérieur, marque, fond et éclairage. L'aperçu n'est pas une image mais un rendu CSS — cadre, carbone, gravure, clé de voiture, plaque et environ 170 « billets » disposés de façon pseudo-aléatoire à partir d'une graine fixe, pour que client et manager voient la même chose. À la place d'un prix, le configurateur assemble un brief : les paramètres deviennent un message, copié dans le presse-papiers pendant que la conversation s'ouvre.

Résultat

Une page d'environ 2 800 lignes avec 53 photos de réalisations, déployée dans son propre conteneur sur un serveur partagé, sans toucher aux projets voisins ni à leurs configurations.

Stack

Vanilla JSCSSStaticDockernginx

Galerie

Premier écran du studio de tableaux d'argent
Premier écran du studio de tableaux d'argent
Ce qu'il y a dedans : des couches, pas une impression
Ce qu'il y a dedans : des couches, pas une impression
Les six directions du studio
Les six directions du studio
Configurateur avec aperçu CSS en direct
Configurateur avec aperçu CSS en direct
Galerie filtrable des réalisations
Galerie filtrable des réalisations
Emballage et livraison
Emballage et livraison