Olivier CROGUENNEC
11 KiB
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 (#1a1a2eenviron). É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 :
- Nettoyage SVG : Supprimer les métadonnées inutiles (Adobe, Inkscape), vérifier l'absence d'images raster embarquées (balise
<image>). - 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. - Import React :
import { ReactComponent as IllustrationLogin } from '../assets/illustrations/login.svg'(Vite :import LoginIllustration from '../assets/illustrations/login.svg?react'). - Placement : Les illustrations d'état vide se placent dans un
div.empty-statecentré, largeur max 320px. Les illustrations de page (login/register) se placent dans la colonne droite du layout split-screen.