Web & Mobile Architecture de l'information Design produit

Barré Studio — Simplifier
un monde « barré »

Faire grandir le site d'un studio créatif au rythme de sa fondatrice — passer d'une vitrine à un véritable portfolio, pour mettre son travail au premier plan.

Mon rôle Designer UI/UX en solo
Durée En cours
Outils Figma, Figjam, Claude (prototypage)

Faire grandir un univers barré.

Barré Studio, c'est l'agence d'Agathe Debusschère — direction artistique + prod + casting + stylisme + … une créative multi-casquettes qui a bâti un univers reconnaissable et délibérément barré.

Son site, créé à l'ouverture de l'agence il y a deux ans, portait fidèlement l'audace de sa directrice artistique : des couleurs vives, une énergie pop, des motifs créatifs. Malheureusement, l'écran était saturé et passait son travail artistique et photographique au second plan. Aujourd'hui, son style, ses besoins et ses clients ont évolué — tout comme les tendances. Il était temps que son site grandisse avec elle, sans renier sa signature barrée.

Portrait d'Agathe Debusschère, directrice artistique de Barré Studio

Quatre visiteurs, quatre besoins.

Le site Barré Studio cible des clients très différents, à l'image de la nature multi-casquettes d'Agathe. Identifier chaque profil a guidé l'architecture, afin de répondre aux besoins de chacun.

Marques & annonceurs

Cherchent un casting, une production ou la location d'un lieu. Veulent évaluer rapidement le style et le réseau d'Agathe.

Journalistes & presse

Viennent pour les parutions et le portrait d'Agathe. Cherchent un contact direct et des éléments d'identification rapides.

Modèles & talents

Découvrent le book et le ton du studio. Cherchent une signature et un univers auxquels s'associer.

Petites marques

Veulent retravailler leur direction artistique. Cherchent un partenaire créatif qui les comprend, sans la lourdeur d'une grande agence.

Un univers pop, un site qui peinait à le porter.

L'ancien site de Barré Studio reflétait l'énergie d'Agathe dès son ouverture : magnétique au premier coup d'œil. Problème : le parcours utilisateur était mal défini, plusieurs pages manquaient (location, portrait, parutions), et la palette omniprésente écrasait le contenu au lieu de le sublimer.

Charte graphique V0 — palette d'origine de Barré Studio

Poser les fondations d'une UX claire.

Le premier acte ne touche pas à l'identité : on garde une palette proche de celle d'origine, et on la fait basculer du fond de l'écran vers des touches d'accent. On ajoute les pages manquantes (Location, Portrait, Parutions) et on met en place des filtres pour que les visiteurs trouvent vite ce qu'ils cherchent. Résultat → on respire : un fond crème remplace le damier rose. L'univers reste barré, mais lisible.

Charte graphique V1 — palette et composants de la V1 de Barré Studio
Page d'accueil — V1 de Barré Studio Page Parutions — V1 de Barré Studio Page Contact — V1 de Barré Studio
Page Book — V1 de Barré Studio Page Location — V1 de Barré Studio

Nouvelle architecture

Architecture du site Barré Studio — arborescence des pages

« J'aurais besoin que mon site mette mieux mon travail en avant. J'adorais la charte que j'ai créée, mais elle empiète sur mon travail qui ne ressort pas assez du coup… »

Du studio au portfolio.

Une fois l'architecture solide, Agathe a senti que la palette d'origine ne lui correspondait plus. Cette deuxième phase, en cours, repense la signature visuelle pour recentrer le site sur ce qui compte vraiment : ses photos, ses vidéos, son regard. Moins de site, plus de travail.

Charte graphique V2 — nouvelle palette et composants pour Barré Studio
Page d'accueil — V2 de Barré Studio Page Book — V2 de Barré Studio
D'autres écrans sont à venir !
Home Book — V2 de Barré Studio Page Contact — V2 de Barré Studio

Le chemin parcouru.

Ancien site — palette pop 1 3
Avant
Site actuel — palette recentrée 2
Après

Accueil & ambiance

  • 1Enlever le focus de « Barré Studio » pour le rediriger vers le travail visuel d'Agathe.
  • 2Adoucir la palette de couleur pour éviter la saturation de l'œil.
  • 3Suppression des motifs comme le damier en deux tons.
Ancien site — page Book originale
Avant
Site actuel — navigation enrichie 1 2 2 3
Après

Lisibilité & mise en contexte

  • 1Ajout de 2-3 lignes explicatives du projet pour que l'utilisateur entre dans le monde d'Agathe.
  • 2Nom du projet et nom du client clairement séparés.
  • 3Ajout de composants subtils mais utiles comme la flèche de scroll retour.
Ancien site — page Home Book V0
Avant
Site actuel — page Home Book V2 1 2
Après
Site actuel — page Location 3
Après — Location (V2 à venir)

Architecture & navigation

  • 1Mise en place de filtres par projet et client pour parcourir le book rapidement, sans se noyer dans le contenu — avant on se retrouvait sur une page désorganisée.
  • 2Espaces négatifs généreux et blancs pour laisser l'œil respirer.
  • 3Ajout des pages Location, Portrait et Parution afin de répondre aux besoins d'Agathe et de ses clients.

Les choix qui font la différence.

Animation

  • On quitte le site statique grâce à l'ajout de quelques animations.
  • On joue sur le nom de Barré Studio pour animer les effets de survol en barrant les mots.
  • Sur l'accueil, mise en place d'un bandeau défilant avec les compétences d'Agathe.
  • Mise en place de sticky scroll pour accompagner l'utilisateur d'informations essentielles.
Mise en avant des photos d'Agathe sur la page d'accueil

Présentation photo & vidéo

  • Mise en avant du travail visuel d'Agathe avec les photos dès la page d'accueil.
  • Un effet de hover qui révèle l'image sans texte ni overlay.
  • Des espacements qui laissent une grande place aux photos.
Filtres et navigation

Filtres & navigation

  • Filtres par projet, basés sur les compétences d'Agathe.
  • Filtres par client, pour voir tous les projets réalisés pour une même marque.
  • Parcours utilisateur personnalisé selon ses besoins.

Ce que ce projet m'a appris.

Travailler sur un projet concret avec un autre décideur révèle l'importance du travail collaboratif et de la confrontation des idées.

Évoluer sans se renier

Faire évoluer une identité forte demande de garder son ADN tout en la rendant plus lisible. La palette ne disparaît pas — elle change de rôle.

Une refonte en révèle une autre

Itérer, c'est aussi laisser au client le temps de se découvrir. Après la V1, Agathe a réalisé qu'elle ne voulait pas seulement améliorer son site — elle voulait aussi en changer le style.

Le site n'est pas la star

Pour une directrice artistique, le site est un écrin. Il doit s'effacer juste assez pour que les photos, les vidéos et son travail prennent toute la place.

Moins, c'est mieux

Refondre, c'est souvent enlever plus qu'ajouter. Un fond crème à la place d'un damier rose, une palette en accent au lieu d'être omniprésente — chaque soustraction laisse de la place au travail.

Projet suivant

Péculéo — Votre tirelire de poche, simple et rassurante

Concevoir une application qui transforme l'épargne en une habitude positive du quotidien.

Voir l'étude de cas →