Le Mem
projet étudiant
Brief
Après analyse du site internet du Mem existant, proposer une charte digitale mise à jour pour être plus en lien avec ce lieu unique.
Analyse
Le Mem est un lieu amical, familial et diversifié. Sa particularité d’être un espace extérieur et intérieur, lui permet de proposer un large choix de service. Il est avant tout réputé auprès du grand public pour ses salles de concert.
La page d’accueil existante met en avant les artistes et l’agenda des concerts. L’appel à l’action (CTA) « en savoir plus » ne définit pas une action pour l’utilisateur suffisamment précise.
La proposition de page d’accueil vise à mettre en avant la particularité de ce lieu, pour que les initiés et les non initiés puissent découvrir ou redécouvrir ces espaces extérieurs et intérieurs. Ainsi, les illustrations du hero mettent en situation des artistes lors de concerts au Mem avec leur public. Un appel à l’action « programmation » conduit vers leurs programmes respectifs et invitent de public à prendre connaissance des dates à venir.
L’appel à l’action « découvrir » de la barre de navigation, anime la curiosité de l’utilisateur et le conduit vers une landing page. Il lui est alors, proposer de participer à un jeu concours. Cette landing page ludique et immersive, a pour rôle de fidéliser la clientèle et d’enregistrer de la data utilisateur, grâce à un simple formulaire.
page d’accueil -existante
page d’accueil – proposition
L'idée
Le Mem est donc un lieu riche de distraction et de moment d’évasion. L’univers du pixelart est une référence au jeu et au divertissement. Il permet aussi d’inviter l’utilisateur à parcourir le site internet en valorisant les capacités créatives du web.
Je l’ai donc utiliser tout au long de ce projet.
Couleur
Les couleurs se réfèrent au logo du Mem. La couleur prune est utilisée comme couleur principale. Elle symbolise l’harmonie et la joie. Les deux couleurs secondaires (le vert vif et le jaune) correspondent, respectivement, à une scène. Le jaune est une référence à l’été et donc à la guinguette qui se déroule à l’extérieur. Tant dis que, le vert vif en lien avec la liberté rejoint le Magic Miror, en intérieur. Aussi chacune de leur façon, elles contrastent parfaitement avec la couleur principale.
Typographie
La typographie LoRes des titres s’harmonise avec le thème graphique, dans un style pixel. Afin de distinguer les H1 des autres titres (H2, H3, H4), leurs lettres sont plus allongées et resserrés.
La typographie condensée, khand, est choisie pour le corps du texte. Il est d’usage d’utilisé la khand comme police d’affichage (display). Cette typicité permet ici d’apporter de la fantaisie au design.
page de présentation de la Guinguette – desktop
page artiste – mobile
Billeterie et tunnel d'achat
Après avoir défini une identité graphique, le sujet du projet se porte, dorénavant, sur l’élaboration d’un tunnel d’achat sans que l’utilisateur soit dans la nécessité de changer de site.
J’ai donc élaboré un tunnel d’achat en six étapes simple et complet. Les éléments cliquables sont visuellement similaires (typographie et couleur) que les appels à l’action. Ce qui permet à l’utilisateur de réaliser les choix qu’il souhaite. Durant le cheminement de sa réservation, un récapitulatif de sa demande est toujours présent : un élément important permettant à l’utilisateur d’être rassuré de son achat et valorise sa confiance.
Cette billetterie est accessible par le biais du CTA (appel à l’action) « réservez » visible sur les pages artiste comme le montre l’exemple ci-contre. Ou, en découvrant les programmations des scènes du Mem (la Guinguette et le Magic Miror).
Tunnel d'achat
Le Saut Hermès
projet étudiant
Brief
Vous participez à l’appel d’offre de la création globale de l’identité et des supports de l’édition 2023 du Saut Hermès.
Vous devez créer les éléments suivants : un logo pour l’évènement, une affiche pour l’évènement, un site dédié et du contenu pour les réseaux sociaux.
Vous allez devoir mettre en place des choix de couleurs, de typographies et de mise en page spécifiques à l’évènement sans la contrainte du respect de la charte graphique d’Hermès.
L'idée
Pour cette année 2023, l’évènement de renommée internationale : le Saut Hermès a lieu au Grand Palais éphémère de Paris. Un espace écoresponsable conçut par l’architecte Jean-Michel Wilmotte. Afin de valoriser le lien historique entre le lieu d’origine (le Grand Palais) et la marque de maroquinerie Hermès, j’ai souhaité mettre en avant les formes géométriques du travail effectué par l’architecte pour ce nouveau lieu.
Le logo typographique s’inspire des alphabets anciens (grec et phénicien), une référence à la mythologie grecque et met à l’honneur le nom divin de la marque. Les tracés obliques et angulaires des lettres se réfère à la perspective et la profondeur caractéristique de l’architecture. Elles coïncident avec un cheval en plein saut redessiné avec des polygones.
page d’accueil – desktop et mobile
Couleur
L’orange utilisée comme couleur principale est emblématique de la marque Hermès. J’ai choisi de la décliner par des contrastes de complémentaires. Cela permet de distinguer la hiérarchie des éléments, et apporter des variantes et du dynamisme au design.
Le turquoise est l’opposé de cet orange dans le cercle chromatique, je l‘ai utilisé comme couleur secondaire.
Typographie
La scandia line met en avant les titres grâce à des formes géométriques sans courbes. Elle varie les contrastes et empêche la monotonie. Cette typographie s’inspire du style grec.
Contenu réseaux sociaux
Court Métrange
projet étudiant
Brief
Le festival Court Métrange 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.
Objectif : Proposition de refonte du dispositif actuel.
Analyse
Durant une semaine, le festival du Court Métrange propose diverses activités à travers diffèrent lieux de la ville de Rennes. Le parcours Métrange organise des expositions, des conférences, des projections, etc. Son public porte un grand intérêt à participer aux concours Métrange : des concours de court métrage, étrange et insolite. Le Métrange Nomade permet au public le plus éloigné de la ville, d’avoir accès au festival.
Le design du site web est en lien avec la thématique du cinéma de genre. Cependant, les appels à l’action ne sont pas unifiés, ce qui dessert l’utilisateur à identifier convenablement les éléments cliquables. De plus, l’arrière-plan utilisé sur les pages additionné au bloc de couleur de faible opacité, nuit à la lisibilité. Pour finir, les items de navigation ne mettent en avant la programmation et la possibilité à l’utilisateur d’accéder à la billetterie.
L'idée
Le Festival du Court Métrange attire un public de passionnés et de curieux en quête du cinéma de demain. Les sujets abordés dans le cinéma de genre sont variés : révision d’un fait social, économique, historique, etc. se mêlant au fantastique, à l’horreur et parfois à l’absurde. Le public cible est apte à aborder de vaste sujet. Il est en général ouvert d’esprit.
Les concours du festival captent une clientèle de professionnel et de jeunes talents, qui souhaitent mettre à l’épreuve leurs travaux.
L’objectif de cette refont est de créer un design capable de se maintenir dans le temps, et d’être plus interactif auprès de son utilisateur. Soucieuse de l’ensemble de ces facteurs, j’ai souhaité mettre en avant des références au cinéma muet. Le design se compose d’éléments artistiques représentatifs du 7e art (les flous et l’hors-champs de silhouette). L’arrière-plan des heros simule une séance de projection. Il s’inscrit dans une époque ancienne, grâce à des éléments vintage : arrière-plan de vieux parchemin, cadre d’intertitre, une carte usée et la forme ovale des illustrations. L’usage de cette forme est moins répandu dans notre quotidien, mais souvent représenté au cinéma.
Couleur
Un noir intrasite est utilisé comme couleur principale. Il permet de s’imprégner dans l’univers du cinéma : des écrans noirs, des films muets (intertitres) et du noir&blanc.
La couleur crème, plus douce, contraste avec celui-ci. Elle est aussi une couleur vintage, un rappel des photographies de l’époque. Les CTAs primary se composent de ces deux couleurs encacdrés comme des intertitres de films muets.
Le jaune est la couleur la plus contrastante sur du noir. Il symbolise aussi la lumière, nécessaire à la diffusion d’un film. Son utilisation dans la communication du milieu du cinéma est connu, car il compose souvent la charte graphique de différentes institutions françaises du cinéma (pathé, allociné). Je l’ai donc utilisé pour surligner ou colorer les éléments cliquables secondary.
Typographie
Une police serif « IM FELL Double Pica », d’un style vieux grimoire officie comme titrage.
Elle est de pair avec « l’open sans condensed ». Un classique des typographies numériques. Sans serif, elle est idéale pour le corps du texte.
page programmation – desktop et mobile
page programme – mobile
Billeterie et tunnel d'achat
Cette refont conduit à une mise en avant de la billetterie. Notamment, à travers la création d’une billetterie officielle du festival. Celle-ci permet de mobiliser l’utilisateur à continuer de naviguer sur le même site. Un point positif pour le SEO (référencement naturel).
De plus, elle valorise la confiance de l’utilisateur auprès de l’organisme, car la transaction monétaire se réalise sans intermédiaire.
Tunnel d'achat
