Projet-Tekures-CDUI-2023

TEKURES Alexandre Likeng titre professionnel Concepteur Designer UI / UX

session 2022-2023

GESTION DE PROJET

I-Gestion de projet

SOMMAIRE

3

III-conception web

20

1-Wireframe et maquette

1-Contexte du projet

2-Interface admin

2-Demande du client 3-Brief client 4-Cahier des charges 5-Objectif du projet

IV- MARketing et communication 26 1-Optimisation SEO

6-Etude d’un concurrent

2-Réseaux sociaux

7-Cible et axe de communication

3-Animation vidéo

8-La démarche UX

3-Le print

10-Nom de domaine

II-design graphique 15

V- remerciement et conclusion

1- Moodboard 2-Charte graphique 3-Images personnalisées

2

36

I. gestion de projet

contexte du projet

Aymerick

tekures

Aymerick, 24 ans, a grandi dans la culture créole de par ses parents et incarne une fusion culturelle captivante. Ses goûts musicaux variés, comme Mac Miller et Thundercat, montrent qu’il aime différents styles d’art. Aymerick fait partie de ces jeunes qui s’inspirent de leurs racines pour mieux se trouver, en mélangeant habilement les éléments de sa culture créole avec des valeurs modernes. Cette démarche enrichit son identité culturelle et renforce sa quête personnelle d’expression, témoignant ainsi de la manière dont la génération Y puise dans ses origines pour forger son propre chemin culturel.

Ensuite, Aymerick, sous le pseudonyme «Tekures» a cherché à suivre les traces de ses héros en se faisant une place sur Internet. Il a créé sa propre musique, partageant ses compositions en ligne, tout en utilisant Twitch pour chanter en direct et interagir avec son public. C’est parce qu’il a toujours été entouré d’une diversité musicale et culturelle qu’il s’est naturellement orienté vers le métier de DJ.

mix culturelle Le mix en DJing consiste à fusionner des morceaux de différents styles et origines pour créer une expérience musicale variée, célébrant ainsi la diversité culturelle à travers la musique. Aymerick n’aspire pas à rivaliser avec des figures renommées de l’industrie musicale comme DJ Snake ou Martin Solveig, mais plutôt à devenir le porte-parole des sentiments et des expériences des jeunes d’aujourd’hui dans ce mélange culturel. C’est pourquoi il aime collaborer avec ceux qui partagent leur passion pour la musique et d’autres cultures, car cela enrichit son expérience avec d’autre créateur ( cuisine, jeux vidéos, photographie) et crée des liens sincères avec sa communauté.

3

I. GESTION DE PROJET

demande du client

le brief

Création de contenu Avez-vous besoin de contenu visuel, ou de services de rédaction de texte ?

Analyse de la communication

webmarketing

Avez-vous déjà des supports de communication en place et envisagez-vous de créer une identité visuelle ?

Qui est votre public cible principal pour cette stratégie digitale, et avez-vous l’intention de cibler des groupes spécifiques ?

Avez vous un nom de domaine ? comptez vous faire une stratégie webmarketing ?

Positionnement DE la marque

Quel est le budget et quels sont les délais à respecter pour cette stratégie digitale ?

Budget et calendrier

Quelle perception de votre marque sur Internet souhaitez-vous promouvoir, et y a-t-il des éléments spécifiques de votre identité de marque que vous désirez mettre en avant ?

Contenu et Ton Avez-vous des contenus à fournir, et avez-vous des préférences quant au ton à adopter, comme formel, informel, humoristique, ou autre ?

la concurrence Quels sont vos principaux concurrents en ligne, et quels aspects de leur présence en ligne trouvez-vous pertinents pour votre benchmarking ou devriez-vous éviter ?

Avez-vous un lieu physique ou voulez vous d’organiser des événements ou des rencontres avec vos clients ?

communication Quel sera le niveau de collaboration entre nos équipes et comment souhaitez-vous être informé du suivi du projet ?

Quels supports souhaitez-vous réaliser ?

Contrainte et exigences

Avez-vous des préférences quant aux plateformes digitales que vous souhaitez utiliser ?

Y a-t-il des contraintes légales, éthiques, techniques, ou des exigences spécifiques à considérer ?

4

cahier des charges

I. gestion de projet I - Positionnement du Projet 1. Cibles et Persona: Identification des différentes audiences cibles, incluant les fans de musique sur Twich,, les, et les clients potentiels pour les prestations de DJ. Élaboration de personas détaillés pour chaque catégorie.

2. Mind Map: Création d'une mind map représentant visuellement les diverses facettes du projet, y compris les différentes sections du site, les fonctionnalités principales, et les interconnexions.

3. Benchmark: Analyse des sites web de musiciens et DJs réussis.

Identification des points forts et des fonctionnalités innovantes à intégrer.

II - Design Graphique 1. Recherche de Logo: Création d'un logo représentatif du style polyvalent de Tekures.

Définition et hiérarchisation des sections du site pour une navigation fluide.

2. Zoning et Wireframe (Version Écran et Mobile): Création de prototypes pour définir l'agencement des éléments sur les différentes pages.

3. Maquette: Conception graphique détaillée de chaque page, intégrant la charte graphique et les éléments visuels.

IV - Développement et Mise en Œuvre du Site 1. Nom de Domaine: Choix d’un nom de domaine représentatif de Tekures et explication de son origine et de l’extension choisie.

2. Hébergement: Choix d’un service d’hébergement fiable et adapté aux besoins du site.

3. Installation WordPress: Justification du choix de WordPress.

Installation d’un serveur web adapté, incluant la création de base de données et la configuration des fichiers serveur.

2. Réalisation d’Charte Graphique:

4. mise en page des contenus:

Définition d'une palette de couleurs en lien avec le hip-hop et RnB. Choix de polices modernes et lisibles.

Utilisation du thème builder divi pour personnaliser les pages en accord avec la charte graphique de Tekures

5. Veille Technologique:

3. Traitement Graphique des Images, Retouche, Iconographie:

Choix de plugins en fonction des fonctionnalités du projet.

- Formulaire pour demande de vis - Affichage intuitif des vidéos hébergées surt youtube - Intégration de fonctionnalités techniques spécifiques (ACF, CPT, UI carrousel, blog mots-clés).

Traitement professionnel des images de Tekures.

Création d'icônes représentatives des différentes activités de Tekures.

III - Conception du Site Web 1. Arborescence:

7. Sécurisation et Backup du Site: - Mise en place d’outils de sauvegarde, de protection, SSL, et reCAPTCHA.

5

I. GESTION DE PROJET

cahier des charges

8.mise en place d’une boutqiue en ligne:

VI - Communication : Outils de PromotionNels

Intégration du plugin WooCommerce pour la partie boutique du site avec les goodies..

1. Vidéo Promotionnelle (60s): Scénario et storyboard pour une vidéo promotionnelle courte et impactante.

Le cahier des charges vise à assurer le développement d’un site web professionnel, esthétiquement attractif, et fonctionnel, répondant aux besoins spécifiques de Tekures et favorisant sa visibilité et son engagement en ligne.

9. Optimisation: Utilisation d’outils comme Yoast, métadonnées, cache, formulaires, API Google, API MailChimp, et Site Kit pour une performance optimale.

V - Marketing et Communication

2.Flyers publicitaires:

1. Optimisation SEO:

réaliser une affiche print. réaliser une carte de visite.

Analyse du DOM, étude du vocabulaire, utilisation de Google Trends, optimisation des attributs ALT et descriptions d’images.

Installation et config d’outils comme Yoast, métadonnées, cache, formulurationaires, API Google, API MailChimp, et Site Kit pour une performance optimale.

2. Google Analytics: Configuration du suivi d’analyses pour évaluer la performance du site.

3. Emailing: Options pour l’emailing, configuration serveur, et intégration d’outils.

4. Ads: Planification de campagnes publicitaires et de sponsorisations.

5. Réseaux Sociaux et Calendrier Éditorial:

Point d’attention : Se concentrer particulierement sur l’experience utilisateur

Intégration des réseaux sociaux avec un calendrier éditorial pour maintenir une présence régulière.

6

objectifS du projet

I. gestion de projet

objectiFs et points d’attentions

benchmark

Faire connaître tekures Faire reconnaître Tekures en tant qu’artiste

développer son audience et ses prestations

Créer une communauté.

Valoriser les contenus créatifs sur le site internet.

Mettre en avant les prestations.

Développer ses prestations , événements en live, écouter sa musique.

fidéliser son public Promouvoir la marque, en développant les collaborations, partenariat, et les réseaux sociaux.

7

étude d’un concurrent

I. GESTION DE PROJET

m, le chanteur La charte graphique

Son nom de domaine, c’est : labo-m.net.

C’est un site vitrine et e-commerce créé par une agence de communication française, du nom de « Bronx ». Qui s’occupe de son site internet, mais aussi de toute sa communication, ce qui lui permet d’avoir de la cohérence dans tout ce qu’il fait

Le logo, est doté d’une identité forte, bien travaillé, immédiatement associé au chanteur. Le logo est décliné dans plusieurs versions. Le violet prédomine sur le site, et est aussi utilisé en déclinaisons, ce qui crée une ambiance fantastique et créative, pour évoquer un monde imaginé, un rêve.

Le choix de la typographie La typo est Futura, sans sérif, assez neutre qui s’éfface pour laisser place au visuel, C’est une typo iconique qui reste dans l’histoire tout comme M qui veut rester dans l’histoire.

Page d’accueil La page d’accueil suscite un engagement visuel impressionnant grâce à l’utilisation maîtrisée des couleurs, des images et à la disposition du contenu, ce qui donne à l’utilisateur, l’envie d’explorer le site.

8

étude d’un concurrent

I. gestion de projet Le SEO

Conclusion

Il n’a pas travaillé le référencement naturel, car sa notoriété est déjà établie. En tant que célébrité, son image est mise en avant par Google avant son site web, car c’est ce que les gens recherchent d’abord.

C’est un domaine où je peux être en tête en travaillant sur le référencement naturel et la recherche de mots-clés, afin que mon site soit directement mis en avant par Google.

Bien que Tekures puisse ne jamais atteindre la notoriété de M, il demeure essentiel pour tout artiste de mettre en œuvre une stratégie de marketing et de communication pour toucher sa communauté.

Même en étant un artiste marseillais, il est impératif de démontrer un grand professionnalisme dans l’utilisation des outils numériques tels que les sites internet, le référencement et le multimédia. La clé de réussite d’un projet comme celui-ci réside dans la maîtrise des outils techniques et une grande polyvalence.

La navigation La navigation sur son site s’adresse principalement aux personnes qui le connaissent déjà. C’est pour cela aussi qu’il n’a pas de page « A propos».

Il part du principe que sa notoriété est déjà établie, comme en témoignent ses sous-pages qui sont des références à ses albums. Cela peut ne pas être évident à saisir dès le premier abord pour ceux qui ne sont pas familiers avec sa musique.

9

cible et axe de communication

I. GESTION DE PROJET

ciblage et positionnement le ciblage Mon coeur de cible se compose principalement des amateurs de lives sur Twitch et de musique de la génération Z. Ma cible principale sont les prestataires de services DJ, tandis que ma cible secondaire comprend des partenaires, créateurs, musiciens et influenceurs participant à des collaborations. En ciblant le cœur de ma audience, j’introduis la marque auprès de la clientèle principale, qui découvre ainsi les performances en tant que DJ.

Par la suite,j’ai créé des personas en utilisant des données réelles de concurrents, détaillant les clients avec leur biographie, préférences, personnalité, objectifs, et motivations. Cette approche, approfondit ma compréhension de la clientèle, pour améliorer mes stratégies de communication. La connaissance approfondie des personas a guidé la création d’une charte graphique cohérente avec le style musicale de Tekures

gen z

mariage et événement dj

10

artistes et créateurs, influenceurs

I. gestion de projet

cible et axe de communication

coeur de cible

les personas cible principale

11

la démarche UX

I. GESTION DE PROJET

parcours de navigation du magicien :

Alimenter les réseaux sociauxs tels qu’Instagram.

Promouvoir Tekures en tant qu’artiste sur son site.

Mettre en avant sa musique sur son site et réseaux sociaux.

Mettre en avant les événements live sur son site.

12

la démarche UX

I. gestion de projet

parcours de navigation de l’amoureuse :

Affiner soigneusement son image pour se démarquer et attirer une clientèle variée. Élaborer une fiche d’établissement Google pour renforcer la crédibilité.

Optimiser la page des prestations pour assurer un bon référencement.

Rediriger les avis vers la page des prestations pour renforcer la réputation.

Accroître la visibilité du DJ grâce au bouche-à-oreille (inbound marketing).

13

nom de domaine

I. GESTION DE PROJET

tekures.fr J’ai vérifié si le nom de domaine est diponible avec Gandi. Et ensuite j’ai acheté le nom de domaine avec Infomaniak.

Justification de l’extension fr J’ai opté pour l’extension «fr» afin d’optimiser le référencement sur les moteurs de recherche français. Cette décision vise à établir une distinction plutôt qu’à faire un choix global pour une visibilité internationale avec l’extension «.com». Cette stratégie permet à Tekures de se forger une identité en tant qu’artiste français.

INPI Tekures est officiellement enregistré à l’INPI, démontrant son engagement à protéger légalement son nom d’artiste et ses création sur le web.

14

II. design graphique

moodboard : le moodboard aussi appelé planche tendance est une composition visuelle qui sert à déterminer l’ambiance visuelle du site, avec des images, typographie, couleur ou autre éléments visuelle

néo futurisme, inspiration du passé, hyperdigitalisation, hyperfuturisme

15

charte graphique

II. design graphique

choix des couleurs :

choix de la typographie :

couleur principale et nuance

Bebas NEUE pour les titres poppins pour le texte

#7165bf

R=113V=101 B=191 C=66 M=64 J=0 N=0

bebas neue est une police avec un style très épuré et esthétique, moderne, qui reflète bien le style de musique de Tekures.

Poppins est une police très lisible et arrondie comme de snotes de musique.

#d4d1ec

R=212 V=209 B=236 C=19M=18 J=0 N=0

couleurs secondaires #a13767

#000000

R=161 V=55 B=103

R=0 V=0 B=0

C=32 M=88 J=27 N=14

Material design

C=91 M=79 J=62 N=97

justification de la typographie

Pour utiliser ma palette de couleur, j’ai appliqué les principes du Material Design de Google, ce qui m’a permis de créer une interface visuelle cohérente, et esthétique Le violet, une couleur associée à la créativité et aux émotions, en harmonie avec l’identité musicale et le style R&B de Tekures.

Cette teinte s’aligne également avec l’archétype du magicien.

Le rouge que j’ai choisi est une couleur de contraste avec mon violet, que j’utiliserai pour des éléments simples tels que des boutons pour donner de la chaleur à mon design. Le noir est la couleur de la nuit, parfaitement associée à l’univers de la fête et qui se marie bien avec toutes les couleurs.

16

charte graphique

II. design graphique

planche de recherche logo déclinaison sur fond noir et blanc pour le print

logo final

Couleur de correspondance pour le print C= 42 M= 78 J= 0 N= 0

Pour le print je veille à ce que la typographie sois lisibe, j’ai du trouver une couleur de corrspondance car la vibrance de ma couleur n’apparaît pas pour l’impression.

J'ai choisi une typographie signature pour donner une touche artistique, utilisé le néon pour capturer l'ambiance nocturne, et ajouté un disque en arrière-plan évoquant subtilement l'esthétique du vinyle.

17

baseline «Créez l’événement pour capturez le moment»

II. DESIGN GRAPHIQUE

images personnalisées

uniformisation des images

Uniformation des couleurs

J’ai reçu des photos de haute qualité prises par un photographe, avec une résolution de 5000x4000 px au format jpg pour beaucoup d’images.

Afin de rester en accord avec la charte graphique de mon site internet, j’ai retouché les images en ajoutant des tons de violet grâce à Photoshop, afin d’assurer une cohérence visuelle avec le design du site web

Cependant, pour optimiser la performance de mon site, j’ai dû redimensionner les images en 1920x1280 px (pleine largeur) ou 800x480 px au format jpg.

correction selective et mélangeur de couche

Ce choix permet d’obtenir un format plus léger et facile à compresser, et assure une expérience de chargement rapide et efficace sur le web.

3700x5000

715x1000

image --> taille de l’image

6000x5000

1920x1280

18

images personnalisées

II. design graphique

J’ai utilisé des calques de réglages dans Photoshop pour travailler de manière non destructive et préserver la qualité des images.

19

wireframes et maquettes

III. conception web

ARBORESENCE L’organisation de l’arborescence a été importante pour construire la structure et la navigation du site, et offrir une experience utilisateur en rapport avec mes personas.

Wireframe zoning

La création des wireframes est essentielle car elle m’a aidé à déterminer comment organiser efficacement la mise en page et positionner le contenu dans chaque section avec les éléments d’UI design.

le zoning m’a servi à définir les grandes sections de chaques

20

wireframes et maquettes

III. conception web

MOBILE FIRST Il était essentiel pour moi de créer une version mobile de mon site, car mon public cible, la génération Z, est principalement présente sur des appareils mobiles.

21

wireframes et maquettes

GESTION III. conception DE PROJET web

Maquette desktop

Les maquettes m’ont servi à tester le site avant de passer au développement et à effectuer la veille technologique nécessaire au développement

22

interface admin

III. CONCEPTION WEB

le backoffice les articles

Le backoffice de WordPress constitue l’interface d’administration du site, permettant la gestion des contenus, la publication d’articles, le téléchargement des médias, la personnalisation du thème grâce au thème Divi que j’ai utilisé, et l’intégration de fonctionnalités adaptées avec des plugins.

J’ai créé les articles nécessaires qui correspondent à chaque catégorie

thème divi: Divi est un thème, un page builder et un thème builder, ses modules dynamique (blog, slider post..)m’on permis de travailler avec du contenu dynamique en utlisant les catégories. J’ai également créé 2 thèmes personnalisés, pour les catégories «Événement» et «Collaboration», afin d’obtenir des modèles de page adaptés en fonction de la catégorie d’article.

catégorie

les ACF

J’ai créé deux catégories dans mon backoffice afin de classer les articles de manière appropriée. J’ai fait une catégorie pour les collaborations et une autre pour les événements

Les ACF me permettent de créer des champs personnalisés adaptés aux besoins de mon client. Par exemple, pour les articles de la catégorie «événements», j’ai créé un champ personnalisé appelé «lien_page_collaboration». Ce champ est utilisé sous forme de lien pour rediriger vers la collaboration de Tekures lorsque l’on consulte l’article événement.

23

interface admin

III. Conception web création de la fiche ACF: C’est dans le groupe de champs collaboration. Que j’ai crée l’ACF lien_page_collaboration».

article «stream 24h» Avec les groupes de champs personalisées

C’est fonctionnel pour le client, il a la possibilité de remplir lui-même les articles événements ou collaboration depuis le backoffice.

Le thème builder divi permet de construire un modèle d’article pour le front office, grâce aux champs personnalisés ACF. Le site est construit dynamiquement ce qui assure une ergonomie du côté de l’utilisateur et le respect de la charte graphique car on on ne modifie pas les styles (css) de l’article.

ACF: «lien_page_collaboration»

24

interface admin

III. Conception web

extensions installées sécurité

gestion des contenus

WEB MARKETING

25

formulaire

IV. marketing et communication

optimisation SEO

optimisation du site

Performance

Google PageSpeed Insights est un outil de la suite Google qui permet d’analyser les performances, l’accessibilité, les bonnes pratiques et le référencement SEO d’un site internet. Il évalue les points forts et les points faibles d’un site, en fournissant des recommandations pour améliorer les aspects identifiés comme faibles.

Les performances de mon site sont mon point fort. J’ai limité l’utilisation des plugins et réalisé un travail d’optimisation des médias en redimensionnant toutes les images. J’ai utilisé les ressources JavaScript avec modération. Les vidéos sont hébergées en streaming. Dans le développement, j’ai privilégié l’utilisation d’ACF spécifiques plutôt que de recourir à des plugins.

Par exemple, j’aurais pu choisir une extension pour les événements, mais j’ai préféré utiliser les ACF.

ACCESSIBILITE Pour garantir une accessibilité optimale, j’ai opté pour une typographie épaisse pour les titres des sections, en harmonie avec le design de mon site. La police que j’aiutilisée pour les textes assure une bonne lisibilité.

BONNES PRATIQUES Pour les bonnes pratiques, j’ai respecté la structure sémantique du DOM en utilisant les balises HTML de la bonne manière.»

SEO Pour optimiser le référencement (SEO), j’ai utilisé le plugin YOAST afin d’ajouter les métadonnées aux pages de mon site. J’ai suivi les critères de Google EAT en utilisant le champ sémantique approprié à mon domaine

26

les réseaux sociaux

IV. marketing et communication

canaux utilisés J’ai choisi YouTube pour diriger la communauté de Tekures vers les rediffusions de ses lives, c’est aussi la plateforme sur laquelle il publie sa musique.

CALENDRIER ÉDITORIAL DU MOIS DE Décembre 2023

Twitch est la plateforme où il réalise ses DJ sets en direct, chante et interagit avec sa communauté.

Tous les artistes sont sur Instagram, c’est la plateforme idéale pour lui, pour promouvoir sa musique, ses collaborations et interagir avec son public.

publication 17 publications par mois entre youtube, insta et twitch.

Objectif 15k

27

IV. marketing et communication FEED INStagram

les réseaux sociaux POST INStagram

28

les réseaux sociaux

IV. marketing et communication

rediff twitch sur youtube LIVE twitch

29

ADS

IV. marketing et communication Bannière publicitaire

pour la promotion du site web je crée en format display ici, c’est le format 728x90 leatherboard

30

animation vidéo

IV. Marketing et communication

Storyboard de la vidéo tekures

musicien

DJ

ambiance sonore personnaliséE

Animation after effect d’une signature sur une photo de Tekures.

Vidéo de Tekures jouant de la guitare.

Vidéo d’une table de mixage pour DJ.

Photo de Tekures qui mixe sa musique.

vidéo soirée dansante

soirée entre amis

vidéo soirée entre amis

Vidéo d’une soirée dansante.

Photo d’une soirée entre amis.

Vidéo d’une soirée entre amis.

31

fête de mariage Photo d’un mariage.

soirée dansante

Photo d’une soirée dansante.

fête de mariage Vidéo d’un mariage.

animation vidéo

IV. marketing et communication GESTION DE PROJET

Storyboard de la vidéo événement sportif

photo événement sportif

style de musique ZOUK

artiste zouk

style de musique hip hop

événement sportif

suivez mes lives

vidéo événement sportif

photo Tekures en live

artiste hip hop

style de musique pop

style de musique chanson française

crééz l’événement pour capturez le moment

artiste pop

artiste de la chanson fançaise

slogan

style de musique RNB

artiste RNB

tekures

animation logo after effect effect

Musique de Tekures : Shiki No Uta Feat. Seth (Pondelinp Remix).

32

animation vidéo

IV. marketing et communication

Durée : 1 min Média :

Poids: 30 mo Taille: 1920px X 1080px

33

IV. MARKETING ET COMMUNICATION

LE PRINT les FLYERS

A4 = 21cm x 29,7cm mode colorimétrique : CMJN Fonds perdus et traits de coupe : 5mm Lieu = soirée, fac

résolution : 300dpi

34

IV. MARKETING ET COMMUNICATION

LE PRINT carte de visite

8,5cm x 5,5cm mode colorimétrique : CMJN format: PDF

résolution : 300dpi

Fonds perdus et traits de coupe: 5mm recto verso

35

GESTION DE PROJET

V. remerciements et CONCLUSION

C’était une année d’apprentissage pour moi, que ce soit pour acquérir les compétences du métier de webdesigner, améliorer mon organisation, ma méthode de travail et développer mes compétences relationnelles. J’ai eu du mal à m’adapter à toutes ces nouveautés au début. Ce n’est qu’en faisant plus d’efforts réguliers que j’ai progressé.

Je tiens d’abord à remercier ma famille proche qui m’a toujours soutenue.

Magali et Pierre m’ont énormément appris en mettant leur énergie et leur cœur pour m’enseigner ce métier. Ils m’ont encadré et appris à travailler de manière professionnelle et efficace, ce qui m’a permis de gagner en compétences au fil des mois.

Merci à Emmanuel qui s’est adapté à chacun d’entre nous et qui nous a encouragés.

Je souhaite également remercier mon ami Aymerick, le musicien, qui s’est proposé pour que je réalise mon projet web sur lui.

Maintenant, je me sens plus confiant, donc travailler en tant que webdesigner dans une agence web me paraît être la suite logique de cette histoire.

36

design graphique

merci