A
Design SystemShowroom · proposition 01
Progression0/8
Voir la proposition 02
Direction validée

Un même langage.
Des outils différents.

Cette première proposition ne cherche pas à assembler une interface finale. Elle isole les décisions visuelles pour choisir chaque brique sans être influencé par le reste.

Fond ivoireBleu cobalt communThème clairComposition aérée
Fondations fixéesDirection 01
Ivoire#F7F7F4
Cobalt#2545FF
Bleu nuit#0C1754
Surface#FFFFFF
Aa
Inter / sans-serifPrécise, neutre, lisible
16,2 M€
01
Fondations

Rayons et géométrie

La palette, le fond ivoire et la respiration sont fixés. Il reste à choisir le degré de douceur des composants.

DécisionQuelle géométrie doit devenir la règle commune ?
Actif

Valeur nette

16,2 M€
Tous les portefeuilles

Option 1

Précis

Rayons de 6 px, silhouette nette et très structurée.

Proche de Cursor ; adapté aux outils très denses.

Actif

Valeur nette

16,2 M€
Tous les portefeuilles

Option 2

Équilibré

Rayons de 12 px, douceur mesurée et bonne polyvalence.

Le compromis recommandé pour la macro-app.

Actif

Valeur nette

16,2 M€
Tous les portefeuilles

Option 3

Doux

Rayons de 20 px, cartes plus présentes et accueillantes.

Plus proche d’Officevibe, avec davantage de personnalité.

02
Architecture

Shell de la macro-app

Le shell doit faire sentir un produit unique tout en laissant chaque application conserver sa navigation métier.

DécisionOù placer la navigation globale et la navigation locale ?
A
InvestImmoBaseSantéDD
Valeur nette16,2 M€+11,0 %
Actifs246 classes

Option 1

Barre haute + onglets

Référence Invest

Applications dans la barre globale, vues métier en onglets dessous.

Très lisible et économe en largeur.

Vue d’ensembleDD
Valeur nette16,2 M€+11,0 %
Actifs246 classes

Option 2

Sidebar structurante

Applications et vues regroupées dans une colonne gauche permanente.

Efficace pour les arborescences profondes.

A
InvestImmoBaseSanté
InvestissementsDD
Valeur nette16,2 M€+11,0 %
Actifs246 classes

Option 3

Rail hybride

Applications dans un rail fin, navigation locale en barre haute.

Sépare nettement les deux niveaux sans alourdir l’écran.

03
Interaction

Actions, champs et filtres

Les mêmes actions doivent rester immédiatement reconnaissables dans une fiche DAST, un portefeuille ou un suivi santé.

DécisionQuel niveau de présence donner aux contrôles ?

Option 1

Contenu

Champs sur fond blanc, contours visibles et boutons francs.

Le plus explicite pour les usages occasionnels.

Option 2

Surface douce

Contrôles sur fond ivoire secondaire, contraste plus calme.

Le choix recommandé pour une interface aérée.

Option 3

Minimal

Contours réduits, hiérarchie portée par l’espace et la typographie.

Très élégant, mais demande des libellés irréprochables.

04
Données

Cartes KPI

Un KPI doit expliquer sa valeur, son évolution et sa période sans transformer chaque carte en mini-dashboard.

DécisionQuelle information secondaire doit accompagner le chiffre ?
Valeur nette12 mois
16,2 M€↗ 11,0 %
Actifs 17,9 M€Dette −1,7 M€

Option 1

Sparkline contextuelle

Référence Invest

Chiffre, variation et courbe légère dans la même lecture.

Riche sans devenir bruyant.

Valeur nette
16,2 M€

+1,6 M€ depuis juillet 2025

Dernière mise à jour14:32

Option 2

Variation éditoriale

Le chiffre domine ; la variation est formulée en une phrase courte.

Plus calme pour les pages de synthèse.

Allocation financièreEn progrès
38 %cible 45 %
0 %Objectif50 %

Option 3

Objectif mesuré

La carte compare directement le réalisé à une cible explicite.

Pertinent pour allocations, budgets et objectifs commerciaux.

05
Données

Tableaux métier

Les tableaux doivent accepter beaucoup d’information tout en conservant une lecture confortable et une adaptation mobile claire.

DécisionQuel traitement visuel encadre les données ?
Portefeuille consolidé24 actifs
ActifClasseValeur12 mois
SSCI KléberImmobilier4,82 M€+5,8 %
PPortefeuille cotéFinancier3,46 M€+8,2 %
PPrivate EquityNon coté2,91 M€+2,1 %
DDette nettePassif−1,74 M€−3,4 %

Option 1

Table ouverte

Séparateurs horizontaux, aucun cadre extérieur et beaucoup d’air.

S’intègre naturellement dans une page éditoriale.

Portefeuille consolidé24 actifs
ActifClasseValeur12 mois
SSCI KléberImmobilier4,82 M€+5,8 %
PPortefeuille cotéFinancier3,46 M€+8,2 %
PPrivate EquityNon coté2,91 M€+2,1 %
DDette nettePassif−1,74 M€−3,4 %

Option 2

Table portefeuille

Référence Invest

En-tête teinté, colonnes financières stables et lignes compactes.

Optimisée pour comparer rapidement plusieurs actifs.

Portefeuille consolidé24 actifs
HDR — Actifs détenus
ActifClasseValeur12 mois
SSCI KléberImmobilier4,82 M€+5,8 %
PPortefeuille cotéFinancier3,46 M€+8,2 %
PPrivate EquityNon coté2,91 M€+2,1 %
DDette nettePassif−1,74 M€−3,4 %
Sous-total HDR9,45 M€

Option 3

Groupes lisibles

Les lignes sont regroupées par portefeuille avec sous-totaux visibles.

Utile lorsque la structure métier prime sur le tri libre.

06
Dataviz

Traitement des graphiques

Le type de graphe dépendra toujours de la donnée. Ici, on choisit son cadre, son niveau d’annotation et sa présence dans la page.

DécisionComment présenter un graphique d’évolution patrimoniale ?
Valeur nette consolidée16,2 M€
5 ans

Option 1

Tracé ouvert

Graphe sans cadre, grille minimale et valeur directement lisible.

Le traitement le plus léger visuellement.

Valeur nette consolidée16,2 M€
5 ans

Option 2

Carte analytique

Référence Invest

Graphe en marches, légende structurée et contexte dans l’en-tête.

Solide pour les valorisations et les historiques financiers.

Valeur nette consolidée16,2 M€
5 ans
Lecture

La valeur nette progresse de 11,0 % sur douze mois, au-dessus de la cible.

Option 3

Insight commenté

Le graphe est accompagné d’un enseignement et d’un repère cible.

Privilégie l’interprétation à la simple restitution.

08
Système

États vides, alertes et chargements

Un état système doit expliquer ce qui se passe, son impact et la prochaine action sans dramatiser inutilement.

DécisionQuel ton donner aux moments où l’interface n’affiche pas son contenu normal ?
Aucune opportunité dans le pipeline

Ajoute une opportunité ou modifie les filtres pour afficher les dossiers archivés.

Option 1

État guidé

Illustration fonctionnelle, explication et action principale au centre.

Idéal pour le premier usage et les listes vides.

Données de juillet incomplètes

Deux comptes n’ont pas encore été synchronisés.

Option 2

Message intégré

Le message reste dans le flux, sans interrompre la lecture de la page.

Adapté aux données temporairement absentes.

Synchronisation bancaire

Dernier passage aujourd’hui à 14:32

Dégradé
5 connecteurs à jour 1 action requise

Option 3

Panneau de statut

État, horodatage et action de résolution sont explicitement séparés.

Recommandé pour les synchronisations et connecteurs.

Étape suivante

Ta sélection devient la proposition 02.

Une fois les huit familles choisies, l’export servira à assembler un écran cohérent et à résoudre les éventuelles incompatibilités entre briques.

0/8

décisions enregistrées

A

Alfred Design System · Showroom v1

Fond ivoire · Cobalt commun · Clair uniquement