PIKS-L
Chargement en cours...
← Toutes les réalisations
Musicien · chiptune2026Site livré

Yoann Turpin

Claviériste, arrangeur, compositeur : 68 albums depuis 2012, de la chiptune aux bandes originales de jeux. Un site en pixel art qui se joue comme une console d'époque — écran titre, mondes par années, un univers et un décor par album, un lecteur maison qui enchaîne les disques, un jeu caché derrière le code Konami — et chaque album publié depuis la console, comme un article.

yoann-turpin.piks-l.com
Page d'accueil du site de Yoann Turpin
Secteur
Musique · artiste
Année
2026
État
Site livré
Pages
70 pages
Délai
1 journée
Mise en ligne
2026
01

Le brief

Un musicien, 68 albums sur Bandcamp et une envie : que le site ressemble à un jeu vidéo d'époque plutôt qu'à une vitrine d'artiste. Chaque page avec sa mise en page et son fond, les pochettes intactes, de la musique dès le premier clic — et, derrière, la console Piks-L pour publier la prochaine sortie sans toucher au code.

02

Ce que nous avons fait

01

Les 68 albums Bandcamp deviennent 68 articles du blog de la console : une adresse par album, sa pochette jamais pixelisée, ses pistes et leurs durées, son lien d'achat.

02

Chaque album a son univers de console — Game Boy, SNES, PS1 — et un décor qui ne se répète jamais : soixante-huit combinaisons, titres lisibles par halo et contour, corps posé sur la pochette floutée.

03

Un lecteur maison : un clic et la musique démarre, les albums s'enchaînent, le lecteur suit la navigation, Media Session, volume à dix crans, état retenu d'une visite à l'autre.

04

Un site qui se joue : écran titre et PRESS START, mondes par années, page About en carte du monde et fiche de personnage, écran de fin THANKS FOR PLAYING, sons de jeu, texte qui tombe en Tetris, jeu caché au code Konami.

03

La palette et les typographies

#14101F#241B3A#F5F1FF#FFD23F#FF5D8F

Cinq couleurs relevées sur le site : le violet profond du fond, le violet des fenêtres, le blanc des écrans, le jaune des surbrillances, le rose des ombres portées

Titres
PRESS START
Press Start 2Ppixel 8 bits · titres, menus, scores
Aa Bb Cc 0123456789
Texte courant
Le même texte, dans la police qui porte les paragraphes du site : c'est elle qu'on lit vraiment, ligne après ligne.
Pixelify Sansgraisses 400 et 700 · textes, fiches, libellés (avec Silkscreen et VT323 pour les écrans)
Aa Bb Cc 0123456789
05

Des pages, en vrai

Les mêmes écrans aux trois largeurs qui comptent — bureau, tablette, téléphone : l'écran de chargement, le haut de la page d'accueil, les sections, le pied de page.

Écran1 280 px de large
Yoann Turpin — Écran de chargement (écran)
Écran de chargement
Yoann Turpin — Haut de la page d'accueil (écran)
Haut de la page d'accueil
Yoann Turpin — Les albums, par années (écran)
Les albums, par années
Yoann Turpin — About (écran)
About
Yoann Turpin — Un album (écran)
Un album
Yoann Turpin — Pied de page (écran)
Pied de page
Tablette834 px de large
Yoann Turpin — Écran de chargement (tablette)
Écran de chargement
Yoann Turpin — Haut de la page d'accueil (tablette)
Haut de la page d'accueil
Yoann Turpin — Les albums, par années (tablette)
Les albums, par années
Yoann Turpin — About (tablette)
About
Yoann Turpin — Un album (tablette)
Un album
Yoann Turpin — Pied de page (tablette)
Pied de page
Mobile390 px de large
Yoann Turpin — Écran de chargement (téléphone)
Écran de chargement
Yoann Turpin — Haut de la page d'accueil (téléphone)
Haut de la page d'accueil
Yoann Turpin — Les albums, par années (téléphone)
Les albums, par années
Yoann Turpin — About (téléphone)
About
Yoann Turpin — Un album (téléphone)
Un album
Yoann Turpin — Pied de page (téléphone)
Pied de page
06

Ce que ça change

01

Publier un album, c'est écrire un article : titre, année, pochette, pistes, lien Bandcamp — la page se met en page toute seule, décor et lecteur compris.

02

Le site est rendu par le serveur et indexé : 68 pages d'album avec leurs données MusicAlbum et la durée de chaque piste, un plan de site, une recherche, un manifeste d'application avec ses raccourcis.

03

Sur téléphone, tout tient sur une rangée : logo, lecteur compact, menu ; le filtre des albums tient sur une ligne en bas de l'écran.

07

Ce que le client gère lui-même

Depuis la console, sans toucher au code.

Les albums : fiche, pochette, pistes, lien Bandcamp
Les textes de l'accueil et de la page About
Les liens Bandcamp, SoundCloud, Facebook
Le titre et la description de partage
08

Les outils derrière ce site