567 lines
13 KiB
Markdown
567 lines
13 KiB
Markdown
---
|
|
id: "figma-pages"
|
|
title: "📱 Pages Figma - Veza Platform"
|
|
sidebar_label: "📱 Pages Figma - Veza Platform"
|
|
---
|
|
> NOTE: Cette page reflète l'ÉTAT ACTUEL.
|
|
|
|
# 📱 Pages Figma - Veza Platform
|
|
|
|
> **Spécifications détaillées des pages pour la réalisation Figma**
|
|
|
|
## 📋 **Structure des Pages**
|
|
|
|
### **1. Page d'Accueil (Home)**
|
|
```
|
|
URL: /
|
|
Layout: Header + Sidebar + Main Content + Mini-Player
|
|
Breakpoints: Mobile, Tablet, Desktop, Large Desktop
|
|
```
|
|
|
|
#### **Sections Principales**
|
|
|
|
**Hero Section**
|
|
- **Hauteur** : 400px
|
|
- **Background** : Gradient (indigo-500 to purple-600)
|
|
- **Contenu** :
|
|
- Titre principal : "Créer, Partager, Collaborer"
|
|
- Sous-titre : "La plateforme musicale pour créateurs"
|
|
- CTA : "Commencer maintenant"
|
|
- Image : Illustration musicale
|
|
|
|
**Tracks Populaires**
|
|
- **Hauteur** : 200px
|
|
- **Layout** : Carrousel horizontal
|
|
- **Cards** : 4 tracks visibles
|
|
- **Contenu** : Cover + Titre + Artiste + Durée
|
|
|
|
**Artistes en Vedette**
|
|
- **Hauteur** : 300px
|
|
- **Layout** : Grid 3x2
|
|
- **Cards** : 200px de largeur
|
|
- **Contenu** : Avatar + Nom + Genre + Followers
|
|
|
|
**Playlists Recommandées**
|
|
- **Hauteur** : 400px
|
|
- **Layout** : Grid 2x3
|
|
- **Cards** : 300px de largeur
|
|
- **Contenu** : Cover + Titre + Description + Track count
|
|
|
|
**Activité Récente**
|
|
- **Hauteur** : 300px
|
|
- **Layout** : Liste verticale
|
|
- **Cards** : 100px de hauteur
|
|
- **Contenu** : Avatar + Action + Time + Track preview
|
|
|
|
**Tutoriels Populaires**
|
|
- **Hauteur** : 300px
|
|
- **Layout** : Grid 2x2
|
|
- **Cards** : 250px de largeur
|
|
- **Contenu** : Thumbnail + Titre + Durée + Views
|
|
|
|
**Contests Actifs**
|
|
- **Hauteur** : 120px
|
|
- **Layout** : Bannière horizontale
|
|
- **Contenu** : Titre + Description + CTA + Timer
|
|
|
|
**Live Streams**
|
|
- **Hauteur** : 200px
|
|
- **Layout** : Carrousel horizontal
|
|
- **Cards** : 3 streams visibles
|
|
- **Contenu** : Thumbnail + Titre + Artiste + Viewers
|
|
|
|
#### **Responsive Adaptations**
|
|
|
|
**Mobile (320px - 768px)**
|
|
- Hero : 300px de hauteur
|
|
- Grids : 1 colonne
|
|
- Carrousels : 2 items visibles
|
|
- Cards : 100% largeur
|
|
|
|
**Tablet (768px - 1024px)**
|
|
- Hero : 350px de hauteur
|
|
- Grids : 2 colonnes
|
|
- Carrousels : 3 items visibles
|
|
- Cards : 50% largeur
|
|
|
|
**Desktop (1024px - 1440px)**
|
|
- Hero : 400px de hauteur
|
|
- Grids : 3 colonnes
|
|
- Carrousels : 4 items visibles
|
|
- Cards : 33% largeur
|
|
|
|
**Large Desktop (1440px+)**
|
|
- Hero : 400px de hauteur
|
|
- Grids : 4 colonnes
|
|
- Carrousels : 5 items visibles
|
|
- Cards : 25% largeur
|
|
|
|
---
|
|
|
|
### **2. Bibliothèque (Library)**
|
|
```
|
|
URL: /library
|
|
Layout: Header + Sidebar + Main Content + Mini-Player
|
|
Breakpoints: Mobile, Tablet, Desktop, Large Desktop
|
|
```
|
|
|
|
#### **Sections Principales**
|
|
|
|
**Header avec Filtres**
|
|
- **Hauteur** : 80px
|
|
- **Contenu** :
|
|
- Titre : "Ma Bibliothèque"
|
|
- Filtres : Tous, Tracks, Playlists, Favoris, etc.
|
|
- Recherche : Input avec icône
|
|
- Actions : Upload, Créer playlist
|
|
|
|
**Mes Tracks**
|
|
- **Hauteur** : 400px
|
|
- **Layout** : Table
|
|
- **Colonnes** : Cover, Titre, Artiste, Album, Durée, Actions
|
|
- **Contenu** : Liste des tracks uploadés
|
|
|
|
**Playlists**
|
|
- **Hauteur** : 300px
|
|
- **Layout** : Grid 4x3
|
|
- **Cards** : 200px de largeur
|
|
- **Contenu** : Cover + Titre + Track count + Actions
|
|
|
|
**Favoris**
|
|
- **Hauteur** : 200px
|
|
- **Layout** : Liste verticale
|
|
- **Cards** : 80px de hauteur
|
|
- **Contenu** : Cover + Titre + Artiste + Actions
|
|
|
|
**Historique**
|
|
- **Hauteur** : 200px
|
|
- **Layout** : Liste verticale
|
|
- **Cards** : 80px de hauteur
|
|
- **Contenu** : Cover + Titre + Artiste + Time
|
|
|
|
**Téléchargements**
|
|
- **Hauteur** : 200px
|
|
- **Layout** : Liste verticale
|
|
- **Cards** : 80px de hauteur
|
|
- **Contenu** : Cover + Titre + Artiste + Status
|
|
|
|
**Collaborations**
|
|
- **Hauteur** : 300px
|
|
- **Layout** : Grid 3x2
|
|
- **Cards** : 250px de largeur
|
|
- **Contenu** : Cover + Titre + Collaborateurs + Status
|
|
|
|
**Drafts**
|
|
- **Hauteur** : 200px
|
|
- **Layout** : Liste verticale
|
|
- **Cards** : 80px de hauteur
|
|
- **Contenu** : Cover + Titre + Last modified + Actions
|
|
|
|
**Archives**
|
|
- **Hauteur** : 200px
|
|
- **Layout** : Liste verticale
|
|
- **Cards** : 80px de hauteur
|
|
- **Contenu** : Cover + Titre + Artiste + Archived date
|
|
|
|
#### **Responsive Adaptations**
|
|
|
|
**Mobile (320px - 768px)**
|
|
- Header : 60px de hauteur
|
|
- Table : Cards verticales
|
|
- Grids : 1 colonne
|
|
- Cards : 100% largeur
|
|
|
|
**Tablet (768px - 1024px)**
|
|
- Header : 70px de hauteur
|
|
- Table : Colonnes réduites
|
|
- Grids : 2 colonnes
|
|
- Cards : 50% largeur
|
|
|
|
**Desktop (1024px - 1440px)**
|
|
- Header : 80px de hauteur
|
|
- Table : Toutes les colonnes
|
|
- Grids : 3 colonnes
|
|
- Cards : 33% largeur
|
|
|
|
**Large Desktop (1440px+)**
|
|
- Header : 80px de hauteur
|
|
- Table : Toutes les colonnes
|
|
- Grids : 4 colonnes
|
|
- Cards : 25% largeur
|
|
|
|
---
|
|
|
|
### **3. Découverte (Discover)**
|
|
```
|
|
URL: /discover
|
|
Layout: Header + Sidebar + Main Content + Mini-Player
|
|
Breakpoints: Mobile, Tablet, Desktop, Large Desktop
|
|
```
|
|
|
|
#### **Sections Principales**
|
|
|
|
**Filtres Avancés**
|
|
- **Hauteur** : 60px
|
|
- **Contenu** :
|
|
- Genres : Dropdown multi-select
|
|
- Mood : Chips sélectionnables
|
|
- Durée : Slider range
|
|
- BPM : Input range
|
|
- Date : Date picker
|
|
|
|
**Nouveautés**
|
|
- **Hauteur** : 200px
|
|
- **Layout** : Carrousel horizontal
|
|
- **Cards** : 4 tracks visibles
|
|
- **Contenu** : Cover + Titre + Artiste + Durée + Badge "Nouveau"
|
|
|
|
**Tendances**
|
|
- **Hauteur** : 200px
|
|
- **Layout** : Carrousel horizontal
|
|
- **Cards** : 4 tracks visibles
|
|
- **Contenu** : Cover + Titre + Artiste + Durée + Badge "Trending"
|
|
|
|
**Artistes Similaires**
|
|
- **Hauteur** : 250px
|
|
- **Layout** : Grid 4x2
|
|
- **Cards** : 150px de largeur
|
|
- **Contenu** : Avatar + Nom + Genre + Followers + Follow button
|
|
|
|
**Genres**
|
|
- **Hauteur** : 300px
|
|
- **Layout** : Grid 3x3
|
|
- **Cards** : 200px de largeur
|
|
- **Contenu** : Cover + Nom + Track count + Play button
|
|
|
|
**Mood**
|
|
- **Hauteur** : 300px
|
|
- **Layout** : Grid 2x4
|
|
- **Cards** : 250px de largeur
|
|
- **Contenu** : Cover + Mood + Track count + Play button
|
|
|
|
**Événements**
|
|
- **Hauteur** : 300px
|
|
- **Layout** : Liste verticale
|
|
- **Cards** : 120px de hauteur
|
|
- **Contenu** : Cover + Titre + Date + Location + RSVP
|
|
|
|
**Charts**
|
|
- **Hauteur** : 400px
|
|
- **Layout** : Table
|
|
- **Colonnes** : Position, Cover, Titre, Artiste, Durée, Actions
|
|
- **Contenu** : Classement des tracks
|
|
|
|
**Radio**
|
|
- **Hauteur** : 250px
|
|
- **Layout** : Grid 2x3
|
|
- **Cards** : 200px de largeur
|
|
- **Contenu** : Cover + Nom + Description + Listeners + Play button
|
|
|
|
#### **Responsive Adaptations**
|
|
|
|
**Mobile (320px - 768px)**
|
|
- Filtres : Drawer coulissant
|
|
- Carrousels : 2 items visibles
|
|
- Grids : 1 colonne
|
|
- Table : Cards verticales
|
|
|
|
**Tablet (768px - 1024px)**
|
|
- Filtres : Barre horizontale
|
|
- Carrousels : 3 items visibles
|
|
- Grids : 2 colonnes
|
|
- Table : Colonnes réduites
|
|
|
|
**Desktop (1024px - 1440px)**
|
|
- Filtres : Barre horizontale complète
|
|
- Carrousels : 4 items visibles
|
|
- Grids : 3 colonnes
|
|
- Table : Toutes les colonnes
|
|
|
|
**Large Desktop (1440px+)**
|
|
- Filtres : Barre horizontale complète
|
|
- Carrousels : 5 items visibles
|
|
- Grids : 4 colonnes
|
|
- Table : Toutes les colonnes
|
|
|
|
---
|
|
|
|
### **4. Communauté (Community)**
|
|
```
|
|
URL: /community
|
|
Layout: Header + Sidebar + Main Content + Mini-Player
|
|
Breakpoints: Mobile, Tablet, Desktop, Large Desktop
|
|
```
|
|
|
|
#### **Sections Principales**
|
|
|
|
**Salons de Discussion**
|
|
- **Hauteur** : 300px
|
|
- **Layout** : Liste verticale
|
|
- **Cards** : 100px de hauteur
|
|
- **Contenu** : Avatar + Nom + Description + Members + Online count
|
|
|
|
**Directs**
|
|
- **Hauteur** : 200px
|
|
- **Layout** : Liste verticale
|
|
- **Cards** : 80px de hauteur
|
|
- **Contenu** : Avatar + Nom + Last message + Time + Unread count
|
|
|
|
**Groupes**
|
|
- **Hauteur** : 300px
|
|
- **Layout** : Grid 3x2
|
|
- **Cards** : 200px de largeur
|
|
- **Contenu** : Cover + Nom + Description + Members + Join button
|
|
|
|
**Événements**
|
|
- **Hauteur** : 300px
|
|
- **Layout** : Liste verticale
|
|
- **Cards** : 120px de hauteur
|
|
- **Contenu** : Cover + Titre + Date + Location + RSVP + Attendees
|
|
|
|
**Profils**
|
|
- **Hauteur** : 300px
|
|
- **Layout** : Grid 4x3
|
|
- **Cards** : 150px de largeur
|
|
- **Contenu** : Avatar + Nom + Genre + Followers + Follow button
|
|
|
|
**Activité**
|
|
- **Hauteur** : 400px
|
|
- **Layout** : Feed vertical
|
|
- **Cards** : 120px de hauteur
|
|
- **Contenu** : Avatar + Action + Content + Time + Interactions
|
|
|
|
**Jam Sessions**
|
|
- **Hauteur** : 300px
|
|
- **Layout** : Grid 2x2
|
|
- **Cards** : 250px de largeur
|
|
- **Contenu** : Cover + Titre + Participants + Status + Join button
|
|
|
|
**Forums**
|
|
- **Hauteur** : 200px
|
|
- **Layout** : Liste verticale
|
|
- **Cards** : 100px de hauteur
|
|
- **Contenu** : Icon + Nom + Description + Posts + Last activity
|
|
|
|
#### **Responsive Adaptations**
|
|
|
|
**Mobile (320px - 768px)**
|
|
- Grids : 1 colonne
|
|
- Cards : 100% largeur
|
|
- Feed : Cards empilées
|
|
- Navigation : Drawer
|
|
|
|
**Tablet (768px - 1024px)**
|
|
- Grids : 2 colonnes
|
|
- Cards : 50% largeur
|
|
- Feed : Cards empilées
|
|
- Navigation : Sidebar réduite
|
|
|
|
**Desktop (1024px - 1440px)**
|
|
- Grids : 3 colonnes
|
|
- Cards : 33% largeur
|
|
- Feed : Cards empilées
|
|
- Navigation : Sidebar complète
|
|
|
|
**Large Desktop (1440px+)**
|
|
- Grids : 4 colonnes
|
|
- Cards : 25% largeur
|
|
- Feed : Cards empilées
|
|
- Navigation : Sidebar complète
|
|
|
|
---
|
|
|
|
### **5. Studio (Studio)**
|
|
```
|
|
URL: /studio
|
|
Layout: Header + Sidebar + Main Content + Mini-Player
|
|
Breakpoints: Mobile, Tablet, Desktop, Large Desktop
|
|
```
|
|
|
|
#### **Sections Principales**
|
|
|
|
**Projets**
|
|
- **Hauteur** : 300px
|
|
- **Layout** : Grid 3x2
|
|
- **Cards** : 250px de largeur
|
|
- **Contenu** : Cover + Nom + Last modified + Status + Actions
|
|
|
|
**Collaboration**
|
|
- **Hauteur** : 400px
|
|
- **Layout** : Interface temps réel
|
|
- **Contenu** :
|
|
- Participants : Liste des collaborateurs
|
|
- Chat : Messages en temps réel
|
|
- Audio : Waveform partagé
|
|
- Contrôles : Play/Pause, Record, Mute
|
|
|
|
**Plugins**
|
|
- **Hauteur** : 300px
|
|
- **Layout** : Grid 4x3
|
|
- **Cards** : 150px de largeur
|
|
- **Contenu** : Icon + Nom + Description + Status + Install button
|
|
|
|
**Mastering**
|
|
- **Hauteur** : 300px
|
|
- **Layout** : Interface de mastering
|
|
- **Contenu** :
|
|
- Waveform : Visualisation audio
|
|
- Contrôles : EQ, Compression, Limiter
|
|
- Presets : Templates prédéfinis
|
|
- Export : Formats et qualité
|
|
|
|
**Templates**
|
|
- **Hauteur** : 300px
|
|
- **Layout** : Grid 3x3
|
|
- **Cards** : 200px de largeur
|
|
- **Contenu** : Cover + Nom + Genre + BPM + Use button
|
|
|
|
**Exports**
|
|
- **Hauteur** : 200px
|
|
- **Layout** : Panel de configuration
|
|
- **Contenu** :
|
|
- Formats : WAV, MP3, FLAC
|
|
- Qualité : 44.1kHz, 48kHz, 96kHz
|
|
- Bitrate : 16bit, 24bit, 32bit
|
|
- Export : Bouton d'export
|
|
|
|
**Samples**
|
|
- **Hauteur** : 300px
|
|
- **Layout** : Grid 4x4
|
|
- **Cards** : 100px de largeur
|
|
- **Contenu** : Waveform + Nom + Durée + Play button
|
|
|
|
**Presets**
|
|
- **Hauteur** : 300px
|
|
- **Layout** : Grid 3x4
|
|
- **Cards** : 150px de largeur
|
|
- **Contenu** : Icon + Nom + Description + Apply button
|
|
|
|
#### **Responsive Adaptations**
|
|
|
|
**Mobile (320px - 768px)**
|
|
- Grids : 1 colonne
|
|
- Interface : Simplifiée
|
|
- Cards : 100% largeur
|
|
- Collaboration : Drawer
|
|
|
|
**Tablet (768px - 1024px)**
|
|
- Grids : 2 colonnes
|
|
- Interface : Intermédiaire
|
|
- Cards : 50% largeur
|
|
- Collaboration : Panel
|
|
|
|
**Desktop (1024px - 1440px)**
|
|
- Grids : 3 colonnes
|
|
- Interface : Complète
|
|
- Cards : 33% largeur
|
|
- Collaboration : Sidebar
|
|
|
|
**Large Desktop (1440px+)**
|
|
- Grids : 4 colonnes
|
|
- Interface : Complète
|
|
- Cards : 25% largeur
|
|
- Collaboration : Sidebar
|
|
|
|
---
|
|
|
|
## 🎨 **Design Tokens**
|
|
|
|
### **1. Couleurs par Page**
|
|
|
|
**Home**
|
|
- Primary : #6366F1 (indigo-500)
|
|
- Secondary : #8B5CF6 (purple-500)
|
|
- Accent : #F59E0B (amber-500)
|
|
|
|
**Library**
|
|
- Primary : #10B981 (emerald-500)
|
|
- Secondary : #059669 (emerald-600)
|
|
- Accent : #F59E0B (amber-500)
|
|
|
|
**Discover**
|
|
- Primary : #3B82F6 (blue-500)
|
|
- Secondary : #2563EB (blue-600)
|
|
- Accent : #F59E0B (amber-500)
|
|
|
|
**Community**
|
|
- Primary : #8B5CF6 (purple-500)
|
|
- Secondary : #7C3AED (violet-600)
|
|
- Accent : #F59E0B (amber-500)
|
|
|
|
**Studio**
|
|
- Primary : #EF4444 (red-500)
|
|
- Secondary : #DC2626 (red-600)
|
|
- Accent : #F59E0B (amber-500)
|
|
|
|
### **2. Typographie par Section**
|
|
|
|
**Titres de Page**
|
|
- Font : 36px, Bold
|
|
- Color : #F9FAFB (gray-50)
|
|
- Line Height : 1.3
|
|
|
|
**Sous-titres**
|
|
- Font : 24px, Semibold
|
|
- Color : #D1D5DB (gray-300)
|
|
- Line Height : 1.4
|
|
|
|
**Contenu**
|
|
- Font : 16px, Regular
|
|
- Color : #F9FAFB (gray-50)
|
|
- Line Height : 1.5
|
|
|
|
**Métadonnées**
|
|
- Font : 14px, Regular
|
|
- Color : #9CA3AF (gray-400)
|
|
- Line Height : 1.4
|
|
|
|
### **3. Espacement par Layout**
|
|
|
|
**Sections Principales**
|
|
- Padding : 24px
|
|
- Margin : 16px
|
|
- Gap : 16px
|
|
|
|
**Cards**
|
|
- Padding : 16px
|
|
- Margin : 8px
|
|
- Gap : 8px
|
|
|
|
**Listes**
|
|
- Padding : 12px
|
|
- Margin : 4px
|
|
- Gap : 4px
|
|
|
|
---
|
|
|
|
## 🚀 **Plan d'Implémentation**
|
|
|
|
### **Phase 1 : Pages Principales (3-4 jours)**
|
|
- [ ] Page d'accueil
|
|
- [ ] Bibliothèque
|
|
- [ ] Découverte
|
|
- [ ] Communauté
|
|
- [ ] Studio
|
|
|
|
### **Phase 2 : Pages Secondaires (2-3 jours)**
|
|
- [ ] Analytics
|
|
- [ ] Marketplace
|
|
- [ ] Formation
|
|
- [ ] Radio
|
|
- [ ] Profil
|
|
|
|
### **Phase 3 : Responsive (2-3 jours)**
|
|
- [ ] Mobile adaptations
|
|
- [ ] Tablet adaptations
|
|
- [ ] Desktop optimizations
|
|
- [ ] Large screen adaptations
|
|
|
|
### **Phase 4 : Polish (1-2 jours)**
|
|
- [ ] Final touches
|
|
- [ ] Consistency check
|
|
- [ ] Export assets
|
|
- [ ] Documentation
|
|
|
|
---
|
|
|
|
*Document créé le 2024-01-15 - Veza Platform Design Team*
|