616 lines
15 KiB
Markdown
616 lines
15 KiB
Markdown
---
|
|
id: "ui-plan"
|
|
title: "🎨 Plan UI Complet - Veza Platform"
|
|
sidebar_label: "🎨 Plan UI Complet - Veza Platform"
|
|
---
|
|
> NOTE: Cette page décrit la CIBLE (but visé).
|
|
|
|
# 🎨 Plan UI Complet - Veza Platform
|
|
|
|
> **Design System et Interface Utilisateur pour la plateforme musicale collaborative Veza**
|
|
|
|
## 📋 **Analyse de l'Existant**
|
|
|
|
### ✅ **Ce qui fonctionne actuellement**
|
|
- **Design system cohérent** : Composants réutilisables, thème sombre
|
|
- **Architecture technique solide** : Microservices (Go backend, Rust modules)
|
|
- **Authentification complète** : JWT, OAuth2, Magic Links, 2FA
|
|
- **Fonctionnalités core** : Streaming audio, chat temps réel, upload fichiers
|
|
- **APIs complètes** : REST, gRPC, WebSocket, GraphQL
|
|
- **Services avancés** : Marketplace, Analytics, Notifications, Collaboration
|
|
|
|
### ❌ **Ce qui doit être transformé**
|
|
- **Interface actuelle** : Trop orientée "features" et "dashboard admin"
|
|
- **Navigation** : Manque de cohérence avec les apps musicales modernes
|
|
- **Expérience utilisateur** : Pas assez centrée sur la musique et la collaboration
|
|
- **Flows utilisateurs** : Manque de parcours clairs pour les actions principales
|
|
|
|
### 🎯 **Objectif de transformation**
|
|
Transformer Veza d'une "page de features" vers une **vraie application musicale** avec des parcours utilisateurs clairs et une expérience cohérente.
|
|
|
|
---
|
|
|
|
## 🎨 **Design System**
|
|
|
|
### **Palette de Couleurs**
|
|
```
|
|
Primaire : #6366F1 (Indigo)
|
|
Secondaire : #8B5CF6 (Violet)
|
|
Accent : #F59E0B (Ambre)
|
|
Succès : #10B981 (Émeraude)
|
|
Erreur : #EF4444 (Rouge)
|
|
Avertissement : #F59E0B (Ambre)
|
|
Info : #3B82F6 (Bleu)
|
|
```
|
|
|
|
### **Typographie**
|
|
```
|
|
H1 : 48px - Titres principaux
|
|
H2 : 36px - Sections
|
|
H3 : 24px - Sous-sections
|
|
H4 : 20px - Cartes
|
|
Body : 16px - Texte principal
|
|
Caption : 14px - Métadonnées
|
|
```
|
|
|
|
### **Espacement**
|
|
```
|
|
xs : 4px
|
|
sm : 8px
|
|
md : 16px
|
|
lg : 24px
|
|
xl : 32px
|
|
2xl : 48px
|
|
3xl : 64px
|
|
```
|
|
|
|
### **Bordures**
|
|
```
|
|
radius-sm : 4px
|
|
radius-md : 8px
|
|
radius-lg : 12px
|
|
radius-xl : 16px
|
|
```
|
|
|
|
### **Ombres**
|
|
```
|
|
shadow-sm : 0 1px 2px rgba(0, 0, 0, 0.05)
|
|
shadow-md : 0 4px 6px rgba(0, 0, 0, 0.1)
|
|
shadow-lg : 0 10px 15px rgba(0, 0, 0, 0.1)
|
|
shadow-xl : 0 20px 25px rgba(0, 0, 0, 0.1)
|
|
```
|
|
|
|
---
|
|
|
|
## 🧩 **Composants UI**
|
|
|
|
### **1. Navigation**
|
|
|
|
#### **Header Principal**
|
|
```
|
|
[Logo Veza] [Recherche globale] [Notifications] [Profil utilisateur]
|
|
```
|
|
|
|
**Spécifications :**
|
|
- Hauteur : 64px
|
|
- Background : #1F2937 (gray-800)
|
|
- Border bottom : 1px solid #374151 (gray-700)
|
|
- Logo : 32px de hauteur
|
|
- Recherche : Input avec icône, placeholder "Rechercher..."
|
|
- Notifications : Badge avec compteur
|
|
- Profil : Avatar + dropdown menu
|
|
|
|
#### **Sidebar Principale**
|
|
```
|
|
🏠 Accueil
|
|
🎵 Bibliothèque
|
|
🔍 Découverte
|
|
💬 Communauté
|
|
🎤 Studio
|
|
📊 Analytics
|
|
🛒 Marketplace
|
|
📚 Formation
|
|
📻 Radio
|
|
```
|
|
|
|
**Spécifications :**
|
|
- Largeur : 256px
|
|
- Background : #111827 (gray-900)
|
|
- Border right : 1px solid #374151 (gray-700)
|
|
- Items : 48px de hauteur, padding 16px
|
|
- Hover : #374151 (gray-700)
|
|
- Active : #6366F1 (indigo-500)
|
|
- Icônes : 20px, espacement 12px avec texte
|
|
|
|
#### **Mini-Player (Bottom Bar)**
|
|
```
|
|
[Cover] [Infos track] [Contrôles] [Volume] [Queue] [Full Player]
|
|
```
|
|
|
|
**Spécifications :**
|
|
- Hauteur : 80px
|
|
- Background : #1F2937 (gray-800)
|
|
- Border top : 1px solid #374151 (gray-700)
|
|
- Cover : 56px x 56px
|
|
- Contrôles : Play/Pause, Previous, Next
|
|
- Volume : Slider horizontal
|
|
- Queue : Badge avec nombre de tracks
|
|
|
|
### **2. Cards et Conteneurs**
|
|
|
|
#### **Track Card**
|
|
```
|
|
[Cover 64x64] [Titre] [Artiste] [Durée] [Actions]
|
|
```
|
|
|
|
**Spécifications :**
|
|
- Padding : 16px
|
|
- Border radius : 8px
|
|
- Background : #1F2937 (gray-800)
|
|
- Hover : #374151 (gray-700)
|
|
- Cover : 64px x 64px, border radius 4px
|
|
- Actions : Like, Share, More (3 dots)
|
|
|
|
#### **Playlist Card**
|
|
```
|
|
[Cover 120x120] [Titre] [Description] [Nombre de tracks] [Actions]
|
|
```
|
|
|
|
**Spécifications :**
|
|
- Padding : 16px
|
|
- Border radius : 8px
|
|
- Background : #1F2937 (gray-800)
|
|
- Hover : #374151 (gray-700)
|
|
- Cover : 120px x 120px, border radius 8px
|
|
- Description : 2 lignes max, ellipsis
|
|
|
|
#### **User Card**
|
|
```
|
|
[Avatar 48x48] [Nom] [Rôle] [Statut] [Actions]
|
|
```
|
|
|
|
**Spécifications :**
|
|
- Padding : 16px
|
|
- Border radius : 8px
|
|
- Background : #1F2937 (gray-800)
|
|
- Hover : #374151 (gray-700)
|
|
- Avatar : 48px x 48px, border radius 50%
|
|
- Statut : Badge coloré (online, offline, busy)
|
|
|
|
### **3. Boutons et Actions**
|
|
|
|
#### **Bouton Primaire**
|
|
```
|
|
Background : #6366F1 (indigo-500)
|
|
Text : #FFFFFF (white)
|
|
Padding : 12px 24px
|
|
Border radius : 8px
|
|
Hover : #4F46E5 (indigo-600)
|
|
```
|
|
|
|
#### **Bouton Secondaire**
|
|
```
|
|
Background : transparent
|
|
Text : #6366F1 (indigo-500)
|
|
Border : 1px solid #6366F1 (indigo-500)
|
|
Padding : 12px 24px
|
|
Border radius : 8px
|
|
Hover : #6366F1 (indigo-500) background
|
|
```
|
|
|
|
#### **Bouton Ghost**
|
|
```
|
|
Background : transparent
|
|
Text : #9CA3AF (gray-400)
|
|
Padding : 12px 24px
|
|
Border radius : 8px
|
|
Hover : #374151 (gray-700) background
|
|
```
|
|
|
|
### **4. Formulaires**
|
|
|
|
#### **Input Field**
|
|
```
|
|
Background : #1F2937 (gray-800)
|
|
Border : 1px solid #374151 (gray-700)
|
|
Text : #F9FAFB (gray-50)
|
|
Placeholder : #9CA3AF (gray-400)
|
|
Padding : 12px 16px
|
|
Border radius : 8px
|
|
Focus : #6366F1 (indigo-500) border
|
|
```
|
|
|
|
#### **Textarea**
|
|
```
|
|
Background : #1F2937 (gray-800)
|
|
Border : 1px solid #374151 (gray-700)
|
|
Text : #F9FAFB (gray-50)
|
|
Placeholder : #9CA3AF (gray-400)
|
|
Padding : 12px 16px
|
|
Border radius : 8px
|
|
Resize : vertical
|
|
```
|
|
|
|
#### **Select Dropdown**
|
|
```
|
|
Background : #1F2937 (gray-800)
|
|
Border : 1px solid #374151 (gray-700)
|
|
Text : #F9FAFB (gray-50)
|
|
Padding : 12px 16px
|
|
Border radius : 8px
|
|
Dropdown : #111827 (gray-900) background
|
|
```
|
|
|
|
### **5. Modales et Overlays**
|
|
|
|
#### **Modal**
|
|
```
|
|
Background : rgba(0, 0, 0, 0.5)
|
|
Content : #1F2937 (gray-800)
|
|
Border radius : 12px
|
|
Padding : 24px
|
|
Max width : 500px
|
|
Shadow : 0 20px 25px rgba(0, 0, 0, 0.1)
|
|
```
|
|
|
|
#### **Toast Notification**
|
|
```
|
|
Background : #1F2937 (gray-800)
|
|
Border : 1px solid #374151 (gray-700)
|
|
Text : #F9FAFB (gray-50)
|
|
Padding : 16px
|
|
Border radius : 8px
|
|
Shadow : 0 10px 15px rgba(0, 0, 0, 0.1)
|
|
Position : top-right
|
|
```
|
|
|
|
### **6. Player Audio**
|
|
|
|
#### **Player Principal**
|
|
```
|
|
Background : #111827 (gray-900)
|
|
Border : 1px solid #374151 (gray-700)
|
|
Padding : 24px
|
|
Border radius : 12px
|
|
```
|
|
|
|
#### **Waveform**
|
|
```
|
|
Height : 60px
|
|
Background : #1F2937 (gray-800)
|
|
Wave color : #6366F1 (indigo-500)
|
|
Progress color : #F59E0B (amber-500)
|
|
Border radius : 4px
|
|
```
|
|
|
|
#### **Contrôles**
|
|
```
|
|
Play/Pause : 48px x 48px
|
|
Previous/Next : 32px x 32px
|
|
Volume : 24px x 24px
|
|
Queue : 24px x 24px
|
|
```
|
|
|
|
---
|
|
|
|
## 📱 **Pages et Layouts**
|
|
|
|
### **1. Page d'Accueil (Home)**
|
|
```
|
|
URL: /
|
|
Layout: Header + Sidebar + Main Content + Mini-Player
|
|
```
|
|
|
|
**Sections :**
|
|
- **Hero Section** : 400px de hauteur, gradient background
|
|
- **Tracks Populaires** : Carrousel horizontal, 4 tracks visibles
|
|
- **Artistes en Vedette** : Grid 3x2, cards 200px de largeur
|
|
- **Playlists Recommandées** : Grid 2x3, cards 300px de largeur
|
|
- **Activité Récente** : Liste verticale, cards 100px de hauteur
|
|
- **Tutoriels Populaires** : Grid 2x2, cards 250px de largeur
|
|
- **Contests Actifs** : Bannière horizontale, 120px de hauteur
|
|
- **Live Streams** : Carrousel horizontal, 3 streams visibles
|
|
|
|
### **2. Bibliothèque (Library)**
|
|
```
|
|
URL: /library
|
|
Layout: Header + Sidebar + Main Content + Mini-Player
|
|
```
|
|
|
|
**Sections :**
|
|
- **Header avec filtres** : 80px de hauteur
|
|
- **Mes Tracks** : Table avec colonnes (Cover, Titre, Artiste, Album, Durée, Actions)
|
|
- **Playlists** : Grid 4x3, cards 200px de largeur
|
|
- **Favoris** : Liste verticale, cards 80px de hauteur
|
|
- **Historique** : Liste verticale, cards 80px de hauteur
|
|
- **Téléchargements** : Liste verticale, cards 80px de hauteur
|
|
- **Collaborations** : Grid 3x2, cards 250px de largeur
|
|
- **Drafts** : Liste verticale, cards 80px de hauteur
|
|
- **Archives** : Liste verticale, cards 80px de hauteur
|
|
|
|
### **3. Découverte (Discover)**
|
|
```
|
|
URL: /discover
|
|
Layout: Header + Sidebar + Main Content + Mini-Player
|
|
```
|
|
|
|
**Sections :**
|
|
- **Filtres avancés** : Barre horizontale, 60px de hauteur
|
|
- **Nouveautés** : Carrousel horizontal, 4 tracks visibles
|
|
- **Tendances** : Carrousel horizontal, 4 tracks visibles
|
|
- **Artistes Similaires** : Grid 4x2, cards 150px de largeur
|
|
- **Genres** : Grid 3x3, cards 200px de largeur
|
|
- **Mood** : Grid 2x4, cards 250px de largeur
|
|
- **Événements** : Liste verticale, cards 120px de hauteur
|
|
- **Charts** : Table avec colonnes (Position, Cover, Titre, Artiste, Durée, Actions)
|
|
- **Radio** : Grid 2x3, cards 200px de largeur
|
|
|
|
### **4. Communauté (Community)**
|
|
```
|
|
URL: /community
|
|
Layout: Header + Sidebar + Main Content + Mini-Player
|
|
```
|
|
|
|
**Sections :**
|
|
- **Salons de discussion** : Liste verticale, cards 100px de hauteur
|
|
- **Directs** : Liste verticale, cards 80px de hauteur
|
|
- **Groupes** : Grid 3x2, cards 200px de largeur
|
|
- **Événements** : Liste verticale, cards 120px de hauteur
|
|
- **Profils** : Grid 4x3, cards 150px de largeur
|
|
- **Activité** : Feed vertical, cards 120px de hauteur
|
|
- **Jam Sessions** : Grid 2x2, cards 250px de largeur
|
|
- **Forums** : Liste verticale, cards 100px de hauteur
|
|
|
|
### **5. Studio (Studio)**
|
|
```
|
|
URL: /studio
|
|
Layout: Header + Sidebar + Main Content + Mini-Player
|
|
```
|
|
|
|
**Sections :**
|
|
- **Projets** : Grid 3x2, cards 250px de largeur
|
|
- **Collaboration** : Interface temps réel, 400px de hauteur
|
|
- **Plugins** : Grid 4x3, cards 150px de largeur
|
|
- **Mastering** : Interface de mastering, 300px de hauteur
|
|
- **Templates** : Grid 3x3, cards 200px de largeur
|
|
- **Exports** : Panel de configuration, 200px de hauteur
|
|
- **Samples** : Grid 4x4, cards 100px de largeur
|
|
- **Presets** : Grid 3x4, cards 150px de largeur
|
|
|
|
### **6. Analytics (Analytics)**
|
|
```
|
|
URL: /analytics
|
|
Layout: Header + Sidebar + Main Content + Mini-Player
|
|
```
|
|
|
|
**Sections :**
|
|
- **Vue d'ensemble** : Dashboard avec métriques, 300px de hauteur
|
|
- **Audience** : Graphiques interactifs, 400px de hauteur
|
|
- **Engagement** : Graphiques interactifs, 400px de hauteur
|
|
- **Revenus** : Graphiques interactifs, 400px de hauteur
|
|
- **Comparaisons** : Tableaux comparatifs, 300px de hauteur
|
|
- **Prédictions** : Graphiques prédictifs, 400px de hauteur
|
|
- **Rapports** : Liste de rapports, 200px de hauteur
|
|
- **A/B Testing** : Interface de tests, 300px de hauteur
|
|
|
|
### **7. Marketplace (Marketplace)**
|
|
```
|
|
URL: /marketplace
|
|
Layout: Header + Sidebar + Main Content + Mini-Player
|
|
```
|
|
|
|
**Sections :**
|
|
- **Tracks** : Grid 3x4, cards 200px de largeur
|
|
- **Samples** : Grid 4x4, cards 150px de largeur
|
|
- **Presets** : Grid 3x4, cards 150px de largeur
|
|
- **Services** : Grid 2x3, cards 250px de largeur
|
|
- **Matériel** : Grid 3x3, cards 200px de largeur
|
|
- **Licences** : Liste verticale, cards 100px de hauteur
|
|
- **Contests** : Grid 2x2, cards 250px de largeur
|
|
- **Formation** : Grid 3x2, cards 200px de largeur
|
|
|
|
### **8. Formation (Education)**
|
|
```
|
|
URL: /education
|
|
Layout: Header + Sidebar + Main Content + Mini-Player
|
|
```
|
|
|
|
**Sections :**
|
|
- **Cours** : Grid 2x3, cards 300px de largeur
|
|
- **Tutoriels** : Grid 3x3, cards 200px de largeur
|
|
- **Workshops** : Grid 2x2, cards 250px de largeur
|
|
- **Certifications** : Liste verticale, cards 120px de hauteur
|
|
- **Mentorat** : Grid 3x2, cards 200px de largeur
|
|
- **Projets** : Grid 2x3, cards 250px de largeur
|
|
- **Communauté** : Feed vertical, cards 100px de hauteur
|
|
- **Ressources** : Grid 4x3, cards 150px de largeur
|
|
|
|
### **9. Radio & Streaming (Radio)**
|
|
```
|
|
URL: /radio
|
|
Layout: Header + Sidebar + Main Content + Mini-Player
|
|
```
|
|
|
|
**Sections :**
|
|
- **Live Streams** : Carrousel horizontal, 3 streams visibles
|
|
- **Radio Stations** : Grid 3x3, cards 200px de largeur
|
|
- **Podcasts** : Grid 2x3, cards 250px de largeur
|
|
- **DJ Sets** : Grid 3x2, cards 200px de largeur
|
|
- **Concerts** : Grid 2x2, cards 250px de largeur
|
|
- **Émissions** : Liste verticale, cards 100px de hauteur
|
|
- **Interactivité** : Chat en temps réel, 300px de hauteur
|
|
- **Archives** : Liste verticale, cards 80px de hauteur
|
|
|
|
### **10. Profil (Profile)**
|
|
```
|
|
URL: /profile
|
|
Layout: Header + Sidebar + Main Content + Mini-Player
|
|
```
|
|
|
|
**Sections :**
|
|
- **Informations** : Card de profil, 200px de hauteur
|
|
- **Statistiques** : Dashboard personnel, 300px de hauteur
|
|
- **Portfolio** : Grid 3x3, cards 200px de largeur
|
|
- **Paramètres** : Formulaire de configuration, 400px de hauteur
|
|
- **Abonnements** : Liste des plans, 200px de hauteur
|
|
- **Support** : Interface d'aide, 300px de hauteur
|
|
- **Sécurité** : Configuration sécurité, 200px de hauteur
|
|
- **Intégrations** : Liste des connexions, 200px de hauteur
|
|
|
|
---
|
|
|
|
## 📱 **Responsive Design**
|
|
|
|
### **Breakpoints**
|
|
```
|
|
Mobile : 320px - 768px
|
|
Tablet : 768px - 1024px
|
|
Desktop : 1024px - 1440px
|
|
Large Desktop : 1440px+
|
|
```
|
|
|
|
### **Mobile Adaptations**
|
|
- **Sidebar** : Drawer coulissant
|
|
- **Header** : Hauteur réduite à 56px
|
|
- **Cards** : Largeur 100%, padding réduit
|
|
- **Grids** : 1 colonne sur mobile, 2 sur tablet
|
|
- **Player** : Contrôles simplifiés
|
|
|
|
### **Tablet Adaptations**
|
|
- **Sidebar** : Largeur réduite à 200px
|
|
- **Grids** : 2-3 colonnes selon le contenu
|
|
- **Cards** : Taille intermédiaire
|
|
- **Player** : Contrôles complets
|
|
|
|
### **Desktop Adaptations**
|
|
- **Sidebar** : Largeur complète 256px
|
|
- **Grids** : 3-4 colonnes selon le contenu
|
|
- **Cards** : Taille complète
|
|
- **Player** : Toutes les fonctionnalités
|
|
|
|
---
|
|
|
|
## 🎨 **Animations et Transitions**
|
|
|
|
### **Transitions de base**
|
|
```
|
|
Duration : 200ms
|
|
Easing : ease-in-out
|
|
```
|
|
|
|
### **Hover Effects**
|
|
```
|
|
Scale : 1.02
|
|
Shadow : +1 level
|
|
Background : +1 level
|
|
```
|
|
|
|
### **Loading States**
|
|
```
|
|
Skeleton : 2s animation
|
|
Spinner : 1s rotation
|
|
Progress : 0-100% animation
|
|
```
|
|
|
|
### **Page Transitions**
|
|
```
|
|
Fade : 300ms
|
|
Slide : 300ms
|
|
Scale : 300ms
|
|
```
|
|
|
|
---
|
|
|
|
## 🚀 **Roadmap d'Implémentation UI**
|
|
|
|
### **Phase 1 : Design System (1-2 semaines)**
|
|
- [ ] Création des composants de base
|
|
- [ ] Définition de la palette de couleurs
|
|
- [ ] Typographie et espacement
|
|
- [ ] Icônes et illustrations
|
|
- [ ] Animations de base
|
|
|
|
### **Phase 2 : Navigation (2-3 semaines)**
|
|
- [ ] Header principal
|
|
- [ ] Sidebar navigation
|
|
- [ ] Mini-player
|
|
- [ ] Responsive navigation
|
|
- [ ] États actifs et hover
|
|
|
|
### **Phase 3 : Pages Principales (3-4 semaines)**
|
|
- [ ] Page d'accueil
|
|
- [ ] Bibliothèque
|
|
- [ ] Découverte
|
|
- [ ] Communauté
|
|
- [ ] Studio
|
|
|
|
### **Phase 4 : Pages Secondaires (4-5 semaines)**
|
|
- [ ] Analytics
|
|
- [ ] Marketplace
|
|
- [ ] Formation
|
|
- [ ] Radio
|
|
- [ ] Profil
|
|
|
|
### **Phase 5 : Responsive (5-6 semaines)**
|
|
- [ ] Mobile adaptations
|
|
- [ ] Tablet adaptations
|
|
- [ ] Desktop optimizations
|
|
- [ ] Cross-browser testing
|
|
|
|
### **Phase 6 : Polish (6-8 semaines)**
|
|
- [ ] Animations avancées
|
|
- [ ] Micro-interactions
|
|
- [ ] Performance optimizations
|
|
- [ ] Accessibility improvements
|
|
|
|
---
|
|
|
|
## 📊 **Métriques de Succès UI**
|
|
|
|
### **Performance**
|
|
- Temps de chargement < 2s
|
|
- First Contentful Paint < 1s
|
|
- Largest Contentful Paint < 2.5s
|
|
- Cumulative Layout Shift < 0.1
|
|
|
|
### **Accessibilité**
|
|
- Score WCAG AA
|
|
- Navigation clavier
|
|
- Screen reader compatibility
|
|
- Color contrast ratio > 4.5:1
|
|
|
|
### **Utilisabilité**
|
|
- Taux de conversion
|
|
- Temps de tâche
|
|
- Taux d'erreur
|
|
- Satisfaction utilisateur
|
|
|
|
### **Technique**
|
|
- Bundle size < 500KB
|
|
- Lighthouse score > 90
|
|
- Cross-browser compatibility
|
|
- Mobile performance
|
|
|
|
---
|
|
|
|
## 🎯 **Conclusion**
|
|
|
|
Ce plan UI transforme Veza en une **véritable application musicale** avec un design system cohérent, des composants réutilisables et une expérience utilisateur optimisée.
|
|
|
|
**Points clés :**
|
|
- ✅ Design system complet et cohérent
|
|
- ✅ Composants réutilisables et modulaires
|
|
- ✅ Responsive design multi-plateforme
|
|
- ✅ Animations et micro-interactions
|
|
- ✅ Accessibilité et performance
|
|
- ✅ Expérience utilisateur optimisée
|
|
|
|
**Prochaines étapes :**
|
|
1. Création des composants de base
|
|
2. Développement des pages principales
|
|
3. Tests utilisateurs et itérations
|
|
4. Optimisations et polish final
|
|
|
|
---
|
|
|
|
*Document créé le 2024-01-15 - Veza Platform UI Team*
|