SaisonProjet personnel · 2026

Les statistiques du football, lisibles par tous

J'ai conçu un site qui rend les statistiques avancées des cinq grands championnats lisibles sans être analyste, et je l'ai fait construire en neuf jours en dirigeant une IA.

Livrable: site web complet, clair et sombre, système de widgets, mise à jour automatique chaque semaine
Rôle: design produit, data design, direction du développement
Cadre: projet personnel, concept non officiel, données publiques : Understat, transfermarkt-datasets, Wikidata, Wikipédia
Équipe: solo, développé avec Claude Code

Contexte

Je voulais qu'un fan comprenne en un coup d'œil ce que valent les chiffres d'un joueur.

Des chiffres partout, peu de lecture

Les sites de statistiques de football empilent les tableaux : xG, xA, passes progressives. On décroche dès le deuxième sigle.

Le point de départ

Le projet est parti de la Ligue 1 seule, le 12 octobre 2026, sous le nom « Ligue 1, en clair ». Neuf jours plus tard, il couvre les cinq grands championnats, la Coupe de France et les coupes d'Europe, sous un autre nom : Saison.

Ne rien prendre directement à un site de statistiques : seulement des jeux de données publics et libres
Comparer à poste égal et par 90 minutes, sinon un remplaçant passe pour le meilleur buteur
Aucune donnée affichée sans repère : un chiffre seul ne veut rien dire
Lisible par tous, y compris pour un œil qui confond le rouge et le vert
Un concept non officiel, protégé par mot de passe et non indexé, car il montre de vrais logos

Ce qu'il fallait concilier

La profondeurDes milliers de joueurs et des dizaines de mesures, pour qui veut creuser.
La lectureUne page qui se comprend sans connaître les sigles.
La justesseDes comparaisons honnêtes, qui disent toujours à qui on compare.

Comment rendre lisibles des statistiques avancées sans les simplifier au point de les trahir ?

Exploration

Chaque piste a été essayée en vrai sur le site, puis gardée ou retirée sur pièces.

Quatre noms, et beaucoup de pistes retirées

J'ai d'abord voulu tout traduire en phrases. Le site est devenu plus juste en enlevant qu'en ajoutant.

Pistes explorées

Une phrase pour chaque chiffre« Il marque 4 buts de plus que prévu » : remplacée par des libellés courts et le détail au survol, plus rapide à lireÉcartée
Des photos et des avatars de joueursRetirés : un joueur se montre par son nom et le logo de son clubÉcartée
Un terrain en 3D en fond d'écranRetiré : il attirait l'œil au détriment des chiffresÉcartée
Un écran découpé en widgets, comme un système d'exploitationRetenu : des blocs presque collés, chacun une seule idéeRetenue
Une empreinte en particules pour résumer un joueurRetirée : belle, mais ses valeurs tournaient toutes autour de la moyenneÉcartée

Le nom, en quatre étapes

« Ligue 1, en clair »Le nom de travail, quand le site ne couvrait que la Ligue 1
« En clair »Quand le site s'est ouvert à l'Europe
« Five »Les cinq championnats, et le foot à cinq
« Saison »Commun au football et au basket, pour pouvoir s'étendre à la NBA

Conception

Chaque choix visuel m'a été présenté sur une planche d'options avant d'être construit.

Une grammaire de formes, appliquée partout

Je n'ai pas écrit le code : j'ai écrit le brief, pris chaque décision et vérifié chaque écran. Claude Code a développé.

Du brief au site

Une forme par type de chiffreUne stat, une seule forme

La barre épaisse chiffréeButs, passes décisives, minutes : la barre sous le nom, le chiffre dans son bout. La même partout.
Le chiffre et son repère« 1er sur 18 », « 2e attaque » : jamais un chiffre seul.

Des pages qui se ressemblentUn retour vaut pour toutes les pages

L'essentiel d'abordLa fiche joueur est passée de 35 blocs à 18 au plus : le détail est dans un panneau qui glisse depuis la droite.
Les planchesPour chaque page : une autocritique mesurée, deux ou trois options, puis mon choix.

Lisible pour tousLa couleur ne dit jamais rien seule

Une palette testéeSix familles de mesures, des teintes qui restent distinctes pour un œil qui confond le rouge et le vert.
Victoire, nul, défaiteVert, orange, rouge, mais aussi une lettre et une forme : pleine, contour, hachures.

Le projet en chiffres

9JoursDu 12 au 20 octobre 2026
2 775Joueurs suivisSaison 2025-26, dans 96 clubs des cinq grands championnats
9CompétitionsCinq championnats, la Coupe de France et trois coupes d'Europe
0Photo de joueurUn nom et le logo de son club suffisent

Tests

Un contrôle automatique des espacements avant chaque « c'est fini » : 4 px entre les blocs, rien qui déborde, aucun texte sous 13 px.

Vérifier chaque écran, à la mesure

Saison n'a pas encore été testé par d'autres personnes. Chaque écran a été vérifié en vrai, en clair, en sombre et sur téléphone.

Vérifié à chaque modification

Les espacements de chaque page, mesurés à l'écran par un script
Le contraste des textes et des contours (WCAG AA)
Les couleurs en vision normale, en deutéranopie et en protanopie
Le clavier : chaque action se fait sans souris, Échap ferme tout
Le téléphone, la tablette et le grand écran

Corrigé en relisant les données

Les finales manquantesLe jeu de données s'arrêtait aux demi-finales : les finales ont été complétées d'après Wikipédia.
Les noms à rallonge« Olympiakos Syndesmos Filathlon Peiraios » est devenu Olympiakos, comme 118 autres clubs.
Un entraîneur en double« FC Barcelone » et « FC Barcelona » faisaient deux lignes dans la même carrière : une seule maintenant.

À faire

Un test avec trois fans de football et un joueur de fantasy
Les matchs de la saison en cours pour les coupes, qu'aucune source gratuite ne donne encore

Bilan

Le plus difficile n'était pas d'ajouter des chiffres, mais de choisir lesquels montrer.

Diriger un produit de données de bout en bout

Un designer qui livreDu brief au site en ligne, en dirigeant une IA, avec une décision sur pièces à chaque étape.
Des chiffres qui se lisentUne grammaire de formes, un repère sous chaque chiffre, le détail au survol.
Des limites assuméesPas encore de test avec d'autres personnes, un concept non officiel montré derrière un mot de passe.

Faire autrement

J'aurais dû fixer la grammaire avant les pages.

J'ai revu chaque page une à une, puis appliqué chaque retour aux autres. Poser dès le départ les formes autorisées (une stat, une seule forme) m'aurait évité de refaire plusieurs fois les mêmes blocs.

Prochaine itération

Un test avec de vrais fans, sur téléphone, pendant un match
La NBA, avec les mêmes formes
Les matchs de coupe de la saison en cours

Crédits

Conçu et dirigé par Martial Deleplanque, développé avec Claude Code. Données : Understat, transfermarkt-datasets (licence CC0), Wikidata, Wikipédia (CC BY-SA) ; photos des trophées : Wikimedia Commons. Typographie : PP Neue Montreal (Pangram Pangram). Les logos des clubs et des compétitions appartiennent à leurs propriétaires : concept non officiel, sans lien avec les ligues ni les clubs.