Maxime Mironnet Contact

Traduire l'identité d'une marque en expérience digitale

Projet
Cold Laundry
Secteur
Mode, e-commerce
Année
2019
Prestations
Direction artistique, UI
Le site présenté sur ordinateur : la page d'accueil, logotype en capitales espacées posé sur une photographie de collection.

Refonte graphique du site de Cold Laundry, une marque londonienne à l'esthétique minimaliste et contemporaine.

Le projet portait sur la conception de l'expérience e-commerce, de la page d'accueil aux catégories et fiches produit, sur desktop et mobile.

Réalisé dans le cadre d'un master à l'ECV, le projet partait d'une identité de marque existante avec un objectif principalement graphique : imaginer comment ses codes pouvaient se traduire dans une interface digitale.

Le défi

L'enjeu était de construire une expérience e-commerce qui ne ressemble pas à un site de mode générique.

Cold Laundry possède une identité très sobre, basée sur les volumes, les matières, les couleurs et une photographie très éditoriale. L'interface devait donc laisser suffisamment de place aux collections tout en conservant les éléments indispensables à un site marchand : navigation, catégories, prix, produits et accès à l'achat.

Le travail consistait à trouver un équilibre entre direction artistique et usages e-commerce, sans transformer l'interface en simple vitrine.

La page d'accueil sur tablette : composition éditoriale alternant photographies de collection et blocs de contenu.

L'approche

Parti pris : construire la page d'accueil comme une composition éditoriale, en alternant produits, photographies et blocs de contenu.

Les différentes collections sont organisées en sections : New In, Contemporary Clothing, Staple Laundry, Footwear et Accessories. Chaque section possède sa propre composition tout en reprenant les mêmes principes de grille, de typographie et d'espacement.

Les produits sont présentés dans des cartes sobres, avec les informations positionnées discrètement autour de l'image. Les noms apparaissent notamment verticalement sur le côté des visuels, créant un traitement graphique qui participe directement à l'identité de l'interface.

La typographie joue également un rôle important. Les grands titres deviennent des éléments de composition à part entière, comme sur le bloc « Contemporary Clothing », tandis que les informations fonctionnelles restent volontairement plus discrètes.

La palette reprend les tonalités présentes dans l'univers de Cold Laundry : crème, gris, rose poudré, vert sauge et tons terreux. Elle permet de créer une continuité entre les photographies des collections et les éléments graphiques de l'interface.

Un extrait de la page d'accueil : grille de produits en photographie pleine largeur, avec les noms placés verticalement le long des visuels.

Composer l'expérience comme un éditorial

La page d'accueil ne se limite pas à présenter une succession de produits.

Les collections sont ponctuées de lookbooks, mises en avant thématiques et contenus visuels, afin de créer un rythme entre découverte de la marque et accès au catalogue.

Le bloc Contemporary Clothing, par exemple, associe un titre typographique fort à une photographie de collection et à un accès au lookbook. Plus loin, la section Footwear utilise une composition différente pour mettre le produit en avant.

L'objectif était de donner à chaque section une personnalité propre, tout en conservant une cohérence sur l'ensemble de la page.

La section Footwear : une composition qui lui est propre pour mettre le produit en avant, tout en reprenant la grille commune.

Du desktop au mobile

La direction artistique devait également fonctionner sur des écrans plus petits.

Le travail mobile consistait à adapter les compositions et la hiérarchie des contenus plutôt qu'à simplement réduire la version desktop. Les blocs éditoriaux, les produits et les informations fonctionnelles devaient conserver leur place dans l'expérience tout en s'adaptant aux contraintes du format.

L'enjeu était de préserver le caractère graphique du projet sans compromettre la lisibilité et la navigation.

Les déclinaisons mobiles : l'accueil et son lookbook, une page catégorie aux noms de produits à la verticale, et une fiche produit dont le panneau d'achat apparaît en surimpression.

Ce que j'en retiens

Ce projet m'a permis de travailler sur un sujet différent de mes projets plus orientés produit : comment une identité de marque peut-elle réellement influencer une interface ?

Plutôt que d'appliquer les codes habituels d'un site e-commerce, j'ai cherché à construire une expérience où la photographie, la typographie, les espaces et la composition participent tous à l'expression de la marque.

C'est une approche que je garde aujourd'hui dans mes projets : l'interface ne doit pas seulement fonctionner, elle doit aussi être cohérente avec ce qu'elle représente.