Temps I
Écouter
Le premier geste du visiteur, c’est d’appuyer sur lecture.
Sur le siteL’accueil pose le nom, une phrase et deux boutons : « Écouter la musique » et « Voir les œuvres ». Le lecteur se fixe en bas de l’écran et suit toute la visite.
Étude de cas · Identité et site d’artiste
Xavier Jean‑Jacques
Le site d’un pianiste qui écrit pour l’image. Une seule page, un lecteur qui ne s’arrête jamais, et chaque pièce qui donne sa couleur à l’écran.
Un pianistequi écrit pour l’image.
Entre 2013 et 2016, Xavier Jean-Jacques écrit neuf pièces pour l’image : orchestre, piano seul, musique de film, publicité.
Il m’a demandé un site pour les faire entendre. Le projet a suivi les étapes d’un site de client : cadrage, filaires, design system, maquettes, puis un prototype qui joue.
Ce que le site doit faire
- EntendreFaire écouter sa musique dès le premier écran.
- ChoisirPasser d’une pièce à l’autre sans couper l’écoute.
- ÉcrireDonner envie de le contacter pour un projet d’image.
La matière : les neuf pièces, chacune avec la couleur qu’elle prend sur le site
- 001Sur la route de la rédemptionOrchestral, épique4:10
- 002Un long voyageOrchestral5:32
- 003Ce matin-làPiano, intime3:18
- 004KrystelPiano3:46
- 005Piano BalladePiano4:02
- 006Sin of the FishermanMusique de film, quatre parties6:04
- 007Odyssée CartierMarque, réécriture musicale1:30
- 008UnilomPublicité, électronique1:30
- 009Carte de vœuxPublicité, piano1:00
Une visiteen quatre temps.
Le site se parcourt comme on écoute un disque : on entre par la musique, on choisit une pièce, on rencontre le pianiste, puis ceux qui l’ont formé.
Temps II
Choisir
Passer d’une pièce à l’autre sans jamais couper le son.
Sur le siteChaque pièce prend sa couleur, et l’écran avec elle. Un anneau suit la lecture sur le bouton, une pastille « En écoute » bat au rythme du son réel.
Temps III
Rencontrer
Savoir qui joue, en trois phrases et quatre repères.
Sur le siteSa formation, sa façon d’écrire, son outil. Puis deux gestes possibles : écouter « Ce matin-là » ou le contacter.
Temps IV
S’inspirer
Les dix musiciens qu’il cite, chacun dans la couleur d’une de ses pièces.
Sur le siteUn portrait détouré devant son nom, une plaque de couleur, deux lignes sur ce que Xavier en a retenu, et un bouton pour écouter la pièce qui le montre.
La couleursuit la musique.
Pas de charte figée : la palette naît des neuf pièces. Chacune reçoit une couleur tirée de son image, et le site la prend quand on l’écoute.
Le reste ne bouge pas : un papier clair, une encre, un or réservé aux fonds sombres. Les titres sont composés en Archivo, très larges, pour que le nom d’une pièce se lise comme une affiche.
Une page, un lecteur
Une seule page continue et un lecteur fixe : la musique ne s’arrête pas quand on change de rubrique.
Une couleur par pièce
Neuf fonds, alternés sombres et clairs, tous vérifiés en contraste : de 5,5 à 14,1 pour 1 sur les textes.
Des retours d’écoute
Anneau de progression, pastille « En écoute », durée réelle : on sait toujours ce qui joue et où l’on en est.
Dix portraits,dix couleurs.
De Chopin à Nobuo Uematsu, Xavier cite lui-même ceux qui l’ont formé. Le site les montre comme des influences, et ramène toujours à sa musique.
Chaque portrait prend le fond d’une pièce : Hans Zimmer celui de « Un long voyage », John Williams celui d’« Odyssée Cartier ». Le nom s’écrit en deux graisses, derrière la silhouette ; le texte ne le recouvre jamais.
Hans Zimmer 
Joe Hisaishi 
John Williams 
Sergueï Rachmaninov 
Nobuo Uematsu 
Hayao Miyazaki 
Frédéric Chopin 
John Powell 
Thomas Newman 
Émilie Simon
Du cadrageau prototype.
-
1Cadrage
Objectifs, cible, contenus disponibles et parcours du visiteur, avant le moindre pixel.
-
2Filaires
Cinq rubriques sur une seule page, desktop et mobile, avant toute couleur.
-
3Design system
Les couleurs des pièces en variables, les styles Archivo, le lecteur et ses états en composants.
-
4Maquettes, puis prototype
Desktop et mobile dans Figma, puis un prototype codé qui joue vraiment : lecture continue, clavier, mouvement réduit respecté.
Un sitequi ne coupe jamaisla musique.
Du premier écran au formulaire de contact, le lecteur reste là. On traverse le site comme on écoute un disque, d’un bout à l’autre.
Xavier Jean-Jacques, pianiste.
- Musique
- Xavier Jean-Jacques, neuf pièces écrites entre 2013 et 2016
- Direction artistique, UX, UI et site
- Franck Fibleuil
- Outils
- Photoshop, Figma ; prototype codé en HTML, CSS et JavaScript
- Écoute dans le prototype
- Morceaux de Kevin MacLeod (incompetech.com), CC BY 4.0
- Mises en situation
- MacBook Pro, MacBook et iPhone 16, mockups-design.com