classic
planche nº un-0018
Les quatre univers, en direct
Le site n’a pas une ambiance : il en a quatre, tenues par la même ossature. Typographie, grille, fiche de labo et bouton d’achat ne bougent jamais ; la palette, la lumière, le motif et l’imagerie changent avec le rayon.
Le sélecteur ci-dessous applique une peau au jeu de composants. Sur écran large, les quatre sont posées côte à côte pour comparer.
Regardez ce qui bouge : le liseré et l’emblème de la bande, le bandeau de la fiche, le filet des cartouches, la couleur des liens et du bouton secondaire, le fond de section.
Et ce qui ne bouge pas : la typographie, l’échelle, la grille, le rayon des cartouches, le bouton d’achat encre, la structure de la fiche de labo.
rayon liquides
bande d’univers
fiche nº de-0001
Fiche de labo
- Contenance
- 10 ml
- Taux
- 6 mg/ml
- Ratio PG / VG
- 80 / 20
Gabarit de contrôle : source et date à connecter.
Bloc conseil
Le fond, le filet et l’accent suivent l’univers ; le bouton d’achat reste encre.
comparaison
Les quatre peaux côte à côte
Chaque colonne redéfinit les mêmes variables --u-*. Aucun composant n’est dupliqué : c’est le même code, avec un attribut data-univers différent.
peau · maison
Maison
accueil, compte, guides, panier, tunnel, 404
le comptoir du labo
peau · atelier
Atelier
e-pipes, e-cigares, cigalikes, Créavap, XO Havana
bois, laiton, cuir
peau · liquides
Liquides
e-liquides, boosters, DIY, Alfaliquid, Pulp, VDLV
la paillasse de saveurs
peau · tech
Tech
kits, pods, résistances, Geek Vape, Waka, Oxva
la paillasse graphite
démonstration
Le même jeu de composants, quatre fois
Bande d’univers, fiche de labo, carte produit, sélecteur, boutons et bloc conseil. Le bouton d’achat reste encre dans les quatre.
rayon maison
bande d’univers
fiche nº de-0001
Fiche de labo
- Contenance
- 10 ml
- Taux
- 6 mg/ml
- Ratio PG / VG
- 80 / 20
Gabarit de contrôle : source et date à connecter.
classic
Bloc conseil
Le fond, le filet et l’accent suivent l’univers ; le bouton d’achat reste encre.
rayon atelier
bande d’univers
fiche nº de-0001
Fiche de labo
- Contenance
- 10 ml
- Taux
- 6 mg/ml
- Ratio PG / VG
- 80 / 20
Gabarit de contrôle : source et date à connecter.
classic
Bloc conseil
Le fond, le filet et l’accent suivent l’univers ; le bouton d’achat reste encre.
rayon liquides
bande d’univers
fiche nº de-0001
Fiche de labo
- Contenance
- 10 ml
- Taux
- 6 mg/ml
- Ratio PG / VG
- 80 / 20
Gabarit de contrôle : source et date à connecter.
classic
Bloc conseil
Le fond, le filet et l’accent suivent l’univers ; le bouton d’achat reste encre.
rayon tech
bande d’univers
fiche nº de-0001
Fiche de labo
- Contenance
- 10 ml
- Taux
- 6 mg/ml
- Ratio PG / VG
- 80 / 20
Gabarit de contrôle : source et date à connecter.
classic
Bloc conseil
Le fond, le filet et l’accent suivent l’univers ; le bouton d’achat reste encre.
règle
Quand la peau change
Par page d’abord : une fiche e-liquide est entièrement Liquides, une fiche kit entièrement Tech, une fiche de cartouche de cigare entièrement Atelier. L’attribut est posé sur <html>, et la bande sous l’en-tête annonce le rayon.
Par section ensuite, mais seulement sur les pages Maison : sur l’accueil, trois sections « rayons » portent chacune leur peau. C’est là que le concept se voit d’un coup, sans explication.
La transition est de 300 ms sur les couleurs de fond, d’accent et de liseré. Sous prefers-reduced-motion, elle est ramenée à zéro : le changement reste net, il n’est simplement plus animé.
fiche nº un-0018
Ce qui ne change jamais
- Typographie
- gabarito · schibsted grotesk · azeret mono
- Échelle
- 13 · 15 · 17 · 20 · 24 · 30 · 40 · 56
- Grille
- 1200 px · 12 colonnes · gouttière 24
- Bouton d’achat
- encre #1c1f1e, pilule 52 px
- Rayon des cartouches
- 14 px
- Ombres sur les cartes
- aucune
- Fiche de labo
- même structure dans les quatre peaux
L’ossature est le contrat entre les quatre univers.