Julien Picouleau - Présentation Réalisateur Web IESA 20151
L’influence de l’électronique sur l a musique depuis les années...
CONTEXTE & OBJECTIFS	 3
BENCHMARK	4
PERSONA	13
ARBORESCENCE	15
WIREFRAME	16
MOODBOARD	19
GUIDE DE STYLE	 20
CAPTURE DU SIT...
Julien Picouleau - Présentation Réalisateur Web IESA 20153
CONTEXTE & OBJECTIFS
Dans un contexte de développement toujours...
Les + Les -
Julien Picouleau - Présentation Réalisateur Web IESA 20154
BENCHMARK
•	 Players accesible depuis toutes les pa...
Les + Les -
Julien Picouleau - Présentation Réalisateur Web IESA 20155
•	 Bonne hiérarchie de contenu
•	 Signalétique clai...
Les + Les -
Julien Picouleau - Présentation Réalisateur Web IESA 20156
BENCHMARK
•	 One-page claire
•	 Contenu correctemen...
Les + Les -
Julien Picouleau - Présentation Réalisateur Web IESA 20157
BENCHMARK
•	 Peu de rechargements de pages
•	 Navig...
Les + Les -
Julien Picouleau - Présentation Réalisateur Web IESA 20158
BENCHMARK
•	 Timeline responsive
•	 Tentative de cl...
Les + Les -
Julien Picouleau - Présentation Réalisateur Web IESA 20159
BENCHMARK
•	 Hiérarchie de contenu thématique réuss...
Les + Les -
Julien Picouleau - Présentation Réalisateur Web IESA 201510
BENCHMARK
•	 Bon hiérarchie de l’information
•	 Re...
Les + Les -
Julien Picouleau - Présentation Réalisateur Web IESA 201511
•	 Chronologie simple et visible
•	 Possibilité de...
Julien Picouleau - Présentation Réalisateur Web IESA 201512
BENCHMARK
•	Respect des lois de proximité afin d’obtenir un co...
Julien Picouleau - Présentation Réalisateur Web IESA 201513
PERSONA
Lucien Lestroc
Playlists
Radio Information
Streaming
V...
Julien Picouleau - Présentation Réalisateur Web IESA 201514
PERSONA
Rose Ezyal
Playlists
Streaming
Son objectif : Se rense...
Julien Picouleau - Présentation Réalisateur Web IESA 201515
ARBORESCENCE
Home Playlists
Julien Picouleau - Présentation Réalisateur Web IESA 201516
Home & Pl aylists en 320 px
WIREFRAME
< >
Home Playlists
Julien Picouleau - Présentation Réalisateur Web IESA 201517
Home & Pl aylists en 768 px
WIREFRAME
< >
Home Playlists
Julien Picouleau - Présentation Réalisateur Web IESA 201518
Home & Pl aylists en 1024 px
WIREFRAME
< >
#0fb1ab
#333333
#30384f
#fab933
Julien Picouleau - Présentation Réalisateur Web IESA 201519
MOODBOARD
Julien Picouleau - Présentation Réalisateur Web IESA 201520
GUIDE DE STYLE
#0fb1ab

 

#30384f
#30384f
#0fb1ab
#333333...
Julien Picouleau - Présentation Réalisateur Web IESA 201521
CAPTURE DU SITE
Julien Picouleau - Présentation Réalisateur Web IESA 201522
CAPTURE DU SITE
Prochain SlideShare
Chargement dans…5
×

plan_projet

263 vues

Publié le

0 commentaire
1 j’aime
Statistiques
Remarques
  • Soyez le premier à commenter

Aucun téléchargement
Vues
Nombre de vues
263
Sur SlideShare
0
Issues des intégrations
0
Intégrations
6
Actions
Partages
0
Téléchargements
1
Commentaires
0
J’aime
1
Intégrations 0
Aucune incorporation

Aucune remarque pour cette diapositive

plan_projet

  1. 1. Julien Picouleau - Présentation Réalisateur Web IESA 20151 L’influence de l’électronique sur l a musique depuis les années 40 PLAN PROJET WEB DESIGN 2015
  2. 2. CONTEXTE & OBJECTIFS 3 BENCHMARK 4 PERSONA 13 ARBORESCENCE 15 WIREFRAME 16 MOODBOARD 19 GUIDE DE STYLE 20 CAPTURE DU SITE 21 Julien Picouleau - Présentation Réalisateur Web IESA 20152 TABLE DES MATIÈRES
  3. 3. Julien Picouleau - Présentation Réalisateur Web IESA 20153 CONTEXTE & OBJECTIFS Dans un contexte de développement toujours plus radipe et ramifié, l’électronique est aujourd’hui un point centrale dans le développement de la composition musicale. Comment se passer d’un studio d’enregistrement ? Ou d’un synthétiseur ? Difficilement... Et pour cause, l’électronique est à la fois devenu un outil viable d’optimisation sur le temps de création/composition, mais aussi et surtout une économie de moyen considérable. Inf iltrant peu à peu les différents courants muw sicaux, l’électronique est à présent un courant à par entière, avec ses tendances et ses expériences. Se réinventant de jour en jour, la musique électronique est donc un domaine complexe avec ses crises, ses chercheurs, ses artistes et ses scientifiques. Le site syncope.com à pour but principal d’apporter à l’internauteunapportinformatifrapide,etunaccèsàdesplaylists thématique mais accessible depuis toutes les pages du site. Un rappel historique sous forme de timeline sera mis en place afin d’offrir à l’utilisateur une vue d’ensemble et d’ainsi de parcourir le site de façon simple en utilisant ce moyen comme base de navigation. La cible visée est un individu féminin ou masculin d’environ 30 ans, vivant en région parisienne. Elle semble posséder une solide culture musicale mais elle souhaiterait, dans l’ensemble, en apprendre plus sur la musique électronique. Elle recherche donc principalement de nouveaux artistes ou tendances, mais elle s’intéresse aussi aux nombreux courants qui ont composé la musique électronique d’aujourd’hui.
  4. 4. Les + Les - Julien Picouleau - Présentation Réalisateur Web IESA 20154 BENCHMARK • Players accesible depuis toutes les pages du site , avec une activation au clic • Contenu ecléctique (informations / musiques) • Podcasts et playlists détaillées pour une recherche plus approfondis • Classement des articles clair par aplat de couleur • Responsive avec les menus et players en accessibilité directes • Signalétique claire et cohérente • La prise en main nécessite une certaine maitrise de l’outil web • Les menus en overlay ne sont pas assez mis en valeur • pas de fil d’ariane KCRW (fonctionnel) // http://www.kcrw.com/
  5. 5. Les + Les - Julien Picouleau - Présentation Réalisateur Web IESA 20155 • Bonne hiérarchie de contenu • Signalétique claire • Contraste blanc/contenu bien gérée • Chorégraphie de contenu cohérente • Navigation par ancrage avec smoothing scroll • Chargements des média lents / Mauvaises optimisations (?) • Certains liens non cliquables BENCHMARK Nynkeheussen (fonctionnel) // http://nynkeheussen.nl/
  6. 6. Les + Les - Julien Picouleau - Présentation Réalisateur Web IESA 20156 BENCHMARK • One-page claire • Contenu correctement segmenté • Navigation fixe • Média visible • Non responsive / aucune optimisation pour le mobile • Contenu trop restreint à 960 px / nav 1172 px • Navigation en transparent mal gérée sur fond blanc Del aDjel a (fonctionnel) // http://www.deladjela.com/
  7. 7. Les + Les - Julien Picouleau - Présentation Réalisateur Web IESA 20157 BENCHMARK • Peu de rechargements de pages • Navigation / Footer fixe • Vu responsive claire • Mariage des couleurs cohérents • Tentative de tri de contenu par catégorie d’article • Loi de Gerstalt non respecté dans l’aside • Aucun espace de respiration au sein du site • Le repérage au sein du site et vite l’aborieux • Mauvaise architecture de l’information RiderRadio (fonctionnel) // http://www.rider-radio.com/
  8. 8. Les + Les - Julien Picouleau - Présentation Réalisateur Web IESA 20158 BENCHMARK • Timeline responsive • Tentative de classement par artiste / média / article • Plateforme de téléchargement de documentation sur les artistes • Infomration sur les artistes directs d’accès • Design graphique façon papier millimétré • Navigation flou • Hiérarchie de contenu / Chorégraphie de contenu Border Communit y (fonctionnel) // http://www.bordercommunity.com/
  9. 9. Les + Les - Julien Picouleau - Présentation Réalisateur Web IESA 20159 BENCHMARK • Hiérarchie de contenu thématique réussi • Explications et détails de chaque style et sous genre musical • Navigation simple basé sur des grands courants musicaux • Site intégralement en flash • Non responsive • Typo / chromie Techno (fonctionnel) // http://techno.org/electronic-music-guide/
  10. 10. Les + Les - Julien Picouleau - Présentation Réalisateur Web IESA 201510 BENCHMARK • Bon hiérarchie de l’information • Responsive • Chorégraphie de contenu cohérente • Cohérence graphique • Barre de recherche • Pas de players accessible, nécessité de scrollé pour accéder aux playlists • Aucune archive accessible simplement • Demande une connaissance empirique du site pour le prendre en main Stereogum (fonctionnel) // http://www.stereogum.com/ http://www.stereogum.com/player/the-gum-mix/
  11. 11. Les + Les - Julien Picouleau - Présentation Réalisateur Web IESA 201511 • Chronologie simple et visible • Possibilité de générer une timeline interactive • Contenus succints • Choix graphiques • Pas d’optimisation web Kronobase.org (fonctionnel) // http://goo.gl/JHZj9p/ BENCHMARK
  12. 12. Julien Picouleau - Présentation Réalisateur Web IESA 201512 BENCHMARK • Respect des lois de proximité afin d’obtenir un contenu trier de façon clair,pour une navigation souple et moins perturbée par des éléments trop proche. • Une segmentation clair du contenu pour une meilleur lecture, et une prise en main intuitive de la structure du site. • L’accès au player depuis tout le site. Les playlists en accès direct et visible depuis l’ensemble des pages. • La vue responsive doit intégrer un accès direct au playlist / player sans passer par le menu. • Fonctionnalité (bouton / picto / player) graphiquement remarquable pour éviter à l’utilisateur de rechercher l’information. • Pas de player en activation automatique. Conclusion
  13. 13. Julien Picouleau - Présentation Réalisateur Web IESA 201513 PERSONA Lucien Lestroc Playlists Radio Information Streaming Vynile / CD 6h 7h 9h 13h 14h 16h 18h 19h 23h       LUNCH Son objectif : Découvrir de nouveaux artistes Lucien est attiré par les contenus musicaux éclectiques lui permettant de s’évader et de trouver de la motivation. Passionné par le jazz, la musique électronique et les différents courants rythmiques, il est à la recherche de sites lui permettant de découvrir de nouveaux artistes et pourquoi pas réécouter des morceaux cultes de son environnement musical. Directeur d’Agence / Directeur Artistique Agence de plublicité / production Lucien est un homme curieux et ouvert d’esprit par nature. Il est aussi sensible à l’art en règle générale. Pour mener à bien ses missions il se tient au courant des actualités de son métier et n’hésite pas à pousser ses recherches afin de dénicher de nouvelles tendances et idées. • Les players intrusifs • La publicité • Le réseau dans le métro/RER • Le MP3 • Expérimenter de nouveaux concepts • Découvrir des contenus éclectiques • Discuter autour d’une bière «La musique comme moteur de motivation et d’inspiration»                36 ans Banlieue Parisienne Motivations : Freins :
  14. 14. Julien Picouleau - Présentation Réalisateur Web IESA 201514 PERSONA Rose Ezyal Playlists Streaming Son objectif : Se renseigner sur les terminologies de la musique électronique Rose recherche une sémantique précises afin de mieux comprendre les différents courants de la musique électronique. Si cela lui permet de remplir ses playlists, c’est un plus non négligeable. Assistant Photographe / Webdesigneuse Agence de plublicité / production Rose possède une culture musicale solide et un réel intérêt pour la découverte de nouveaux artistes. Elle aime habiller ses matinées de travail par des webradios ou podcasts et ses roadtrips de ses playlists préférées. • Les players intrusifs • Mauvaise archi d’information • L’absence de responsive • Découvrir de nouveaux artistes • Approfondir sa connaissance musicale • Partager ses découvertes sur ses réseaux favoris «Je suis accroc de mes playlists... Vous avez quoi en stock ?»             24 ans Paris Motivations : Freins : 7h 13h 14h 18h 19h 23h    LUNCH
  15. 15. Julien Picouleau - Présentation Réalisateur Web IESA 201515 ARBORESCENCE
  16. 16. Home Playlists Julien Picouleau - Présentation Réalisateur Web IESA 201516 Home & Pl aylists en 320 px WIREFRAME < >
  17. 17. Home Playlists Julien Picouleau - Présentation Réalisateur Web IESA 201517 Home & Pl aylists en 768 px WIREFRAME < >
  18. 18. Home Playlists Julien Picouleau - Présentation Réalisateur Web IESA 201518 Home & Pl aylists en 1024 px WIREFRAME < >
  19. 19. #0fb1ab #333333 #30384f #fab933 Julien Picouleau - Présentation Réalisateur Web IESA 201519 MOODBOARD
  20. 20. Julien Picouleau - Présentation Réalisateur Web IESA 201520 GUIDE DE STYLE #0fb1ab     #30384f #30384f #0fb1ab #333333 #f5f5f5 #fab933 #fbba33 LOGO PICTOS Chevrons Boutons Choix Colorimétrique Choix typographique Source Sans Pro H1 : Semibold 2em H2 : Semibold 1.75em H3 : Semibold 1.5em H4 : Semibold 1.25em p : Regular 1.25em Natif Hover
  21. 21. Julien Picouleau - Présentation Réalisateur Web IESA 201521 CAPTURE DU SITE
  22. 22. Julien Picouleau - Présentation Réalisateur Web IESA 201522 CAPTURE DU SITE

×