Music Plz

On a tous un artiste favori que nous écoutons sans arrêt. Ce que nous connaissons moins c'est le label auquel il appartient.

Et si on réinventait le site web d'un label ?

C'est quoi Music Plz ?

Le principe est simple: il consiste à choisir un label de musique et à lui faire un tout nouveau site web.

Une des consignes imposées est de créer une page sur un artiste dont le label est disponible sur Soundcloud.

rca 2

Le label

Étant donné que je savais d'avance qu'une page sur un artiste allait être intégrée dans mon travail et que je voulais la dédier au groupe anglais Nothing But Thieves, le choix du label RCA Record était certain !

Le contenu

Pour réaliser ce nouveau site web, j'ai décidé d'y intégrer trois pages. Une première pour l'accueil, une seconde pour le groupe Nothing But Thieves et une dernière pour la rubrique «à propos».

Home

Avant de commencer quoi que ce soit, j'ai scruté le site original du label pour savoir ce que j'allais réellement intégrer dans mon site web.

J'ai pu constater que le label montrait avant tout les nouveautés et les artistes du moment. En me basant sur ces informations, j'ai réalisé ma page «home» composée des trois parties suivantes :

contenu page home

Artiste

Dès le départ je connaissais le contenu que j'allais intégrer dans la page artiste consacrée à Nothing but thieves.

Le haut de la page est consacré à une brève introduction présentant le groupe de façon biographique. Ensuite, un player de musique permet à l'utilisateur de découvrir quelques morceaux soit en regardant leurs clips vidéos, soit en continuant la navigation sur le site. Pour terminer, j'ai créé deux parties qui servent de documentation à l'utilisateur. En effet, une présente chaque membre du groupe et l'autre des artistes du même genre musical.

contenu page home

À propos

La page «À propos» est beaucoup plus courte. Elle est composée d'une présentation du label et d'une liste de leurs plus grands artistes. Effectivement, j'ai jugé intéressant de n'y mettre que ce qui est réellement nécessaire.

contenu page home

Style Graphique

L'aspect graphique de mon site n'est pas issu du site original. J'ai préféré y intégrer un style beaucoup plus nuancé qui, à mon avis, colle bien mieux à l'univers musical de RCA Record. Ci-dessous, les composants de mon site :

Couleurs

Couleur utilisé: #A93333 #201D1D #343e26 #233f59

Polices

Nova mono

Lato

Les Wireframes

L'idée

Dès le moment où les informations pour composer ma page étaient collectées, il ne m'a resté qu'à les agencer et à créer l'aspect visuel du site.

En général, un grand nombre de photos illustrent un site qui propose de nombreux artistes. De plus, la plupart des clichés de vos artistes préférés sont souvent des oeuvres d'art eux-mêmes. En partant de cette idée, j'ai décidé de les mettre en avant en essayant de prendre le plus d'espace possible avec les photos, tout en restant harmonieux.

Mes wireframes sont basés sur de larges et grandes zones qui permettent aux photos d'être exploitées au maximum.

Illustration de wireframes

Réalisation

Pour me donner une meilleure vision d'ensemble, j'ai commencé par réaliser les wireframes sur papier. Une fois mon idée fixée sur la façon d'agencer le contenu, je suis passé sur photoshop où j'y ai intégré les images et les textes. C'est à ce moment que toute la magie se fait : mon projet prend réellement vie.

screen shot design

La petite touche

Une fois la mise en page finie, j'ajoute ma petite touche. Pour ce site web, j'ai ajouté des taches de couleurs pour lui donner un style plus «rock». En effet, je trouvais que sur le site original c'était le point défaillant. Il manque effectivement une petite touche particulière au style musical qui est présenté.

illustration tache

Le final

Lorsque le tout est réalisé sur Photoshop, place au code. Cette étape me permet d'articuler mon site et de le rendre dynamique.

Mockup du site Music Plz

Pas si simple...

Mais motivant ! Ma difficulté première pour ce projet était la partie du code. Il y avait beaucoup de choses que je n'avais jamais réalisées en Html ou même en Css. Ce qui est génial, c'est qu'on se sent progresser, et qu'on a toujours quelque chose à apprendre. Maintenant, j'ai assez parlé, je te laisse le découvrir !

Voir Music Plz
Retour au projets