Published on | Prototyping: From UX to Front End — Medium Saara Kamppari

After you sketch a VR concept, how do you take the next step to mock up a quick, low-fidelity prototype?

This is a follow up to an earlier article about VR Sketch Sheets. I’ve updated the sketch sheets based on some feedback. Now the sketch sheets help people think about the vertical head movement in addition to the horizontal head movement, and follow the same guidelines when transitioning from their VR concept sketch to a VR paper prototype sketch.

Grab the updated VR sketch sheets here: VR Sketch Sheets 2.0.

My first attempts at sketching in a flat 360 grid

After some research, I found Volodymyr Kurbatov’s 360 VR sketching template in his article Draw Sketches For Virtual Reality Like a Pro.

I found an app called PhotoSphere Viewer on Android to quickly test out the sketches. The app is buggy and contains ads, so there’s definitely room for improvement. To make it work I needed to upload the images to my Google Drive and open them from there within the app.

I’m also using the GoPro VR Player on my computer as suggested by Volodymyr.

My first 360 sketch as viewed in the GoPro VR Player

Let me be honest: It feels extremely daunting to look at the blank full 360 degrees of space flattened out. My first attempts to sketch in a flat photosphere didn’t exactly turn out how I envisioned. My podium stretched out into infinity at my feet, and my palm tree looked pretty flat. At the same time, it was really rewarding to put on the Google Cardboard and check them out!

I learned two things:

I need to practice sketching in perspective.
I want the same head-turning guidelines here as I used in the VR Sketch Sheets to help me envision the space on the template better.

Sketching Over Existing Photosphere Images

First off, I started practicing by finding existing photosphere flat images on the web and sketching on top of them. Here are two examples:

A presentation in a long skinny room. Download this photo to try it out yourself.<a href="http://ift.tt/2pfF1hd">http://ift.tt/2pfF1hd</a>

If you’re wondering about the stick figures, I highly recommend teaching yourself with this How to Draw a Stick Figure: a Complex Guide by Monika Zagrobelna. I turned the guide into an 8-week class with my co-workers to learn together. It was fun!

An open field under a large tree, with a building in the background. Download this photo to try it out yourself.<a href="http://ift.tt/2pfkPfK">http://ift.tt/2pfkPfK</a>

I was impressed with how the tree branches really feel like they are hanging overhead. Of course in the flat sketch it looks super funky! Generally, the sketches along the middle horizon felt pretty easy understand, while the tops and bottoms require some mental gymnastics.

I also noticed that the building that is in the background doesn’t necessarily feel like it’s far away when viewed in the Google Cardboard. Of course that’s because we’re not really looking at 3D objects to trick the brain with better stereoscopic vision. But it’s good enough for a VR paper prototype!

Multiple sketch traces from photos overlaid for comparison.

The other thing I noticed is that generally the top and bottom of the sketch didn’t really have anything worthwhile to sketch. (Not counting the overhanging tree branches). I consider this good news when it comes to sketching your VR concept into a VR paper prototype, because there’s less crazy mental gymnastics to overcome!

White area = comfortable head turning area. Red lines = field of view (assumption).Visual Design Methods for Virtual Reality by Mike Alger (September 2015)

Now for the guidelines. I was again surprised at how much space is actually in the comfortable head turning zone versus the dark gray “curiosity zone.” I used the same formulas as Mike Alger did for his work to add the vertical guidelines, that was the basis for the VR Sketch Sheets.

It feels almost too simple that the guidelines are simple rectangles in the template, but it works out to look just like the circular guidelines on the VR Sketch Sheet once in VR!

Just the gray guides. Download this photo and try it out yourself in VR.Looking straight down in the GoPro VR PlayerThe head turning radius guidelines from the VR Sketch Sheet.

Putting it all together

So now you can quickly come up with lots of ideas using the VR Sketch Sheets, and then transfer your concept into a 360º sketch with help of the same familiar guidelines.

There are two versions of the VR Sketch Sheet. The 2-up sheet is designed to be cut in half to create half-sheets to use in ideation sessions where you are trying to generate a breadth of ideas in a constrained amount of time. The 3-up sheet is designed to create a storyboard to explore a single concept in more depth.

First Trial

I tried sketching freehand again for the first time. After sketching it I thought “this can’t possibly work” — but I tried it in VR anyways. I found myself imaging being court side at a basketball game cheering aloud with the fans next to me. I actually cheered aloud. Sure, my scale is still a bit off, but for a 5-minute sketch turned into a VR paper prototype, it’s pretty amazing.

My first rapid trial with the added gray guidelines. Download the image to try it out yourself.<a href="http://ift.tt/2pfrmqC">http://ift.tt/2pfrmqC</a>

Download the sheets and try it out

Download: VR Sketch Sheets and Paper Prototyping Template (pdf)

Here’s the source Adobe Illustrator file too. If you make improvements to the templates, please share them in the comments!

What’s next?

Aside from the learning curve of sketching on the 360º template, it’s really kludgy to get the image ready to view in VR.

What I’d love to see is an app similar to Marvel’s POP that makes it as easy to make a VR paper prototype as it is to make a phone app paper prototype.

If you know of some photosphere apps that are closer to what’s needed for VR paper prototyping, let me know in the comments!

VR Paper Prototyping was originally published in Prototyping: From UX to Front End on Medium, where people are continuing the conversation by highlighting and responding to this story.

VR Paper Prototyping

Cool stuff, every week

More Articles