Retour à l’accueil
Atelier Mirval est une maquette exemple : une refonte e-commerce Shopify complète, conçue pour une boutique de bijoux en acier inoxydable puis anonymisée pour être présentée comme démonstration. Vingt-quatre pages en web, tablette et mobile, un design system, une charte graphique et des pages légales conformes au droit français.
Le contexte : une boutique de bijoux sans identité
Atelier Mirval est un projet de démonstration, réalisé en solo en 2026. La marque est fictive : la maquette part d’une vraie boutique de bijoux en acier inoxydable, puis le nom, les photos et les informations légales ont été remplacés. La boutique d’origine vendait sur un thème Shopify générique, sans identité forte, avec un menu peu lisible sur mobile, des images sans texte alternatif et des pages légales incomplètes.
L’objectif : une boutique plus claire à l’achat
Le but était une boutique plus actuelle, plus simple à parcourir jusqu’au panier, accessible et conforme au droit français, et facile à intégrer dans Shopify. J’ai livré dans Figma 24 pages en trois formats (web 1440, tablette 768, mobile 390), plus les volets du menu, de la recherche, du panier et des cookies, soit 101 écrans, tous en auto-layout, reliés par un prototype cliquable complet.
Une maquette, trois formats
La direction artistique : la chaleur des bijoux
La palette vient de l’univers des bijoux : papier, encre, sable et or. Un seul accent est réservé aux promotions, pour qu’une remise se repère sans brouiller le reste de la page. Les angles sont droits, Instrument Serif porte les titres et Instrument Sans le texte, deux polices Google Fonts. Les animations se limitent à celles qui guident.
Un design system pour durer
Le design system rassemble les variables de couleur, une grille en trois modes, une échelle typographique et une trentaine de composants avec leurs variantes. Une charte graphique en 29 diapositives 16:9 l’accompagne, pour que la marque garde sa cohérence après la livraison.
Design system et charte
Les difficultés rencontrées
Quatre points demandaient une attention particulière : la lisibilité sur mobile, où passe l’essentiel des achats, l’accessibilité, la conformité au droit français de la vente en ligne, et l’intégration dans un thème Shopify sans perdre la finesse de la maquette.
Les solutions apportées
Sur mobile, textes et grilles ont été vérifiés écran par écran par un contrôle automatique des débordements, avec des cibles tactiles d’au moins 44 px. Pour l’accessibilité, les contrastes sont calculés pour chaque couleur, la navigation au clavier est prévue et chaque image a son texte alternatif. Le bandeau cookies rend le refus aussi simple que l’acceptation et rien n’est déposé avant le choix. La rétractation en ligne se fait en trois étapes avec accusé de réception. Les pages légales (mentions, CGV, confidentialité, cookies, accessibilité) sont fournies comme base à faire valider par un juriste. Enfin, sections et variables sont pensées pour un thème Shopify, avec un design system documenté.
Cookies et rétractation en ligne
Aperçus
Parcours mobile
Fiche produit web
Page d’accueil complète
Retour aux projets
