Olivier CROGUENNEC
260 lines
11 KiB
Markdown
260 lines
11 KiB
Markdown
# Briefs d'illustrations — Crowdlending App
|
||
|
||
Document de référence pour la génération des visuels de l'application de suivi de portefeuille de crowdlending (prêts participatifs).
|
||
|
||
---
|
||
|
||
## 1. Règles communes à toutes les illustrations
|
||
|
||
### Format technique
|
||
- **Format livrable :** SVG vectoriel avec fond transparent
|
||
- **Ratio cible :** Variable selon la page (précisé par illustration)
|
||
- **Texte :** Aucun texte intégré dans les illustrations — le texte est géré par l'application
|
||
- **Dark mode :** Fond transparent ; les teintes doivent rester lisibles sur fond clair (`#ffffff`) ET fond sombre (`#1a1a2e` environ). Éviter les couleurs trop claires qui disparaissent sur fond blanc, ou trop sombres sur fond sombre.
|
||
|
||
### Style global
|
||
- **Style dominant :** Flat illustration — formes géométriques épurées, ombres douces mais pas de réalisme photographique
|
||
- **Touches semi-réalistes :** Acceptées ponctuellement pour les personnages (Login, Register) ou les objets symboliques (pièces, documents)
|
||
- **Trait :** Pas de contour noir dur ; les formes sont délimitées par des variations de couleur ou des ombres légères
|
||
- **Ambiance :** Fintech moderne, professionnel, rassurant — pas austère, pas enfantin
|
||
|
||
### Palette par page
|
||
Chaque page a une teinte dominante distincte, déclinée en 2–3 variations (clair / principal / foncé). Les autres éléments utilisent des neutres doux (gris-bleu, blanc cassé, beige léger).
|
||
|
||
---
|
||
|
||
## 2. Page de connexion (`/login`)
|
||
|
||
### Concept
|
||
L'utilisateur retrouve son portefeuille. Idée centrale : **accès sécurisé à ses données financières personnelles**, sentiment de confiance et de maîtrise.
|
||
|
||
### Teinte dominante
|
||
**Bleu profond** — `#2563eb` environ, décliné en `#1e40af` (foncé) et `#93c5fd` (clair).
|
||
|
||
### Ratio
|
||
Portrait 4:5 ou carré 1:1, placé à droite du formulaire de connexion.
|
||
|
||
### Éléments visuels à inclure
|
||
- Un **écran ou tableau de bord abstrait** en perspective légère (isométrie douce) montrant des courbes de croissance et des barres de graphique — sans données réelles
|
||
- Un **bouclier ou cadenas stylisé** intégré naturellement dans la composition (pas en surimpression brutale)
|
||
- Des **formes géométriques flottantes** en arrière-plan (cercles, hexagones légers) qui évoquent un réseau de financement participatif
|
||
- Optionnel : une **silhouette humaine abstraite** (flat, sans visage détaillé) consultant un écran
|
||
|
||
### Ambiance / mots-clés
|
||
Confiance · Sécurité · Clarté · Accès personnel · Nuit bleue apaisante
|
||
|
||
### À éviter
|
||
Cadenas réaliste, icônes de sécurité génériques, fond uni sans composition.
|
||
|
||
---
|
||
|
||
## 3. Page d'inscription (`/register`)
|
||
|
||
### Concept
|
||
Nouveau départ, premier pas vers la croissance de son patrimoine. Idée : **planter une graine financière**, commencer à construire.
|
||
|
||
### Teinte dominante
|
||
**Vert émeraude** — `#059669` environ, décliné en `#047857` (foncé) et `#6ee7b7` (clair).
|
||
|
||
### Ratio
|
||
Portrait 4:5 ou carré 1:1, placé à droite du formulaire.
|
||
|
||
### Éléments visuels à inclure
|
||
- Une **plante ou arbre stylisé en flat** dont les feuilles sont remplacées par des formes évoquant des graphiques (triangles ascendants, petits histogrammes)
|
||
- À la base : des **pièces empilées ou un sol géométrique** représentant le capital de départ
|
||
- Des **étoiles ou points lumineux** dispersés en arrière-plan, évoquant le réseau de prêteurs/emprunteurs
|
||
- Palette de verts chauds avec des accents dorés/jaunes pour les éléments "valeur"
|
||
|
||
### Ambiance / mots-clés
|
||
Croissance · Optimisme · Premier investissement · Énergie · Nouveau départ
|
||
|
||
### À éviter
|
||
Personnages trop figuratifs, symboles euro/dollar trop littéraux, composition trop chargée.
|
||
|
||
---
|
||
|
||
## 4. Tableau de bord (`/`) — état vide
|
||
|
||
### Concept
|
||
Illustration affichée quand l'utilisateur n'a pas encore d'investissements. Invitation à commencer. Idée : **un portefeuille vide mais plein de potentiel**.
|
||
|
||
### Teinte dominante
|
||
**Violet indigo** — `#7c3aed` environ, décliné en `#5b21b6` (foncé) et `#c4b5fd` (clair).
|
||
|
||
### Ratio
|
||
Paysage 16:9 ou 3:2, centré sous le message d'état vide.
|
||
|
||
### Éléments visuels à inclure
|
||
- Un **graphique vide ou en pointillés** (axes tracés, courbe absente ou en tirets) qui suggère ce qui pourrait être là
|
||
- Des **cartes KPI fantômes** (rectangles avec shimmer ou contour en pointillé)
|
||
- Une **boussole ou carte du trésor stylisée** en flat, symbolisant le chemin à parcourir
|
||
- Des **petits éléments flottants** : icône +, flèches directionnelles, symboles de croissance
|
||
|
||
### Ambiance / mots-clés
|
||
Potentiel · Invitation · Légèreté · "Commencez votre voyage"
|
||
|
||
---
|
||
|
||
## 5. Page Investissements (`/investissements`) — état vide
|
||
|
||
### Concept
|
||
Pas encore de prêts enregistrés. Idée : **une salle des coffres vide**, des emplacements qui attendent.
|
||
|
||
### Teinte dominante
|
||
**Orange ambré** — `#d97706` environ, décliné en `#b45309` (foncé) et `#fcd34d` (clair).
|
||
|
||
### Ratio
|
||
Paysage 3:2, centré.
|
||
|
||
### Éléments visuels à inclure
|
||
- Des **dossiers ou cartes de projet vides**, empilés en perspective légère
|
||
- Une **ampoule ou boussole** au centre symbolisant l'idée à venir
|
||
- Des **lignes de connexion en pointillés** entre des nœuds vides (réseau P2P non encore peuplé)
|
||
- Accents dorés sur les éléments "valeur"
|
||
|
||
### Ambiance / mots-clés
|
||
Attente · Opportunité · Réseau de financement · Structuré
|
||
|
||
---
|
||
|
||
## 6. Page Remboursements (`/remboursements`) — état vide
|
||
|
||
### Concept
|
||
Pas encore de flux reçus. Idée : **un calendrier ou une boîte aux lettres vide**, des flux qui vont arriver.
|
||
|
||
### Teinte dominante
|
||
**Cyan turquoise** — `#0891b2` environ, décliné en `#0e7490` (foncé) et `#67e8f9` (clair).
|
||
|
||
### Ratio
|
||
Paysage 3:2, centré.
|
||
|
||
### Éléments visuels à inclure
|
||
- Un **calendrier stylisé** avec des cases vides ou des dates en pointillés
|
||
- Des **flèches de flux entrant** (argent qui arrive vers un portefeuille)
|
||
- Des **pièces ou billets flat** en trajectoire parabolique vers un portefeuille central
|
||
- Ambiance légère et dynamique (les flux vont arriver)
|
||
|
||
### Ambiance / mots-clés
|
||
Flux entrant · Calendrier · Anticipation · Régularité
|
||
|
||
---
|
||
|
||
## 7. Page Dépôts / Retraits (`/depots-retraits`) — état vide
|
||
|
||
### Concept
|
||
Pas encore de mouvements enregistrés. Idée : **un compte bancaire neutre**, prêt à recevoir ses premiers flux.
|
||
|
||
### Teinte dominante
|
||
**Bleu-gris ardoise** — `#475569` environ, décliné en `#1e293b` (foncé) et `#94a3b8` (clair).
|
||
|
||
### Ratio
|
||
Paysage 3:2, centré.
|
||
|
||
### Éléments visuels à inclure
|
||
- Un **compte ou portefeuille stylisé** en perspective flat, ouvert et vide
|
||
- Des **flèches bidirectionnelles** (entrée et sortie) avec des teintes différentes (vert pour dépôt, rouge doux pour retrait)
|
||
- Un **solde "0,00 €" stylisé** en grand format comme élément graphique central (pas de vrai texte — une représentation stylisée)
|
||
- Des **cercles concentriques** en arrière-plan suggérant la liquidité
|
||
|
||
### Ambiance / mots-clés
|
||
Neutralité · Liquidité · Mouvement · Équilibre
|
||
|
||
---
|
||
|
||
## 8. Page Fiscalité / 2778-SD (`/2778-sd`) — état vide
|
||
|
||
### Concept
|
||
Pas encore de données fiscales. Idée : **des documents officiels vierges**, un classeur fiscal ordonné.
|
||
|
||
### Teinte dominante
|
||
**Rouge corail doux** — `#dc2626` décliné en tons doux `#fee2e2` (fond) et `#991b1b` (accent).
|
||
|
||
### Ratio
|
||
Paysage 3:2, centré.
|
||
|
||
### Éléments visuels à inclure
|
||
- Des **formulaires/documents empilés en perspective** (style papier officiel mais stylisé, pas photo)
|
||
- Un **calculateur flat** ou une règle de calcul vintage stylisée
|
||
- Des **lignes de tableau vides** suggestives (colonnes tracées, lignes en pointillés)
|
||
- Un **tampon ou sceau circulaire** stylisé sans texte, symbolisant l'officiel
|
||
|
||
### Ambiance / mots-clés
|
||
Administration · Rigueur · Documentation · Clarté fiscale
|
||
|
||
---
|
||
|
||
## 9. Page Simulation (`/simul`) — illustration header
|
||
|
||
### Concept
|
||
Projection dans le futur. Idée : **une lunette de visée ou un télescope pointé vers l'horizon financier**.
|
||
|
||
### Teinte dominante
|
||
**Violet-rose** — `#9333ea` environ, décliné en `#7e22ce` (foncé) et `#e879f9` (clair).
|
||
|
||
### Ratio
|
||
Paysage 16:9, affiché en haut de page.
|
||
|
||
### Éléments visuels à inclure
|
||
- Une **courbe ascendante projetée vers le futur**, la partie gauche pleine (passé) et la partie droite en pointillés lumineux (projection)
|
||
- Des **étoiles ou constellations** en arrière-plan léger
|
||
- Un **horizon abstrait** ou une ligne de fuite perspective
|
||
- Des **marqueurs temporels** (points sur la courbe) sans dates réelles
|
||
|
||
### Ambiance / mots-clés
|
||
Futur · Projection · Vision · Anticipation · Lumière
|
||
|
||
---
|
||
|
||
## 10. Pages Settings / MonCompte — illustration section vide
|
||
|
||
### Concept
|
||
Paramètres non encore configurés. Idée : **un atelier ou tableau de bord de contrôle** vierge.
|
||
|
||
### Teinte dominante
|
||
**Gris neutre avec accent teal** — fond `#f8fafc`, accent `#0f766e`.
|
||
|
||
### Ratio
|
||
Carré 1:1, affiché en sidebar ou en état vide de section.
|
||
|
||
### Éléments visuels à inclure
|
||
- Des **engrenages imbriqués flat** en composition équilibrée (pas le cliché engrenage isolé)
|
||
- Des **curseurs et toggles stylisés** en arrière-plan
|
||
- Une **palette de couleurs ou pipette** pour la section Apparence
|
||
- Des **lignes de connexion** entre les composants symbolisant l'interconnexion des paramètres
|
||
|
||
### Ambiance / mots-clés
|
||
Contrôle · Personnalisation · Ordre · Maîtrise
|
||
|
||
---
|
||
|
||
## 11. Page 404 / Erreur
|
||
|
||
### Concept
|
||
Page non trouvée. Idée : **un investisseur qui cherche dans le vide**, boussole qui tourne, route qui mène nulle part.
|
||
|
||
### Teinte dominante
|
||
**Jaune soleil chaleureux** — `#eab308` environ, décliné en `#a16207` (foncé) et `#fef9c3` (clair).
|
||
|
||
### Ratio
|
||
Carré 1:1 ou portrait 3:4.
|
||
|
||
### Éléments visuels à inclure
|
||
- Une **boussole flat** dont l'aiguille est en point d'interrogation
|
||
- Un **chemin ou route** qui s'arrête abruptement dans le vide
|
||
- Des **éléments du tableau de bord qui flottent** de façon désordonnée (cartes KPI, graphiques) comme éparpillés
|
||
- Ambiance légère et humoristique, pas anxiogène
|
||
|
||
### Ambiance / mots-clés
|
||
Humour doux · Égaré · "On vous retrouve" · Légèreté
|
||
|
||
---
|
||
|
||
## Notes d'intégration pour le développeur
|
||
|
||
Une fois les SVG générés :
|
||
|
||
1. **Nettoyage SVG** : Supprimer les métadonnées inutiles (Adobe, Inkscape), vérifier l'absence d'images raster embarquées (balise `<image>`).
|
||
2. **Variables CSS** : Remplacer les couleurs hardcodées des éléments neutres (gris, blanc) par `var(--surface)`, `var(--border)`, `var(--text-muted)` pour l'adaptation dark mode automatique. Laisser les couleurs caractéristiques de chaque illustration en valeurs fixes.
|
||
3. **Import React** : `import { ReactComponent as IllustrationLogin } from '../assets/illustrations/login.svg'` (Vite : `import LoginIllustration from '../assets/illustrations/login.svg?react'`).
|
||
4. **Placement** : Les illustrations d'état vide se placent dans un `div.empty-state` centré, largeur max 320px. Les illustrations de page (login/register) se placent dans la colonne droite du layout split-screen.
|