Virtual Pioneers Part 3: Let’s Get Visual

Translating 2D Elements into a 3D Environment

Tectonic
Tectonic
Aug 24, 2017 · 6 min read

This ain’t your mama’s digital interface! There are massive content libraries of legacy 2D production assets for digital experiences that feel totally lackluster when imported into the VR space without additional curation beyond the standard flat image. Here are some ideas to translate those flat assets into a dimensional space without starting asset production from scratch.

2D Assets Translated

When we think about how we browse libraries of content within our physical environment — flat assets are mapped onto tactile objects (posters, books, pamphlets, signage, etc.) that have a physical presence. A lot of our current content libraries are focused on only being viewed within a thumbnail or a flat content tile within a flat screen experience. However, in Virtual Reality these assets have the ability to be mapped within a dimensional space and evoke physical properties. Even more so — they have the ability to cast shadows, absorb surrounding lighting, emit light, scale, animate, or even become a secret door to transport the user into unexpected realms of delight.

The possibilities in translating 2D content are endless, so let’s start with the basics. Here are some high-level considerations for beginning to modify your 2D assets into VR with maximum impact and within reasonable production considerations.

Break apart assets to create a thumbnail with depth

Dimensional Thumbnails
Break up the content into multiple layers that extend into z-space, rather than flat, tile-like artwork. This creates a visual treatment that is curated specifically for VR, and can’t be expressed as fluently in any other medium.

Adding a slight extrusion makes content feel tactile

Extruded Panels
Tiles can be mapped on rectangles with a slight extrusion. It doesn’t need to be a heavy-handed extrusion, and it may only become visible in transition states. It makes 2D content feel 3D in a subtle way which could encourage the user to physically interact with the content — giving leeway for unique and discoverable interaction models.

Allow content to bend around the user

Curved Tiles
Assets don’t need to lay flat on like on a screen — features can have a subtle curve or bend to them. Additionally, the tile group as a whole can live on a curve that surrounds the user, amplifying the feeling of being immersed within the content.

Physical queues ease discoverability within VR

Physical Properties
What physical object (or objects) can the asset tile emulate? Should it be light and flexible like paper? Does it float up or fall down when activated? Does it defy physics altogether? How do we embrace the surrealism of VR to amp up the magic? Giving elements physical properties channels the user’s intuition and can be used as a visual learning tool to guide the user through interacting with content tiles. For example: Giving a piece of content a corner bend can teach the user to “peel” that piece of content away to see the reverse.

Thumbnails can animate when activated

Living Thumbnails
Instead of a static graphic being used to represent content — thumbnails can be treated with animated selection states to help tell the story. Dimensional cinemagraphs, looping gifs, and animated content are easily sourced elements that can be utilized to create a gratifying VR experience.


Selection States

Leverage physical properties of objects instead of relying on traditional hover / active state selections that only work on flat screen experiences.

Put the user at the center of the universe with magnetism

Scale + Position
Play with the scale and z-space position of active objects — should they travel TO the viewer?

Utilize backlighting as an ambient selection treatment

Backlighting / Spotlight
Use backlighting or a spotlight effect to highlight active objects.

Consider specularity and reflection as an added layer on your content

Specularity
Use specularity as a way to amplify the physical properties of your assets. Is it hyper-reflective to feel like a premium piece of content? Does it become matte as the “newness” wears off? How can the specularity of your assets reinforce visual metaphors for your product?

Allow content to rotate towards the gaze of the user

Camera-Aware Assets
The VR device can tell where the user is looking — objects can rotate to face the user as they shift their gaze.


Lighting & Shadow

At the core of most in-store brand experiences or at your favorite restaurant, many small atmospheric details add up to create the overall ambiance of your experience. Nobody wants to feel like they are in a sterile environment that is devoid of a welcoming aura (doctor’s office or the DMV anyone?). Small details like the perfect lighting in combination with how objects within the space react to it create a perfect brand-specific voice. This section focuses our thinking on how the global environment is lit, and how it affects the overall mood and display of content elements within that environment.

Lighting
The overall treatment of the light source(s) within your experience carry a lot of your brand expression. Is it a studio lighting setup? Is it a warm, natural light? What time of day is it? Are the light sources above, below, behind or in front of you? Are you flipping convention on its head and utilizing a completely surreal combination of lighting effects? Here is an example of the same scene lit a few different ways, and how lighting significantly changes the ambiance of each frame.

Experiment with your light position to find the right ambiance

Shadow
The direction of the lighting will affect the shadows that your elements cast. These elements don’t have to follow real world rules of light and space but they are an important element in adding dimension to the experience.


Push Expected Boundaries

As we explore the frontier of design in virtual reality we need not totally abandon the best practices and conventions of traditional flat-screen experiences. However, it is important to remember that VR is an exciting and unique space with endless potential for new interaction models and visual treatments to be explored.

VR immerses a user in a space that is completely surreal, breaking notions of expected physics, materials, and lighting. If we are thoughtful in leading the user towards new and discoverable experiences, we can elevate brand above novelty to create a truly delightful application.


In conclusion of our 3 part series (Part 1: Creating Magic with Layout, Part 2: Beyond Buttons) we hope that you are equipped with an arsenal of interaction and visual concepts to keep in mind when designing for this platform. There are endless possibilities and uncharted areas to explore, but these are good initial rules of thumb to consider when getting started. Don’t rely on outdated flat-screen digital interaction models to merely replicate your 2D experience. Harness the power of VR as a new destination for your user base that moves beyond novelty and keeps the people coming back for more.


Written by Gretchen Nash & Leslie Ferguson, Artwork by Gretchen Nash

Tectonic

We are an experience design studio. We collaborate with the world’s greatest companies to reimagine how people interact with content and technology.

)

Thanks to Benjamin Shown

Tectonic

Written by

Tectonic

We are an experience design studio. We collaborate with the world’s greatest companies to reimagine how people interact with content and technology.

Tectonic

Tectonic

We are an experience design studio. We collaborate with the world’s greatest companies to reimagine how people interact with content and technology.

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