Sprache wählen

Sprache wählen

Die Website wurde übersetzt in Deutsch mit Hilfe von Menschen und KI

Dismiss

BITKRAFT Web3-Plattform • Aufbau einer spielerischen Erfahrung für zukünftige Investoren

  • Kund:innen

    BITKRAFT

  • Lösungen

    ExperiencePlattformWeb3Websites und PlattformenImmersives Marken-StorytellingTechnologische DienstleistungenTechnologie-Beratung

00:00

00:00

00:00

Fallstudie

0:00

Ready Player Two: der Beginn einer innovativen kreativen Partnerschaft.

BITKRAFT ist eine globale Frühphasen-Investitionsplattform, die sich auf Spiele, Web3 und immersive Technologien konzentriert. BITKRAFT positioniert sich an der Schnittstelle zwischen realer und virtueller Welt und investiert in die Zukunft der "synthetischen Realität", indem es Geldgeber mit Gründern innovativer Spiele und Technologien zusammenbringt. Das Team wandte sich an uns, um seine Webplattform neu zu gestalten, damit sie diese einzigartige Identität besser widerspiegelt und gleichzeitig die beiden unterschiedlichen Zielgruppen anspricht: Gründer, die Wert auf Visionen, Networking und persönliche Kontakte legen, und Geldgeber, die tiefe Einblicke, eine bewährte Erfolgsbilanz und Vertrauen suchen.

Gamification des immersiven Web-Erlebnisses durch UX-Design.

Mit dem Ziel, die Welten des Spielens und der Geldanlage auf eine Art und Weise zu verschmelzen, die sich authentisch und vertrauenswürdig für beide anfühlt, haben wir vom Spiel inspirierte Elemente in das gesamte Benutzererlebnis implementiert. Die Intro-Sequenz ist so gestaltet, dass sie eher an das Starten eines Spiels als an das Laden einer Anlageplattform erinnert. Die Navigation auf der Website erfolgt mit WASD-Tasten und einem Radialmenü, das an einen Joystick erinnert, was das Gefühl einer Spieloberfläche noch verstärkt.

Das immersive Design der Website passt sich an die Art des Inhalts an, den die Besucher gerade betrachten. Wir haben uns beispielsweise für ein klares, geräumiges Design entschieden, um die Aufmerksamkeit der Benutzer auf Inhalte mit mehr Knöpfen zu lenken, wie z. B. auf Karriereseiten. Wenn es jedoch um synthetische Realität und andere visionäre Inhalte geht, sind wir mit animierten WebGL-Hintergründen in den digitalen Raum eingetaucht, um einen futuristischen Look zu erzielen.

Unser Handwerk

Spielinspirierte Elemente

  • Form shaped outn o0f little white cubes is floating in a dark sky with stars. The logo for BITKRAFT is placed small at the bottom.
  • Dark with in light grey cards of an avatar with a name below it. One avatar is a futuristic woman, one looks like a dark lord and one like a warrior.
  • screenshot of the website

Werfen Sie einen Blick auf die Technik hinter unserem Website-Entwicklungsprozess.

Wir verwalteten die Daten mit DatoCMS, einem Headless CMS, das es uns ermöglichte, Daten in unseren React- und Next.js-Build zu übertragen. Für die 3D-Elemente haben wir ein eigenes WebGL-Framework entwickelt. Das Personenkarussell wurde durch die Integration von GSAP, WebGL, CSS-Perspektiven und Mausereignissen realisiert, wobei die Standards für Barrierefreiheit eingehalten und gleichzeitig ein Gefühl von Tiefe und Schichtung erzeugt wurde.

  1. Tech

    Ein tieferer Blick hinter die Kulissen • Inspiriert von Videospielen sollte die BITKRAFT-Plattform Spaß machen und eine reibungslose Navigation ermöglichen. Wir haben eine Reihe von technischen Lösungen eingesetzt, um ein zufriedenstellendes Navigationserlebnis zu schaffen.

  2. Unser Prozess beinhaltete eine Reihe von Herausforderungen: Ermöglichung eines spielerischen Erlebnisses unter Berücksichtigung der W3C-Zugänglichkeit, Integration mit DatoCMS und Erstellung von über 100 dynamischen Komponenten in zwei verschiedenen Themenbereichen (Inhalte und digitale Ansichten). Die zusätzliche Herausforderung bestand darin, das Ganze in einem Zeitrahmen von nur zwei Monaten zu entwickeln.

  3. Übergänge erwecken die Navigation auf der Seite zum Leben. Wir haben die WebGL-Szene mit der Scroll-Position des Nutzers synchronisiert und den Übergang von einem Inhalt zum nächsten durch den Einsatz von Sound und Animation harmonisiert.

  4. Um das HTML-Rendering und die Tastaturzugänglichkeit für das Radialmenü zu ermöglichen, haben wir CSS-Eigenschaften wie Transformieren, Maskieren und Ausschneiden genutzt, um eine kreisförmige Menüform zu erstellen. GSAP und Event-Listener verbessern das vom Spiel inspirierte Erlebnis.

  5. Inspiriert von Sammelkartenspielen, integriert die People-Seite GSAP, WebGL, CSS-Perspektiven und Mausereignisse. WebGL verfolgt die Position und Drehung der einzelnen Elemente, während die Manipulation der Z-Position ein Gefühl von Tiefe erzeugt.

  6. Das Frontend überträgt dynamische Daten aus dem CMS an WebGL, das die Assets der einzelnen Marken auf der Portfolio-Seite darstellt. Wir haben CSS-Filter verwendet, um die Kohäsion der WebGL-Elemente zu verbessern und einen verschwommenen Glaseffekt zu erzielen.

  7. Wollen Sie das alles in Aktion sehen? Erforschen Sie die synthetische Realität:

Drag
For More!

Bereitstellung eines innovativen Benutzererlebnisses für BITKRAFT.

Gemeinsam haben wir eine Webplattform entwickelt, die erfolgreich eine authentische und ansprechende Benutzererfahrung bietet, die auf die Bedürfnisse von Gründern und Geldgebern zugeschnitten ist. Die Website spiegelt nicht nur die einzigartige Identität von BITKRAFT im Bereich Gaming-Venture Capital wider, sondern bietet auch einen Mehrwert durch eine innovative und intuitive Informations- und Navigationsoberfläche. Durch die Einbeziehung von spielerisch inspirierten Elementen und die Anpassung des Website-Designs an den Inhalt haben wir BITKRAFT geholfen, ihre Markenidentität und ihr Engagement für die synthetische Realität zu stärken. Diese immersive Plattform ist nicht nur ein Beweis für den innovativen Ansatz von BITKRAFT, sondern setzt auch einen neuen Standard für die Benutzererfahrung.

Auszeichnungen

  • 1x FWA

  • 1x Awwwards

Möchten Sie über Erfahrungen sprechen? Nehmen Sie Kontakt auf.

Hey 👋

Bitte füllen Sie die folgenden kurzen Fragen aus, damit sich unser Team mit Ihnen in Verbindung setzen kann.

Sie können nicht genug bekommen? Hier sind einige verwandte Arbeiten für Sie!

Sprache wählen

Sprache wählen

Die Website wurde übersetzt in Deutsch mit Hilfe von Menschen und KI

Dismiss