Recherche — Innovations UI/UX pour Veza
Notes de recherche sur les pistes d'innovation artistique radicale pour
l'interface de Veza. Exploration de paradigmes alternatifs au web classique.
Inclut la methodologie pour implementer avec Claude Code.
Source : conversation de brainstorming (pre-2026)
Note : les concepts retenus ont ete formalises dans
05_EXPERIENCE_UTILISATEUR/CONCEPTS_INNOVANTS_VEZA.md
Constat de depart
Depuis ~2014-2015, le web est domine par les memes paradigmes UI :
header / hero / grid / cards / infinite scroll (Bootstrap, Material Design, Tailwind).
10 pistes d'innovation radicale
1. Web comme espace 3D navigable
- Chaque page = objet spatial, navigation = deplacement
- Technos : WebGL, Three.js, Babylon.js, A-Frame
- Rupture totale mais UX difficile + gourmand en ressources
2. Interfaces generatives
- Site jamais identique deux fois (layout algorithmique, typo variable)
- Technos : p5.js, Processing, WebGL shaders
- Tres sous-exploite
3. Sites non-lineaires
- Navigation en graphe / constellation (inspire de Obsidian, Roam)
- Exploration cognitive plutot que scroll vertical
4. Interfaces temporelles (retenue)
- Contenu selon l'heure, pages qui vieillissent, UI saisonniere
- Art numerique pur
5. Interfaces physiques / tangibles
- Controle par mouvement, camera, son, gestes
- TensorFlow.js, MediaPipe, WebRTC
6. Web comme monde persistant (retenu)
- Visiteurs laissent des traces, contenu genere par utilisateurs
- Monde qui evolue
7. Anti-interface (brutalisme numerique)
- Refus total de l'UX moderne, chaos controle
8. Interface narrative (retenue)
- Le site est une histoire interactive (inspire de Kentucky Route Zero)
9. Interfaces biologiques
- UI inspiree de cellules, organismes, ecosystemes
10. Web sans pages
- Flux infini de contenu contextuel
Concept retenu pour Veza : monde 2D vivant
Combinaison des pistes 1 (spatial) + 4 (temps) + 6 (persistant) + 8 (narratif),
mais en 2D pour rester leger et praticable au quotidien.
Principe
- Interface principale = carte 2D explorable (pas de pages)
- La 3D reservee aux moments importants (page artiste, sortie album, vue eclatee produit)
- Esthetique lavis japonais (sumi-e) : textures papier, encre, lignes tremblees
Mapping UI → monde
| Zone |
Contenu |
| Ville |
Artistes populaires |
| Foret |
Indie |
| Ocean |
Ambient |
| Montagnes |
Experimental |
Superposition de couches
layer 1 : papier / texture
layer 2 : paysage
layer 3 : elements musicaux
layer 4 : effets atmospheriques (brouillard, encre, pluie)
layer 5 : UI
Interaction musicale subtile
| Parametre audio |
Effet visuel |
| BPM |
Vitesse du vent |
| Basses |
Vibration de l'eau |
| Tonalite |
Couleur du ciel |
Monde persistant (leger)
- Morceaux populaires = grands arbres
- Stockage minimal : positions, popularite, interactions
Narration pour artistes
- Chaque artiste peut creer une zone personnalisee (ile)
- Le visiteur decouvre morceaux, images, textes en immersion
Stack technique realiste
- 2D : PixiJS, Canvas 2D (ultra leger, mobile friendly)
- Audio : WebAudio API
- 3D ponctuelle : Three.js (moments speciaux seulement)
- Backend : API classique + CDN audio
- UI overlays : React
Methodologie pour implementer avec Claude Code
Ordre optimal des prompts
- Concept monde (paradigme 2D explorable)
- Mapping objets (artiste → lieu, album → batiment, etc.)
- Regles UX (camera top-down, pas de chargement de pages)
- Style artistique (sumi-e, textures, parallax)
- Contraintes techniques (leger, mobile, PixiJS)
- Architecture du systeme
- Prototype minimal
Conseil cle
Commencer par un seul prototype : la "discovery map".
Ne pas transformer toute l'app d'un coup.