# Spécifications UI/UX
## Application "Livre dont vous êtes le héros"
**Version:** 1.0
**Date:** 31 Décembre 2025
**Statut:** Spécifications design initiales
---
## 1. Concept visuel général
### 1.1 Thème : Bibliothèque ancienne
**Ambiance recherchée :**
- Chaleureux et intime comme une vieille bibliothèque
- Élégant et littéraire
- Immersif sans être surchargé
- Nostalgique et intemporel
**Inspirations :**
- Bibliothèques anciennes avec boiseries
- Parchemins et manuscrits médiévaux
- Reliures de livres anciens
- Ambiance cosy d'un coin lecture
**Émotions visées :**
- Confort et sécurité
- Curiosité et aventure
- Nostalgie et imaginaire
- Concentration et immersion
---
## 2. Palette de couleurs
### 2.1 Couleurs principales
**Tons automnaux et chaleureux :**
```
Primaire - Sépia foncé
#3D2817 - Couleur principale du texte, éléments sombres
RGB(61, 40, 23)
Secondaire - Ocre chaud
#C99156 - Accents, boutons, liens
RGB(201, 145, 86)
Tertiaire - Beige parchemin
#E8DCC4 - Fond principal, cartes
RGB(232, 220, 196)
Accent 1 - Bordeaux profond
#6B2C2C - Éléments importants, hover states
RGB(107, 44, 44)
Accent 2 - Vert mousse
#4A5D3F - Succès, validations positives
RGB(74, 93, 63)
Neutre clair - Crème
#F5F0E8 - Backgrounds légers
RGB(245, 240, 232)
Neutre foncé - Brun sombre
#2A1F15 - Headers, footers, zones sombres
RGB(42, 31, 21)
```
### 2.2 Utilisation des couleurs
**Texte :**
- Principal : `#3D2817` (sépia foncé)
- Secondaire : `#6B6050` (brun atténué)
- Sur fond sombre : `#F5F0E8` (crème)
**Backgrounds :**
- Page principale : `#E8DCC4` (beige parchemin)
- Cartes/panels : `#F5F0E8` (crème)
- Header/Footer : `#2A1F15` (brun sombre)
**Éléments interactifs :**
- Boutons primaires : `#C99156` (ocre)
- Boutons primaires hover : `#B37D3F`
- Liens : `#6B2C2C` (bordeaux)
- Liens hover : `#8A3838`
**États :**
- Succès : `#4A5D3F` (vert mousse)
- Avertissement : `#D4A574` (orange doux)
- Erreur : `#8B3A3A` (rouge atténué)
- Info : `#6B7C8C` (bleu-gris)
---
## 3. Typographie
### 3.1 Polices de caractères
**Police principale - Titres et display :**
```
Famille : "Crimson Pro" ou "Libre Baskerville"
Style : Serif classique, élégante
Utilisation : Titres, headers, noms d'histoires
Poids : 400 (regular), 600 (semi-bold), 700 (bold)
```
**Police secondaire - Texte narratif :**
```
Famille : "Lora" ou "Merriweather"
Style : Serif littéraire, très lisible
Utilisation : Corps de texte narratif, passages IA
Poids : 400 (regular), 500 (medium), 700 (bold)
```
**Police UI - Interface :**
```
Famille : "Inter" ou "Source Sans Pro"
Style : Sans-serif moderne, claire
Utilisation : Menus, boutons, formulaires
Poids : 400 (regular), 500 (medium), 600 (semi-bold)
```
### 3.2 Hiérarchie typographique
```css
/* Titres */
h1 {
font-family: "Crimson Pro", serif;
font-size: 3rem; /* 48px */
font-weight: 700;
line-height: 1.2;
color: #3D2817;
}
h2 {
font-family: "Crimson Pro", serif;
font-size: 2.25rem; /* 36px */
font-weight: 600;
line-height: 1.3;
color: #3D2817;
}
h3 {
font-family: "Crimson Pro", serif;
font-size: 1.75rem; /* 28px */
font-weight: 600;
line-height: 1.4;
color: #3D2817;
}
/* Texte narratif */
.narrative-text {
font-family: "Lora", serif;
font-size: 1.125rem; /* 18px */
line-height: 1.8;
color: #3D2817;
text-align: justify;
}
/* Corps de texte UI */
body {
font-family: "Inter", sans-serif;
font-size: 1rem; /* 16px */
line-height: 1.6;
color: #3D2817;
}
/* Texte secondaire */
.text-secondary {
font-size: 0.875rem; /* 14px */
color: #6B6050;
}
/* Petits textes */
.text-small {
font-size: 0.75rem; /* 12px */
color: #6B6050;
}
```
### 3.3 Effets typographiques
**Lettrine (Drop cap) :**
- Première lettre des passages narratifs
- Taille : 3x la hauteur de ligne
- Style décoratif avec couleur accent
**Ornements :**
- Séparateurs de section : motifs floraux subtils
- Puces de liste : symboles livresques (•, ⁎, ❧)
---
## 4. Composants UI
### 4.1 Boutons
**Bouton primaire :**
```css
.btn-primary {
background: linear-gradient(135deg, #C99156 0%, #B37D3F 100%);
color: #F5F0E8;
border: 2px solid #A66D3A;
border-radius: 8px;
padding: 12px 24px;
font-family: "Inter", sans-serif;
font-weight: 600;
font-size: 1rem;
cursor: pointer;
transition: all 0.3s ease;
box-shadow: 0 4px 12px rgba(61, 40, 23, 0.15);
}
.btn-primary:hover {
transform: translateY(-2px);
box-shadow: 0 6px 16px rgba(61, 40, 23, 0.25);
background: linear-gradient(135deg, #B37D3F 0%, #C99156 100%);
}
```
**Bouton secondaire :**
```css
.btn-secondary {
background: transparent;
color: #6B2C2C;
border: 2px solid #6B2C2C;
border-radius: 8px;
padding: 12px 24px;
font-weight: 600;
transition: all 0.3s ease;
}
.btn-secondary:hover {
background: #6B2C2C;
color: #F5F0E8;
}
```
**Bouton choix (mode multiples) :**
```css
.btn-choice {
background: #F5F0E8;
color: #3D2817;
border: 2px solid #C99156;
border-radius: 12px;
padding: 16px 20px;
text-align: left;
font-family: "Lora", serif;
font-size: 1rem;
line-height: 1.6;
cursor: pointer;
transition: all 0.3s ease;
position: relative;
}
.btn-choice::before {
content: "→";
position: absolute;
left: -30px;
opacity: 0;
transition: all 0.3s ease;
}
.btn-choice:hover {
background: #E8DCC4;
border-color: #B37D3F;
transform: translateX(5px);
}
.btn-choice:hover::before {
left: -20px;
opacity: 1;
}
```
### 4.2 Cartes (Cards)
**Carte d'histoire (Dashboard) :**
```css
.story-card {
background: #F5F0E8;
border: 1px solid #C99156;
border-radius: 16px;
padding: 0;
overflow: hidden;
box-shadow: 0 4px 12px rgba(61, 40, 23, 0.1);
transition: all 0.3s ease;
cursor: pointer;
}
.story-card:hover {
transform: translateY(-4px);
box-shadow: 0 8px 24px rgba(61, 40, 23, 0.2);
border-color: #B37D3F;
}
.story-card__cover {
width: 100%;
height: 220px;
object-fit: cover;
border-bottom: 2px solid #C99156;
}
.story-card__body {
padding: 20px;
}
.story-card__title {
font-family: "Crimson Pro", serif;
font-size: 1.5rem;
font-weight: 600;
color: #3D2817;
margin-bottom: 8px;
}
.story-card__meta {
font-size: 0.875rem;
color: #6B6050;
display: flex;
gap: 12px;
margin-bottom: 12px;
}
.story-card__description {
font-size: 0.95rem;
color: #3D2817;
line-height: 1.5;
}
```
### 4.3 Formulaires
**Input text :**
```css
.input-text {
background: #F5F0E8;
border: 2px solid #C99156;
border-radius: 8px;
padding: 12px 16px;
font-family: "Inter", sans-serif;
font-size: 1rem;
color: #3D2817;
width: 100%;
transition: all 0.3s ease;
}
.input-text:focus {
outline: none;
border-color: #6B2C2C;
box-shadow: 0 0 0 4px rgba(107, 44, 44, 0.1);
}
.input-text::placeholder {
color: #A89987;
font-style: italic;
}
```
**Textarea (mode dialogue libre) :**
```css
.textarea-action {
background: #F5F0E8;
border: 2px solid #C99156;
border-radius: 12px;
padding: 16px;
font-family: "Lora", serif;
font-size: 1.05rem;
color: #3D2817;
width: 100%;
min-height: 120px;
resize: vertical;
line-height: 1.6;
}
.textarea-action:focus {
outline: none;
border-color: #6B2C2C;
box-shadow: 0 0 0 4px rgba(107, 44, 44, 0.1);
}
```
### 4.4 Navigation
**Header :**
```css
.header {
background: linear-gradient(180deg, #2A1F15 0%, #3D2817 100%);
color: #F5F0E8;
padding: 16px 24px;
box-shadow: 0 2px 12px rgba(0, 0, 0, 0.2);
position: sticky;
top: 0;
z-index: 1000;
}
.header__logo {
font-family: "Crimson Pro", serif;
font-size: 1.75rem;
font-weight: 700;
color: #C99156;
text-decoration: none;
}
.header__nav {
display: flex;
gap: 32px;
}
.header__nav-link {
color: #E8DCC4;
font-weight: 500;
text-decoration: none;
transition: color 0.3s ease;
position: relative;
}
.header__nav-link:hover {
color: #C99156;
}
.header__nav-link::after {
content: "";
position: absolute;
bottom: -4px;
left: 0;
width: 0;
height: 2px;
background: #C99156;
transition: width 0.3s ease;
}
.header__nav-link:hover::after {
width: 100%;
}
```
### 4.5 Modales
```css
.modal {
position: fixed;
top: 0;
left: 0;
width: 100vw;
height: 100vh;
background: rgba(42, 31, 21, 0.85);
display: flex;
align-items: center;
justify-content: center;
z-index: 2000;
backdrop-filter: blur(4px);
}
.modal__content {
background: #F5F0E8;
border: 3px solid #C99156;
border-radius: 16px;
padding: 32px;
max-width: 600px;
width: 90%;
max-height: 80vh;
overflow-y: auto;
box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);
position: relative;
}
.modal__close {
position: absolute;
top: 16px;
right: 16px;
background: transparent;
border: none;
font-size: 1.5rem;
color: #6B2C2C;
cursor: pointer;
transition: transform 0.2s ease;
}
.modal__close:hover {
transform: rotate(90deg);
}
```
---
## 5. Pages et layouts
### 5.1 Landing Page (Page d'accueil)
**Structure :**
```
┌────────────────────────────────────┐
│ Header (Navigation) │
├────────────────────────────────────┤
│ │
│ Hero Section │
│ - Titre principal │
│ - Sous-titre accrocheur │
│ - CTA : "Commencer l'aventure" │
│ - Illustration bibliothèque │
│ │
├────────────────────────────────────┤
│ │
│ Section "Comment ça marche" │
│ - 3 étapes illustrées │
│ │
├────────────────────────────────────┤
│ │
│ Section "Exemples d'histoires" │
│ - Galerie de couvertures │
│ │
├────────────────────────────────────┤
│ │
│ Section "Commencer" │
│ - CTA : Inscription/Connexion │
│ │
├────────────────────────────────────┤
│ Footer │
└────────────────────────────────────┘
```
**Éléments visuels :**
- Background : texture parchemin subtile
- Ornements : motifs de livres, plumes, encriers
- Animations : Fade in doux, parallax scroll léger
### 5.2 Dashboard (Mes histoires)
**Structure :**
```
┌────────────────────────────────────┐
│ Header avec profil utilisateur │
├────┬───────────────────────────────┤
│ S │ │
│ i │ Titre : "Mes Aventures" │
│ d │ │
│ e │ ┌─────┐ ┌─────┐ ┌─────┐ │
│ b │ │ Card│ │ Card│ │ Card│ │
│ a │ │ 1 │ │ 2 │ │ 3 │ │
│ r │ └─────┘ └─────┘ └─────┘ │
│ │ │
│ - │ ┌─────┐ ┌─────┐ ┌─────┐ │
│ N │ │ Card│ │ Card│ │ Card│ │
│ a │ │ 4 │ │ 5 │ │ 6 │ │
│ v │ └─────┘ └─────┘ └─────┘ │
│ │ │
│ │ [Bouton : Nouvelle histoire] │
│ │ │
└────┴───────────────────────────────┘
```
**Sidebar :**
- Mes histoires en cours
- Histoires terminées
- Histoires publiées
- Galerie publique
- Paramètres
**Main content :**
- Grille responsive de cartes (3 colonnes desktop, 2 tablette, 1 mobile)
- Filtre/tri : Récentes, Alphabétique, Genre
- Bouton flottant : "+ Nouvelle histoire"
### 5.3 Wizard de création d'histoire
**Multi-step form avec progression :**
```
┌────────────────────────────────────┐
│ Étape 1/5 : Paramètres │
│ ● ○ ○ ○ ○ │
├────────────────────────────────────┤
│ │
│ [Formulaire de l'étape actuelle] │
│ │
│ Genre : [_____________] │
│ Époque : [_____________] │
│ Réalité : ░░░▓▓▓░░░ │
│ │
│ [Suivant →] │
│ │
└────────────────────────────────────┘
```
**Style :**
- Progression visuelle : timeline avec cercles
- Chaque étape : fond blanc cassé, bordure décorative
- Transitions : slide élégante entre les étapes
- Animation : apparition en fondu
### 5.4 Page de jeu (Narration)
**Layout immersif :**
```
┌────────────────────────────────────┐
│ ┌──────────┐ │
│ │Couverture│ Titre de l'histoire │
│ │ Image │ [LoreBook] [Menu] │
│ └──────────┘ │
├────────────────────────────────────┤
│ │
│ ┏━━━━━━━━━━━━━━━━━━━━━━━━━━━━┓ │
│ ┃ Passage narratif ┃ │
│ ┃ ┃ │
│ ┃ Texte de l'IA formaté ┃ │
│ ┃ style livre ancien ┃ │
│ ┃ avec lettrine, etc. ┃ │
│ ┃ ┃ │
│ ┗━━━━━━━━━━━━━━━━━━━━━━━━━━━━┛ │
│ │
├────────────────────────────────────┤
│ │
│ Mode Choix Multiples : │
│ ┌────────────────────────────┐ │
│ │ A) Choix 1 │ │
│ └────────────────────────────┘ │
│ ┌────────────────────────────┐ │
│ │ B) Choix 2 │ │
│ └────────────────────────────┘ │
│ │
│ OU Mode Dialogue Libre : │
│ ┌────────────────────────────┐ │
│ │ Que fais-tu ? │ │
│ │ [Zone de texte] │ │
│ │ [Agir →] │ │
│ └────────────────────────────┘ │
│ │
└────────────────────────────────────┘
```
**Style de la zone narrative :**
- Background : crème avec texture papier
- Bordures : ornements décoratifs en coins
- Ombres : légères pour effet relief
- Lettrine : première lettre agrandie et stylisée
- Marges : généreuses pour lisibilité
**Effets :**
- Nouvelle narration : fade in + slide up
- Choix sélectionné : animation highlight
- Loading : animation livre qui s'ouvre
### 5.5 Page LoreBook
**Sidebar ou Modal :**
```
┌────────────────────────────────────┐
│ 📖 LoreBook │
├────────────────────────────────────┤
│ [Personnages] [Lieux] [Objets] │
│ [Événements] [Protagoniste] │
├────────────────────────────────────┤
│ │
│ PERSONNAGES │
│ │
│ ┌──────────────────────────────┐ │
│ │ Elara la Sage │ │
│ │ Magicienne âgée,mystérieuse │ │
│ │ Traits: sagesse, méfiance │ │
│ └──────────────────────────────┘ │
│ │
│ ┌──────────────────────────────┐ │
│ │ Marcus │ │
│ │ Ancien compagnon d'armes │ │
│ │ A trahi ta confiance │ │
│ └──────────────────────────────┘ │
│ │
└────────────────────────────────────┘
```
**Style :**
- Tabs pour navigation entre catégories
- Cartes pour chaque élément
- Icônes : ⚔️ 🏰 📜 ✨
- Scrollable si contenu long
### 5.6 Galerie publique
**Layout type bibliothèque :**
```
┌────────────────────────────────────┐
│ Découvrir des Histoires │
├────────────────────────────────────┤
│ [Filtres : Genre ▼] [Époque ▼] │
│ [Tri : Populaire ▼] │
├────────────────────────────────────┤
│ │
│ ┌──────┐ ┌──────┐ ┌──────┐ │
│ │Cover │ │Cover │ │Cover │ │
│ │ 1 │ │ 2 │ │ 3 │ │
│ │Titre │ │Titre │ │Titre │ │
│ │❤️ 42 │ │❤️ 38 │ │❤️ 51 │ │
│ └──────┘ └──────┘ └──────┘ │
│ │
│ ┌──────┐ ┌──────┐ ┌──────┐ │
│ │Cover │ │Cover │ │Cover │ │
│ │ 4 │ │ 5 │ │ 6 │ │
│ └──────┘ └──────┘ └──────┘ │
│ │
└────────────────────────────────────┘
```
**Style :**
- Grille de cartes verticales (style étagère)
- Hover : carte se soulève, ombre agrandie
- Animation : transition smooth
---
## 6. Animations et transitions
### 6.1 Micro-interactions
**Boutons :**
- Hover : translate Y -2px + shadow augmentée (0.3s ease)
- Active : scale 0.98 (0.1s ease)
- Ripple effect au clic (optionnel)
**Cartes :**
- Hover : translate Y -4px + shadow (0.3s ease)
- Apparition : fade in + slide up (0.5s ease-out)
**Liens :**
- Hover : underline animation de gauche à droite (0.3s ease)
### 6.2 Transitions de page
**Navigation :**
- Fade out → Fade in (300ms)
- OU Slide left/right selon direction
**Modal :**
- Backdrop : fade in (200ms)
- Content : scale 0.9 → 1.0 + fade in (300ms ease-out)
**Loading states :**
- Spinner : animation livre qui tourne
- Skeleton screens pour cartes d'histoires
- Progress bar pour génération (squelette, couverture)
### 6.3 Animations narratives
**Nouveau passage :**
```
1. Fade out choix précédents (200ms)
2. Scroll smooth vers haut de page (300ms)
3. Fade in + slide up nouveau texte (500ms)
4. Lettrine : scale animation (300ms delay)
```
**Mode dialogue libre - soumission :**
```
1. Action utilisateur : highlight + fade (200ms)
2. Textarea : fade out (200ms)
3. Loading indicator : fade in (300ms)
4. Nouveau passage : apparition progressive (500ms)
```
---
## 7. Responsive design
### 7.1 Breakpoints
```css
/* Mobile */
@media (max-width: 640px) {
/* 1 colonne, sidebar cachée, menu hamburger */
}
/* Tablet */
@media (min-width: 641px) and (max-width: 1024px) {
/* 2 colonnes, sidebar collapsible */
}
/* Desktop */
@media (min-width: 1025px) {
/* 3 colonnes, sidebar visible */
}
/* Large desktop */
@media (min-width: 1440px) {
/* Max-width conteneur : 1280px */
}
```
### 7.2 Adaptations mobile
**Dashboard :**
- Cartes : 1 colonne, full width
- Sidebar : menu hamburger
- Bouton flottant "+" pour nouvelle histoire
**Page de jeu :**
- Couverture : réduite ou en header collapsible
- Texte narratif : pleine largeur, padding réduit
- Choix : full width, empilés verticalement
- LoreBook : modal plein écran
**Galerie :**
- Cartes : 1 colonne
- Filtres : menu dropdown
---
## 8. Accessibilité (A11y)
### 8.1 Contrastes
Tous les ratios de contraste respectent **WCAG 2.1 niveau AA** :
- Texte normal : 4.5:1 minimum
- Texte large : 3:1 minimum
- Éléments interactifs : 3:1 minimum
### 8.2 Navigation clavier
- **Tab** : navigation entre éléments interactifs
- **Enter/Space** : activation boutons/liens
- **Esc** : fermeture modales
- Focus visible : outline personnalisé (couleur accent)
```css
*:focus-visible {
outline: 3px solid #6B2C2C;
outline-offset: 2px;
}
```
### 8.3 ARIA labels
```html
Publier l'histoire
...
L'histoire continue...
```
### 8.4 Lecteurs d'écran
- Texte alternatif pour toutes les images
- Landmarks HTML5 sémantiques (header, nav, main, aside, footer)
- Titres hiérarchiques cohérents (h1 → h2 → h3)
---
## 9. États et feedback
### 9.1 Loading states
**Création d'histoire (wizard) :**
- Étape squelette : "Création de ton histoire en cours... ✨" + animation
- Étape couverture : "Création de la couverture... 🎨" + progress bar
- Premier passage : "L'aventure commence..." + animation livre
**Génération de passage :**
- Overlay semi-transparent
- Animation : livre qui s'ouvre / plume qui écrit
- Texte : "L'histoire continue..."
**Chargement dashboard :**
- Skeleton screens pour cartes d'histoires
- Shimmer effect
### 9.2 États de succès
**Actions réussies :**
- Toast notification en haut à droite
- Fond : vert mousse (#4A5D3F)
- Icône : ✓
- Durée : 3 secondes
- Animation : slide in from right
**Exemples :**
- "Histoire créée avec succès !"
- "Histoire publiée ! 🎉"
- "Profil mis à jour"
### 9.3 États d'erreur
**Erreurs :**
- Toast notification ou inline dans formulaire
- Fond : rouge atténué (#8B3A3A)
- Icône : ⚠️
- Exemples :
- "Erreur lors de la génération, réessaye"
- "Ce champ est requis"
- "Email déjà utilisé"
### 9.4 États vides
**Aucune histoire :**
```
┌────────────────────────────────────┐
│ │
│ 📚 │
│ │
│ Aucune aventure pour le moment │
│ │
│ Commence ton premier récit ! │
│ │
│ [Créer une histoire] │
│ │
└────────────────────────────────────┘
```
**Galerie vide (filtres stricts) :**
- Message : "Aucune histoire ne correspond à tes critères"
- Bouton : "Réinitialiser les filtres"
---
## 10. Éléments décoratifs
### 10.1 Ornements
**Séparateurs de section :**
```
━━━━ ❧ ━━━━
```
**Coins de cartes :**
- Motifs floraux subtils dans les coins
- SVG avec couleur ocre (#C99156)
**Backgrounds :**
- Texture papier ancien (subtile, opacity 0.3)
- Noise texture pour effet grain
### 10.2 Icônes
**Style :**
- Line icons (stroke width : 2px)
- Couleur : inherit ou accent
- Taille : 20px (UI), 24px (headers)
**Iconographie :**
- Livre : 📖
- Plume : 🖋️
- Étoile : ⭐
- Cœur : ❤️
- Enveloppe : ✉️
- Paramètres : ⚙️
- Utilisateur : 👤
### 10.3 Illustrations
**Style recherché :**
- Gravures anciennes
- Croquis à l'encre
- Style bibliothèque/parchemin
- Tons sépia
**Emplacements :**
- Hero section (landing page)
- États vides
- Pages d'erreur (404, 500)
---
## 11. Design system - Composants réutilisables
### 11.1 Composants React à créer
```
components/
├── ui/
│ ├── Button.tsx # Bouton avec variants
│ ├── Card.tsx # Carte générique
│ ├── Input.tsx # Input texte
│ ├── Textarea.tsx # Zone de texte
│ ├── Modal.tsx # Modal réutilisable
│ ├── Toast.tsx # Notifications
│ ├── Spinner.tsx # Loading spinner
│ ├── Badge.tsx # Badges (genre, statut)
│ ├── Tabs.tsx # Navigation par onglets
│ └── Separator.tsx # Séparateurs décoratifs
├── layout/
│ ├── Header.tsx # Header principal
│ ├── Footer.tsx # Footer
│ ├── Sidebar.tsx # Sidebar navigation
│ └── Container.tsx # Conteneur centré
├── story/
│ ├── StoryCard.tsx # Carte d'histoire
│ ├── NarrativeText.tsx # Zone de texte narratif
│ ├── ChoiceButton.tsx # Bouton de choix
│ ├── ActionInput.tsx # Input mode libre
│ ├── LoreBookPanel.tsx # Panneau LoreBook
│ └── CoverImage.tsx # Image de couverture
└── forms/
├── StoryWizard.tsx # Wizard multi-étapes
├── StepIndicator.tsx # Indicateur de progression
└── FormField.tsx # Champ de formulaire
```
### 11.2 Tokens CSS (variables)
```css
:root {
/* Colors */
--color-primary: #C99156;
--color-secondary: #6B2C2C;
--color-accent: #4A5D3F;
--color-text: #3D2817;
--color-text-light: #6B6050;
--color-bg: #E8DCC4;
--color-bg-light: #F5F0E8;
--color-bg-dark: #2A1F15;
/* Spacing */
--spacing-xs: 4px;
--spacing-sm: 8px;
--spacing-md: 16px;
--spacing-lg: 24px;
--spacing-xl: 32px;
--spacing-2xl: 48px;
/* Border radius */
--radius-sm: 4px;
--radius-md: 8px;
--radius-lg: 12px;
--radius-xl: 16px;
/* Shadows */
--shadow-sm: 0 2px 8px rgba(61, 40, 23, 0.1);
--shadow-md: 0 4px 12px rgba(61, 40, 23, 0.15);
--shadow-lg: 0 8px 24px rgba(61, 40, 23, 0.2);
/* Transitions */
--transition-fast: 0.15s ease;
--transition-base: 0.3s ease;
--transition-slow: 0.5s ease;
}
```
---
## 12. Maquettes wireframes (description)
### 12.1 Landing Page - Desktop
```
┌─────────────────────────────────────────────────────┐
│ LOGO Accueil Galerie À propos [Connexion] │
├─────────────────────────────────────────────────────┤
│ │
│ 🏛️ │
│ │
│ Vis tes propres aventures │
│ guidées par l'intelligence artificielle │
│ │
│ [Commencer l'aventure →] │
│ │
├─────────────────────────────────────────────────────┤
│ │
│ Comment ça marche ? │
│ │
│ ┌───────┐ ┌───────┐ ┌───────┐ │
│ │ Crée │ → │ Joue │ → │Partage│ │
│ │ ton │ │ ton │ │ ton │ │
│ │rêve │ │histoire│ │aventure│ │
│ └───────┘ └───────┘ └───────┘ │
│ │
├─────────────────────────────────────────────────────┤
│ © 2025 - Mentions légales - CGU │
└─────────────────────────────────────────────────────┘
```
### 12.2 Dashboard - Desktop
```
┌─────────────────────────────────────────────────────┐
│ LOGO Dashboard Galerie [Profil ▼] │
├──────┬──────────────────────────────────────────────┤
│ │ │
│ Nav │ Mes Aventures │
│ │ │
│ • En │ ┌──────────┐ ┌──────────┐ ┌──────────┐ │
│ cours│ │ [Cover] │ │ [Cover] │ │ [Cover] │ │
│ │ │ Titre │ │ Titre │ │ Titre │ │
│ • Ter│ │ Fantasy │ │ Sci-Fi │ │ Policier │ │
│ minées│ │ [Continuer]│ [Continuer]│ [Continuer]│ │
│ │ └──────────┘ └──────────┘ └──────────┘ │
│ • Pub│ │
│ liées│ ┌──────────┐ ┌──────────┐ │
│ │ │ [Cover] │ │ [+] │ │
│ • Gal│ │ Titre │ │ Nouvelle │ │
│ erie │ │ Horreur │ │ Histoire │ │
│ │ │ [Continuer]│ │ │
│ • Pro│ └──────────┘ └──────────┘ │
│ fil │ │
│ │ │
└──────┴──────────────────────────────────────────────┘
```
### 12.3 Page de jeu - Desktop
```
┌─────────────────────────────────────────────────────┐
│ ← Retour Titre de l'histoire [📖] [☰] │
├─────────────────────────────────────────────────────┤
│ ┌──────┐ │
│ │Cover │ Chapitre 3 : La Bibliothèque Oubliée │
│ │Image │ │
│ └──────┘ │
├─────────────────────────────────────────────────────┤
│ │
│ ┏━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┓ │
│ ┃ ┃ │
│ ┃ Tu pousses la lourde porte de chêne. ┃ │
│ ┃ L'intérieur de la bibliothèque est plongé ┃ │
│ ┃ dans une pénombre épaisse. Des milliers ┃ │
│ ┃ de livres s'alignent sur des étagères ┃ │
│ ┃ qui semblent toucher le plafond. Une ┃ │
│ ┃ silhouette se dessine au fond... ┃ │
│ ┃ ┃ │
│ ┗━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┛ │
│ │
│ Que fais-tu ? │
│ │
│ ┌───────────────────────────────────────────────┐ │
│ │ A) M'approcher silencieusement de la │ │
│ │ silhouette │ │
│ └───────────────────────────────────────────────┘ │
│ │
│ ┌───────────────────────────────────────────────┐ │
│ │ B) Appeler pour savoir qui est là │ │
│ └───────────────────────────────────────────────┘ │
│ │
│ ┌───────────────────────────────────────────────┐ │
│ │ C) Examiner les livres autour de moi d'abord │ │
│ └───────────────────────────────────────────────┘ │
│ │
└─────────────────────────────────────────────────────┘
```
---
## 13. Conclusion UI/UX
### 13.1 Principes clés
**Immersion avant tout :**
- Chaque élément renforce l'ambiance bibliothèque/livre ancien
- Les animations sont subtiles et élégantes
- La lecture est privilégiée (typographie, espacement)
**Simplicité et clarté :**
- Interface épurée, focus sur le contenu
- Navigation intuitive
- Pas de surcharge visuelle
**Cohérence :**
- Design system strict
- Composants réutilisables
- Palette limitée mais riche
### 13.2 Prochaines étapes
1. **Maquettes haute-fidélité** (Figma/Sketch)
2. **Prototype interactif** (tester le flow)
3. **Tests utilisateurs** (ajuster selon feedback)
4. **Implémentation** (React + CSS Modules/Tailwind)
---
**Document vivant** : Ce design évoluera avec les retours utilisateurs et les contraintes techniques.