senke/veza
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions
veza/veza-docs/vision/domains/backend/ui-plan.md

15 KiB
Raw Blame History

id title sidebar_label
ui-plan 🎨 Plan UI Complet - Veza Platform 🎨 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