Une boutique en ligne qui vend sans distraire.

Une petite marque de cosmétiques vend d’abord sur les marchés et par le bouche-à-oreille. Le jour où elle passe en ligne, elle se retrouve souvent avec un modèle de boutique générique : des cases identiques, des photos dépareillées, un tunnel d’achat qui ressemble à tous les autres. Ce qui faisait sa différence disparaît.

Le brief tient en trois points : montrer les produits comme en vrai, dans une seule lumière ; expliquer en quoi la marque est différente, formules courtes et fabrication à Bordeaux ; et rendre l’achat évident, du premier regard au panier, sans friction.

• Un diaporama plein écran en ouverture : la gamme, une texture, un geste. Trois slides qui s’enchaînent lentement, avec pause, flèches et navigation au clavier.
• Une boutique filtrable par besoin : hydrater, apaiser, nettoyer, nourrir. Les produits se réorganisent sans rechargement.
• Une fiche produit en panneau : l’image pleine hauteur, la contenance ou la recharge, la quantité, puis trois volets (ce qu’il fait, comment l’utiliser, composition).
• Un panier latéral avec le seuil de livraison offerte qui se remplit, les quantités modifiables et un récapitulatif avant commande.
• Le rituel matin et soir, en quatre gestes, chaque étape renvoyant au produit concerné.
• Les ingrédients, les avis, l’atelier : trois sections qui installent la confiance avant le passage en caisse.

Une seule lumière pour toute la gamme. Les onze images de la boutique ont été créées pour la démonstration à partir d’une même scène : pierre calcaire humide, lumière de matin, sauge et fleur d’oranger. Cette cohérence fait l’effet « marque » bien plus que n’importe quel logo. Chez un client, une séance photo cadrée de la même façon donne le même résultat.

Une typographie de parfumerie, pas de place de marché. Les titres en Instrument Serif, fins et serrés, les prix et les boutons en Manrope. La palette vient des produits : ivoire, sauge, ambre. Aucune couleur n’est là pour attirer l’œil sur une promotion.

Le mouvement répond à un geste. Le panneau produit glisse, le panier s’ouvre, le compteur rebondit à l’ajout. En dehors de cela, la page est calme : le diaporama est la seule animation qui démarre seule, et elle se met en pause au survol ou si le visiteur a demandé moins d’animations.

Honnête sur ce qui est simulé. Un bandeau en haut, une mention au pied, et un panier qui annonce qu’aucun paiement n’a lieu : le visiteur sait à tout moment qu’il essaie une démonstration.

Une page HTML, une feuille de style, un script d’environ deux cents lignes qui porte le catalogue, les filtres, la fiche produit, le panier et le diaporama. Les photos sont servies en deux tailles et chargées à la demande. Aucune dépendance, aucun outil tiers.

Sur une boutique livrée, le catalogue et les stocks viendraient d’une base de données ou d’une plateforme de vente, le paiement passerait par un prestataire sécurisé, et chaque commande déclencherait un e-mail de confirmation. L’interface présentée ici est conçue pour se brancher sur ces services sans être redessinée.

• La boutique complète, ses fichiers sources et sa mise en ligne sur un hébergement à son nom.
• Le catalogue réel : produits, contenances, recharges, prix, stocks.
• Le paiement, les e-mails de commande et le suivi des expéditions reliés à ses outils.
• Une séance photo cadrée pour la boutique, ou l’intégration de ses photos existantes.
• Des explications de prise en main : ajouter un produit, changer un prix, mettre une référence en rupture.

Périmètre, prix et délai sont précisés dans un devis avant de commencer. Une boutique de cette taille se réalise en quelques semaines, catalogue et photos fournis.