Web mockups for VR designers

Vincent Munoz
May 4, 2016 · 3 min read

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.

Try the demo here

How does it work?

I designed this mockup to create a user interface for content gallery and it is split in 4 parts :

  1. A main content area with a 360° degrees field of view

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.

Download mockups

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.

Beloola — News & Updates

Subscribe to keep up to date with our platform.

Medium is an open platform where 170 million readers come to find insightful and dynamic thinking. Here, expert and undiscovered voices alike dive into the heart of any topic and bring new ideas to the surface. Learn more

Follow the writers, publications, and topics that matter to you, and you’ll see them on your homepage and in your inbox. Explore

If you have a story to tell, knowledge to share, or a perspective to offer — welcome home. It’s easy and free to post your thinking on any topic. Write on Medium

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store