Le film avant l’interface.
Des visuels généreux, un synopsis court, une action évidente. Chaque écran aide à choisir une séance ou à la reprendre.
LIQUID CINEMA / DIRECTION UX
Chaque détail
sert la séance.
Le cinéma prend la place. L’interface accompagne le geste. Une expérience VODI pensée d’abord pour le mobile, avec le rouge comme signature.
Explorer la maquette
LE CONTENU AU PREMIER PLAN
Nos histoires.
Toute la place.
L’image porte l’émotion.
01 / L’INTENTIONMoins d’effort.
Moins d’effort.
Plus de cinéma.
Le verre accompagne le geste.
La navigation et les commandes flottent au-dessus des images. Reflets, transparence et mouvement rendent leur rôle perceptible.
Le rouge reste votre repère.
Le logo, l’action principale et la progression conservent le rouge VODI. Les affiches apportent le reste des couleurs.
02 / LA SIGNATUREUne matière.
Une matière.
Une identité.
Une base sombre, du blanc doux et la chaleur du rouge. Le relief reste dans les détails.
Rouge VODI
La marque et l’action
#E00000Noir cinéma
L’immersion
#08090BBlanc doux
La lisibilité
#FAF9F6Verre fumé
Les commandes
Flou · reflets · profondeurUne interprétation web du verre liquide. La matière s’inspire des principes de design Apple ↗. Les préférences de confort permettent de réduire la transparence et le mouvement.
03 / LES PARCOURSDe l’envie
De l’envie
à la séance.
Une action principale par étape. Le type d’accès est visible avant de décider.
Retrouver sa séance.
La reprise de lecture arrive juste après le film mis en avant. Le temps restant et la progression donnent un repère immédiat.
On reprend ?Découvrir selon son envie.
La recherche et les filtres permettent de parcourir les titres inclus avec un pass ou disponibles à la location. Un état vide aide à relancer la recherche.
Tout · Inclus avec le pass · À louerChoisir en toute clarté.
La fiche présente le synopsis et le type d’accès. Selon le film : reprendre, voir les options de location ou enregistrer un rappel de sortie.
Une fiche. Une décision claire.Garder la suite pour plus tard.
Le bouton + enregistre le titre dans Ma liste. Une coche confirme l’ajout, et le film reste disponible dans la liste après un rechargement de la maquette.
+ Ma liste → ✓ Ajouté04 / LES ÉCRANSLa même identité.
La même identité.
Le bon geste, partout.
Mobile
Une colonne, des affiches verticales et quatre destinations à portée du pouce. Les fiches s’ouvrent dans un panneau.
Explorer le mobileTablette
Une grille plus ample et des commandes tactiles conservées. La présentation se teste en portrait et en paysage.
Explorer la tabletteTV
Des titres et des commandes agrandis. Un contour lumineux suit la sélection, avec navigation par flèches et Entrée.
Explorer la TV05 / LA VALIDATIONBelle à regarder.
Belle à regarder.
Simple à utiliser.
La proposition a été manipulée dans le navigateur, sur plusieurs tailles d’écran.
- Petit écran de 320 px, sans débordement horizontal observé.
- Recherche, filtres, liste et retour à la présentation vérifiés.
- Sélecteur Français, العربية, English et Español vérifié ; sens de lecture arabe adapté.
- Réduction de la transparence et des animations testée.
- Tablette portrait/paysage et navigation TV au clavier vérifiées.
Ce que cette maquette permet de valider
Le design, la hiérarchie de l’information et les interactions sont explorables. La lecture, les droits SVOD/VOD et les offres sont simulés et signalés comme tels.
Aucun paiement ni flux vidéo réel. Les contrôles navigateur ne remplacent pas les tests sur un téléphone, une tablette ou un téléviseur physique, ni un audit d’accessibilité complet.