Situations d’Apprentissage et d'Évaluation (SAEs)
2024
Développement Front-End et Back-end
Design & UX
Contexte
Ce projet s’inscrit dans la réalisation d’un site pour un festival audiovisuel dans le cadre de mes SAE 101, 102, 103, 105 et 203. L’objectif était d’imaginer un festival fictif, concevoir une stratégie de communication complète, créer le moodboard, guide de style et maquette du site, créer un site mobile-first en HTML/CSS/JS, et enfin créer un site responsive en Astro + Tailwind et intégrer un back-office dynamique via PocketBase. Enfin dans le cadre d'un cours j'ai réalisé une version WordPress personnalisée, basée sur un thème modifié via le Customizer, Gutenberg et des blocs éditoriaux adaptés.
Mon rôle
- Analyse du festival imaginez par une camarade
- Création du moodboard et définition de l’identité visuelle
- Élaboration du guide de style
- Réalisation de la maquette mobile sur Figma
- Développement du site mobile en HTML, CSS et JavaScript
- Développement du site responsive en Astro + Tailwind
- Intégration d’un back-office dynamique avec PocketBase
- Développement de la version WordPress
Processus
- Analyse du brief et de la stratégie de communication issue des SAE 101/102
- Conception visuelle : moodboard → guide de style → maquette mobile
- Développement du site HTML/CSS/JS avec interactions (menu mobile, carrousel, accordéon…)
- Développement responsive avec Astro + Tailwind et découpage en composants
- Création des routes dynamiques et intégration des données PocketBase pour films, invités et activités
- Déploiement d’une version WordPress : installation, configuration, personnalisation du thème, création des pages, gestion des contenus
- Tests et optimisation responsive sur différents écrans
Résultats finaux
Le projet a abouti à un site complet et fonctionnel pour le festival audiovisuel. La première version, développée en HTML, CSS et JavaScript, est accessible ici → https://sae105.eva-lacroix.fr/ et permet de naviguer entre toutes les pages principales du festival.
Par la suite, le site a été recrée en Astro + TailwindCSS pour offrir une interface responsive et modulable, avec intégration dynamique des films, invités et activités via PocketBase. Cette version est consultable ici → https://site203-eva.netlify.app/
Une troisième version a ensuite été réalisée sous WordPress, afin d’expérimenter une approche plus orientée CMS et d’optimiser la gestion de contenus pour un usage non technique. Elle est disponible ici → https://r211-2024-2025.eva-lacroix.fr/
Les maquettes et prototypes réalisés sur Figma ont servi de guide tout au long du développement, garantissant la cohérence visuelle et ergonomique du site. Le site final permet aux utilisateurs de découvrir le programme complet, les films en compétition, les invités et toutes les activités proposées, tout en respectant les principes de navigation mobile et desktop.
⚠️ Note : Pour le site en Astro, certaines fonctionnalités dépendantes de PocketBase peuvent ne plus être pleinement opérationnelles car le back-office n’est plus en ligne.
Bilan et valeur ajoutée
- Ce projet m’a permis de renforcer mes compétences en webdesign, en intégration front-end et en responsive design. J’ai également approfondi ma maîtrise d’Astro et Tailwind ce qui m’a permis de développer un site moderne, modulable et performant.
- L’intégration d’un back-office dynamique via PocketBase m’a offert une expérience concrète dans la gestion de données et leur affichage interactif, en lien direct avec le développement front-end.
- Une troisième déclinaison du site a ensuite été réalisée sous WordPress, ce qui m’a permis d’explorer une approche plus orientée CMS et d’optimiser la gestion de contenus pour un usage non technique.
- Enfin ce projet m’a aidé à développer un regard critique sur l’ergonomie, l’expérience utilisateur et la communication visuelle.
Compétences acquises
- Webdesign & Maquettage
- Développement HTML/CSS/JS
- Développement Astro & TailwindCSS
- Back-office dynamique (PocketBase)
- WordPress (Customizer + Gutenberg)
- Responsive Design
Outils utilisés
- Figma
- HTML / CSS / JavaScript
- Astro / TailwindCSS
- Pocketbase
- VS Code
- WordPress