Published on <a href="https://blog.prototypr.io/prototyping-for-virtual-reality-a1036767dd45?source=rss----eb297ea1161a---4">| Prototyping: From UX to Front End &mdash; Medium</a> Nitin Sampathi 
<h4>Quickly simulate VR experiences for testing and validation</h4>
<h3>The why</h3>
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 <a href="https://www.amazon.com/How-Make-Sense-Any-Mess/dp/1500615994">make sense of that mess</a>.
Throughout my <a href="http://nitinsampathi.com/ux-thesis">thesis project for my graduate UX program at MICA</a> I created a series of prototypes to see if my VR designs and interactions were headed in the right direction.
<h3>The How</h3>
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.
<h4>Panoramas and 360 photos</h4>
Who would’ve thought you could prototype an experience with the snap of a button?
<img alt="" src="https://cdn-images-1.medium.com/max/600/1*RlwGdaPs5FCt79Pi6mdNWQ.gif">I digitally recreated this physical space for my <a href="http://nitinsampathi.com/mica-thesis">UX thesis project</a>
Here’s How: Take a panorama with your smartphone camera or <a href="https://helpx.adobe.com/photoshop/using/create-panoramic-images-photomerge.html">stitch together individual images</a> and view that image in a <a href="https://store.google.com/product/google_cardboard">Cardboard viewer</a>.
The best images to use in these types of simulations are 360-degree images. Cameras like the <a href="https://www.amazon.com/Ricoh-Theta-360-Spherical-Camera/dp/B074W5BKYS">Ricoh Theta V</a> take an equirectangular image, capturing everything in front, behind, above, below, and all around you!
<h4>Google Blocks</h4>
Use simple 3D geometry to simulate a sense of scale and depth.
<img alt="" src="https://cdn-images-1.medium.com/max/700/1*bpTUi4hQvaF7Iv7Pf_X1xA.gif">I placed a series of planes at different distances to understand scale and depth
Here’s How: If you have a rift or vive, you can use <a href="https://vr.google.com/blocks/">Google Blocks</a> 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. <a href="https://poly.google.com/">Poly</a> is a user-created 3D resource library of assets to use in our Google Blocks scene.
<h4>Cinema 4D</h4>
Using a 3D modeling application you can create a 3D scene to simulate the experience.
<img alt="" src="https://cdn-images-1.medium.com/max/948/1*fsDnxsikfT8HtHBgBeVt3w.png"><img alt="" src="https://cdn-images-1.medium.com/max/1024/1*hpv5yh-FppqKJwhgZIJMBA.png">Using a 3D model and a few planes, I could quickly communicate the layout of this interface
Here’s How: Do you have a subscription to Creative Cloud or After Effects? <a href="https://www.maxon.net/en-us/">Cinema 4D</a> lite comes with that package but there’s also <a href="https://www.blender.org/">Blender</a> which is free. Download 3D models from <a href="https://www.turbosquid.com/">TurboSquid</a> and position the camera to show a third-person or first-person POV.
<h4>Photoshop</h4>
Photoshop lets us use core image editing tools like the pen and brush tool, to draw elements that appear to be in 3D space.
<img alt="" src="https://cdn-images-1.medium.com/max/800/1*eHWNu-IGCODkL0IJ_qVAPg.gif">Start off with an <a href="https://www.flickr.com/groups/equirectangular/">equirectangular photograph</a> to create a more realistic scene
Here’s How: Open up an <a href="https://c2.staticflickr.com/2/1482/26363697850_53505495a2_o_d.png">equirectangular image</a> and select 3D &gt; Spherical Panorama &gt; 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.
<h4>Sketch</h4>
<a href="https://github.com/auxdesigner/Sketch-to-VR">Sketch to VR</a> 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, but all we need to worry about is creating our design in sketch.
<img alt="" src="https://cdn-images-1.medium.com/max/800/1*BA3JxsN8i3Bva4sBB70hlA.png"><img alt="" src="https://cdn-images-1.medium.com/max/800/1*_iGo6eFrsubqUe9tDH7dfg.gif">Source: <a href="https://blog.prototypr.io/@auxdesigner">Liu Liu</a>
Here’s How: Download the <a href="https://github.com/auxdesigner/Sketch-to-VR">plug-in</a> 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 &gt; Sketch to VR &gt; Export. Find the folder of files you just created and load it up in a <a href="https://youtu.be/O3DWY7Rak0s?t=1m49s">SimpleHTTPServer</a>.
<h4>Framer</h4>
<a href="https://framer.com/">Framer</a> 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.
<img alt="" src="https://cdn-images-1.medium.com/max/800/1*QSmJlSKJ-jTHAzcterbUpA.gif">Listening to the camera rotation, we can trigger events when the elevation passes a certain threshold
Here’s How: Download a trial of <a href="https://framer.com/">Framer</a> and the <a href="https://github.com/jonastreub/VRComponent">VRComponent</a>. Place the VRComponent.coffee into the /modules directory of your new Framer project.
Your’e going to first want to read over the Framer <a href="https://framer.com/docs/">docs</a> (at least layers and events) and understand a little bit of <a href="https://framer.com/getstarted/guides/programming/">programming</a>. After getting to know Framer, you’re going to want to understand <a href="https://blog.framer.com/comprehensive-guide-to-prototyping-vr-in-framer-29b7dd1bdd2a">Framer and VR</a>.
A helpful snippet of code when creating VR experiences comes from this <a href="https://framer.cloud/XaSrp">project</a> 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.
<h4>A-Frame</h4>
<a href="https://aframe.io/">A-Frame</a> 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!
<img alt="" src="https://cdn-images-1.medium.com/max/700/1*jY4G4heGKcFLiAJ4ajcdjg.gif">Javascript provides more control of your scene allowing you to create in higher fidelity
Here’s How: 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.
<ol>
<li>Download <a href="https://brew.sh/">homebrew</a> (It lets you download other stuff easier)</li>
</ol>
<pre>/usr/bin/ruby -e "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/master/install)"</pre>
2. Download <a href="https://nodejs.org/en/">node</a> (It lets you download other stuff easier)
<pre>brew install node</pre>
3. Install <a href="https://www.npmjs.com/package/angle">Angle</a> (create A-Frame projects with a simple command)
<pre>npm install -g angle</pre>
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:
<pre>angle initscene</pre>
After naming the project and following the prompts you should see that folder, in your finder, where you typed the “cd” command previously.
Open up a text editor like <a href="https://atom.io/">Atom</a>, Go to File &gt; Add Project Folder and find your A-Frame project and open up index.html. Edit everything between the &lt;a-scene&gt; tags to alter the VR scene. Read the <a href="https://aframe.io/docs/0.7.0/introduction/">A-Frame docs</a> to see everything that’s possible. Since this is still html, you can grab elements from the DOM as you typically would with javascript.
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 <a href="http://127.0.0.1:7000/)">http://127.0.0.1:7000/)</a>
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.
<iframe src="https://cdn.embedly.com/widgets/media.html?src=https%3A%2F%2Fupscri.be%2Ff51076%3Fas_embed%3Dtrue&amp;dntp=1&amp;url=https%3A%2F%2Fupscri.be%2Ff51076%2F&#038;image=https%3A%2F%2Fe.enpose.co%2F%3Fkey%3DdRXnS9Gplk%26w%3D700%26h%3D425%26url%3Dhttps%253A%252F%252Fupscri.be%252Ff51076%252F%253Fenpose&amp;key=a19fcc184b9711e1b4764040d3dc5c07&amp;type=text%2Fhtml&amp;schema=upscri" width="800" height="400" frameborder="0"><a href="https://medium.com/media/b85dfbb5286d8a25cf2e754b9462cf45/href">https://medium.com/media/b85dfbb5286d8a25cf2e754b9462cf45/href</a></iframe><img src="https://medium.com/_/stat?event=post.clientViewed&amp;referrerSource=full_rss&amp;postId=a1036767dd45" width="1" height="1" alt="stat?event=post.clientViewed&amp;referrerSou">
<hr>
<a href="https://blog.prototypr.io/prototyping-for-virtual-reality-a1036767dd45">Prototyping for Virtual Reality</a> was originally published in <a href="https://blog.prototypr.io">Prototypr</a> on Medium, where people are continuing the conversation by highlighting and responding to this story.

Prototyping for Virtual Reality

Quickly simulate VR experiences for testing and validation

The why

Top Stories