Trop sombre ? Ce que les retours m'ont appris sur le design de Ciné Délices
Un site de recettes inspirées du cinéma, un fond bleu nuit, de l'or, des cadres de profil animés. Voici comment l'identité visuelle de Ciné Délices a été construite, et ce que j'ai décidé de ne pas faire quand des visiteurs ont trouvé le site trop sombre.
Par Sébastien Maurice · Publié le 12 novembre 2026
Ciné Délices est un projet de formation (titre professionnel DWWM) mené en équipe de 3 et développé avec l'aide de Claude. Les illustrations des cadres et des fonds ont été générées avec des outils d'IA, puis détourées et optimisées. Mon rôle : le front-end et la direction artistique.
1 · D'un thème à une identité
Partir d'un thème, y ajouter de la gourmandise
Ciné Délices relie des films et des séries à des recettes de cuisine, et chaque membre peut y publier. Sur ce projet, j'ai pris en charge le front-end et la direction artistique : l'idée était qu'une page du site soit aussi immersive qu'un générique de film.
L'identité s'est construite par couches successives, du thème jusqu'aux pages sur mesure, sans framework CSS : les feuilles de style sont écrites à la main. Ce choix est assumé, mais il a un coût, qu'on retrouve plus bas avec la question du mode clair.
1Un thèmeLe cinéma, auquel on ajoute la cuisine
2Une paletteBleu nuit et or, avec le rouge néon du logo
3Des policesUne pour l'affiche, une pour le texte, deux pour les titres
4Une ambiance de salleÉtoiles, halos de projecteur, motifs de pellicule, sections qui apparaissent au défilement
5Des cadres de profil animésDébloqués par niveau, un thème de film chacun
Des pages sur mesureUn thème de couleurs par créateur
Une page auteur de Ciné Délices : fond bleu nuit, titres en capitales dorées, cadre Sherlock Holmes et fond de bannière associé. C'est l'identité décrite ci-dessous, à l'écran.
2 · Sombre mais lisible
Un fond sombre, mais lisible
Le texte courant doit offrir un contraste d'au moins 4,5 pour 1 avec son fond, pour respecter le niveau AA des règles d'accessibilité.
Les variables CSS du site posent le fond bleu nuit #142234, des cartes en #0f1e30 et des titres en or #e3b148. Le code garde la trace d'un arbitrage : le fond a été éclairci de 3 % par rapport à la valeur d'origine, parce qu'il se lisait mieux sur des écrans non calibrés. L'or est décrit dans le code comme « ambré, moins saturé, luxe cinéma ».
Côté typographie, le site charge quatre polices : Playfair Display pour les titres éditoriaux, Bebas Neue pour les grands titres d'affiche, Cinzel pour les petits titres, les boutons et la navigation, Lato pour le texte courant.
Un audit d'accessibilité automatique (axe-core) est branché dans les tests, et les couleurs des textes ont fait l'objet de comparaisons de variantes. Je n'ai en revanche pas mesuré de ratios de contraste précis, donc je n'en cite pas : c'est un contrôle que je ferais avec un outil dédié avant de m'engager sur un chiffre.
Bleu nuit#142234Fond des pages
Surface des cartes#0f1e30Cartes et encadrés
Or titre#e3b148Titres et accents
Les trois valeurs publiées par le site. Le moodboard de départ (version 2) donnait l'or à #C4A052 : la valeur en ligne est celle de #e3b148.
3 · Les cadres animés
Les cadres de profil animés
C'est la partie la plus visible du site : chaque membre peut équiper un cadre autour de son avatar, débloqué selon sa progression.
Cinq cadres animés dessinés sur un élément canvas (Sherlock Holmes, Matrix, Indiana Jones, Harry Potter et le cadre Ciné Délices), chacun avec son propre système de particules : sort de baguette, pluie de code, poussière, étincelles.
Un sixième cadre, Doctor Strange, réalisé uniquement en CSS.
Un moteur d'animation d'environ 800 lignes de JavaScript : une classe par thème, et un chef d'orchestre commun.
Douze fonds de bannière associés aux cadres, choisis selon une priorité : bannière personnalisée approuvée, puis variante choisie, puis fond du cadre équipé, puis fond par défaut.
Une préférence « réduire les animations » respectée par le carrousel des publications, mais pas encore par la page CinéPass : c'est un chantier d'accessibilité à venir.
4 · Un thème par créateur
Une page sur mesure par créateur : une couleur, tout le reste calculé
1
Une seule couleur principale
Le créateur choisit une couleur. Les teintes, bordures et survols de sa page se calculent en CSS avec color-mix(), à partir de cette seule valeur. La fonction mélange des couleurs dans un espace colorimétrique donné ; elle est disponible dans les navigateurs depuis mai 2023.
2
Un héros et un cadre qui s'ajuste
La page reprend le décor et le slogan du créateur. Son cadre sur mesure trouve tout seul où placer l'avatar : le serveur analyse le canal transparent de l'image pour repérer le centre et le diamètre du trou.
3
Une bannière de publications
En bas de page, une bannière présente ses douze publications les plus populaires sur deux rails qui défilent en sens inverse, avec des flèches, une pause au survol et le respect de la préférence « réduire les animations ».
4
Des retours, un ajustement
Le créateur peut choisir son fond parmi des visuels validés et modifier sa bio, son slogan et son lien depuis un bouton « Personnaliser mon profil » à ses couleurs. Les itérations (héros sombre ou rose, hauteur de la bannière, bouton, pastille « Créatrice Partenaire ») ont chacune répondu à un retour précis.
Retour d'expérience
Des visiteurs ont trouvé le site trop sombre
Des retours d'utilisateurs ont fait ressortir deux choses : le site paraissait trop foncé, et l'or, volontairement peu saturé, semblait terne à côté d'un rose très saturé comme celui d'une créatrice partenaire. Ce sont des retours oraux, sans mesure : je n'ai aucun chiffre de satisfaction à vous donner.
J'ai décidé de ne pas refaire le site en mode clair. La raison est technique : la variable du bleu nuit n'est utilisée que dans une minorité des déclarations, la plupart des couleurs sombres étant écrites en dur dans des feuilles de style très volumineuses. Un mode clair aurait demandé de reprendre le site page par page, pour un gain incertain.
Les pistes légères retenues si le retour revient : éclaircir un cran les surfaces, intercaler des sections claires, et proposer un réglage « ambiance claire » par créateur. Savoir dire « ça n'en vaut pas le coup », arguments techniques à l'appui, fait aussi partie du travail.
5 · Ce que ça apprend
Un design vivant se construit avec les retours
Ce que je retiens de Ciné Délices : une identité forte se pose vite, mais elle ne vaut que si elle reste lisible et qu'on sait la faire évoluer. La vraie compétence, c'est de choisir quels retours intégrer et lesquels laisser de côté, en connaissant le coût de chaque changement.
Si votre projet demande autre chose qu'un thème standard, parlons-en : j'explique ce qui est faisable et à quel prix, avant de m'engager.
MDN, color-mix()(nouvel onglet)Mélange de couleurs dans un espace colorimétrique donné ; disponible dans les navigateurs depuis mai 2023. Page en anglais.
