hamb
logo
cross

Music PLZ

Case Study

Music PLZ est un projet scolaire ayant pour but le redesign de la page d’un label musical. Dans ce travail, j’ai intégré des animations CSS, et l’utilisation de jQuery avec une Onepage faisant appel à différentes sections en AJAX, toutes des techniques fraichement apprises.

C’est un projet riche en découvertes sur les techniques exploitables dans le web pour le designer et le codeur front-end.

Les images, les couvertures d’albums, les musiques et le logo appartiennent à Playlabel Records et à ses artistes. Je n’en suis pas l’auteur.

Découvrir Playlabel
tablet Music PLZ

Wireframing

En partant de wireframes avec un coté statique et un autre dynamique, je cherche à garder une cohérence et une base à l’architecture de la page, notamment au niveau de la navigation, afin que l’utilisateur sache à tout moment où il se trouve. Le côté gauche restant fixe et intégrant des visuels en fonctions des différentes sections alors que le coté droit donne à l’utilisateur toutes les informations dont dispose le site.

couche wireframe Music Plz

Design

Le travail du design consiste ici à rendre la page du label plus dynamique. Il a été élaboré de façon à rendre l’aspect visuel plus attractif afin que l’expérience utilisateur soit ludique. Et finalement, permettre à l’utilisateur de naviguer entre les sections aussi facilement. Les images sont reprises de la page officielle. J’ai voulu les mettre en avant davantage avec le cadre fixe pour compléter l’aspect visuel recherché.

design Music Plz

Le code

Version Mobile Music PLZ

C’est une belle découverte que j’ai fait avec les transitions et animations CSS et jQuery. Alors que je faisais des tests sur Photoshop pour mes designs, il m’était impossible de ne pas directement les essayer en temps réel avec les propriétés d’animations et de transitions puisque ma page se base particulièrement sur ces principes-là. Dès lors, j’ai pu voir ce qui fonctionne bien, notamment au niveau des délais d’animations, des courbes de bézier favorables, …

Le public-cible

Je cherche à faire connaitre la musique des différents artistes du label. Mais aussi, je laisse la possibilité à des managers, à d’autres artistes dans le domaine de pouvoir contacter rapidement ces différentes personnes présentes sur la page. Soit via leur page personnelle, soit via un formulaire de contact mis en place de manière travaillée exclusivement sur la version mobile.

Celui-ci est disponible à tout moment sur la page via le menu hamburger en haut à droite. Le formulaire est une page intégrée à la navigation. Ceci permet de rester sur la page actuelle, d’écouter la musique, de l’artiste sans devoir quitter sa page de présentation.

Version Mobile Music PLZ

Un lecteur épuré

Sur un site dédié à la musique, il est normal de retrouver un lecteur audio. J'ai montré une première version à des connaissances. Ceux-ci m'ont dit qu'il manquait d'espace. Je l'ai retravaillé pour l'épurer.

couche wireframe Music Plz