Cinénature
<LE CONCEPT>
Cinénature
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.
Contexte
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.
Pourquoi ?
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.
<LE DESIGN>
Moodboard.exe
Fonts.exe
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.
Palette.exe
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.
<LE LOGO>
Logo
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.
<LA MAQUETTE>
Points clés du design
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.
Accessibilité
Pensée dès le départ pour garantir la même expérience sur tous les supports.
Responsivité
Optimisée pour tous les supports avec une expérience cohérente.
<LE DÉVELOPPEMENT>
JavaScript
Astro
Tailwind CSS
PocketBase
Contraintes
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.
Approche
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.
Apprentissage
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.