01 — Étape du projet
De l'intention visuelle à la maquette.
CinéNature est un projet de site réalisé pour un festival fictif de cinéma éco-responsable qui se déroule sur la presqu’île du Malsaucy près de Belfort. Le site met en avant la programmation, les invités et les engagements écologiques du festival, tout en proposant une expérience claire et immersive. Il a été développé en utilisant HTML, CSS et JavaScript.
CinéNature est un projet réalisé seul dans le cadre d’une SAÉ du BUT MMI. L’objectif était de concevoir le site vitrine d’un festival fictif en travaillant à la fois sur son identité visuelle et sur son développement technique.
Le sujet du festival m’a été imposé dans le cadre de la SAÉ. Je devais concevoir un design cohérent autour de cette thématique puis le développer en site, de façon à mettre en valeur la programmation et l’identité éco-responsable de CinéNature.
H1
Poppins
H2
Poppins
H3
Poppins
Body
Poppins
J’ai fait le choix d’utiliser Poppins pour l’ensemble des titres (H1, H2, H3) afin d’apporter cohérence, modernité et lisibilité. Pour le corps de texte, j’ai retenu Montserrat, une typographie sobre et claire qui assure un confort de lecture optimal et renforce l’accessibilité du projet.
J’ai fait le choix d’utiliser des teintes sobres et lumineuses afin de garantir une lecture claire et de mettre en valeur le contenu. Les nuances de bleu apportent une atmosphère apaisante et immersive, tandis que le vert rappelle directement l’aspect écologique du projet et son lien avec la nature. Les tons neutres comme le blanc et le beige équilibrent l’ensemble pour renforcer la clarté et installer une ambiance cohérente.
Je suis rapidement venu à l’idée de créer un logo qui représente à la fois la nature et le cinéma. Le popcorn évoque directement l’univers cinématographique, tandis que la couronne de feuilles rappelle l’ancrage écologique du projet. Le liseret apporte une dimension plus élégante, inspirée des dorures que l’on associe aux cinémas et aux théâtres. J’ai donc choisi un design simple et lisible, capable de refléter l’identité de CinéNature tout en restant marquant.
Le design de CinéNature a été pensé pour être accessible sur tous les supports, du mobile à l’ordinateur. J’ai travaillé la responsivité et l’optimisation du contenu afin d’assurer une navigation fluide et intuitive. L’objectif était de garantir une expérience claire, agréable et accessible pour chaque utilisateur.
J’ai travaillé l’accessibilité du site en adaptant les tailles de texte pour assurer une lecture confortable et en choisissant des couleurs respectueuses de tous les utilisateurs.
J’ai veillé à ce que le site s’adapte naturellement aux différents formats d’écran afin de garantir une navigation fluide et agréable partout.
02 — Étape du projet
Les fonctionnalités, les interfaces de gestion, la structure technique et le développement.
Technologies utilisées
Pour développer CinéNature, j’ai utilisé le framework Astro pour structurer le site et JavaScript pour lui ajouter de l’interactivité. Pour la mise en forme, j’ai choisi TailwindCSS afin d’assurer un design clair, moderne et facile à maintenir. J’ai également intégré PocketBase pour gérer l’ensemble des contenus du festival ainsi que la base de données (billetterie, comptes utilisateurs, informations pratiques), ce qui a permis de rendre le site à la fois fonctionnel et complet.
Je suis parti d’une base claire avec Astro pour structurer le site et TailwindCSS pour assurer une mise en forme moderne et cohérente. J’ai veillé à utiliser une structure sémantique adaptée afin d’optimiser le référencement et de garantir l’accessibilité, notamment pour les lecteurs d’écran et les personnes malvoyantes.
Ce projet m’a permis de renforcer mes compétences avec Astro et TailwindCSS, tout en explorant l’usage de PocketBase pour gérer des contenus dynamiques. J’ai appris à organiser efficacement un site, à travailler la responsivité pour tous les supports et à concevoir une expérience accessible. J’ai également pris conscience de l’importance d’une structure claire et d’un design pensé pour l’utilisateur.
© 2026 Bryan Menoux. Tous droits réservés.
