← Projets Voir le site ↗

Étude de cas · Redesign UI/UX

Cinematek,
remettre le film au centre.

Redesign du site de la Cinémathèque royale de Belgique. Un objectif : aider le visiteur à trouver une séance et réserver, sans se perdre.

Contexte
Projet d'école
Rôle
Design & intégration
Outils
Figma · HTML · CSS
Type
Site multi-pages
cyberdesign.be/2026/engin/Html/Cinematek/cinematek.html
▶ Charger l'aperçu en direct

Aperçu en direct. Ouvrir en plein écran ↗

Le problème

Un portail d'archives, pas une invitation au cinéma

Le site original disait tout en même temps : des dizaines de cycles, d'archives et de liens se disputaient l'écran. Surcharge d'information, direction artistique froide et grise, affiches perdues dans le texte. On y trouvait un portail administratif là où il fallait donner envie de s'asseoir dans une salle obscure.

Mes décisions

Réduire pour rendre lisible

01

Un carrousel d'accueil comme point d'entrée

Un grand carrousel met en avant une séance à la fois — affiche, titre, dates, un seul bouton « Réserver ». Une porte d'entrée nette plutôt qu'un mur d'infos.

02

Une direction artistique « salle obscure »

Contre le gris administratif de l'original : un fond sombre, un seul accent doré, de grandes affiches mises en valeur. Le patrimoine du cinéma méritait l'émotion d'un écran, pas la froideur d'un portail.

03

Une navigation séparée par intention

Le contenu est éclaté en pages dédiées — Infos, Programme, Newsletter, Contact. Chaque besoin a sa destination. On ne cherche plus, on choisit.

L'intégration

Du design au code, sans framework

01

Carrousel maison en JavaScript

Le carrousel d'accueil est codé en JavaScript vanilla — slides, navigation et transitions — sans librairie. Léger, rapide et entièrement maîtrisé.

02

Architecture multi-pages responsive

Chaque intention a sa page (Infos, Programme, Newsletter, Contact), intégrée en HTML/CSS et adaptée du mobile au desktop.

03

Animations au défilement

Apparitions et micro-interactions en CSS/GSAP pour rythmer la lecture, sans alourdir la page.

Pistes d'évolution

Ce que je ferais ensuite

Le redesign résout la lisibilité et l'ambiance, mais deux chantiers restent ouverts — et savoir les nommer fait partie du travail :

01

Un vrai tunnel de réservation en 3 clics

Aujourd'hui le bouton « Réserver » mène à la programmation. L'étape suivante : choisir une séance, un nombre de places et payer sans quitter le site.

02

Un filtrage du programme sans rechargement

Filtrer les films par date ou par cycle de façon instantanée, sans recharger la page — la fluidité qu'on attend d'un site moderne.

Un projet en tête ?

yuce.engin@outlook.be