Prototyping for Virtual Reality

Quickly simulate VR experiences for testing and validation

The why

Prototyping is one of the most valuable tools that a designer can leverage throughout their design process. Creating something that can be used, tested, analyzed, and judged is how we decide if design decisions stay or go. And when done quickly, prototyping really becomes dangerous.

The How

Remember this—The prototype’s fidelity depends on what you want to learn.

Panoramas and 360 photos

Who would’ve thought you could prototype an experience with the snap of a button?

An equirectangular image of a physical space that I recreated in VR for my UX thesis project.

Google Blocks

Use simple 3D geometry to simulate a sense of scale and depth.

Place planes close and far away to get a sense of scale and depth in your scene

Cinema 4D

Using a 3D modeling application you can create a 3D scene to simulate the experience.

Using a 3D model and a few planes, I could quickly communicate the layout of this interface

Photoshop

Photoshop lets us use core image editing tools like the pen and brush tool, to draw elements that appear to be in 3D space.

Sketch

Sketch to VR is a sketch plugin that uses another tool that I mention later called A-Frame. The Sketch to VR plugin automatically creates an A-Frame website when ran, but all we need to worry about is creating our design in sketch.

Source: Liu Liu

Framer

Framer is a high-fidelity prototyping tool that uses coffeescript, a language similar to javascript but easier to comprehend. Programming lets use concepts like functions and events in order to make more dynamic experiences.

Listening to the camera rotation, we can trigger events when the elevation passes a certain threshold

A-Frame

A-Frame allows you to create web VR experiences with HTML, CSS, and Javascript. We could create prototypes that are identical to the final product, or even the final product!

Javascript provides more control of your scene allowing you to create in higher fidelity
/usr/bin/ruby -e "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/master/install)"
brew install node
npm install -g angle
angle initscene

Motion and UX Designer. @Nitinsampathi

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