Refonte de Bétonsalon Reprise d'un design très insatisfaisant
← Retour à Dev-Web ← Retour à Ragdoll Lane

Étude de cas · UX/UI design

Repenser
Bétonsalon

Une refonte qui conserve l’identité radicale du centre d’art, tout en clarifiant la navigation et en redonnant aux œuvres la place centrale.

Refonte de la page d'accueil
J’accède à l’Ange par ton extase — Klonaris/Thomadaki 26 septembre — 14 décembre 2024
MissionRefonte de l’expérience web
PérimètreAccueil · Expositions · Fiche exposition
DémarcheAnalyse · Identité · UX · UI
01 —

État des lieux

Le site existant possède une identité forte, mais la profusion visuelle et la hiérarchie peu lisible compliquent l’accès aux contenus essentiels.

Constat 01

Hiérarchie fragile

Les nombreux éléments rivalisent au même niveau. L’exposition en cours, les accès de navigation et les informations pratiques manquent de priorité visuelle.

Constat 02

Œuvres en retrait

Les images, pourtant au cœur de la découverte, sont fragmentées. Leur format réduit limite l’immersion et la compréhension du programme.

Constat 03

Parcours dense

La navigation demande un effort important, particulièrement lors d’une consultation rapide ou sur mobile.

Publics

Public jeune et étudiants, chercheurs, artistes, habitants du quartier, enseignants. Attentes principales : découvrir les expositions, comprendre la mission du centre, trouver rapidement les infos pratiques. Usage majoritairement mobile, consultations courtes, recherche d’informations directes.

Données d’usage

Taux de rebond élevé sur la page d’accueil, temps de session faible, peu de profondeur de navigation. Pages d’œuvres très peu visitées. Peu de clics sur les contenus principaux. Simplifier le parcours, renforcer la mise en valeur des œuvres, améliorer la lisibilité et proposer une expérience plus directe, contemporaine et mobile.

Benchmark des centres d’art contemporain

Les autres centres d’art adoptent des pages d’accueil très visuelles, peu de texte, une hiérarchie claire, des visuels immersifs, un menu réduit et lisible, une mise en avant immédiate de l’exposition en cours. Présentation des œuvres plus attractives, design mobile-first, typographies modernes.

Enjeux UX / UI identifiés

Accueil trop chargé, manque de hiérarchie, visuels peu valorisés, navigation confuse. Design daté, images petites, palette incohérente, trop de texte. Priorités : simplifier la navigation, moderniser l’interface, renforcer l’impact visuel, améliorer l’expérience mobile, augmenter l’engagement sur les œuvres.

Capture du site actuel de Bétonsalon
Site actuel — une identité immédiatement reconnaissable, mais un accueil saturé.
02 —

Charte graphique

La direction artistique ne rompt pas avec Bétonsalon : elle organise son langage. Le jaune devient un accent, les fonds neutres créent de la respiration et les photographies restent brutes.

Moodboard de la refonte Bétonsalon
Moodboard

Brut, vivant,
documentaire.

Béton, laine, gestes, espaces d’exposition et lumière naturelle composent un univers tactile. Une esthétique éditoriale et assumée, sans effets décoratifs superflus.

Une palette fidèle, mieux dosée

Jaune historique
#FFFF00
Jaune doux
#FFF8A6
Noir profond
#030303
Blanc
#FFFFFF
Gris musée
#F1F1F1
Beige atelier
#EDE9D5
Titres
Voir.
Lire.
Explorer.
Textes

Une hiérarchie typographique directe

Space Grotesk structure les titres et apporte une voix contemporaine. Roboto reste dédiée aux paragraphes, aux cartels et aux informations pratiques pour garantir une lecture fluide.

Des titres courts, des colonnes mesurées et beaucoup d’espace blanc donnent au contenu le temps d’exister.

03 —

Wireframes

Avant le travail graphique, trois écrans structurent le parcours principal : découvrir le lieu, parcourir les expositions puis entrer dans le détail d’une exposition.

Wireframes des trois pages
Structure globaleLow-fi
Accueil

Une entrée immédiate dans l’univers du centre, suivie des expositions en cours et des informations essentielles.

Expositions

Une lecture chronologique claire : à l’affiche, prochainement, à venir puis archives.

Fiche exposition

Un grand visuel, les informations clés, la présentation et les contenus associés dans un parcours continu.

04 —

Maquettes

La proposition finale installe une grille claire, agrandit les œuvres et conserve les signes distinctifs de Bétonsalon : jaune, noir, matières et franchise typographique.