Graphic User Interface for Virtual Reality Experiences


Thomas Iuliano
Co-Founder of Artheria
Graphic User Interface for Virtual Reality...

In the past, I have been involved several times in studying and creating Graphic User Interfaces for different types of projects, including Virtual Reality experiences.

The Graphic User Interface (GUI) is a system of visual components that allow the user to interact with the software—in our case, a VR project—in a visual and intuitive way, using cursors, buttons and icons. In Vajont, the GUI guides the participant through the user experience, supporting the tutorial and the different game phases, showing the interactive objects and the correct way to perform the interactions.

What I did for Vajont actually differs from what I have done on previous occasions.

We had the desire to create a Graphic User Interface that was not just a simple and cold instruction display, but rather an additional element capable of telling a portion of the story.

animated VR controller trigger

Showcase GUI

In the experience, small clues are scattered that refer to the backgrounds of the different characters. In this case, the entrance of the character of the husband is anticipated by his passion for drawing and painting, of which there are some examples hanging on the walls.

Iolanda, the director of the project, and I asked ourselves if it would be possible to create a connection between the husband’s passion and the GUI…?

Indeed, yes—we imagined that the numerous icons of the GUI, which would guide the participant through the experience, had been drawn by the husband himself.

I drew heavily from my studies as a cartoonist to recreate a simple and at the same time evocative style, so that each image would be instinctively comprehensible, without the need for interpretation.

I worked in Photoshop to draw the different icons, taking advantage of the possibilities offered by the timeline to create the various animations.

animated photoshop timeline gif

The timeline of Photoshop.

Each animation consists of a loop of two frames.

The different images were then exported as .png files with transparent background, to be easily imported into Unity.

Here are some examples of what I have done.

animated finger sketched button push

animated hand sketched open door handle

animated hand sketched finger switch on off

animated sketched woman open door vintage

animated sketched hand turno on old faucet

animated skatched hand grab a glass

Show Comments (0)

Comments