Background
Aktïga, a leader in innovative spatial software solutions, has pioneered the concept of eXtended Responsive Web Design (XRWD). This new approach extends Ethan Marcotte's groundbreaking idea of Responsive Web Design to include both 2D and 3D mediums. Aktïga’s goal is to create seamless, hybrid software that can deliver content in either 2D or 3D, depending on the user’s device, harnessing the potential of modern web technologies.
My Role
As the lead designer, I was tasked with creating both the responsive 2D and immersive 3D versions of Aktïga’s website. This project was an exciting opportunity to apply XRWD principles and push the boundaries of web design.
The Challenge
The primary challenge was to design a website that could provide an optimal experience on both flat (2D) and spatial (3D) devices. The website needed to:
Implementing Aesthetics
We chose Glassmorphism, because it implies three dimensions even in a two-dimensional app. This choice ensured a smooth and magical transition between the 2D and 3D versions of the site, with its frosted-glass effects and layered transparency creating a sense of depth and immersion.
2D Design & Prototype
To plan and iterate on the 2D version of the Aktïga website, I used Figma to create a detailed prototype that allowed us to visualize and test the layout, components, and user interactions in a 2D space. The prototype included all major elements of the site, such as navigation, content sections, and interactive components, providing a comprehensive blueprint for the final design.
Ensuring Interactivity
We focused on user interaction methods suitable for both controllers and hand-based interactions, emphasizing accessibility and ease of use. This included developing a toggle for switching between 2D and 3D spaces and ensuring interactive elements were always within reach or easily navigable through teleportation.
3D Prototype
To visualize and refine the 3D version of the Aktïga website, I created a prototype using Spline; a powerful tool that allows designers to create and manipulate 3D objects and environments directly in the browser. This tool was instrumental in developing a realistic and interactive prototype of the 3D site, allowing us to experiment with various design elements and interactions before implementation.
Navigation Bar
One of the critical components of the 3D prototype was the navigation bar. I designed a 3D nav bar to recreate button states and interactions. This prototype helped us understand how users would navigate the 3D space, ensuring that it was intuitive and responsive. The prototype included hover states, active states, and transitions, providing a comprehensive view of the nav bar’s functionality and aesthetics in a 3D environment.
The Result
Designing Aktïga’s website was a groundbreaking project that demonstrated the potential of XRWD, providing a seamless and engaging user experience regardless of the device type. Users can effortlessly switch between 2D and 3D modes, enjoying a unified and aesthetically pleasing interface that adapts to their device’s capabilities.
Through this project, we explored the complexities and possibilities of adapting UI and UX principles to a three-dimensional space. Recognizing the significance of user interaction and exploring diverse engagement options was crucial. Numerous pathways exist for engaging with 3D content, and creating meaningful interactions will continue to be a primary objective.
Gamification emerged as an effective strategy for boosting engagement and storytelling within the 3D website. By incorporating interactive elements, the experience becomes more dynamic and engaging, and interactions within the 3D space are more compelling.
Visit www.aktiga.com to learn more