senke/veza
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions
veza/veza-docs/current/domains/misc/figma-pages.md

13 KiB
Raw Blame History

id title sidebar_label
figma-pages 📱 Pages Figma - Veza Platform 📱 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