Alpha wann : Le son a-t-il sa place dans une expérience web ?
Motion design
UX/UI
Experimentation
Challenge : scroller avec les oreilles
Je suis passionné par le rap, c'est pourquoi je voulais relevé ce défi d'intégrer du contenu sonore dans une interface web sans que ce soit intrusif, et même mieux que ça renforce l’expérience de navigation.
Le son, mal intégré, peut vite déranger sur un site. Mais bien pensé, il peut amplifier un message, un rythme, et être vecteur d'émotions. Je voulais aussi explorer comment déclencher intelligemment le son : au clic, au scroll, par un geste… sans jamais surprendre l’utilisateur de manière brutale.
Ce projet, c’était aussi une façon de prendre du plaisir, en rendant hommage à un univers musical et visuel que j’admire.
Solution : un site interactif, au rythme des punchlines
J’ai imaginé une navigation continue (scroll narratif + animation) où chaque section devient une scène.
À la manière d’un clip fragmenté, l’utilisateur déclenche des éléments sonores par des actions précises : cliquer, scroller, toucher.
Pas de lecture automatique : chaque son est une réponse à une intention. C’est l’utilisateur qui compose sa propre expérience.
J’ai testé plusieurs pistes pour déclencher l’audio sans rupture :
sons courts déclenchés au clic sur une punchline,
extraits déclenchés à l’arrivée dans une section du scroll,
fond sonore (instrumental) en ambiance continue mais légère.
Exemple : “Tu l’appelles mère patrie, je l’appelle dame nation”
Cette punchline est visuellement et sémantiquement puissante. Et on peut en trouver dans chaque projets de l'artiste.
Je l’ai transformée en moment-clé du parcours. Qui illustre et introduit l'utilisateur dans un projet.
Le texte se déplie au scroll, lettre par lettre, pendant qu’un léger beat instrumental s’installe en fond. Le moment du “dame nation” déclenche la voix d’Alpha, isolée du morceau. Ce découpage permet à l’utilisateur de voir le texte, ressentir le rythme et entendre la voix, dans une synchronisation maîtrisée.
Le son comme matière d’interface
Pour que l’expérience fonctionne, j’ai dû dissocier la voix du beat :
Le beat joue le rôle de "background" si je rapporte ça à l'UI, discret, immersif.
Les paroles deviennent des événements, comme des éléments interactifs de l’interface.
J'ai assez vite écarté la piste du hover en designant les différentes intéractions, puisque sur mobile, le hover n’existe pas, tout repose sur le scroll et le clic/tap.
Une discographie qui prend vie
Au-delà de l’expérimentation sonore, ce concept montre comment on peut valoriser une discographie d’artiste autrement qu’avec des pochettes statiques.
Chaque album devient une scène à explorer, chaque punchline une accroche narrative, chaque track une ambiance visuelle et sonore.
Et si on allait plus loin ?
Je n’ai pas tout testé, et ce n'est qu'une petite expérimentation mais ce projet m’a ouvert des pistes d'idées, comme :
jouer sur la résonance spatiale du son (gauche/droite)
synchroniser des animations typographiques au flow du rap, comme un genre de karaoké finalement, mais dans lequel on choisit les paroles
Je pense qu'il y a encore plein d'idées à avoir sur le sujet, ou même comment lié ce type d'expérience à des médias existants, ou des plateformes de streaming de musique. Si ça vous avez découvert l'artiste, (et que vous avez aimé) je vous conseille d’écouter dans la même veine : Jungle Jack, Népal, ou les projets de 75e Session.
Credits
Mon rôle
J'ai tout fait, sauf la musique bien sur !
outils
After Effect
Photoshop
Adobe Audition
Figma
Date / durée
2021
