Démos de tableau de bord

Six façons de piloter le back-office HL. Mêmes données, mêmes pages, mises en page différentes. Choisissez-en une, puis comparez.

Aperçu avec des données d’exemple. Rien n’est enregistré.

1
Barre latérale

La version d’origine : une barre latérale par sections et un accueil avec indicateurs, actions à traiter et calendrier.
Idéal pour
- Disposition familière, chaque section à un clic
- Le menu replié garde 27 entrées lisibles
- L’accueil réunit chiffres, files et planning
Compromis
- La barre latérale prend de la place sur petit écran
- Accueil chargé pour un usage occasionnel
Pages
2
Accueil calendrier

L’accueil est un calendrier pleine largeur, avec les filtres à gauche et les actions à traiter à droite.
Idéal pour
- Pensé pour la planification : le planning d’abord
- Filtres et files restent visibles en changeant de semaine
Compromis
- Moins de place pour les indicateurs
- Les trois colonnes deviennent des onglets sur mobile
Pages
3
Navigation en haut

Sans barre latérale : un méga-menu avec toutes les sections, un accueil aéré en cartes et une barre d’onglets sur mobile.
Idéal pour
- Toute la largeur pour les tableaux et formulaires
- Pratique sur mobile grâce à la barre d’onglets
Compromis
- Un clic de plus pour les pages profondes
- Le méga-menu cache la carte complète tant qu’il est fermé
Pages
4
Centre de pilotage

Une vue dense pour les opérations, en mode clair ou sombre, avec une bande d’indicateurs et toutes les files côte à côte.
Idéal pour
- Toutes les files d’un coup d’œil, actions sans changer de page
- Mode sombre pour les longues journées
Compromis
- Dense : idéal pour un usage quotidien intensif
- Petits textes, mieux sur grand écran
Pages
5
Boîte de réception

Tout ce qui est à traiter dans une seule liste, le détail à droite et des raccourcis clavier.
Idéal pour
- Tri le plus rapide : une liste, un seul endroit pour agir
- Raccourcis clavier pour les actions courantes
Compromis
- Centré sur la liste : moins de vue d’ensemble chiffrée
- Les raccourcis demandent un temps d’apprentissage
Pages
6
Minimal

Une interface calme et simple, avec une grande recherche, peu de couleurs et de grandes zones tactiles.
Idéal pour
- Facile pour le personnel non technique
- Grands textes et grandes cibles, très accessible
Compromis
- Moins d’informations visibles à la fois
- Plus de défilement sur grand écran
Pages

Différences

Démo	Navigation	Position	Police	Arrondi	Fond principal	Mise en page de l’accueil
1. Barre latérale	Barre latérale par sections, repliable	Gauche, 264 px, blanche	Outfit	16 px	#F7F8FA	Cartes d’indicateurs, actions à traiter, cours du jour, calendrier, prochains cours
2. Accueil calendrier	Rail d’icônes avec panneaux par section	Gauche, 64 px, bleu marine	Plus Jakarta Sans	8 px	#F1F5F9	Plein écran : filtres et mini-mois · calendrier semaine · actions à traiter
3. Navigation en haut	Six menus texte avec méga-menus pleine largeur	Haut, 72 px, blanc	DM Sans	20 px	#FFF8F0	Accueil avec grande recherche, 4 indicateurs, cours du jour \| actions à traiter
4. Centre de pilotage	Barre latérale sombre, sections en majuscules	Gauche, 220 px, sombre	Inter + JetBrains Mono	4 px	#0B0F14	Bande d’indicateurs avec courbes, 5 colonnes de files en kanban
5. Boîte de réception	Dossiers façon messagerie + liste	Gauche, 200 px de dossiers + 420 px de liste	Source Sans 3	6 px	#FFFFFF / #F7F7F8	Boîte de tâches unifiée avec volet de détail
6. Minimal	Six grandes sections, sous-pages en onglets	Gauche, 240 px, claire	Nunito	24 px	Pastels sur blanc	Six grandes tuiles d’action, puis une liste « Aujourd’hui »