Sketch to VR - Tool for Mocking Virtual Reality Apps

Roundup of VR + 360º Design Resources

| Tutorials

What tools to use to begin transitioning from 2D to 3D

First designing for a new medium can feel daunting, but we’ve put together a list of resources that are intended to make your transition to designing for 360º/3D spaces easier.

Before you begin designing, we recommend sketching out your ideas first.

“But wait, how do I sketch for 360º?

Printable VR Storyboard Template by Vincent McCurley

Printable VR Storyboard Template by Vincent McCurley

Vincent McCurley, explains his process in “Storyboarding in VR”, and notes “for VR we can still storyboard a scene, but instead of objects being defined relative to the frame, we define them relative to the audience.” He created a downloadable, printable VR Storyboard template PDF to help you get started.

Marc Brunet, put out another 360º Perspective Grid template that should help orient you with your designs.

From Idea to Sketch

VR Prototyping Template by Facebook Design Team

VR Prototyping Template by Facebook Design Team

Once you’ve got a basic idea of what 360º world you want to create, check out Sketch-to-VR, a project by Liu Liu (auxdesigner), which enables you to turn your 360º Sketch file into a file that is viewable on the web or in VR. This is a great tool to enable 2D designers to start thinking in 360º/3D, while using tools like Sketch that they already use in their 2D process.

The Facebook Design team put out this prototyping resource full of a Sketch template, PSD file, and Unity sample project that “enables you to easily drag and drop your 2D mockups and page through them in VR by using your keyboard or headset controls.” This template also includes a layout for your UI layout, which can help jumpstart placement ideas.

Designing Experiences that Scale

VR Interface Design - Typeface Sizes

So, now that you’ve got your sketch laid out, how do you create experiences that scale? Recently, Chris Mackenzie, UX Designer on Daydream, and Adam Glazier, UX Lead on Daydream, talked at I/O’17 about the techniques the Daydream team uses to create legible, usable screen interfaces in VR.

They introduced the technique they developed called a “dmm”, which came out of the desire to use angular units to create content that is consistent across various types of screens, something critical to developing in 3D space for VR/AR. A “dmm” is a “distance-independent millimeter” or 1 millimeter at 1 meter away.

Mike Alger (who also works at Google) has been discussing similar theories in his VR Interface Design Manifesto. For a more in-depth read, check out Practical VR, A Design Cheat Sheet by Ryan Betts.

For other great reads to get you started, check out:

Once you’re ready to start building in 3D, check out:

One last thing…

If you liked this article, subscribe to the SVRF Report for access to exclusive collections and articles like this!