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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. Julien Picouleau - Présentation Réalisateur Web IESA 201515
ARBORESCENCE
