Web mockups for VR designers
As a UX/UI Designer on social VR platform Beloola, I design user experiences for a wide range of VR headsets — from a basic Cardboard to a sophisticated HTC Vive — as our platform is available on all devices. However, once my conceptual protoypes are finished and I want to start a low, medium or high fidelity prototype, it’s hard to find a tool to test it.
I have not found yet a tool like InVision or Marvel for VR prototyping. Many designers create prototypes on game engines like Unity or Unreal to test their design and see what it looks like in a VR headset but from my point of view it’s definitely not practical and user-friendly.
So, for my personnal uses, I create a WebVR mockup based on the A-Frame framework by MozVR. A mockup that allows me to test quick VR mockups by updating graphic files from Illustrator or Photoshop.
How does it work?
I designed this mockup to create a user interface for content gallery and it is split in 4 parts :
- A main content area with a 360° degrees field of view
- A header area at the top of the main content
- A footer area at the bottom of the main content
- A background
Each part is a graphic file (Photoshop, Illustrator) you can edit. You just have to export your design in .png file to replace existing files in the folder with the .html page.
How can you test it?
You can try it on any type of VR headset.
Cardboard
If you use a headset like a Cardboard or Homido, upload your test folder on your server and load your site in your mobile browser. Tap the VR icon button, and put your phone in your headset. All details on the MozVR website.
Samsung Gear VR
If you want to try on your Samsung phone in your Gear VR headset, you have to disable “Oculus Home Service” launch by default so you’ll be able to use the WebVR API on Chrome and therefore without using the still very restrictive Gear VR browser. You can find a tutorial on Reddit. When it’s done, follow the process detailed above for Cardboard.
Oculus Rift
For Oculus Rift, you don’t need to upload your files on a server. Just load your web page from your desktop in a WebVR-compatible browser like Mozilla Nightly or a Google Chrome experimental build for Oculus and tap the VR icon button. All details on the MozVR website.
HTC Vive
For HTC Vive, as with the Rift, you just have to load your web page in a Google Chrome experimental build for the Vive and tap the VR icon button. All details on a post from Brandon Jones, Chrome WebGL/WebVR developer at Google.
If your need more help, you can find a very good article about WebVR : Dive into Virtual Reality from your browser from Thomas Balouet.
Start using it
If you are interesting in designing VR user experiences and interfaces, you can use the first versions of my mockups for free. Download the .zip file and start using it.
If you want to share feedback, ask questions and suggest improvements about those VR mockups, please leave a comment below or send me a email! I’m very happy to know more and talk about VR design.
If you enjoyed reading this article, please hit the ♥ button in the footer so that more people can appreciate VR design.
