Antworten von Thomas Aufresne, Frontend- und Backend-Entwickler; Glenn Catteeuw, Kreativdirektor und Designer; Rogier de Boevé, kreativer Entwickler; Kurt Drubbel, 3D-Optimierer; Paul Guilhem-Repaux, 3D-Art Director; und Romain Rope, Sounddesigner.
Hintergrund: Hashgraph Ventures ist eine Risikokapitalgesellschaft im Frühstadium, die Gründer in den Bereichen Blockchain und KI unterstützt. Die Website richtet sich in erster Linie an Gründer, Investoren und Partner im aufstrebenden Technologiebereich: Menschen, die schnell verstehen müssen, wofür Hashgraph Ventures steht und warum es anders ist.
Die meisten Risikokapital-Websites sind ziemlich traditionell: klare Layouts, Partnerprofile, Portfolio-Raster und eine vorhersehbare visuelle Sprache. Hashgraph Ventures wollte eine Website, die sich von der Masse abhebt und sofort signalisiert, dass sie anders agiert.
Designkern: Das Kernmerkmal ist die Unterwasserreise. Das Erlebnis beginnt oberhalb der Oberfläche und führt die Benutzer nach und nach tiefer in eine immersivere Welt. Dieser Fortschritt erzeugt ein Gefühl des Entdeckens und macht die Website einprägsamer als eine herkömmliche Risikokapital-Website.
Gleichzeitig haben wir darauf geachtet, das Konzept nicht zu wörtlich zu nehmen. Wir wollten uns nicht auf auffällige Unterwasserlebewesen oder typische Anspielungen auf das Meer verlassen. Stattdessen nutzten wir Atmosphäre, Licht, Tiefe, Partikel und Bewegung, um eine hochwertigere Interpretation des Ozeans zu schaffen.
Die Benutzeroberfläche wurde minimal und zurückhaltend gehalten. Viele Websites basieren auf übergroßer Typografie, aber wir wollten, dass sich die Benutzeroberfläche kontrollierter anfühlt, sodass die Unterwasserwelt die Emotionen vermitteln kann, während der Inhalt klar und glaubwürdig bleibt.
Lieblingsdetails: Besonders stolz sind wir auf das auf dem gesamten Gelände verwendete Partikelsystem, das organische Unterwasserströmungen nachahmt und dynamisch auf die Maus reagiert. Mit WebGPU war es möglich, dass jedes Partikel dynamisch auf die benutzerdefinierte Beleuchtung und die simulierten Kaustiken reagiert und so ein Gefühl von Tiefe erzeugt, das sich wirklich immersiv anfühlt.
Herausforderungen: Den richtigen Stil für die Visualisierung des humanoiden Körpers finden. Wir haben mehrere Iterationen durchlaufen – von umrissbasierten Ansätzen bis hin zu verschiedenen Partikelsystemen – bevor wir bei einem äußerst interaktiven Partikelstil gelandet sind. Es musste elegant und mit der Unterwasserwelt verbunden sein, ohne zu Science-Fiction oder zu wörtlich zu wirken. Die endgültige Richtung gab uns etwas, das sich immersiv anfühlte und gleichzeitig zum Premium-Ton der Marke passte.
Technologie: Die Website wurde in Figma und Blender entworfen und als benutzerdefiniertes Front-End-Erlebnis mit GSAP, Nuxt.js, Theatre.js, Vue.js und WebGPU entwickelt. Sie wurde als statische Site generiert und über Netlify bereitgestellt, wobei Sanity als CMS verwendet wurde.
Dies war das erste Mal, dass wir in einem Projekt mit WebGPU experimentiert haben. Wir wollten die visuelle Qualität über das hinaus steigern, was wir normalerweise in einem browserbasierten Erlebnis erreichen würden, insbesondere in Bezug auf die Unterwasseratmosphäre, das Partikelverhalten und das Tiefengefühl.
Das immersive Unterwassererlebnis wurde mithilfe von Echtzeitgrafiken, Shader-Arbeit, Partikelsystemen und browserbasierten Animationstechniken erstellt. Wir haben die Kamerabewegungen und Übergänge mit Theatre.js choreografiert und so dafür gesorgt, dass die Website filmischer wirkt als ein herkömmliches Scroll-Erlebnis.
Großes Augenmerk wurde darauf gelegt, die visuelle Qualität mit Ladezeit, Reaktionsfähigkeit und Benutzerfreundlichkeit in Einklang zu bringen, damit sich das Erlebnis filmisch anfühlt und gleichzeitig als praktische Website funktioniert.
Durchsuchen Sie Projekte
Klicken Sie auf ein Bild, um mehr von jedem Projekt zu sehen
Credit Post By: