Loci Records Case Study

Cet article a été réalisé par Jean Will dans le cadre du projet Music Plz pour l'HEAJ option DWM.

Introduction

Cet article présentera les différentes étapes de conception du projet Music Plz. Le projet aura pour but de promouvoir le label de musique Loci Records en proposant une expérience web interactive.

Nous parcourrons les choix et décisions prises durant les différentes étapes d'évolution du projet; choix et mise en forme du contenu, création des écrans, intégration et développement des fonctionnalités.

Choix et organisation du contenu

Cette première étape est fondamentale, elle orientera l'ensemble des choix suivants. Le contenu est la fondation du projet, il représente le sens et la raison même du projet.

Quelques contenus étaient imposés; une page d'accueil avec la découverte de quelques réalisation, une page à propos et une page d'un artiste.

J'ai choisi un label comportant certains de mes artistes favoris; Loci Records avec notamment Emancipator, Tor, Nym ou encore Frameworks. J'ai ensuite rassemblé des informations sur le label et les artistes, ainsi que sur les albums et titres à mettre en avant.

Une fois les informations recueillies, je pouvais organiser une architecture de l'information.

Organisation du contenu
Organisation du contenu

Création des écrans

J'étais dorénavant prêt à créer les premiers visuels, mais avant tout, je devais m'imprègner de cet univers, finallement assez singulier. Je me plonge donc dans de longue playlists de ces artistes pour accompagner mes suivantes recherches.

C'est alors que l'inspiration vient assez naturellement, la création de l'univers graphique est presque évidente; les couleurs, typographies et rapports de proportions.

Je me lance alors dans les premiers essais visuels. J'adopte dans une approche "mobile first", pour simplifier l'adaptation aux différents écrans.

Je met en place les différents éléments à l'aide d'une grille qui découle des précédents rapports de proportions définis.

J'imagine déjà à ce moment les futures fonctionnalités qui devront être intégrées et développées.

Aperçu de la création des écrans
Aperçu de la création des écrans

Intégration

Les écrans ayant atteints un certain stade de maturité, je pouvais commencer l'intégration de ces précédents. Certain éléments visuels se précisent et s'uniformisent lors de leur intégration, notamment par le principe CSS du DRY (Don't Repeat Yourself).

Les principales problématiques sont les suivantes: adopter une logique d'optimisation pour les moteurs de recherche, avoir un affichage uniforme entre les différents navigateurs, anticiper les différents supports et utilisateurs.

Un utilisateur sur smartphone ou tablette ne pourra pas survoler les éléments, un utilisateur sur smartphone orienté en paysage avec une barre d'url développée n'a pas beaucoup d'éléments visibles. Il y a beaucoup d'exceptions et de cas de figures à anticiper.

Les médias utilisés doivent aussi être normalisés. Certains navigateurs favorisent certains format de son, certain type d'écrans ont une densité de pixels plus élevée que d'autres.

Aperçu d'un simulateur smartphone
Aperçu d'un simulateur smartphone

Développement des fonctionnalités

Nos écrans sont beaux, fluides et responsive. Il manque cependant une certaine profondeur, une interactivité supplémentaire avec notre utilisateur.

Il était alors temps de mettre en place les interactions imaginés lors des étapes de conceptions précédentes; contrôle du slider, transitions de volume, transitions de pages, chargement des images dynamique et d'autres détails.

Je développe un code JavaScript complètement orienté objet afin qu'il soit maintenable et réutilisable. Je porte une attention particulière à l'architecture de mes objets en séparant les fonctions logiques des fonctions agissant sur le DOM.

Aperçu de l'environnement de développement
Aperçu de l'environnement de développement