VIB'
VIB'
Festival de musique fictif
Festival de musique fictif
De l'identité visuelle au site vitrine
De l'identité visuelle au site vitrine
Identité visuelle • Site vitrine • Motion design • Affiches promotionnelles
Identité visuelle • Site vitrine • Motion design • Affiches promotionnelles
Date/durée
Date/durée
Octobre 2024 à janvier 2025 • 3 mois
Octobre 2024 à janvier 2025 • 3 mois
Rôle
Rôle
UX/UI Designer
UX/UI Designer
Livrables
Livrables
Une charte graphique
Les prototypes du site vitrine
Deux motions et une animation de logo
Deux affiches promotionnelles
Une charte graphique
Les prototypes du site vitrine
Deux motions et une animation de logo
Deux affiches promotionnelles
Fondamentaux UX/UI
Fondamentaux UX/UI
UI Design
UI Design
Branding
Branding
Benchmark
Benchmark
Veille/Recherche inspirationnelle
Veille/Recherche inspirationnelle
Personae
Personae
Wireframing
Wireframing
Prototypage
Prototypage
Maquettage
Maquettage
Layout
Layout
Animation
Animation
Accessibilité
Accessibilité
Outils
Outils
Présentation du projet
Présentation du projet
Qu'est-ce que c'est VIB' festival ?
Festival organisé sur les plages vendéennes, durant l'été, dans un cadre idyllique en bord de mer, où la mer rencontre des couchers de soleil.
Au programme, une programmation éclectique : rap, pop, rock, électro.
VIB' souhaite proposer un cadre permettant aux festivaliers de s'immerger dans un univers musical unique, et créer des souvenirs durables au futur public.
Qu'est-ce que c'est VIB' festival ?
Festival organisé sur les plages vendéennes, durant l'été, dans un cadre idyllique en bord de mer, où la mer rencontre des couchers de soleil.
Au programme, une programmation éclectique : rap, pop, rock, électro.
VIB' souhaite proposer un cadre permettant aux festivaliers de s'immerger dans un univers musical unique, et créer des souvenirs durables au futur public.
Vue d'ensemble
Vue d'ensemble
1 - Définition des cibles et personae
1 - Définition des cibles et personae
Le premier point à chaque étape a été de construire et/ou affiner les personae en m'appuyant sur le brief client, les données fournies par l'école et mes propres recherches. Chaque persona représente une cible définie en amont (primaire, secondaire, tertiaire), permettant ainsi de couvrir les différents profils d'utilisateurs du festival.
Ces personae m'ont servi de fil conducteur tout au long du projet : ils m'ont permis d'identifier les besoins des utilisateurs et ainsi de concevoir des interfaces adaptées à leurs attentes, en déterminant par exemple quelles informations étaient attendues sur le site vitrine ou lesquelles inclure dans le dépliant.
Le premier point à chaque étape a été de construire et/ou affiner les personae en m'appuyant sur le brief client, les données fournies par l'école et mes propres recherches. Chaque persona représente une cible définie en amont (primaire, secondaire, tertiaire), permettant ainsi de couvrir les différents profils d'utilisateurs du festival.
Ces personae m'ont servi de fil conducteur tout au long du projet : ils m'ont permis d'identifier les besoins des utilisateurs et ainsi de concevoir des interfaces adaptées à leurs attentes, en déterminant par exemple quelles informations étaient attendues sur le site vitrine ou lesquelles inclure dans le dépliant.
2 - Identité visuelle
2 - Identité visuelle
Problématique
Comment créer une identité visuelle qui reflète l'univers et les valeurs de VIB' tout en résonnant avec son public cible ?
Les enjeux
Problématique
Comment créer une identité visuelle qui reflète le positionnement unique du festival tout en résonnant avec son public cible ?
Les enjeux
🎨
Assurer l'identification et la reconnaissance de la marque
💭
Traduire les valeurs et l'univers du festival dans son identité visuelle
🔍
Affirmer sa place sur le marché et se démarquer de ses concurrents
🎨
Assurer l'identification et la reconnaissance de la marque
💭
Traduire les valeurs et l'univers du festival dans son identité visuelle
🔍
Affirmer sa place sur le marché et se démarquer de ses concurrents
Processus
Synthèse de mots clés
Dans un premier temps j'ai fait une synthèse des mots clés du brief décrivant le festival, son ambiance, ses valeurs. Ce qui m'a permit de bien cerner l'essence du festival et de guider ma direction créative.
Processus
Synthèse de mots clés
Dans un premier temps j'ai fait une synthèse des mots clés du brief décrivant le festival, son ambiance, ses valeurs. Ce qui m'a permit de bien cerner l'essence du festival et de guider ma direction créative.
Festival de musique • Cadre exceptionnel • Expérience immersive • Souvenirs • Mer • Couché de soleil • Programmation éclectique • Diversité • Accessible
Festival de musique • Cadre exceptionnel • Expérience immersive • Souvenirs • Mer • Couché de soleil • Programmation éclectique • Diversité • Accessible
Moodboard
La synthèse de mots-clés m'a permis d'affiner ma recherche d'images pour constituer ce moodboard. Il s'appuie sur le cadre naturel et idyllique du festival, tout en intégrant les notions de musique et de fête. Cette réflexion m'a également guidée dans le choix des couleurs et des typographies, posant ainsi les bases de l'identité visuelle de VIB'.
Moodboard
La synthèse de mots-clés m'a permis d'affiner ma recherche d'images pour constituer ce moodboard. Il s'appuie sur le cadre naturel et idyllique du festival, tout en intégrant les notions de musique et de fête. Cette réflexion m'a également guidée dans le choix des couleurs et des typographies, posant ainsi les bases de l'identité visuelle de VIB'.
Pour le bleu de la mer
et des océans
RVB
R76 V128 B157CMJN
C52 M18 J0 N38HEX
#4C809DPour les dégradés
du coucher de soleil
RVB
R238 V194 B92CMJN
C0 M18 J61 N7HEX
#EEC25CPour les dégradés
du coucher de soleil
RVB
R227 V142 B89CMJN
C0 M37 J61 N11HEX
#E38E59Pour le bleu de la mer
et des océans
RVB
R76 V128 B157CMJN
C52 M18 J0 N38HEX
#4C809DPour les dégradés
du coucher de soleil
RVB
R238 V194 B92CMJN
C0 M18 J61 N7HEX
#EEC25CPour les dégradés
du coucher de soleil
RVB
R227 V142 B89CMJN
C0 M37 J61 N11HEX
#E38E59Pour le bleu de la mer
et des océans
RVB
R76 V128 B157CMJN
C52 M18 J0 N38HEX
#4C809DPour les dégradés
du coucher de soleil
RVB
R238 V194 B92CMJN
C0 M18 J61 N7HEX
#EEC25CPour les dégradés
du coucher de soleil
RVB
R227 V142 B89CMJN
C0 M37 J61 N11HEX
#E38E59Pour le bleu de la mer
et des océans
RVB
R76 V128 B157CMJN
C52 M18 J0 N38HEX
#4C809DPour les dégradés
du coucher de soleil
RVB
R238 V194 B92CMJN
C0 M18 J61 N7HEX
#EEC25CPour les dégradés
du coucher de soleil
RVB
R227 V142 B89CMJN
C0 M37 J61 N11HEX
#E38E59
Définition des couleurs et typographies
Définition des couleurs et typographies
Branding colors
Neutral colors
Pour le bleu de la mer
et des océans
RVB
R76 V128 B157CMJN
C52 M18 J0 N38HEX
#4C809DPour les couleurs
du coucher de soleil
RVB
R238 V194 B92CMJN
C0 M18 J61 N7HEX
#EEC25CPour les couleurs
du coucher de soleil
RVB
R227 V142 B89CMJN
C0 M37 J61 N11HEX
#E38E59Pour le bleu de la mer
et des océans
RVB
R76 V128 B157CMJN
C52 M18 J0 N38HEX
#4C809DPour les couleurs
du coucher de soleil
RVB
R238 V194 B92CMJN
C0 M18 J61 N7HEX
#EEC25CPour les couleurs
du coucher de soleil
RVB
R227 V142 B89CMJN
C0 M37 J61 N11HEX
#E38E59Pour le bleu de la mer
et des océans
RVB
R76 V128 B157CMJN
C52 M18 J0 N38HEX
#4C809DPour les couleurs
du coucher de soleil
RVB
R238 V194 B92CMJN
C0 M18 J61 N7HEX
#EEC25CPour les couleurs
du coucher de soleil
RVB
R227 V142 B89CMJN
C0 M37 J61 N11HEX
#E38E59Pour le bleu de la mer
et des océans
RVB
R76 V128 B157CMJN
C52 M18 J0 N38HEX
#4C809DPour les couleurs
du coucher de soleil
RVB
R238 V194 B92CMJN
C0 M18 J61 N7HEX
#EEC25CPour les couleurs
du coucher de soleil
RVB
R227 V142 B89CMJN
C0 M37 J61 N11HEX
#E38E59
Typographies
L'accessibilité étant un pilier du design d'interface, elle a guidé mes choix typographiques dès le départ, de plus c'est l'une des valeurs du festival. J'ai opté pour les typographies Open Sans et Oxygen : lisibles, simples et accessibles, ce qui est essentiel dans un contexte de festival où l'information doit être perçue rapidement.
Au-delà de la lisibilité, il était essentiel qu'elles reflètent l'identité de VIB' : leur modernité et leurs formes arrondies évoquent la douceur et les vagues de l'eau.
Pour le logo, j'ai opté pour la typographie Bebas Neue, dont la graisse marquée assure une lisibilité correcte du logo.
⚠️ Avec le recul : je choisirais une typographie de titre plus distinctive du corps de texte, afin de marquer la hiérarchie visuelle et de justifier l'usage de deux typographies.
Typographies
L'accessibilité étant un pilier du design d'interface, elle a guidé mes choix typographiques dès le départ, de plus c'est l'une des valeurs du festival. J'ai opté pour les typographies Open Sans et Oxygen : lisibles, simples et accessibles, ce qui est essentiel dans un contexte de festival où l'information doit être perçue rapidement.
Au-delà de la lisibilité, il était essentiel qu'elles reflètent l'identité de VIB' : leur modernité et leurs formes arrondies évoquent la douceur et les vagues de l'eau.
Pour le logo, j'ai opté pour la typographie Bebas Neue, dont la graisse marquée assure une lisibilité correcte du logo.
⚠️ Avec le recul : je choisirais une typographie de titre plus distinctive du corps de texte, afin de marquer la hiérarchie visuelle et de justifier l'usage de deux typographies.
Titres
Oxygen
Aa Bb Cc Dd Ee Ff Gg Hh Ii Jj Kk Mm Nn Oo Pp Qr Ss Tt Uu Vv Ww Xx Yy Zz
0 1 2 3 4 5 6 7 8 9
Titres
Oxygen
Aa Bb Cc Dd Ee Ff Gg Hh Ii Jj Kk Mm Nn Oo Pp Qr Ss Tt Uu Vv Ww Xx Yy Zz
0 1 2 3 4 5 6 7 8 9
Corps de texte
Open Sans
Aa Bb Cc Dd Ee Ff Gg Hh Ii Jj Kk Mm Nn Oo Pp Qr Ss Tt Uu Vv Ww Xx Yy Zz
0 1 2 3 4 5 6 7 8 9
Corps de texte
Open Sans
Aa Bb Cc Dd Ee Ff Gg Hh Ii Jj Kk Mm Nn Oo Pp Qr Ss Tt Uu Vv Ww Xx Yy Zz
0 1 2 3 4 5 6 7 8 9
Logo
Bebas Neue
Aa Bb Cc Dd Ee Ff Gg Hh Ii Jj Kk Mm Nn Oo Pp Qr Ss Tt Uu Vv Ww Xx Yy Zz
0 1 2 3 4 5 6 7 8 9
Logo
Bebas Neue
Aa Bb Cc Dd Ee Ff Gg Hh Ii Jj Kk Mm Nn Oo Pp Qr Ss Tt Uu Vv Ww Xx Yy Zz
0 1 2 3 4 5 6 7 8 9
Sketching du logo
En m'appuyant sur les mots-clés et le moodboard, j'ai recherché différentes idées et réalisé plusieurs dessins du logo.
Sketching du logo
En m'appuyant sur les mots-clés et le moodboard, j'ai recherché différentes idées et réalisé plusieurs dessins du logo.
Soleil
Ondes sonores
Soleil
Eau : mer/océan
Vague : onde musicale
Horizon de la plage
Du dessin au digital
Le choix du logo s'est tourné vers celui ci-dessous, car c'est le plus complet : il fait référence au cadre naturel du festival ainsi qu'à la musique. On y retrouve le bleu évoquant l'eau de la mer/des océans, associé aux teintes chaudes du coucher de soleil.
Du dessin au digital
Le choix du logo s'est tourné vers celui ci-dessous, car c'est le plus complet : il fait référence au cadre naturel du festival ainsi qu'à la musique. On y retrouve le bleu évoquant l'eau de la mer/des océans, associé aux teintes chaudes du coucher de soleil.
J'ai réalisé le logo sur Adobe Illustrator
J'ai réalisé le logo sur Adobe Illustrator
⚠️ Avec le recul : je réaliserais des déclinaisons adaptées aux petits formats.
Par exemple, en conservant uniquement le "V" dans le cercle, comme celui-ci :
⚠️ Avec le recul : je réaliserais des déclinaisons adaptées aux petits formats. Par exemple, en conservant uniquement le "V" dans le cercle, comme celui-ci :
3 - Site vitrine
3 - Site vitrine
Problématiques
Comment concevoir un site vitrine qui établit la présence en ligne du festival et le fait connaître à un public plus large ?
Comment présenter la programmation de manière claire et accessible pour que les visiteurs trouvent rapidement l'information recherchée ?
Comment guider efficacement les visiteurs vers le site de vente de billets ?
Les enjeux
Problématiques
Comment concevoir un site vitrine qui établit la présence en ligne du festival et le fait connaître à un public plus large ?
Comment présenter la programmation de manière claire et accessible pour que les visiteurs trouvent rapidement l'information recherchée ?
Comment guider efficacement les visiteurs vers le site de vente de billets ?
Les enjeux
🖥️
Conception d'une interface accessible et optimisée pour une navigation intuitive
🎤
Développer la notoriété du festival et attirer un public large
💸
Inciter les visiteurs à acheter leurs billets via une page claire et attractive
🎟️
Trouver facilement la programmation et les informations pratiques
🖥️
Conception d'une interface accessible et optimisée pour une navigation intuitive
🎤
Développer la notoriété du festival et attirer un public large
💸
Inciter les visiteurs à acheter leurs billets via une page claire et attractive
🎟️
Trouver facilement la programmation et les informations pratiques
Processus
Recherche inspirationnelle et benchmark
Suite à l'analyse du brief client, j'ai réalisé un benchmark UX/UI portant sur quatre sites de festivals : Coachella, La Nuit de l'Erdre, Dominator et Ethereal Decibel.
Les critères retenus : navigation, hiérarchie de l'accueil, responsive, page billetterie, page programmation et page "à propos".
Pourquoi ces critères ? Je me suis appuyé sur la demande du client, qui souhaite que son site contienne les pages citées.
Ce benchmark m'a permis d'identifier l'organisation du site, les bonnes pratiques à retenir et les points de vigilance à éviter, comme des visuels trop grands sur mobile ou l'absence de filtre pour la page de programmation.
La Nuit de l'Erdre s'est révélée être le modèle le plus adapté à VIB' : festival à échelle humaine, ancré localement et porté par une structure associative, il partage le même contexte que VIB' tout en affichant la meilleure note UX/UI du benchmark.
Processus
Recherche inspirationnelle et benchmark
Suite à l'analyse du brief client, j'ai réalisé un benchmark UX/UI portant sur quatre sites de festivals : Coachella, La Nuit de l'Erdre, Dominator et Ethereal Decibel.
Les critères retenus : navigation, hiérarchie de l'accueil, responsive, page billetterie, page programmation et page "à propos".
Pourquoi ces critères ? Je me suis appuyé sur la demande du client, qui souhaite que son site contienne les pages citées.
Ce benchmark m'a permis d'identifier l'organisation du site, les bonnes pratiques à retenir et les points de vigilance à éviter, comme des visuels trop grands sur mobile ou l'absence de filtre pour la page de programmation.
La Nuit de l'Erdre s'est révélée être le modèle le plus adapté à VIB' : festival à échelle humaine, ancré localement et porté par une structure associative, il partage le même contexte que VIB' tout en affichant la meilleure note UX/UI du benchmark.
Inspiration Hero section
Inspiration Hero section
Inspiration organisation page programmation
Inspiration organisation page programmation
Inspiration contenu et organisation de la page à propos
Inspiration contenu et organisation de la page à propos
Inspiration contenu et organisation de la page à propos
Inspiration organisation de la page billeterie
Inspiration organisation de la page billeterie
Inspiration Header
Inspiration Header
Arborescence et contenu du site vitrine
L'étude des sites concurrents m'a permis de construire l'arborescence du site vitrine de VIB', en prenant en compte les exigences du client (pages et contenu).
Arborescence et contenu du site vitrine
L'étude des sites concurrents m'a permis de construire l'arborescence du site vitrine de VIB', en prenant en compte les exigences du client (pages et contenu).
FAQ ?
⚠️ Avec le recul : j'aurais ajouté une section FAQ pour anticiper et centraliser les questions fréquentes des festivaliers (accès, parking, restauration…), ce qui aurait également amélioré l'expérience utilisateur.
FAQ ?
⚠️ Avec le recul : j'aurais ajouté une section FAQ pour anticiper et centraliser les questions fréquentes des festivaliers (accès, parking, restauration…), ce qui aurait également amélioré l'expérience utilisateur.
L'ensemble du travail à suivre a été réalisé sur Figma
L'ensemble du travail à suivre a été réalisé sur Figma
Zoning
Le zoning m'a permis de structurer rapidement les différentes zones des futurs wireframes et maquettes.
Zoning
Le zoning m'a permis de structurer rapidement les différentes zones des futurs wireframes et maquettes.
Wireframes
Sans couleurs ni images, les wireframes m'ont permis de me concentrer sur l'UX en appliquant les observations de mon benchmark, et de réfléchir à l'agencement des éléments (menus, textes, images, boutons) sans me soucier du design graphique.
Le site étant responsive et mobile first (car les utilisateurs consultent majoritairement depuis leur portable), j'ai commencé par la version mobile avant de décliner en version desktop.
Wireframes
Sans couleurs ni images, les wireframes m'ont permis de me concentrer sur l'UX en appliquant les observations de mon benchmark, et de réfléchir à l'agencement des éléments (menus, textes, images, boutons) sans me soucier du design graphique.
Le site étant responsive et mobile first (car les utilisateurs consultent majoritairement depuis leur portable), j'ai commencé par la version mobile avant de décliner en version desktop.
Maquettes
Une fois les wireframes validés, j'ai appliqué la charte graphique en intégrant couleurs et images, tout en travaillant le contenu (textes).
J'ai porté une attention particulière à l'accessibilité : taille des polices, contraste des couleurs et clarté des call-to-action.
Pour une méthodologie organisée et cohérente, j'ai mis en place plusieurs variables dans Figma, permettant notamment de faciliter les modifications globales :
Maquettes
Une fois les wireframes validés, j'ai appliqué la charte graphique en intégrant couleurs et images, tout en travaillant le contenu (textes).
J'ai porté une attention particulière à l'accessibilité : taille des polices, contraste des couleurs et clarté des call-to-action.
Pour une méthodologie organisée et cohérente, j'ai mis en place plusieurs variables dans Figma, permettant notamment de faciliter les modifications globales :
Variables de couleurs par teinte
Variables de couleurs par teinte
Différentes variables : spacing, tailles des polices, padding et d'autres pour le prototypage. Adaptés à chaque format (desktop et mobile) afin de faciliter le responsive.
Différentes variables : spacing, tailles des polices, padding et d'autres pour le prototypage. Adaptés à chaque format (desktop et mobile) afin de faciliter le responsive.
Aperçu des maquettes mobile : page accueil, programmation, à propos et billetterie
Aperçu des maquettes mobile : page accueil, programmation, à propos et billetterie
Prototypes
J'ai rendu les maquettes que j'ai réalisées interactives : ouverture de la modale artiste, navigation entre les pages, menu, etc.
Prototypes
J'ai rendu les maquettes que j'ai réalisées interactives : ouverture de la modale artiste, navigation entre les pages, menu, etc.
Résultat final
Tu peux consulter ci-dessous le prototype mobile et desktop.
N'hésite pas à mettre le prototype en plein écran pour une meilleure expérience !
Résultat final
Vous pouvez consulter ci-dessous le prototype mobile et desktop.
N'hésite pas à mettre le prototype en plein écran pour une meilleure expérience !
⚠️ Retour de tests utilisateur : le retour à la page d'accueil n'est pas intuitif sur la version desktop. Solution : ajout d'un bouton "Accueil" dans la navbar de la version desktop.
4 - Motion design
4 - Motion design
Problématiques
Comment animer le logo de VIB' de manière cohérente avec son identité visuelle ?
Comment traduire en mouvement l'ambiance et l'univers du festival pour capter l'attention sur les réseaux sociaux ?
Les enjeux
Problématiques
Comment animer le logo de VIB' de manière cohérente avec son identité visuelle ?
Comment traduire en mouvement l'ambiance et l'univers du festival pour capter l'attention sur les réseaux sociaux ?
Les enjeux
🖥️
Renforcer l'identité visuelle du festival
📈
Créer de l'engagement et générer de l'intérêt
📱
Adapter les contenus aux codes et formats des réseaux sociaux, pour maximiser leur impact
Renforcer l'identité visuelle du festival
📈
Créer de l'engagement et générer de l'intérêt
📱
Adapter les contenus aux codes et formats des réseaux sociaux, pour maximiser leur impact
Processus
Recherche inspirationnelle
Suite à l'analyse du brief client, j'ai effectué une recherche inspirationnelle pour les deux motions design. Cette recherche m'a permis d'observer les tendances actuelles, de m'en inspirer, et de découvrir différentes techniques d'animation (transitions, effets de texte).
Processus
Recherche inspirationnelle
Suite à l'analyse du brief client, j'ai effectué une recherche inspirationnelle pour les deux motions design. Cette recherche m'a permis d'observer les tendances actuelles, de m'en inspirer, et de découvrir différentes techniques d'animation (transitions, effets de texte).
Inspiration ambiance + effet sur les textes
Inspiration ambiance + effet sur les textes
Inspiration contenu & ambiance
Inspiration contenu & ambiance
Inspiration transition et effet sur les textes
Inspiration transition et effet sur les textes
Storyboard de l'animation du logo
Avant de me lancer dans la production, j'ai réalisé un storyboard qui m'a permis de visualiser et planifier l'animation en amont, ce qui m'a facilité sa réalisation.
Il est prévu que l'animation du logo apparaisse à la fin des motions afin de renforcer l'identité visuelle du festival.
Storyboard de l'animation du logo
Avant de me lancer dans la production, j'ai réalisé un storyboard qui m'a permis de visualiser et planifier l'animation en amont, ce qui m'a facilité sa réalisation.
Il est prévu que l'animation du logo apparaisse à la fin des motions afin de renforcer l'identité visuelle du festival.
L'animation et les deux motions design ont été réalisés sur After Effects
L'animation et les deux motions design ont été réalisés sur After Effects
Animation du logo
Quelques précisions sur la signification de certaines animations, qui ont été pensés en lien avec l'univers du festival :
Les deux parties (orange et bleu) s'entrechoquent, créant un rebond, faisant référence au tempo musical.
La vague s'ondule ensuite, renforçant son aspect aquatique et faisant allusion aux ondes sonores.
Animation du logo
Quelques précisions sur la signification de certaines animations, qui ont été pensés en lien avec l'univers du festival :
Les deux parties (orange et bleu) s'entrechoquent, créant un rebond, faisant référence au tempo musical.
La vague s'ondule ensuite, renforçant son aspect aquatique et faisant allusion aux ondes sonores.
Motion du festival
Ce motion présente le VIB' festival, avec pour objectif de transmettre les informations principales et de restituer l'ambiance du festival.
La principale difficulté a été de concevoir des animations de texte variées et soignées, ainsi que de travailler les transitions pour obtenir un rendu fluide et cohérent.
Les images et la musique sont libres de droits.
Motion du festival
Ce motion présente le VIB' festival, avec pour objectif de transmettre les informations principales et de restituer l'ambiance du festival.
La principale difficulté a été de concevoir des animations de texte variées et soignées, ainsi que de travailler les transitions pour obtenir un rendu fluide et cohérent.
Les images et la musique sont libres de droits.
5 - Affiches
5 - Affiches
📐
Assurer une lisibilité et une hiérarchie visuelle
Utiliser l'identité visuelle existante de manière cohérente
🎶
Susciter l'émotion et donner envie au public de venir au festival
Problématiques
Comment hiérarchiser et transmettre l'information efficacement ?
Comment utiliser l'identité visuelle afin de refléter l'environnement naturel et la diversité musicale du festival ?
Les enjeux
Problématiques
Comment hiérarchiser et transmettre l'information efficacement ?
Comment utiliser l'identité visuelle afin de refléter l'environnement naturel et la diversité musicale du festival ?
Les enjeux
📐
Assurer une lisibilité et une hiérarchie visuelle
Utiliser l'identité visuelle existante de manière cohérente
🎶
Susciter l'émotion et donner envie au public de venir au festival
Processus
Recherche inspirationnelle
Comme précédemment, j'ai fait une recherche inspirationnelle après analyse du brief client, pour les deux affiches demandées.
Celle-ci m'a permis de nourrir ma réflexion sur la hiérarchie des informations et de trouver des directions visuelles pour les deux affiches.
Processus
Recherche inspirationnelle
Comme précédemment, j'ai fait une recherche inspirationnelle après analyse du brief client, pour les deux affiches demandées.
Celle-ci m'a permis de nourrir ma réflexion sur la hiérarchie des informations et de trouver des directions visuelles pour les deux affiches.
Pour la première affiche
Pour la première affiche
Inspiration hiérarchie des informations
Inspiration hiérarchie des informations
Inspiration organisation de l'affiche
Inspiration organisation de l'affiche
Inspiration du design
Inspiration du design
Pour la deuxième affiche
Inspiration hiérarchie & design
Inspiration hiérarchie & design
Sketching des affiches
Avant de passer à la réalisation, j'ai esquissé les deux affiches, essentiellement pour réfléchir à la répartition des informations et valider la hiérarchie visuelle en amont.
Avoir un modèle concret sur lequel s'appuyer a également facilité leur réalisation, en ayant une direction claire dès le départ.
Sketching des affiches
Avant de passer à la réalisation, j'ai esquissé les deux affiches, essentiellement pour réfléchir à la répartition des informations et valider la hiérarchie visuelle en amont.
Avoir un modèle concret sur lequel s'appuyer a également facilité leur réalisation, en ayant une direction claire dès le départ.
Les deux affiches ont ensuite été réalisées sur Photoshop
Les deux affiches ont ensuite été réalisées sur Photoshop
Première affiche • Line up
Dans le but de refléter l'ambiance et le cadre du festival, j'ai utilisé différentes fonctionnalités de Photoshop (masques, détourage, calques de réglages…).
Images libres de droits.
Première affiche • Line up
Dans le but de refléter l'ambiance et le cadre du festival, j'ai utilisé différentes fonctionnalités de Photoshop (masques, détourage, calques de réglages…).
Images libres de droits.
Seconde affiche • Têtes d'affiche
Seconde affiche • Têtes d'affiche
6 - Retour d'expérience
6 - Retour d'expérience
Ce projet complet m'a accompagnée tout au long de mon bootcamp, jusqu'au passage du titre. Il m'a permis de découvrir de nombreuses facettes du métier d'UX/UI Designer, de la conception d'interfaces à la création de motion, en passant par le print. La recherche et la conception durant ce projet m'ont beaucoup plu et ont confirmé que c'est la voie que je souhaite poursuivre !
Ce projet complet m'a accompagnée tout au long de mon bootcamp, jusqu'au passage du titre. Il m'a permis de découvrir de nombreuses facettes du métier d'UX/UI Designer, de la conception d'interfaces à la création de motion, en passant par le print. La recherche et la conception durant ce projet m'ont beaucoup plu et ont confirmé que c'est la voie que je souhaite poursuivre !
Merci pour votre lecture
Merci pour votre lecture
