After Hours
Un club d’écoute accessible par une scène nocturne en mouvement
Visiter le siteJ’ai créé un club d’écoute fictif avec une cour qui suit le curseur, une navigation aux effets de glitch et trois sessions sonores originales
Donner aux petites heures un lieu à elles
After Hours est un club d’écoute fictif pour l’espace entre une journée et la suivante. J’ai construit son identité autour d’une cour sous la pluie, d’une lumière violette et de lettres fines et espacées. Une invitation mène de l’entrée à trois sessions d’écoute.
La navigation spatiale d’Active Theory a servi de référence pour la sensation de traverser un lieu. After Hours donne à cette interaction son propre décor et sa propre fonction : une pièce calme où choisir une ambiance, lancer l’écoute et rester aussi longtemps qu’on le souhaite.
Faire de la navigation une entrée dans la scène
L’image de la cour est projetée sur une surface avec de la profondeur dans Three.js. La caméra suit doucement le curseur : le premier plan et l’ouverture au loin se déplacent à des vitesses différentes. La pluie ajoute une couche de mouvement, tandis que le titre reste positionné dans la scène.
Entrer dans le club fait avancer la caméra et apparaître l’interface par de brèves découpes horizontales, des lettres décalées et une séparation des couleurs. Les grands titres occupent la droite, les textes complémentaires la gauche et la navigation les bords. Ce langage visuel relie l’entrée, la liste des sessions, le lecteur et la présentation du club.
Donner une identité musicale à chaque session
Still Awake associe une pluie filtrée à de longues nappes sombres, sans rythme. Slow Motion introduit un groove à 82 BPM avec une batterie, une basse syncopée et des accords chaleureux. First Light passe dans un registre plus lumineux, avec des carillons en mode majeur et des échos stéréo à 104 BPM.
Le navigateur génère le son en direct avec l’API Web Audio. Chaque session possède ses propres instruments et son arrangement. Le changement de session atténue brièvement le son précédent, et les visiteurs peuvent mettre l’écoute en pause ou régler le volume. Le son commence uniquement après leur choix de lancer l’écoute.
Une expérience complète, de l’entrée à l’écoute
Le site final réunit une marque distincte, un décor qui suit le curseur, une navigation aux effets de glitch et trois ambiances sonores génératives originales. Des liens directs ouvrent chaque session, les mises en page mobiles gardent les commandes accessibles et le mouvement de la scène peut être réduit ou mis en pause.
After Hours est un concept de design indépendant. Le site public présente un travail de direction de marque, de design d’interaction, de développement créatif et de design sonore.