Dossier de présentation - Site évènementiel autour du skateboard William Traoré - M2

Transcription

1 Dossier de présentation - Site évènementiel autour du skateboard William Traoré - M2

2 Sommaire Concept Benchmark Technologie Architecture

3 Concept Avant propos Concept Accroche Titre retenu

4 Avant propos Skate tour est une organisation, qui a pour but de réaliser des compétitions de skateboard dans le monde entier. Chaque année, Skate Tour, s installe dans un nouveau pays, pour y accueillir les skateurs locaux, mais également de tout part dans le monde. Cette année, l organisation à choisis Tokyo, qui accueillera des centaines de skateurs, pendant une semaine. Afin de couvrir une plus large cible, Skate Tour, souhaite réaliser un site internet. Celui ci, serait de type évènementiel. Grâce à ce site web, les skateurs, pourront découvrir l évènement, mais également s inscrire et suivre l évènement depuis leurs ordinateurs par le biais d une WebTV.

5 Concept Mon projet a pour but de réaliser un site vitrine pour l évènement autour du skateboard : Skate Tour L organisation, organise un évènement sur le skate une fois par an et dans un pays différent à chaque fois. Pour cette édition, Skate Tour, s installe à Tokyo. Tous le monde peut participer, qu il soit amateur ou professionnel! Le but du site, sera d informer sur l évènement, de pouvoir s y inscrire et aussi de suivre l évènement en direct. Le site sera également responsive, pour pouvoir aussi s adapter aux tablettes, qu aux mobiles.

6 Titre retenu Le titre retenu est Skate Tour. Le choix de ce titre, c est fait, car il fallait un nom qui pouvait être compris et lu, dans n importe quel pays. Skate : Par rapport au thème de l évènement Tour : Car l évènement, change de pays chaque année.

7 Benchmark Avant propos Cibles Les mots clés Les concurrents les concurrents sérieux Benchmark graphique Bilan Source d inspiration Positionnement et points forts

8 Avant propos Skate tour est une organisation, qui a pour but de réaliser des compétitions de skateboard dans le monde entier. Chaque année, Skate Tour, s installe dans un nouveau pays, pour y accueillir les skateurs locaux, mais également de tout part dans le monde. Cette année, l organisation à choisis Tokyo, qui accueillera des centaines de skateurs, pendant une semaine. Afin de couvrir une plus large cible, Skate Tour, souhaite réaliser un site internet. Celui ci, serait de type évènementiel. Grâce à ce site web, les skateurs, pourront découvrir l évènement, mais également s inscrire et suivre l évènement depuis leurs ordinateurs par le biais d une WebTV.

9 Cible Le coeur de cible de notre projet, sont les skateurs professionnells, cherchant des compétitions dans le monde entier. Notre cible, quant à elle, sont les skateurs voulant faire des compétitions La cible étendue, quant à elle, sont les skateurs ainsi que les partenaires

10 Les mots clés skate skate + compétition skate + compétition + tokyo skate + compétition + tokyo skate + contest + tokyo skate + compétition + japon En terme de référencement, il serait intéressant de se placer sur le groupe de mot «skate + compétition + japon». Le choix de ces mots clés est tout à fait pertinent, par rapport à notre projet

11 Les concurrents Xgames direct Battle at the berrics berrics.com direct Dew tour direct Make it counts direct Bowl A Rama direct Phoenix Am direct Oregon Trifecta trifecta.com direct Maloof Money Cup direct

12 Les concurrents sérieux XGames Battle at the berrics Dew Tour Maloof Money Cup

13 XGames

14 XGames «Un site très beau graphiquement, mais on s y perd un peu» Au niveau du design, ce site n a rien a envié à ses concurrents, avec des couleurs qui reste dans le domaine. Par contre, on peu noté que l on a beaucoup de mal à trouvé l information que l on souhaite. Note : 9/15 Ergonomie Architecture Design Des animations qui sont très plaisante Site multilangue Aucun scroll Réseaux sociaux Un peu lent Site visible que si le navigateur est en pleine écran Des textes courts Aucune hiérarchie de l information Plus de 3 cliques pour accéder à ce que l on cherche Des images en background Des couleurs cohérentes des belles textures grunge Trop carré

15 Battle at the berrics

16 Battle at the berrics «Des informations claires, mais on s ennuie un peu» On trouve très facilement ce que l on cherche et dès l arrivé sur le site, on atterit sur la partie compétition, ce qui nous immerge immédiatement. Par contre, le fait qu il n y ai pas de tonique, rend le site un peu plat et ennuyant Note : 9/15 Ergonomie Architecture Design Un système de blog Réseaux sociaux Trop en longueur donc beaucoup de scroll Site qu en anglais La compétition dès la page d accueil Informations facilement trouvable Sobre Sombre Aucune tonique Ennuyant Plat

17 Dew Tour

18 Dew Tour «Une bonne architecture de l information, mais trop de bloc» Un site clair, des belles couleurs et un design moderne, mais dès la page d accueil, on est perdu avec tout ces blocs qui peuvent faire fuir. On a vraiment pas de mal a trouvé ce que l on cherche, car les menus sont très simple. Note : 10/15 Ergonomie Architecture Design Présence d un slider Trop de bloc Site qu en anglais Texte courts Moins de 3 cliques pour trouver ce que l on cherche Très moderne Clair Sobre Manque de présence à certains endroit de la tonique

19 Dew Tour

20 Maloof Money Cup

21 Mallo Money Cup «Site sobre, mais parfois ennuyant» Le site est très sobre, professionnel et bien réalisé, mais il est parfois ennuyant et ne refète pas forcément le côté urbain du skate. Par contre, les informations sont très accessible Note : 14/15 Ergonomie Architecture Design Présence d un slider Onglet pour les réseaux sociaux Site qu en anglais Texte courts Moins de 3 cliques pour trouver ce que l on cherche Très moderne Couleurs cohérentes Ennuyant Ne reflète pas le côté urbain Mini slider pour le blog

22 Bilan + - Site en plusieurs langues Rester sobre Respecter le côté urbain Trop de blocs Site dans qu une seule langue Difficulté à trouver une information Des textes courts Trouver facilement les informations Afficher les réseaux sociaux Présence d un slider News

23 Source d inspiration moto.oakley.com - Système one page et parallax hotdot.pro - Background avec éclats satorisan.com - background en slider

24 Positionnement et points forts Par rapport à mon projet, je souhaite surtout me placer sur l accessibilité. Le fait que cet évènement, soit ouvert à tous niveaux, rend l évènement plus important. Actuellement, les évènements majeurs au niveau international, sont très restrictifs et sont accessible qu au niveau professionnel. Je souhaite aussi le rendre accessible médiatiquement, avec en place une WebTV, pour pouvoir suivre la compétion en direct.

25 Outils envisagés Pour ce projet, j envisage d utiliser la technologie HTML5 et CSS3 ainsi que du javascript. Le choix de ces technologies, sont justifiés par le choix d un design one page et parallax. Comme je souhaite axé l événement sur l accessibilité, le site sera facilement accepté par tous les supports mobiles (tablettes, smartphone...).

26 Proposition de rubrique Accueil : Sur cette page, nous retrouverons une vidéos en background Informations : Toutes les informations relatives à l événement Inscription : Formulaire pour pouvoir s inscrire directement en ligne Actualité : Actualité autour de l événement WebTV : Possibilité de regarder par le biais d un lecteur vidéo, l événement en direct

27 Proposition de rubrique Rubriques et modules Architecture Médias et traitement visuel Outils envisagés Processus de mise à jour

28 Rubriques et modules Accueil : Lien qui slide juqu à l accueil du site Informations : Lien qui slide juqu aux informations relatifs à l événement Inscription : Lien qui slide jusqu à un formulaire qui permet de s inscrire Actualité : Lien qui slide jusqu à une partie blog, sur l actualité de l évenement WebTV : Lien qui slide juqu à un lecteur vidéo, qui permet de regarder l événement en direct

29 Architecture

30 Médias et traitements visuels Pour garder un confort visuel, les visuels devront être de bonne qualitée. Pour cela Skate Tour, a fait appelle à des photographes professionnels spécialisé dans l événementiel afin d avoir les meilleurs images possible et ansi avoir des images de hautes qualités (des belles images de grands formats, avec de beaux contrastes, de belles couleurs, avec des retouches de déformations professionnelle). Biensûr, qui dit images de hautes qualité, dit poids élevé. Pour éviter cela les photographies seront exportées via l outil «enregister pour le web et les périphériques» de photoshop. Concernant la WebTV, celle ci, utilisera un embed, qui récupèrera le lecteur depuis le site de notre partenaire.

31 Outils envisagés Pour ce projet, j envisage d utiliser la technologie HTML5 et CSS3 ainsi que du javascript. Le choix de ces technologies, sont justifiés par le choix d un design one page et parallax. Comme je souhaite axé l événement sur l accessibilité, le site sera facilement accepté par tous les supports mobiles (tablettes, smartphone...).

32 Processus de mise à jour La mise à jour du site, ce fera par le biais du CMS Wordpress. Il sera utilisé pour pour la mise à jour des textes, liens, vidéos et images sur le site.

33 Architecture Structure générale Arborescence fonctionnelle Zoning Wireframes Gabarits

34 Structure générale

35 Arborescence fonctionelle

36 Zoning

37

38

39 Wireframe

40

41

42

43

44

45

46

47

48

49

50