Drop 01 — février 2026
Étude de casConcept e-commerceV3 — 2026
MLB × KarinaSS26
La boutique imaginée de la collaboration MLB × KARINA, printemps / été 2026. Un site concept qui se lit comme un lookbook éditorial et fonctionne comme une vraie boutique.
Le brief
Deux drops, deux ambiances, une boutique : raconter une campagne sans jamais perdre la vente de vue.
Imaginer la boutique de la collab MLB × KARINA. L’enjeu : raconter la campagne comme un magazine tout en gardant la boutique à portée de clic. Chaque image mène à une pièce, chaque pièce à son panier.
Drop 02 — mai 2026
KARINA’s Summer, Turned Up
02Drops — 02.2026 et 05.2026
10Pièces en boutique
03Films de campagne
02Langues — FR / EN
Direction artistique
Une palette froide tirée du studio du Drop 01, du chrome pour le Drop 02, et une typographie à largeur variable pour passer du titre géant à l’étiquette.
Archivo — titres, axe de largeur variableLargeur 100 %
Move into Spring
62 % — condenséFaites défiler125 % — étendu
Inter Tight — texteKARINA’s Summer, Turned Up. T-shirts, casquettes à patchs, denim et chrome.
JetBrains Mono — étiquettesDROP 01 — 02.2026 · 43 000 ₩
Noto Sans KR — coréen카리나 × MLB
Principe 01Le lookbook d’abord
La campagne ouvre le site ; la grille produit arrive ensuite, quand l’envie est installée.
Principe 02Froid / chaud
Marine et brume pour le Drop 01, brun et chrome pour le Drop 02 : chaque drop a sa température.
Principe 03Mouvement maîtrisé
Chaque animation a un rôle, et toutes s’arrêtent si le visiteur demande à réduire les animations.
L’expérience
Ce qui fait la différence entre un template et un site de marque : les détails qu’on sent avant de les voir.
Écran de chargement
Le logo MLB se remplit de gauche à droite pendant qu’un compteur passe de 000 à 100. Il suit le vrai chargement — polices et premières photos — puis remonte comme un rideau. Une seule fois par session.
1,1 s à 3,2 s
Sections qui se chevauchent
L’accueil, l’index casquettes et les films restent en place pendant que la section suivante glisse par-dessus. La section couverte s’assombrit et recule ; le film se met en pause une fois recouvert.
Défilement
Index casquettes
Cinq cases à grands chiffres : le survol révèle la photo, le clic ouvre la pièce. Les casquettes et bonnets, cœur de la collab, passent au premier plan.
Survol + clic
Fiche produit & panier
Galerie, tailles, quantité, description et composition dans les deux langues. Les prix suivent la langue — 43 000 ₩ en français, ₩43,000 en anglais. Le paiement reste désactivé : c’est un concept.
FR / EN
Curseur & aimants
Un curseur cercle et des boutons principaux qui se décalent légèrement vers la souris : pastilles, panier, menu, lecture du film, « Ajouter au panier ».
Micro-interactions
Pages clés
Accueil, collage éditorial, films de campagne, boutique : quatre écrans qui s’empilent comme le site lui-même.
Mobile
Pas une version réduite : un menu plein écran, des grilles repensées et des boutons à la taille du pouce.
Sous le capot
Accessibilité et performance traitées comme des choix de design, pas comme une liste à cocher à la fin.
- 01Si le visiteur demande à réduire les animations, aucune ne se lance : ni chargement, ni chevauchement, ni curseur.
- 02Seules trois grandes photos se dévoilent au scroll ; toutes les autres s’affichent directement.
- 03Aucun framework : HTML, CSS et JavaScript natif, découpés par rôle (données, langues, boutique, mouvement).
- 04Langue choisie mémorisée dans le navigateur ; écran de chargement limité à une fois par session.
Fin de l’étude de casMLB × KARINA — SS26
Le site,
en vrai.
Projet concept non affilié à MLB ni à KARINA. Photos et films de campagne : leurs auteurs respectifs. Prix relevés sur mlb-korea.com en novembre 2026.
© 2026 Groevius Wilson