Archétype : tableau de bord

La première page après la connexion. Elle répond à une seule question — « qu’est-ce qui a changé depuis la dernière fois » — et tout ce qui n’y répond pas appartient à une autre page.

Utilisez-le quand

  • L’écran d’accueil d’une app : Sablier, Vision, Nuage en ont tous un.
  • Une vue d’espace qui résume plusieurs ressources sans permettre de les modifier.
  • Un rapport périodique : semaine, mois, exercice.

Pas pour une liste. Un tableau de bord qui finit par un tableau de vingt lignes est un index avec des statistiques en chapeau.

La recette

Tableau de bord

Espace Studio · semaine du 3 août.

Heures pointées 34,5 h +4,2 h vs semaine dernière
Projets actifs 7 2 démarrés ce mois-ci
À facturer 4 820 € sur 3 clients
Stockage 18,4 Go sur 50 Go

Activité

Heures pointées sur les sept derniers jours.

34,5 Heures
  • Refonte Heranova 14 · 40.6%
  • Vitrine LPB 9.5 · 27.5%
  • Suivi GF Conseil 7 · 20.3%
  • Interne 4 · 11.6%
Donut chart of 4 slices totalling 34.5: Refonte Heranova 40.6%, Vitrine LPB 27.5%, Suivi GF Conseil 20.3%, Interne 11.6%
SliceValueShare
Refonte Heranova1440.6%
Vitrine LPB9.527.5%
Suivi GF Conseil720.3%
Interne411.6%

Facturation

Émis et encaissé, par mois.

Ce qu’il faut savoir

  • width="xl" (1200px) est la seule page qui le mérite : quatre cartes statistiques sous 960px tombent à deux colonnes, et la comparaison qui justifiait la rangée disparaît.
  • La rangée de statistiques n’est pas une Section — elle n’a pas de titre parce qu’elle en est un. Un h2 « Vue d’ensemble » au-dessus de quatre chiffres ne dit rien de plus.
  • La gouttière est gap-4, jamais moins : Card est à p-5, et une gouttière plus serrée que le padding des cartes soude la rangée en un seul panneau à coutures.
  • Les 40px entre sections viennent du gap de Page, pas d’une marge sur les sections — c’est ce qui rend le rythme identique d’une app à l’autre.
  • Aucune couleur n’est passée aux graphiques. LineChart, BarChart et DonutChart dérivent leur palette du thème ; une couleur codée en dur survit au mode sombre par accident, pas par conception.