TUMBAO «La mano secreta» 1
1 - Projet (motivation et bénéfices) Sommaire 2 - Personas 3 - Benchmarking 4 - Arborescence - tri de carte (photo) - organigramme 5 - Wireframes - prototype semi fonctionnel 6 - Moodboard 7 - Maquettes PSD 8 - Capture du site finalisé 2
Introduction 3
La finalité du projet et le contexte de mise en application : Nous allons prendre connaissance, du projet La mano secreta qui portera sur la percussion latine, plus précisément sur la trilogie : tumba, congas, et quinto. En effet, ces instruments issus de la culture cubaine ont connus une évolution sans précédent, en ce qui concerne les techniques de frappes. Les maîtres tumbador cubains que sont chano pozzo, mongo santamaria, changuito du groupe los van van et giovanni hidalgo ont révolutionnés l apprentissage des congas. Ce site aura pour objectif, d apporter des informations à la fois techniques pédagogiques et culturèles aux internautes. - présentation des percussion latines - les percussionnistes qui ont marqués - différentes techniques de frappes (soutenus par des exemples vidéos). - histoire de la musique cubaine - les différents lieux pour pratiquer - les disques et artistes, (must have) - les actualités et les concerts.. Le site devra être en HTML5/CSS 3, responsive, ce qui suppose qu il pourra être visible sur ces différents devices : - desktop - tablette - smartphone Le dynamisme du site sera assuré par du java script et des bibliothèques jquery. 4
Les personas 5
Persona primaire : Coco Dixan 6
Persona secondaire : Mimi sapotille 7
Benchmarking 8
Secteur : musique(percussions latines) Site : Congas & percussions Stratégie de contenue Parcours utilisateurs Graphisme Accessibilité Ergonomie Site codé en HTML 4.01 transitional. Tous les liens sont fonctionels. Nous avons un accès à l information rapidement.le contenu est pertinent et technique.l ergonomie malgrés un à priori hostile s avére assez bonne.simple et éfficace. C.T.A Code HTML/CSS Responsive La navigation sur la gauche La couleur rouge qui aussi usité pour certains liens.typo, réseaux sauciaux.le choix graphique, la qualité des images(déformées). Mise en page, les niveaux de lecture.site austére pas responsive. 9
Secteur : musique(percussions latines) Site : Latin Percussion Stratégie de contenue Parcours utilisateurs Graphisme Accessibilité Ergonomie C.T.A Code HTML/CSS Responsive Site de e-commerce avec une identité graphique forte. Totale adéquation entre le contenu et la communication de l enseigne(endorsement).le choix des images,accessibilité, réseaux sociaux, code HTML 5, logo avec sous nav. Site pas responsive, possibilité d amalgame entre le e-commerce le site d information(l ambiguité) de l exercice.site exclusivement LP, pas de choix sur plus de marques. Plus de tutoriels seraient un plus... 10
Projet webdesigner Secteur : musique(percussions latines) Site : Miguel Gomez.com Stratégie de contenue Parcours utilisateurs Graphisme Accessibilité On est dans le sujet, cohérence entre le message diffusé et la stratégie de communication. bonne accessibilité, ergonomie est correcte, présence sur facebook.le choix des couleurs bois en accord avec les congas. Ergonomie C.T.A Code HTML/CSS Responsive Pas de véritable identité visuelle, le logo LP est trop présent.site pas responsive, visuelle trop chargé, trop d infos tuent l info. On aurait aimé plus de tutos quitte à avoir un accés payant. Pas vraiment d information sur le «matos». 11
Conclusion du benchmarking Apres l étude de la concurrence qui présente quelques sites sur les percussions afro latines, nous nous sommes aperçu qu aucun de ces sites n est responsive. Le code utilisé est souvent du html4. De plus le graphisme les couleurs sont souvents tres chargés. Nous devrons essayer de mettre en place un site responsive avec du html5/css3 avec un niveau d affordance élevé. Le parcours utilisateur devra être simplifié avec des cta pertinents. Il faudra éviter les liens redondants, le graphisme devra être en totale adéquation avec le moodboard, voire le G.U.I. De plus le respect de la compatibilité avec les principaux navigateurs (chrome,safari,firefox,ie...) devra demeurer une priorité, afin d éviter certaines déconvenues. 12
L arborescence 13
L organigramme 14
Wireframes 15
Prototypes semi - fonctionnels 16
17
18
Moodboard 19
20
Maquettes psd 21
22
Capture du site finalisé 23
Etat normal : 1024 24
1er Break point 25
2ieme Break Point 26
3ieme Break Point 27
4ieme Break Point 28
AY NA MA AHI NADA MAS fin 29