itinova-budget-si/ideas.md

Idées de design — Budget Renouvellement SI 2027 - Itinova

Contexte

Application interne de gestion budgétaire pour le service informatique d'Itinova (groupe médico-social). Outil professionnel destiné à des responsables SI et directeurs d'établissements.

---

0.07

Design Movement: Corporate Modernism — Bauhaus appliqué au tableau de bord analytique

Core Principles:

1. Hiérarchie visuelle stricte : chaque information a un rang clair (titre > chiffre clé > détail)
2. Densité informationnelle maîtrisée : beaucoup de données sans surcharge cognitive
3. Couleur fonctionnelle : la couleur encode le sens (vert = bon, orange = attention, rouge = critique)
4. Grille asymétrique : sidebar fixe à gauche, contenu principal à droite

Color Philosophy:

• Fond principal : blanc cassé chaud #F8F6F2
• Sidebar : bleu marine profond #1A2E4A (autorité, confiance)
• Accent primaire : bleu Itinova #0066CC
• Alerte vétusté : orange ambré #E8820C
• Succès/récent : vert sauge #3D7A5F
• Texte : anthracite #2C2C2C

Layout Paradigm: Sidebar fixe (240px) + zone principale scrollable. En-tête avec KPIs globaux en bandeaux horizontaux. Liste des établissements en grille 3 colonnes avec cards. Fenêtre de détail en panneau latéral droit (drawer) ou modal pleine largeur.

Signature Elements:

1. Barre de vétusté colorée (rouge/orange/vert) sur chaque card établissement
2. Chiffres budgétaires en grande typographie avec unité en exposant
3. Ligne de séparation colorée en haut de chaque section (liseré 3px couleur primaire)

Interaction Philosophy: Hover sur les cards révèle les détails. Clic ouvre un drawer latéral avec le détail complet. Filtres persistants dans la sidebar.

Animation:

• Entrée des cards : fade-in + slide-up (stagger 50ms)
• Ouverture drawer : slide depuis la droite (300ms ease-out)
• Compteurs budgétaires : animation count-up au chargement

Typography System:

• Titres : Sora Bold (moderne, institutionnel)
• Corps : Inter Regular/Medium
• Chiffres clés : Sora ExtraBold, taille 2xl-4xl

0.06

Design Movement: Data-Forward Minimalism — Inspiration Bloomberg Terminal modernisé

Core Principles:

1. L'information prime sur la décoration
2. Contraste élevé pour lisibilité en conditions de bureau
3. Tableaux comme élément central, pas les cards
4. Navigation par onglets horizontaux

Color Philosophy:

• Fond sombre #0F1923 (confort visuel sur longues sessions)
• Texte blanc #E8EDF2
• Accent cyan #00B4D8 pour les chiffres importants
• Rouge #FF4757 pour les équipements à renouveler
• Vert #2ED573 pour les équipements récents

Layout Paradigm: Full-width avec navigation top. Dashboard principal avec 4 KPI cards en ligne. Tableau principal avec tri/filtre. Modal de détail.

Signature Elements:

1. Indicateurs LED (points colorés) pour le statut de vétusté
2. Mini sparklines dans les cells du tableau
3. Header avec gradient sombre

Interaction Philosophy: Tri de colonnes, filtres inline, export CSV.

Animation: Transitions subtiles, pas d'animations ostentatoires.

Typography System:

• JetBrains Mono pour les chiffres et codes
• IBM Plex Sans pour les libellés

0.08

Design Movement: Institutional Clarity — Design système gouvernemental français modernisé

Core Principles:

1. Accessibilité maximale (WCAG AA)
2. Structure tabulaire claire avec alternance de lignes
3. Couleurs institutionnelles sobres
4. Formulaires et filtres bien structurés

Color Philosophy:

• Fond blanc pur #FFFFFF
• Bleu institutionnel #003189
• Gris clair #F5F5F5 pour alternance
• Orange #E05206 pour alertes

Layout Paradigm: Navigation top fixe. Contenu centré max-width 1200px. Tableau principal avec pagination.

Signature Elements:

1. Bandeau bleu en header avec logo Itinova
2. Tableau avec en-têtes fixes et tri
3. Badges colorés pour les statuts

Interaction Philosophy: Simplicité maximale, pas d'effets superflus.

Animation: Aucune animation, priorité à la performance.

Typography System:

• Marianne (police officielle française) ou Source Sans Pro
• Hiérarchie claire H1/H2/H3

---

Choix retenu : Approche 1 — Corporate Modernism

Design professionnel avec sidebar bleu marine, cards d'établissements avec indicateurs de vétusté colorés, et drawer de détail. Typographie Sora + Inter pour un rendu institutionnel moderne.