Welcome to the world of virtual reality (VR)! It’s no secret that VR technology is gaining popularity and momentum in the tech world. With more and more VR headsets like PlayStation VR and HTC Vive making their way to consumers, it’s easy to see that VR is becoming more accessible to the everyday person.
Despite this, designing and prototyping for VR can be daunting and intimidating, especially for product designers and teams new to the technology. Fortunately, the author of this blog post has found a way to hack their existing workflow to design and prototype for VR using Marvel.
By utilizing designs from Sketch, a prototype from Marvel, and a Google Cardboard headset, the author was able to create a VR prototype that is surprisingly immersive and a lot of fun. And the best part? It only took them less than 5 minutes to link their designs to create the prototype.
So whether you’re a seasoned VR enthusiast or a curious newcomer, this blog post will show you how to use Marvel to prototype for VR and get you started on creating your very own VR games and experiences. Let’s dive in!
Read and write Hacking the iOS app.
Designing for virtual reality is an exciting new frontier for product designers and teams, but it can be daunting. The good news is that tools are available to make the process more manageable. The author wanted to create a VR prototype using Marvel, but the app only supports 2D designs. So, they decided to hack the existing workflow by using the Apple SceneKit SDK to convert the images into 3D environments.
By utilizing the SceneKit SDK, the author could take their existing designs and add a new dimension. This allowed them to create a more immersive experience that better emulated what the final product would look like in VR. They also enabled the accelerometer to track head movements, which made the experience more interactive and engaging. Users could move their heads to look around the environment and explore the different elements in the prototype.
To make the experience even more seamless, the author slightly modified the behavior of the hotspots in Marvel to work with VR. In the traditional 2D version of the app, users would click on a hotspot to progress to the next screen. In the VR version, the author allowed users to move to the next screen by looking at a hotspot for a few seconds. This made the experience more intuitive and natural, as users could merely look at what they wanted to interact with rather than having to click on it.
Designing for VR
When designing for VR, it’s essential to consider the unique aspects of the technology. The user is fully immersed in the environment, so the design needs to be engaging and comfortable to view.
To get started, it’s recommended to use a 2:1 ratio artboard in your design tools of choice, such as Sketch or Photoshop. This will allow the design to be easily translated into a VR environment.
Facebook offers a VR template to help designers get started. The template includes guides for a comfortable viewing angle, what the user can see, and what can trigger their curiosity. It’s a great resource to use when starting a VR design project.
The author created two screens for their “Game of Marvel” game: a 3D environment and a menu that displays when the game is paused. To make the 3D environment, they used a 360° image of a scene created using Cinema 4D for the background. This image provided a realistic and immersive environment for the user to explore. However, depending on the design goals, any 360° vision or a white background could also be used.
Designing for VR requires thinking outside the box and considering how the user will experience the environment. With the right tools and resources, designers can create engaging and immersive experiences for users in the virtual world.
Prototyping in Marvel
Using Marvel for prototyping VR experiences is straightforward. After creating your design in your preferred software, such as Sketch or Photoshop, you can import it into Marvel and add hotspots to create an interactive experience. Hotspots are points in the design that, when clicked, trigger a particular action or take the user to another screen.
You can take this further for VR and use Apple SceneKit SDK to add 3D environments and enable head-tracking through the accelerometer. Using hotspots in a particular way, you can simulate being in a 3D environment and interact with objects by looking at them for a few seconds.
Once you’ve created your prototype, you can test it on a VR headset, such as Google Cardboard, by loading the project on the Marvel iOS app. This lets you get a feel for how the experience will work in VR and make any necessary adjustments.
Conclusion
With the increasing popularity of VR technology, it’s becoming essential for product designers and teams to create VR prototypes. However, designing for VR can be intimidating. The good news is that designers can leverage their existing workflows and tools to create VR UIs and prototypes. Using Marvel and the Apple SceneKit SDK, the author of this article was able to hack their workflow and create a VR prototype for their “Game of Marvel” game. The process was straightforward, resulting in a fun and immersive experience. With creativity and the right tools, designers can create compelling VR experiences that engage users and leave a lasting impression.