My Favorite Things

Index Jazz

My Favorite Things est une production personnelle, il s'agit d'un index jazz, d'une liste d'artistes non-exhaustive d'hier et d'aujourd'hui.

2019 • Design graphique, webdesign, ui & développement WordPress

Contexte

Création d'un index jazz pour les fans de ce genre musical. Il s'agit de lister les principaux artistes et morceaux par ordre alphabétique. La fiche d'un artiste contient une note personnelle et renvoie vers l'un de ses titres, sa page wikipédia et / ou son site web.

Rôles

  • • Recherches
  • • Création graphique
  • • Maquettes
  • • Intégration html & Css
  • • Développement Wordpress

Recherches

Principes de design

Il s’agit ici d’expliquer la démarche de création à partir de principes de design.

Le jazz en tant que musique universelle, n’a pas de frontière, ni culturelle ni sociale.
Il comprend une multitude de « sous-genres », qui pour certains sont le fruit de l’alliance avec la musique traditionnelle. L’objectif étant alors de figurer l’universalisme et la grande diversité de cette musique tout en en jouant sur son rapport au temps (mouvement, swing, espace, etc.).

Le cercle et le point noir forment l’identité générale.
Le cercle symbolisant l’immatériel (contrairement au carré) et le point noir attirant l’attention, occupe parfaitement l’espace dans lequel il existe. Entre cet espace et le point va se nouer une relation particulière par la position et la taille de ce dernier. Le cercle est une forme qui nous est à tous très familière.

My favorite Things Index Jazz

Design graphique

Logotype et univers graphique

Le logo a été composé avec la police Eurostile (version condensée), créée au début des années 60 par le typographe italien, Aldo Novarese. Ses caractéristiques linéales avec ses fûts larges viennent en contraste avec le point noir (O de favOrite) du logo. Cette police est adaptée pour délivrer un message fort (titre, logo, etc.).

My Favorite Things est un standard de John Coltrane. Le logotype est modulaire de façon à créer un espace autour dudit point noir afin de jouer sur les différents espaces qu’occupent la musique jazz et signifier ainsi la grande diversité et les nombreuses approches de cette musique.

My favorite Things Index Jazz

Maquettes

Prototype Adobe XD

Création d’un prototype avec Adobe XD pour la version mobile du site. Pour cette version, le filtre par lettre n’existe plus pour des raisons évidentes de lisibilité et d’ergonomie. En effet, le déplacement avec la souris entre les lettres ne peut être reproduit sur un écran tactile.

En appliquant la Loi de Fitts, on réduit alors cette fonctionnalité en un unique bouton filtrer qui permettra d’atteindre la cible plus rapidement. Le temps de réaction sera également bien plus court (Loi de Hick) du fait que le choix se limite à un bouton filtrer plutôt que les 26 lettres de l’alphabet.

Intégration

Bootstrap 4, HTML5 et CSS 3

Création du site responsive avec Bootstrap 4. Via la librairie javascript Isotope (filtres), création d’un système de filtres à 2 niveaux. L’un pour les artistes, l’autre pour les titres. Le second niveau est un filtre alphabétique. Ainsi sur une seule page, il est possible d’afficher assez rapidement la fiche recherchée.

Développement

WordPress

Développement sur-mesure avec l’extension ACF-Pro. Cette extension permet de définir des modèles de pages complètement personnalisables au niveau des types de champs (textes simples, contenus multimédia, zones de textes enrichies, etc.) et de construire des modèles flexibles.