Une boutique en ligne pour artisan d’art : la maquette Atelier Brumesève

Le contexte

Un artisan d’art vend surtout de la main à la main : sur un marché, un salon, une fête médiévale. Entre deux dates, les demandes arrivent par message privé : « elle est encore disponible ? », « vous l’envoyez ? », « je peux la récupérer au prochain marché ? ». Chaque pièce n’existe qu’une fois, et l’artisan doit retirer lui-même de ses réseaux celles qui sont parties. J’ai imaginé l’Atelier Brumesève pour prototyper la réponse : une boutique où chaque création affiche son prix et sa disponibilité, où le client paie en ligne puis choisit entre un retrait au marché et un envoi en Colissimo. La marque, l’artisan, les textes, le catalogue et les coordonnées sont fictifs. La direction artistique vient d’une proposition de refonte que j’avais préparée pour un artisan du bois : je l’ai gardée telle quelle et j’ai remplacé tout le reste pour pouvoir vous la montrer.

Direction artistique

J’ai choisi un mode sombre permanent, un noir bleuté profond, et j’ai laissé la lumière aux objets : le bois tourné, le bronze et l’étain accrochent des reflets chauds sur fond sombre. Le texte reste ivoire, jamais blanc pur. Le bronze signale les prix, les liens et les boutons, et un vert spectral n’apparaît qu’à petites doses. Les titres sont en Cinzel, des capitales qui rappellent la gravure ; les citations et les essences de bois en Cormorant Garamond italique ; l’interface et les formulaires en Inter. Chaque collection a sa teinte : bronze pour les Runiques, vert forêt pour les Sauvages, bois chaud pour les Novices. D’une section à l’autre, les fonds se fondent en dégradé au lieu de se couper net : vous descendez la page comme vous entreriez dans un sous-bois.

Architecture & contenu

La boutique compte dix écrans. L’accueil présente l’atelier, ses trois collections (Runiques, Sauvages, Novices), les dernières créations, une citation de l’artisan et les marchés où le trouver. La page Baguettes réunit les 24 pièces, filtrables par collection. Chaque fiche montre la photo en grand, l’essence de bois, le prix, un encart « L’éclat » qui raconte le détail de la pièce, puis trois créations du même univers. Les Reliques regroupent orbes, œufs et fioles ; Évènements indique où trouver le stand ; Contact accueille les demandes de création sur mesure. Le panier, la commande et la confirmation ferment la marche. J’ai écrit chaque texte dans la voix de l’artisan : concret, chaleureux, avec juste ce qu’il faut de merveilleux.

Parcours d’achat

Le tunnel d’achat est la pièce maîtresse de la maquette. Le client ajoute une baguette depuis sa fiche ou une relique depuis la grille ; un message confirme l’ajout, et le bouton Panier du menu affiche le nombre de pièces. Le panier n’a pas de champ quantité, puisque chaque pièce est unique. La commande tient en trois blocs : coordonnées, mode de remise, paiement. Le client choisit le retrait offert au marché des créateurs ou l’envoi en Colissimo suivi à 8 € ; le formulaire ne lui demande son adresse que s’il choisit l’envoi, et le total se met à jour aussitôt. S’il oublie un champ, une alerte s’affiche, chaque erreur s’écrit sous son champ et le curseur se place sur le premier à corriger. Après le paiement, il reçoit un numéro de commande et un récapitulatif, et la pièce passe en « vendue » partout sur le site : sa fiche se verrouille et propose de demander une création similaire. Le panier survit à un rechargement de page sans garder la moindre coordonnée.

Interactions & accessibilité

Le site s’ouvre sur une courte marche dans la forêt : la photo avance, la lumière monte, puis le nom de l’atelier apparaît. Un clic suffit pour entrer. Sur ordinateur, le curseur devient une petite flamme qui suit la souris et sème des étincelles, comme au bout d’une baguette. Au survol, les cartes prennent un liseré bronze et leur photo se rapproche. J’ai mesuré le contraste des textes posés sur la photo de forêt, pixel par pixel, pour qu’ils restent lisibles pendant toute l’animation, et le focus clavier reste visible sur chaque élément. Si votre système demande moins d’animations, l’ouverture et les effets s’effacent.

Pourquoi une maquette dynamique ?

Sur une maquette figée, vous imaginez la boutique. Sur celle-ci, vous ajoutez une pièce au panier, vous choisissez le retrait au marché et vous voyez la fiche passer en « vendue », avant que j’écrive la première ligne du site définitif. Pour un vrai projet, ce design devient la vitrine de ma boutique en ligne clé en main, formule Signature : vos créations et vos photos, le paiement Stripe, les étiquettes Colissimo, un stock tenu à jour sur le serveur, un back-office que vous utilisez depuis votre téléphone, et l’adaptation mobile de la boutique.

Galerie

Résultats

• ✓Maquette navigable : dix écrans, de l’accueil à la confirmation de commande
• ✓Tunnel d’achat testable de bout en bout : panier, retrait ou livraison, paiement simulé et numéro de commande
• ✓Pièces uniques gérées : une pièce commandée passe en « vendue » et ne peut plus rejoindre un panier
• ✓Base prête pour la boutique réelle d’un tourneur sur bois, d’un céramiste, d’un bijoutier ou d’un coutelier

Questions fréquentes