PROJET DE REFONTE DU SITE WEB DE L ARTISTE MAMIA CHERIF CHANTEUSE ET COACH VOCAL ETAPES DE CONCEPTION. Réalisé par Emily Lefebvre - 10/10/2014 1

Transcription

1 PROJET DE REFONTE DU SITE WEB DE L ARTISTE MAMIA CHERIF CHANTEUSE ET COACH VOCAL ETAPES DE CONCEPTION Réalisé par Emily Lefebvre 10/10/2014 Module Réalisateur Web Réalisé par Emily Lefebvre - 10/10/2014 1

2 I/ Collecte et analyse des informations relatives au lancement du projet 1. Objectifs du site et attentes du client : Informer son public sur les concerts à venir. Etablir une carte de visite de la chanteuse avec liens vers plateformes de vente en ligne. Susciter le besoin de futurs élèves pour ses cours de chant. La client souhaite mettre en avant son activité de professeur de chant. 2. Public ciblé les personas Jeunes actifs à la recherche de cours de chant ou de coaching de développement personnel à travers la communication orale. Actifs à la recherche de concerts et souhaitant découvrir des artistes sur le Web. Niveau d équipement des futurs internautes : Hyper-connectés. Multi-devices. Réalisé par Emily Lefebvre - 10/10/2014 2

3 I/ Collecte et analyse des informations relatives au lancement du projet 3. Benchmarking concurrentiel 2 sites concurrentiels fournis dans le brief : Caroline Klaus Comédienne chanteuse Jean Sommer Coach vocal A noter qu il faudra prévoir dans notre projet : Un design simple. Une navigation facile et claire. Une information structurée. Comprendre les objectifs des cours. Design plus orienté business convenant au style business de la formation qui sera proposée. L objectif étant de mettre en avant son activité. NB: L analyse concurrentielle sur le web plus poussée relève que peu de sites fonctionnels avec un bon design et ergonomiques sont présents. Réalisé par Emily Lefebvre - 10/10/2014 3

4 Notre cliente pourra clairement se démarquer de sa concurrence grâce à la refonte de son site web à condition : Qu il soit fonctionnel. Qu il ait une bonne architecture de l information. Qu il soit ergonomique. Qu il ait un bon design (simple et + business). Qu il soit bien référencé. Qu il soit animé grâce aux réseaux sociaux et que Mamia Cherif communique sur son réseau «artiste» qui est déjà conséquent. II/ La conception fonctionnelle 1. Le tri par carte des informations qui permettront à l utilisateur de trouver plus rapidement et plus simplement les informations qu il cherche. Enumération. Catégorisation. Structuration Réalisé par Emily Lefebvre - 10/10/2014 4

5 Représentation du tri par carte du projet par Madmapping Réalisé par Emily Lefebvre - 10/10/2014 5

6 II/ La conception fonctionnelle 2. L arborescence du site web Accueil L artiste Coaching entreprise Coaching vocal Réalisé par Emily Lefebvre - 10/10/2014 6

7 3. Wireframe «Outil de communication entre tous les intervenants d un projet informatique qui prend en considération la structure, le contenu, la hiérarchie de l information, les fonctionnalités et les comportements dune interface de site ou d application sans artifice graphique» Réalisation de la maquette interactive du projet sur Axure : II/ La conception fonctionnelle Réalisé par Emily Lefebvre - 10/10/2014 7

8 Réalisé par Emily Lefebvre - 10/10/2014 8

9 Réalisé par Emily Lefebvre - 10/10/2014 9

10 4. Charte rédactionnelle Design business donc assez sobre. Mamia Cherif est inspirée par la méditérannée, le soleil. J ai donc choisi de mélanger des couleurs chaudes (comme le orange, le rouge et le jaune que l on retrouvera beaucoup dans ses photos) avec une couleur grise plus sobre. La typo choisie est sobre également. Le site a été développé en variantes plus ou moins grasses de la typo «Open sans» téléchargée sur Google fonts et installée dans le code du site. 5. Création graphique des pages J ai réalisé des maquettes graphiques du site sous Photoshop pour chaque page. J ai choisi le background avec un motif rappelant son identité existante afin que ses fans ne se sentent pas totalement perdus lorsqu ils arriveront sur un site plus corporate que le précédent. Motif de son album Jazzarab. Réalisé par Emily Lefebvre - 10/10/

11 Page d accueil Réalisé par Emily Lefebvre - 10/10/

12 Page «L artiste» - partie haute Réalisé par Emily Lefebvre - 10/10/

13 Page «L artiste» suite Réalisé par Emily Lefebvre - 10/10/

14 Page «Coaching entreprises» Réalisé par Emily Lefebvre - 10/10/

15 Page «Coaching vocal» Réalisé par Emily Lefebvre - 10/10/

16 6. Développement informatique Développement réalisé sous HTML5 et CSS3 avec validation W3C Réalisé par Emily Lefebvre - 10/10/