Dans Varenne, j’ai choisi de faire entrer le visiteur par la collection : de grands visuels, une hiérarchie sobre et une navigation réduite. Les silhouettes et les matières passent au premier plan. Varenne est une étude fictive de site pour une marque de mode, conçue jusqu’au prototype interactif sur Figma.
Le projet permet de poser une question concrète : comment présenter une collection tout en gardant des repères faciles à suivre ? Un site de marque de mode peut montrer des campagnes, informer sur les pièces ou permettre un achat. Ces usages demandent de définir le parcours avant de dessiner les pages.
Présenter la collection avant de détailler les pièces
Une campagne contient déjà une direction : les silhouettes, les matières, la lumière, les cadrages et le casting. Je regarde cette matière avant de choisir les formats des pages. Une grande image peut introduire une collection ; un détail peut ensuite accompagner une pièce.
Le rythme doit aider à comprendre ce qui est montré. Un lookbook, une page de collection et une fiche produit n’ont pas le même rôle. Le premier peut présenter une série d’images ; la dernière doit aussi donner les informations nécessaires au choix du produit.
Site vitrine ou boutique : définir ce que le visiteur pourra faire
Un site vitrine peut présenter les collections, les campagnes, les points de vente et les contacts. Une boutique ajoute le catalogue, les tailles, les disponibilités, le panier, le paiement, la livraison et les retours. Le périmètre et les contenus à préparer changent en conséquence.
Si une boutique fonctionne déjà, sa plateforme et les fonctions à conserver font partie du brief. Le travail peut porter sur les écrans et la présentation, sur le développement, ou sur les deux. Je distingue ces missions avant de commencer plutôt que de laisser le terme « site » les confondre.
Varenne : les missions de conception
L’étude porte sur la direction visuelle, la conception des interfaces UX/UI et le prototype interactif sur Figma. J’y ai travaillé les grands visuels, la hiérarchie, la navigation et la place de la collection. Le prototype permet de parcourir les écrans et d’examiner les choix de présentation.
Il s’agit d’un travail de conception, pas d’une boutique déployée. Ce périmètre fait partie de la présentation du projet : il montre les choix visuels et les parcours, sans annoncer de ventes ni de résultats commerciaux.
Adapter les images au téléphone
Une image horizontale, un portrait et un gros plan ne se recadrent pas de la même façon. Je regarde ce qu’il faut conserver dans chaque photographie, la lisibilité des titres et l’ordre des contenus sur les petits écrans. Une page peut garder la même direction visuelle tout en changeant de composition.
Les images doivent être étudiées avant les maquettes. Le rapport entre photographie et identité visuelle explique ce point. Le webdesign éditorial permet aussi d’organiser une série sans compliquer la navigation.
Le brief d’une marque de mode
Pour commencer, envoyez-moi la collection, les campagnes disponibles, votre identité et le site actuel s’il existe. Précisez ce que le visiteur doit pouvoir faire, le nombre de produits éventuel et les fonctions de la boutique à conserver. Les formats des images et les informations produit permettent de définir les pages.
Je suis Tamara Chaudesaigues, webdesigner et fondatrice de Minuit d’Orsay à Paris. L’article sur le webdesign mode et beauté précise les choix communs d’identité, de photographie et de présentation. Pour le détail de l’étude, vous pouvez parcourir Varenne.
