Étude de cas · Interactif Y2K · En ligne
Une marque de déchets et de recyclage qui ne voulait pas en avoir l'air. La page d'accueil est une poubelle qui tourne, dans laquelle on clique pour descendre. La page services est une carte mémoire PlayStation 2. Les pages projets sont YouTube en 2007. Tout est réel, rien n'est un filtre posé par-dessus.
Junky Solutions travaille dans les déchets, le recyclage et les réparations locales. Tous les concurrents du secteur ont le même site : un dégradé vert, une photo de banque d'images avec une feuille, et un formulaire de contact. C'est un secteur qui a accepté d'être invisible.
Le brief était de faire quelque chose que les gens s'envoient vraiment entre eux. Cela voulait dire assumer une esthétique jusqu'au bout au lieu de la suggérer, et accepter qu'un site qui récompense la curiosité doit être réellement interactif plutôt que décoré.
La page d'accueil est un seul objet 3D : une poubelle qui tourne, couverte de stickers Junky, avec une ceinture « local fixes, global habits » autour. On clique, le couvercle s'ouvre et la caméra descend à l'intérieur d'un seul mouvement, pour arriver sur cinq objets posés sur les déchets. Il n'y a ni image d'accroche ni bloc de titre.
La page services est un navigateur de carte mémoire PlayStation 2 : une grille d'icônes dans laquelle on se déplace, chaque service s'ouvrant dans une fenêtre système rétro. Sept services, chacun relié aux projets correspondants, si bien que parcourir l'offre et parcourir le portfolio sont la même action.
Chaque projet est une page de lecture dans l'ancienne mise en page de YouTube, et l'index est une page de résultats de recherche avec des rangées et des playlists par tag. La vidéo ouvre chaque carrousel parce que le travail est surtout vidéo. Le format fait le travail de navigation gratuitement : tout le monde sait déjà s'en servir.
La page contact est une boîte de dialogue système avec un formulaire qui fonctionne. La boutique est une grille de produits dans le même langage. Le style d'époque descend jusqu'aux composants au lieu de rester dans un habillage, et c'est là toute la différence entre un thème et un vrai développement.
Entrer et sortir de la poubelle doit retomber exactement sur le même cadrage à chaque fois, sinon la page paraît cassée. Y arriver a demandé de réconcilier le rig de caméra avec les contrôles d'orbite pour que rien ne saute à la sortie. C'est la partie ingrate de la 3D, et c'est l'essentiel du travail.
Le catalogue des projets et la liste des services sont des fichiers de données uniques faisant référence, si bien qu'ajouter un projet est une modification de données et non la création d'une page. Les médias sont servis depuis un stockage objet plutôt que depuis le dépôt, ce qui garde des déploiements rapides.
Next.js avec l'App Router et TypeScript, React Three Fiber et Three.js pour la scène 3D, et Motion pour l'animation d'interface. Les médias sont sur le stockage objet Cloudflare R2. Le déploiement est sur Vercel, volontairement limité à un projet et un déploiement en ligne pour qu'il n'y ait jamais de doute sur l'URL réelle du site.
La 3D est la partie technique intéressante, mais la décision à souligner est ce qui est resté conventionnel. Le routage, les données et le contenu sont simples et ennuyeux, pour que les parties qui doivent être étranges puissent se le permettre.
Le site est en ligne et public sur junky-alpha.vercel.app, actuellement à son deuxième tour de retours client, avec une boutique préparée qui attend les accès commerce avant d'ouvrir.
Concept, direction artistique, 3D, développement front-end et déploiement viennent de ce studio. Si votre marque est dans un secteur où tous les sites se ressemblent, c'est un argument pour un projet comme celui-ci, pas contre. Dites-nous sur quoi vous travaillez, ou voyez l'autre extrémité de la gamme avec The Muuls, une boutique en une page tout en retenue.