Proposition de site Internet pour le festival Court Métrange.
Brief
Le festival Court Métrange (courtmetrange.eu) est un festival de courts métrages sur la thématique de l’insolite et du fantastique. Depuis plusieurs années le festival prend de l’ampleur, tant sur la programmation que sur la perception du public. Il est donc temps de donner au festival un nouveau dispositif web à la hauteur de ses ambitions et de son développement.
Livrables
Design et direction artistique
Créer, à partir de l’identité existante, un axe graphique fort et en lien avec la thématique du festival. Décliner cet axe graphique en maquettant sous la forme d’un prototype interactif :
Une homepage
Une page programmation
Une page programme
Un tunnel de réservation
L’ensemble de ces pages devra être maquetté en version desktop / tablette et mobile.
Intégration
Produire la page d’accueil de ce site en exploitant les technologies web (HTML, CSS, JavaScript et PHP). La page devra être intégrée en format desktop, tablette et mobile.
Proposer un dispositif propre à augmenter l’originalité de l’expérience utilisateur en utilisant les langages JavaScript et CSS, et mettre en place des animations keyframes.
Logiciels utilisés
Illustrator, After Effects, Photoshop , Figma, Visual Studio Code, FileZilla
Proposition
J’ai souhaité une atmosphère étrange et mystérieuse à l’image des films présentés dans le cadre du festival. La couleur principale est le vert foncé qui évoque la forêt, élément récurrent des films de l’étrange. Le vert plus clair est une couleur qui évoque les laboratoires et les lumières froides que l’on retrouve dans beaucoup de ces films. Le jaune vient rehausser les éléments importants du site (boutons, effets de hover…).La font Noto Serif Jp est utilisée pour les titres. Les empattements apportent un côté élégant et vintage ce qui correspond tout à fait à l’ambiance générale du festival. La font Lexend est utilisée pour le texte courant. Elle est arrondie et facilement lisible. Moderne, elle contraste bien avec la Noto Serif Jp.Sur la droite, un gif animé créé avec After Effects montre un visage qui se déstructure.Dans le hero, j’ai créé une vidéo de fumée avec After Effects.A partir de 3 affiches des éditions précédentes du festival, j’ai créé avec After Effects une vidéo en animant chaque affiche pour donner plus de vie à la présentation. L’objectif était ensuite que cette vidéo se synchronise au scroll de l’utilisateur pour renforcer son immersion (le scroll vers le bas avance la vidéo tandis que le scroll vers le haut recule la vidéo).Déclinaison des maquettes en responsive (version mobile).
