# 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.