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