Delmas Musique

Delmas Musique est une entreprise familiale de Perpignan spécialisée dans le conseil et la vente de pianos. En 2020, pour s'adapter à la crise du COVID-19, nous avons imaginé la refonte de son site afin de le moderniser en e-commerce, avec un objectif clair: améliorer l'expérience de vente et le parcours client jusqu'à la commande. Le projet a été mené durant ma formation d'UI/UX Designer à l'Idem Creative Arts School, en environ quatre semaines. Dans mon portfolio, il va par paire avec la refonte du Domaine Boudau, l'autre travail de web design pur daté de la même année. Pas de développement dans cette mission: elle s'arrête au dessin des écrans, et la fiche porte le statut de concept UX.

Une direction artistique tirée du clavier

J'ai conçu un design en nuances de noir et blanc, rappelant les couleurs d'un clavier de piano: sobre et élégant, pour souligner le côté premium d'un instrument de bonne facture, sans jamais perdre de vue l'efficacité du parcours d'achat. Dans les maquettes, l'accueil s'ouvre sur une photographie de touches en très gros plan, logo posé au centre, et des lignes de portée musicale reviennent en filigrane comme motif d'ornement.

La page de catégorie porte une barre de filtres (marque, type, finition, prix) et un compteur de résultats. La fiche produit enchaîne la description, les prestations qui accompagnent l'achat, les modalités de financement, le prix, l'ajout au panier et un bandeau d'informations complémentaires: finition, marque, type, provenance, taille. Une section de commentaires sous les instruments laisse s'exprimer les clients satisfaits. L'accueil, lui, aligne les derniers produits, une grille de catégories d'instruments, un bandeau de logos, un bloc sur la location de pianos de concert et de backline, puis les actualités. Le tout est décliné sur smartphone, filtres compris.

Figma, Illustrator, Photoshop

Les maquettes sont faites sous Figma, un outil de conception d'interface qui travaille dans le navigateur. On y compose des écrans à des largeurs données, on y factorise les éléments répétés en composants réutilisables, et on partage le résultat par un lien plutôt que par un fichier à s'échanger. C'est ce qui rend praticable la déclinaison d'une même page en version bureau et en version smartphone sans repartir d'une feuille blanche.

Adobe Illustrator et Adobe Photoshop complètent la chaîne, chacun sur son terrain: Illustrator pour ce qui se dessine, Photoshop pour ce qui se photographie. Le premier produit du vectoriel, des tracés qui restent nets à n'importe quelle taille, ce qui en fait l'outil des logos, des pictogrammes et des motifs graphiques. Le second travaille l'image matricielle, celle qui est faite de pixels: détourage, recadrage, réglages de contraste et de niveaux.

Environ quatre semaines de travail, entièrement graphique. La présentation complète est publiée sur Behance.