retour

My Favorite Things

visuel représentant un pile de cartes de visite

Prototype Adobe XD d’un index d’artistes et de morceaux jazz

visuel représentant différents écrans d'une interface mobile
visuel représentant différents écrans d'une interface mobile
Visuel représentant la page web version desktop d'une recherche par filtre alphabétique
Visuel représentant 2 flyers avec un visuel d'artiste traité en bichromie
Visuel représentant 2 flyers avec des visuels d'artistes traités en bichromie
1 /

client : Production personnelle

année : 2019

catégorie•s : identité • logotype • ui design • dév. web

Graphic design
HTML & CSS
WordPress
ui

Vidéo de 51 secondes, sans audio.

Démo d'une application mobile d'un index de jazz.
DÉBUT VIDEO

  • de 0 à 8 secondes : Mobile sur un fond jaune. L'interface à l'ouverture affiche le logo « My Favorite Things » centré vertcialement et horizontalement. Le curseur se déplace sur l'interface et clic sur le logo. La page d'accueil s'ouvre. Sur celle-ci se trouve sur la partie supérieure un bandeau noir avec logo abrégé (cercle blanc) et justifiée à droite une barre de recherche. Ensuite sous le petit texte de présentation de l'application se trouve un carrousel des « Artistes À la une » (maximum 3 artistes) avec une flèche de naviguation vers le droite. Sous cette rubrique se trouvent la rubrique « Parcourir les fiches » avec 2 boutons d'actions, le premier s'intitule « Artistes », le second « Titres ».
    Le curseur se déplace sur la flèche de navigation de la rubrique « Artistes À la une » et clic sur la flèche « suivant » (le compteur se met à jour 2/3), une flèche « précédent » s'affiche maintenant, clic de nouveau sur suivant (le compteur se met à jour 3/3), retour via la flèche précédent sur la 1e fiche. Celle-ci s'intitule « Joel Ross, Vibraphoniste ». Clic sur le visuel de l'artiste (dans un masque en forme d'ellipse).
  • de 8 à 15 secondes : La page de l'artiste Joel Ross s'affiche. Sous le bandeau noir nommé header se trouve un fin bandeau gris permettant de revenir en arrière via le libellé Retour accompagné d'une flèche « précédent ». La fiche artiste est composée d'une photo de l'artiste dans un masque en forme d'ellipse, suivent son prénom (Joel), nom (Ross) et son instrument (vibraphoniste) et une courte biographie. Sous cette dernière, l'un de ses titres majeurs s'affiche (Yana). Il s'agit d'un élément cliquable symbolisé par une petite flèche qui précède le titre. Ensuite, un filet séparateur puis une rubrique « En savoir plus » avec des liens. Pour finir, la partie sociale pour découvrir sa musique sur les plateformes dédiées ou les réseaux sociaux de l'artiste.
  • de 15 à 19 secondes : Clic sur le titre Yana, la page dédiée s'ouvre. On retrouve sous le fin bandeau gris de retour, un rappel de l'artiste et de son instrument. Sous ce dernier on affiche un lecteur YouTube du morceau qui occupe la largeur totale de l'écran mobile. Le titre, ainsi que l'album et son année de sortie sont présents directement sous le lecteur. La liste des musciens est égalemet présente. Sous ces derniers, comme pour une page artiste, la partie sociale est présente
  • de 19 à 23 secondes : Clic sur la flèche retour du fin bandeau gris. La page de l'artiste Joel Ross s'affiche. Clic de nouveau sur retour du fin bandeau gris et la page d'accueil s'affiche. Le curseur se déplace et clic sur le bouton « Artistes »
  • de 23 à 31 secondes : La structure de la page est identique pour la partie supérieure. Sous le fin bandeau gris cette fois-ci on affiche un large bouton (qui occupe 100% de la largeur du mobile) gris « Filtrer». Avant la liste des artistes (page de 5 artistes maximum), une flèche de navigation suivant le même principe que la rubrique « Artistes à la une » est présente. Léger scroll pour voir la totalité des artistes présents sur la page. Tout en bas de la liste se trouve un bouton d'action jaune avec texte noir pour se rendre sur la page suivante et/ou précédente selon le cas de figure.
  • de 31 à 41 secondes : Clic sur le bouton « Filtrer» en haut de la liste des artistes. Le bandeau de filtre comporte maintenant sur sa gauche un icône x pour fermer le filtre. La page affiche maintenat la liste des artistes rangés par Lettre. Pour chaque lettre la liste des artistes est affichée. Chaque lettre est séparée par un léger filet noir. Léger scroll pour voir l'ensemble. Clic sur l'icône x pour revenir à la page des artistes dernièrement visités
  • de 41 à 44 secondes : De nouveau sur la page des artistes, le curseur se place et clic sur le lien « Retour » du fin bandeau gris. Retour à la page d'accueil de l'index de jazz.
  • de 44 à 51 secondes : Le curseur se place sur la barre de recherche et clic sur celui-ci, le mot pianiste s'affiche (pour simuler une recherche). La page de recherche s'affiche avec « Votre recherche pour Pianiste ». La liste des artistes se présente sous la même forme que pour une liste classique d'artistes. Clic ensuite sur « Retour », la page d'accueil de l'index s'affiche.

FIN VIDÉO

Pour la version mobile, 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 la fonctionnalité du filtre par lettre 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.

Maquette interactive permettant de simuler les interactions de la future version mobile.

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.

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.

Description détaillée de l’image
Description détaillée de l’image
Description détaillée de l’image
Description détaillée de l’image
Description détaillée de l’image