How to Prototype for VR without Coding

Chris Locke
May 16, 2017 · 5 min read

Using the Adobe Suite, Cinema 4D, and very.gd

I believe that many interaction designers may not be ready to move to 3D environments, so the design community should share as much information and advice as possible. For this project I only needed to communicate the idea and the technology to the CTO and Creative Director of Helios Interactive. This meant that I spent most of my time tweaking files rather than designing and developing every scene I imagined.

This article is a mix of a post-mortem and prototyping insights for visual/product designers. It covers designing for VR without coding.

I’m Chris Locke, a New Media Design student at Rochester Institute of Technology, and I did a class assignment with Helios based on shopping at Target in VR. I chose Target because it’s a bold and familiar brand that wants to stay ahead of the curve; they’re also redesigning their stores so there’s a great opportunity to embrace VR shopping. My full client presentation is here.


Technology, eyesight and focus

It’s practically impossible to understand the limitations of the hardware without trying it first. Using a heads-up display limits our eyesight in a few ways: centered focus, blurred peripheral vision, and less eye movement.

Image for post
Image for post
Courtesy of Jan Mellstrom and Pedro Lasta from Unsplash.com and Naresh Kumar from Dribbble.com

I used the Google Daydream for this project, and the only problem I noticed was that the screen is more blurry then you’d expect. This limits the screen size so you have to be wary of putting UI elements in a blurry or uncomfortable area.

Dimensions for AI and C4D

In Adobe Illustrator I started with the very.gd template (which is also available for Photoshop and Sketch). This template has recommended sizes for UI as well as markers for users’ comfort zones, periphery, etc.

Image for post
Image for post
5400 x 1008 pixels. I normally increase the BG so there’s more/less distance between the viewer and the UI.

I only used the template as a starting point rather than exact dimensions. Every user is different so one person’s comfort zone may be bigger or smaller than somebody else’s. To accommodate these conflicting perspectives, I uploaded exports to very.gd and had classmates try different scenes, and each scene had UI containers with different sizes.

Image for post
Image for post
Screen recording of my final very.gd scene with an AE Welcome screen animation.

They told me which panels they liked then I used those to develop a grid system. This part of the process is very similar to designing digital products. Import sketches, choose fonts, develop a grid, add content, animate…

Image for post
Image for post
Welcome screen (done in Illustrator and After Effects)

To make a proper environment for my very.gd scene, I used Cinema 4D. I created a floor with a tile material (from the Content Browser) and a physical sky. Then I created planes floating in the air, and some cylinders that acted as product stands.

Image for post
Image for post
An HDTV 1080 29.97 preset render (with Physical renderer)

To make all of this more believable, I created a quick rendering of a product from Target: a lip crayon. I chose it because it was on the front page and it’s an easy product to model and texture.

Image for post
Image for post
Converting from MP4 to GIF sometimes creates banding, like in the BG lighting…

I used this tutorial to create a 360 export of the whole scene. All you do is create a small sphere (the “camera”), add a Compositing tag so it doesn’t show up in the render, add a reflection material, and add a Bake Texture tag. Once you bake the texture — with only Reflection checked — you bring the PNG into Photoshop to flip horizontally then export again. I recommend baking the texture at a 2:1 aspect ratio so there’s no seams; I chose a 10,000 x 5,000 pixel PNG so you can see lots of sharp details.

Image for post
Image for post
The UI is a bit dark because of the physical lighting, but it’s brighter in VR viewer.

This took me nearly 100 iterations! My main pitfalls were text sizes and the UI’s distance from the viewer. There are templates and recommendations from various developers for text sizes and such, but I believe the best way to make decisions is to iterate as much as possible.

Retail versus Online

By using VR, you keep the luxury of a boutique environment and combine it with the comfortability of online shopping.

I did some basic research on online shopping and Target’s new stores. The store will be divided into two parts, a quick-stop essentials section and a slow boutique area with lots of different products.

Image for post
Image for post
An Information Architecture slide from my client presentation (link in top paragraph)

I believe that users would like to start with a Welcome screen that shows sales and Wishlist items, then choose to go to either section; once they’re in they can move across the store and browse at their own leisure. If they see a product they don’t like, they can remove it so the store personalizes each section.

Image for post
Image for post
Top: PS traced sketches. Bottom: AI wireframe, comp and a C4D render.

If the user looks towards their feet, a Map would pop up and shows them where other products are. If they’re still having trouble, they can use the Phone — based off of existing phones in Target stores — to call for personal assistance.

Why bother?

If you’d like to learn more, I provided lots of links for further learning:

Thanks for reading!

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch

Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore

Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade

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