MÉLIÈS

Étude de cas — Expérience digitale

00
← Tous les travaux
Projet 04 Expérience digitale UX / UI & direction artistique

MÉLIÈS la boîte à truc

Une expérience digitale immersive autour de Georges Méliès pour la Pinault Collection. On n'ouvre pas un site : on entre dans un théâtre — et c'est le magicien lui-même qui raconte.

Commanditaire
Pinault Collection
Sujet d'école
Rôle
Direction artistique, identité, UX/UI, design system
Format
Expérience web immersive
Desktop
Sujet
Georges Méliès
1861 – 1938

01 — Le brief

Rendre hommage,
sans faire un musée en ligne

La Pinault Collection réunit plusieurs milliers d'œuvres d'art moderne et contemporain — tableaux, photographies, installations visuelles et sonores. Elle souhaite proposer des expériences digitales autour de plusieurs artistes, sans lien avec ses événements physiques.

La commande : une expérience digitale immersive qui permet au public de découvrir l'histoire de Georges Méliès, pour lui rendre hommage et révéler la richesse de son patrimoine.

Le mot qui engage tout, c'est « immersive ». Une frise chronologique avec des vignettes cliquables remplirait le cahier des charges et raterait complètement le sujet. Méliès n'a pas archivé le cinéma : il l'a mis en scène. Une expérience qui lui rend hommage doit faire la même chose.

Le premier réflexe était une frise chronologique. C'est exactement ce qu'il ne fallait pas faire.
Le virage du projet

02 — Le parti pris

L'interface
est un théâtre

Méliès venait de la scène avant de venir de l'écran. Il a racheté le théâtre Robert-Houdin, tourné dans un studio aux décors peints en trompe-l'œil, employé des acteurs de music-hall. Le cinéma, chez lui, est du théâtre filmé — et truqué.

D'où le principe de navigation : l'écran n'est pas une page, c'est une scène. Rideaux rouges, chevalet, cadres dorés accrochés au mur, lustre, public en ombre chinoise au premier plan. Le contenu n'est pas listé, il est posé dans le décor. On explore un lieu, on ne parcourt pas une arborescence.

Le titre découle du même geste. « La boîte à truc » désigne l'attirail du prestidigitateur — l'endroit où sont rangés les tours. Le nom promet une découverte des coulisses, pas une notice biographique.

Écran principal de l'expérience : une scène de théâtre aux rideaux rouges, Méliès en silhouette dans un grand miroir au centre, un chevalet et des cadres accrochés autour, le public en ombre au premier plan
La scène — chaque objet du décor est une entrée de contenu

03 — Le logotype

Une affiche
de baraque foraine

Le lettrage est dessiné, pas composé : capitales étroites, empattements irréguliers, lignes cintrées en arc de cercle. C'est le vocabulaire des affiches de spectacle de la fin du XIXe siècle — celles qu'on collait sur les murs pour annoncer un illusionniste de passage.

L'arc est la seule contrainte forte. Il fait tenir le titre sur deux lignes sans hiérarchie de taille, et il installe immédiatement le registre : ce n'est pas une institution qui parle, c'est un montreur de tours.

Le logotype en blanc sur fond noir, les deux lignes cintrées en arc
Version blanche — usage courant
Le logotype en noir sur fond blanc
Version noire — supports clairs
Le logotype blanc cerné d'un halo rouge diffus, sur fond noir
Version à halo rouge — signature de l'expérience

03.1 — Réserve

Les règles de zone de protection sont posées à partir d'une unité X : le titre ne se colle jamais à un bord, et rien ne vient s'inscrire dans le rectangle qui l'entoure. Sur un décor aussi chargé qu'une scène de théâtre, cette respiration est ce qui garde le logo lisible.

Grille de construction du logotype : la zone de protection définie par une unité X en largeur et en hauteur autour du lettrage
Zone de protection — l'unité X en largeur et en hauteur

04 — Design system

Un inventaire
d'accessoires

Le design system de ce projet ne ressemble pas à un design system. Ce n'est pas une bibliothèque de composants : c'est un inventaire d'accessoires de scène — cadres dorés, chevalet, miroir, masque, lustre, corde, rideaux.

Chaque élément a une fonction d'interface derrière sa fonction décorative. Le cadre doré affiche une œuvre. Le miroir fait apparaître Méliès. La chemise « Archives » ouvre les chapitres. Le bouton Entrer dans l'expérience est un cartouche aux bords déchirés, comme un ticket d'entrée.

La palette suit le même raisonnement : rouges de rideau, ors et bruns de bois verni, noirs profonds de salle éteinte, et un vert olive qui vient des affiches d'époque. Deux typographies seulement — un script pour les titres, Arial pour tout le reste, parce que le décor porte déjà toute la personnalité.

Planche du design system : éléments graphiques découpés, éléments visuels d'archives, bouton et icône, palette de dix couleurs et les deux typographies
Design system — accessoires, palette, typographies, composants
Rouge rideauAccent principal
Or / boisCadres et mobilier
Vert oliveAffiches d'époque
Noir de salleFond

05 — Le parcours

Quatre temps,
comme un spectacle

  1. 01

    Le seuil

    Rideau fermé, cartouche, une phrase d'accueil. Un seul bouton : entrer.

  2. 02

    La scène

    Le décor se découvre. Chaque objet est une porte vers un contenu.

  3. 03

    Le tableau

    Un cadre s'avance, une archive s'affiche, un texte l'accompagne.

  4. 04

    Les archives

    Les chapitres de la vie, présentés comme des photographies posées sur une table.

Écran d'accueil : le logotype dans un cartouche ovale devant un rideau rouge, le message de la Pinault Collection et le bouton Entrer dans l'expérience
Le seuil — une seule action possible
Un cadre doré présente une gravure d'archive, accompagné d'un panneau de texte intitulé « Comment Méliès mettait en scène ? »
Le tableau — l'archive et son commentaire
Deux photographies d'archive présentées comme des polaroids posés en biais, titrées « De l'illusion à la caméra » et « Les voyages dans l'imaginaire et la chute »
Les archives — deux chapitres, deux photographies
Mosaïque de photographies d'archives en noir et blanc : scènes de tournage, studio, boutique de confiserie et jouets, portraits de Méliès
Mise en scène — la mosaïque documentaire

06 — La voix

C'est Méliès
qui parle

Toute la biographie est écrite à la première personne. Pas de notice, pas de « il naquit en 1861 » : « Je suis né le 8 décembre 1861 à Paris, dans une famille de fabricants de chaussures. »

Ce choix d'écriture fait plus pour l'immersion que n'importe quel effet visuel. Il transforme le visiteur en spectateur d'un récit, et le contenu patrimonial en confidence. On ne consulte plus une fiche : quelqu'un vous raconte sa vie.

Le texte suit la trajectoire complète, ascension comprise et chute comprise — la cordonnerie refusée, la magie découverte en Angleterre, le Théâtre Robert-Houdin racheté en 1888, la projection des frères Lumière en décembre 1895 reçue comme une révélation. Puis la seconde partie, plus sombre. Rendre hommage n'oblige pas à raconter une réussite continue.

Panneau de récit « De l'illusion à la caméra (1861-1896) », écrit à la première personne, superposé au décor de la scène
Le récit — première personne, sur fond de scène

07 — Ce que ça a appris

À compléter

Cette section attend le retour d'expérience réel : les pistes écartées, la recherche iconographique, et ce qui résisterait à une vraie mise en production.

[ Section à rédiger — voir le commentaire dans le code source ]