01
Étude de cas / concept-analytics-dashboard
Étude
Tableau de bord analytique
L’interface d’un produit SaaS d’analyse : rendre des chiffres denses lisibles d’un coup d’œil, sans noyer la décision sous le graphisme.
- Rôle
- Conception & développement, de bout en bout
- Stack technique
- Astro · React · TypeScript · Tailwind CSS
02
Aperçu
- Le problème
- La plupart des tableaux de bord empilent les widgets jusqu’à ce que plus rien ne ressorte. La donnée est là, mais la hiérarchie manque : impossible de dire en trois secondes ce qui va bien, ce qui dérive, et ce qu’il faut regarder maintenant.
- La manière
- Le parti pris est éditorial. Une grille stricte, une seule voix d’affichage pour les chiffres clés, le reste en mono pour les étiquettes et les unités. La couleur ne sert qu’à signaler — un accent chaud rare pour ce qui demande attention, jamais pour décorer. Les états de chargement, de vide et d’erreur sont traités comme des écrans à part entière, pas comme des cas en marge. Animation réduite au strict utile : transform et opacity, jamais de mouvement gratuit.
03
Sur ses vrais écrans
En images
04
En détail
L’intention
Prendre le problème classique du tableau de bord analytique et le traiter avec la même exigence éditoriale que le reste de la marque. L’objet n’est pas de montrer plus de courbes, mais de rendre une décision plus rapide.
Hiérarchie d’abord
La première question n’est pas « quels graphiques » mais « que doit lire l’œil en premier ». Les indicateurs de tête prennent la voix d’affichage et l’espace ; le détail se range en dessous, en mono, accessible mais discret. La hiérarchie typographique fait le tri à la place de l’utilisateur.
La couleur comme signal
Sur un fond pierre neutre, l’accent chaud est rare par choix : il marque ce qui dérive ou ce qui demande une action. Quand tout est calme, l’écran reste calme. C’est une discipline, pas une contrainte technique.
Les états ne sont pas des marges
Chargement, vide, erreur : trois écrans pensés au même niveau que l’état nominal, parce que c’est là qu’un produit sérieux se distingue d’une maquette.
Portée
En développement. Les chiffres montrés sont fictifs — un terrain pour montrer une façon de traiter la densité.