Réponses de Thomas Aufresne, développeur front-end et back-end ; Glenn Catteeuw, directeur créatif et designer ; Rogier de Boevé, développeur créatif ; Kurt Drubbel, optimiseur 3D ; Paul Guilhem-Repaux, directeur artistique 3D ; et Romain Rope, concepteur sonore.
Arrière-plan: Hashgraph Ventures est une société de capital-risque en démarrage qui soutient les fondateurs des domaines de la blockchain et de l’IA. Le site s’adresse principalement aux fondateurs, investisseurs et partenaires du secteur des technologies émergentes : des personnes qui ont besoin de comprendre rapidement ce que représente Hashgraph Ventures et pourquoi il est différent.
La plupart des sites Web de capital-risque sont assez traditionnels : des mises en page épurées, des profils de partenaires, des grilles de portefeuille et un langage visuel prévisible. Hashgraph Ventures souhaitait un site qui se démarquerait dans sa scène et signalerait immédiatement qu’il fonctionne différemment.
Noyau de conception : La caractéristique principale est le voyage sous-marin. L’expérience commence au-dessus de la surface et entraîne progressivement les utilisateurs plus profondément dans un monde plus immersif. Cette progression crée un sentiment de découverte et rend le site plus mémorable qu’un site Web de capital-risque conventionnel.
Dans le même temps, nous avons pris soin de ne pas rendre le concept trop littéral. Nous ne voulions pas nous appuyer sur des créatures sous-marines fantaisistes ou sur des références océaniques typiques. Au lieu de cela, nous avons utilisé l’atmosphère, la lumière, la profondeur, les particules et le mouvement pour créer une interprétation plus raffinée de l’océan.
L’interface est restée minimale et sobre. De nombreux sites Web s’appuient sur une typographie surdimensionnée, mais nous voulions que l’interface utilisateur soit plus contrôlée, permettant au monde sous-marin de véhiculer l’émotion tandis que le contenu reste clair et crédible.
Détails préférés : Nous sommes particulièrement fiers du système de particules utilisé sur tout le site, qui imite les courants sous-marins organiques et réagit dynamiquement à la souris. Avec WebGPU, il était possible de faire réagir dynamiquement chaque particule à l’éclairage personnalisé et aux caustiques simulées, créant ainsi une sensation de profondeur véritablement immersive.
Défis : Trouver le bon style pour la façon dont nous avons visualisé le corps humanoïde. Nous avons effectué plusieurs itérations, depuis des approches basées sur les contours jusqu’à différents systèmes de particules, avant d’aboutir à un style de particules hautement interactif. Il fallait qu’il soit élégant et connecté au monde sous-marin, sans devenir trop science-fiction ou trop littéral. La direction finale nous a donné quelque chose d’immersif tout en restant fidèle au ton haut de gamme de la marque.
Technologie: Le site a été conçu dans Figma et Blender et développé comme une expérience frontale personnalisée utilisant GSAP, Nuxt.js, Theatre.js, Vue.js et WebGPU. Il a été généré en tant que site statique et déployé via Netlify, en utilisant Sanity comme CMS.
C’était la première fois que nous expérimentions WebGPU sur un projet. Nous voulions pousser la qualité visuelle au-delà de ce que nous tenterions normalement dans une expérience basée sur un navigateur, en particulier pour l’atmosphère sous-marine, le comportement des particules et la sensation de profondeur.
L’expérience sous-marine immersive a été créée à l’aide de graphiques en temps réel, de travaux de shader, de systèmes de particules et de techniques d’animation basées sur un navigateur. Nous avons chorégraphié le mouvement de la caméra et les transitions avec Theatre.js, ce qui a permis au site de paraître plus cinématographique qu’une expérience de défilement traditionnelle.
Une grande attention a été portée à l’équilibre entre la qualité visuelle, le temps de chargement, la réactivité et la convivialité afin que l’expérience puisse paraître cinématographique tout en fonctionnant comme un site Web pratique.
Parcourir les projets
Cliquez sur une image pour voir plus de chaque projet
Credit Post By: