Responses by Media.Monks.
Background: Bitkraft, a global early-stage investment platform for gaming, Web3 and immersive technology, asked us to redesign its website bitkraft.vc. The aim was to reflect a gaming company investing in the future of synthetic reality.
Design core: To reflect the DNA of a gaming company, the site is packed with game-inspired elements. The intro sequence feels more like booting up a game than it feels like loading an investment platform. To navigate the site, users can use the WASD keys and a joystick element in the menu.
What makes navigating the site so nice is that it has multiple dimensions to it. When the content is important, we use a very clean, spacious design to have the user focus on it. But when we talk about synthetic reality, we dive deeper into the digital space and show a more futuristic-looking design by animating WebGL backgrounds.
Challenges: Blending the worlds of gaming and investments together was a challenge during the design phase. How do you find the perfect balance between a next-level gaming experience that feels authentic to gamers and an informative investment platform that feels trustworthy?
We achieved this by designing each component in a way that serves its goal. All the elements we included amplify and complement each other without conflicting. The UI motion design blends these worlds together in a seamless yet functional way.
Navigation structure: Even though the content structure is very easy to understand, the navigation on the site is somewhat unconventional—for websites, at least. To navigate from page to page, we can use the radial menu that is accessible from the bottom of the page. This was a big element that contributed to the game look and feel.
The people page carousel was achieved by integrating GSAP, WebGL, and CSS perspectives and mouse events. The card transforms and perspective are sent from the front-end side to the WebGL side where 3-D cards are drawn under the text with a matching camera creating a sense of depth and layering and maintaining web accessibility standards.
Click on an image to view more from each project