Orée
Une boutique en ligne sur mesure pour un torréfacteur lyonnais, où le packaging porte toute l’identité.
- Prestations
- Direction artistique, Identité packaging, E-commerce, Développement
- Service
- Site premium sur mesure
- Technologies
- Astro, CSS moderne, SVG, JavaScript
- Statut
- Étude — marque fictive, 2026 Pourquoi ?
Le brief
01 Le point de départ
Orée est une marque fictive imaginée pour cette étude — un torréfacteur installé à Lyon, qui torréfie chaque mardi en petits lots et tient un comptoir dans le 1er arrondissement. La boutique fonctionne ; la vente en ligne et l’abonnement, beaucoup moins.
02 L’enjeu
Se démarquer dans un marché où tous les torréfacteurs se ressemblent, et donner envie de s’abonner sans alourdir l’achat.
03 Notre réponse
Une couleur et un motif par origine, des sachets dessinés en SVG comme visuels produits, un configurateur d’abonnement au prix mis à jour en direct.
04 Direction artistique
Une identité, pas un thème.
Chaque origine reçoit une couleur et un motif — l’éthiopien en arcs abricot, le colombien en rayures tomate, le kényan en pois sauge. Dessinés en SVG, les sachets deviennent les visuels produits, et la Bricolage Grotesque, dense et gourmande, donne le ton.
- 01
Le produit comme identité
Le packaging suffit à reconnaître la marque, du site au comptoir.
- 02
L’abonnement mis en scène
Trois choix, un prix affiché en direct, aucune surprise au paiement.
- 03
La fraîcheur comme promesse
« Torréfié mardi, dans votre tasse jeudi » — un bénéfice concret, répété du bandeau au pied de page.
Crème
#F4EEE3
Espresso
#24160F
Tomate
#E4572E
Abricot
#F2B84B
Sauge
#7D9C82
Bleu Cerrado
#35608F
Torréfié mardi.
Pêche, jasmin, miel — filtre, 250 g.
05 Le site
De haut en bas.
Catalogue filtrable et configurateur d’abonnement en JavaScript natif, sachets SVG réutilisables pour chaque nouveau café, masques CSS pour le ticket du comptoir. Aucune photographie : la page reste légère et nette sur tous les écrans.
06 Sur mobile
Pensé pour le pouce.
Le catalogue passe sur deux colonnes, le configurateur s’utilise d’une main et le panier reste à portée de pouce.
07 Détails
Là où se joue la différence.
— Ce que le projet démontre
En résumé.
- Une identité reconnaissable sans une seule photo produit.
- Un système de packaging extensible — un nouveau café, c’est une couleur et un motif.
- Un tunnel d’abonnement court, où le prix n’est jamais une surprise.
Mesures
- Performance
- 98 / 100
- Accessibilité
- 100 / 100
- Affichage principal (LCP)
- 1,5 s
- Poids de la page
- 117 Ko
Mesuré le 27 septembre 2026 — Lighthouse 12, mobile simulé, build de production servi en local sans compression.
- Astro
- CSS moderne
- SVG
- JavaScript