La Cinémathèque suisse rayonne par la qualité de ses collections avec pour mission de préserver, restaurer et valoriser le cinéma.

10.2022
  • Direction artistique
  • Design d'interface
  • Guidelines

Réalisé chez Antistatique

Homepage avec des images plein écran qui défilent.

Du print au digital

Il a fallu dans un premier temps comprendre et ajuster la charte graphique des documents imprimés pour le digital, avec ses contraintes et ses particularités. Le nouveau site devait être entièrement repensé dans sa structure, et unifier son image sur ses différents supports et médias.

Plusieurs maquettes en light mode et en dark mode.

Images et immersion

Cela ne surprendra personne, la Cinémathèque suisse possède une quantité astronomique d’images. Ces dernières sont traitées avec le plus grand des respects.

Il faut éviter, dans le mesure du possible, de les retoucher ou de les recadrer. L’ensemble du site a donc été pensé dans cette démarche. On retrouve ainsi divers formats qui coexistent. Sur la page “Cinémathèque”, vous retrouverez dans cet esprit un patchwork immersif dans lequel vous pourrez vous balader, comme si les photos avaient été étalées sur une table.

Couleurs

L’un des principes forts de la CS est son utilisation de nouvelles couleurs à chaque programmation. Il a fallu réfléchir à tous les cas de figure pour garantir des contrastes suffisants entre les couleurs pour que tous·tes les utilisateur·ices aient le même confort de lecture. Ainsi, les films sont visuellement reliés à des cycles, de la même manière que sur le programme papier.

Projections avec la liste des films et les filtres.
Différents niveaux du menu sur mobile.
Page Accès et horaires. Page avec les différents contacts.
Images plein écran de films.
Différentes images sur la homepage mobile.

Dark Mode

J’ai très rapidement proposé l’ajout d’un dark mode. Le lien avec les salles obscures est évident, et il permettait de mettre en valeur des images. Pour l’aspect pratique, il permet de générer moins de lumière pour une personne qui utiliserait le site dans une salle, juste avant une séance, par exemple pour consulter la durée du film ou découvrir l’histoire du réalisateur.

Détail du film Le Cinquième Élément. Détail du film Hard Day.
Page de présentation de la Cinémathèque suisse sur mobile.
Documentation de la grille et des breakpoints.
Documentation d'un teaser d'article. Documentation d'un bouton. Documentation d'un dropdown.
Documentation des tokens.

Tous les projets

Lausanne Tourisme

Activités locales

Ollin

Gestion de tâches

Pyxis

Maison culturelle

Antistatique

Agence digitale

Cinémathèque suisse

Archives nationales du film

Luxury Tribune

Média digital dédié au luxe

Vernier

Ville genevoise

Marr + Collins

Bureau d'architecture

Cardis

Régie immobilière

Punch

E-commerce streetwear

Inside Out

Plateforme pour la musique électro