Prototyping for Virtual Reality
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.
Prototyping is especially useful in virtual reality (VR). VR experiences can be extremely abstract, often hard to visualize, let alone explain to another person. A simple prototype can make sense of that mess.
Throughout my thesis project for my graduate UX program at MICA I created a series of prototypes to see if my VR designs and interactions were headed in the right direction.
Remember this—The prototype’s fidelity depends on what you want to learn.
The following is a series of explanations on how to create VR prototypes at different levels of fidelity, so pick the method that’s best for you.
Panoramas and 360 photos
Who would’ve thought you could prototype an experience with the snap of a button?
The best images to use in these types of simulations are 360-degree images. Cameras like the Ricoh Theta V take an equirectangular image, capturing everything in front, behind, above, below, and all around you!
Use simple 3D geometry to simulate a sense of scale and depth.
If you have a rift or vive, you can use Google Blocks to prototype your ideas. This isn’t something you’d put in front of a user, but you can begin to see how your 3D environment might look and feel. Place boxes and planes closer to and farther from you in order to simulate interfaces in your environment. Poly is a user-created 3D resource library of assets to use in our Google Blocks scene.
Using a 3D modeling application you can create a 3D scene to simulate the experience.
Do you have a subscription to Creative Cloud or After Effects? Cinema 4D lite comes with that package but there’s also Blender which is free. Download 3D models from TurboSquid and position the camera to show a third-person or first-person POV.
Photoshop lets us use core image editing tools like the pen and brush tool, to draw elements that appear to be in 3D space.
Open up an equirectangular image and select 3D > Spherical Panorama > New Panorama From Selected Layer(s). Now, your Move tool (V) has turned into an Orbit The 3D Camera tool so grab the canvas and look around the scene.
Find an angle you like and draw out a box using the pen tool. Make sure you’re drawing on the panorama layer and not on a separate layer. You can even start off with an equirectangular photograph so that the scene has a background that you can visualize and interface on top of.
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.
Download the plug-in and double-click the ‘SketchToVR.sketchplugin’ file. This will download the plug-in to Sketch.
Then, make a copy of ‘demo.sketch’, rename it, and open it up. Place in your equirectangular image and draw your UI. Afterwards, go to Plugins > Sketch to VR > Export. Find the folder of files you just created and load it up in a SimpleHTTPServer.
Your’e going to first want to read over the Framer docs (at least layers and events) and understand a little bit of programming. After getting to know Framer, you’re going to want to understand Framer and VR.
A helpful snippet of code when creating VR experiences comes from this project by Jonas Treub. Copy the code that outputs device orientation data to the screen. You can use this information to trigger events on certain types of gazes.
You may have never built a website before but the following steps should be easy to follow — hopefully.
Open up your terminal or search for it in spotlight (cmd + spacebar). Type “cd”, drag and drop a folder where you want to create an A-Frame project in, and then click enter. Type “ls” and click enter to see the other folders in that directory, to make sure you’re in the right place.
You’ll have to download a few things through the terminal.
- Download homebrew (It lets you download other stuff easier)
/usr/bin/ruby -e "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/master/install)"
2. Download node (It lets you download other stuff easier)
brew install node
3. Install Angle (create A-Frame projects with a simple command)
npm install -g angle
Awesome. All of that helped you get Angle, which creates a folder of files that makes up your A-Frame project. To create a new A-Frame project type the following command:
After naming the project and following the prompts you should see that folder, in your finder, where you typed the “cd” command previously.
To see your project in a website, return back to the terminal. Make sure you’re in the correct project folder (cd + the file path of your project), type “npm install” (sets up your project so that you can download other components) and “npm run start” (runs your website at http://127.0.0.1:7000/)
Virtual reality is a medium that involves a responsive design approach to creating interactive and usable experiences. Ideas that are hard to explain, can be visualized, communicated, and iterated upon through the help of prototypes. Prototyping helps us improve our designs and is a crucial aspect of the process.