Simple guide to make your first Virtual Interface in Sketch
Want to work with me? 👉 alexkukharenko.com/contact/
Nowadays VR and AR industries are giving big opportunities for designers and bring a completely new experience to the digital world. Virtual Reality can quickly teleport a mind from reality to something crazy. You are in a room wearing VR helmet and boom … you are on another side of the world.
Does anybody wonder to try yourself in VR design? I think most of us. But what stops us? I think there are 2 things:
- It is pricy. Professional VR software usually requires Oculus Rift or HTC Vive.
- It is bad described and explained.
What if we can get started from 4$? Sounds crazy.
Basic Kit for VR Design consist of:
- Google Cardboard or something like this (preferred).
- Any smartphone with a screen bigger than 4.5″
- SketchApp, Adobe Photoshop or any other graphic editor.
Step 1. Design flat interface
Find any VR 360 photo by googling or take any of them from here.
And open this photo in Sketch/Photoshop. Further, we need to put the interface on the photo. But how should it look or what is its purpose?
Try to look carefully at the photo. If you teleported to that place, what would you do there, what would be exciting to do there?
I came up with a few thoughts and I transformed them into this interface:
I want to emphasize on 2 things:
Put a shadow under an object, it will make your flying UI live and deep.
Don’t make interface too big, otherwise, it won’t fit into your field of vision.
As result, you should have a jpg image with high resolution and UI above designed. In my example, it was 2880 × 1440.
Perfect. We are moving forward.
Step 2. Move it to VR
Sign-up at console.instavr.co/signup and go through the tutorial. I don’t recommend you to skip an onboarding. The app looks still raw.
Upload your wide 360 photo.
Choose “Web” tab and click on “Make Package” link.
In “Download” section click on “Open Hosted Page” button.
As result, you get your VR 360 photo right in a browser 😍. You can rotate a camera and take a look at the interface from the different angles.
Unfortunately, Instavr puts a watermark on each made canvas and it is possible to get rid of it by purchasing Pro plan for $299/month or 199/month paying annually.
Step 3. View on a device
We are staying in 1 step from the final goal!
Email or slack yourself a link, copy-paste into default browser (in my case it was Safari), allow autorotation in a mobile device, set a device in horizontal mode and open generated a link.
Click a “Cardboard” icon on the right top corner to switch to VR mode with gyroscope.
You may experience some performance issues like low respond or low-FPS score. I didn’t experience that on iPhone 6/7 but found an issue on some old android devices. To solve performance issue generate “Android” package instead of “Web” one.
Congratulate! Fall in love with VR? Me too! 🤜 🤛 See what we can do next.
What is next?
- Try adding a video instead of image to InstaVR. You can found many of them on Youtube.
- Go to professional league with purchasing Oculus Rift, HTC Vive and get a job in VR. This article contains some valuable advices for it.
- Join my mailing list
Originally published at usabilityscale.com on August 27, 2017.
