136 lines
4.6 KiB
Markdown
136 lines
4.6 KiB
Markdown
# 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.
|
|
|
|
---
|
|
|
|
<response>
|
|
<probability>0.07</probability>
|
|
<idea>
|
|
|
|
**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
|
|
|
|
</idea>
|
|
</response>
|
|
|
|
<response>
|
|
<probability>0.06</probability>
|
|
<idea>
|
|
|
|
**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
|
|
|
|
</idea>
|
|
</response>
|
|
|
|
<response>
|
|
<probability>0.08</probability>
|
|
<idea>
|
|
|
|
**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
|
|
|
|
</idea>
|
|
</response>
|
|
|
|
---
|
|
|
|
## 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.
|