IDENTITÉ NUMÉRIQUE / DESIGN WEB
PROJET DE STUDIOAtelier Rouge
Une maison de cosmétiques imaginée comme un univers numérique complet. Portraits, couleur et texture ouvrent la conversation ; collection, nuances, rituels et contenus éditoriaux en font une expérience d’achat réfléchie.
Une exploration indépendante d’AsturaWeb. Le design d’une expérience numérique, sans commande client.
- SECTEUR
- Beauté · E-commerce · Direction éditoriale
- LANGUE DU SITE
- Français
- ÉDITION
- 2026
- PÉRIMÈTRE
- Identité, UI et direction de production
01 / LE CONTEXTE
Le désir naît d’une image. L’achat suit un parcours.
Atelier Rouge est un concept indépendant de beauté à la sensibilité parisienne. La proposition relie une marque désirable à son fonctionnement : présenter les produits, expliquer leurs variantes, guider le choix et préparer les campagnes dans un même système.
- Collections, teintes, finis et sélection sauvegardée
- Rituels, campagnes et journal reliés au catalogue
- Commandes, stock par teinte et publication éditoriale
Les visuels conservent leur langue d’origine. Le récit du projet suit la langue choisie sur AsturaWeb.
02 / LE DÉFI
Conserver l’intensité d’une campagne beauté sans masquer les informations nécessaires à l’achat. La teinte, le fini, l’usage et la livraison doivent être aussi clairs que l’image est mémorable.
L’IDÉE
Bordeaux, ivoire et noir. Une sérif contrastée donne sa voix à la marque ; une grille précise organise le catalogue. Gros plans, pigments et objets alternent avec des espaces de lecture et des actions reconnaissables.
03 / AU-DELÀ DE L’ACCUEIL
Un système,
au-delà du premier écran.
L’accueil réunit campagne, collection, rituel et journal. Chaque entrée mène à une décision différente : explorer un fini, choisir une teinte, apprendre un geste ou retrouver sa sélection. La stratégie de contenu relie ces entrées à des produits précis.
LE LANGAGE DU PROJET
Du caractère, avec justesse.
Couleur et matière
Bordeaux profond · ivoire · noir chaud
Typographie et hiérarchie
Une sérif expressive pour les campagnes et le récit ; des libellés discrets et une hiérarchie stable pour choisir et acheter.
Image et mouvement
Portraits rapprochés et textures à grande échelle. La direction de mouvement propose des fondus brefs et des changements de cadrage ; les images fixes expriment cette intention sans charger de vidéos automatiques.
LE DÉSIR, ÉCLAIRÉ
Une collection.
Plusieurs façons de choisir.
Le catalogue permet de comparer les familles et les finis. La fiche rapproche la texture, nomme chaque teinte et réunit usage, livraison et prochaine étape. Les recommandations complètent un choix sans transformer la page en vitrine interminable.
DU CHOIX À LA COMMANDE
Le panier conserve le produit, la teinte, la quantité et le total. Livraison et paiement forment des étapes définies ; le compte et les favoris permettent de reprendre le parcours.
04 / RESPONSIVE ET INTERACTION
Un autre écran.
La même intention.
La page d’accueil longue défile dans un téléphone aux proportions réalistes. Deux autres écrans présentent un aperçu de la marque et une fiche produit. La navigation se resserre ; les teintes, le prix et l’action d’achat gardent leur priorité.
DES CONTENUS QUI OUVRENT DES PARCOURS
L’image attire.
Le récit accompagne.
Campagne, journal et rituel ont des fonctions distinctes. La campagne construit l’identité ; le journal ouvre la découverte ; le rituel explique comment associer les produits. Ils partagent les références du catalogue pour assurer la continuité entre inspiration et achat.
INTENTION D’INTERACTION
Des galeries qui préservent le focus, un choix de teinte nommé et des transitions courtes entre les chapitres. Le mouvement accompagne la lecture et se réduit selon les préférences de la personne.
DERRIÈRE LA CAMPAGNE
Une marque expressive.
Un système pour en prendre soin.
L’espace de gestion relie références, teintes et stocks aux commandes, lancements et contenus. Les états brouillon, révision et publication distinguent la préparation du moment où une campagne arrive au public.
Interface de gestion proposée pour ce concept. Les commandes et quantités illustrent des tâches, pas une activité commerciale réelle.
- 01Préparer
Produit, variantes, images et conditions dans une fiche commune.
- 02Relier
Associer les produits aux rituels, articles et campagnes.
- 03Relire et publier
Vérifier disponibilité, contenu et droits avant le lancement.
DU BRIEF AU SYSTÈME
- 01Contexte
- 02Contenu
- 03Structure
- 04Direction visuelle
- 05Système UI
- 06Responsive
Développement, intégrations et validation de production relèvent d’une phase ultérieure, définie selon le périmètre réel.
05 / DIRECTION TECHNIQUE
Pensé pour envisager
la production.
Une mise en œuvre recommandée pour ce concept, sans prétendre à un site déjà développé ou déployé.
La production pourrait associer React et TypeScript à Shopify pour les produits, variantes, stocks, commandes et paiement hébergé. Un CMS structurerait les campagnes, articles et rituels liés aux références du catalogue. L’espace de gestion nécessiterait des droits par rôle, une prévisualisation et des validations de publication. Ces interfaces définissent des parcours proposés ; elles ne représentent ni une boutique connectée ni des ventes réelles.
- React
- TypeScript
- Shopify / Commerce API
- CMS
- WebP / AVIF
- HTML sémantique, clavier et contraste
- Images responsive et chargement progressif
- Contenu indexable et structure SEO
Hébergement, mesure avec consentement et données structurées seraient définis à partir d’informations vérifiées et de besoins concrets.
PARLONS-EN
Un nouveau site, une refonte ou une idée encore à préciser. Écrivez-nous : nous verrons ensemble ce qui mérite d’être construit.
Parlez-nous
de votre idée.
Donner forme à mon projet
Basé dans les Asturies. Des projets à distance en Espagne, en Europe et à l’international.
Pas besoin de maîtriser la technique ni d’avoir tout décidé. Dites-nous ce que vous faites et ce que vous souhaitez améliorer. C’est notre point de départ.
Un devis sur mesure. Une proposition claire, sans engagement.
POUR LANCER LA CONVERSATION
- Ce que fait votre entreprise
- Ce que vous aimeriez améliorer
- Votre site actuel, si vous en avez un