3d Workspace & Tools

Description:

As a new 3d environment, zSpace needed a visual language, interaction model, and core tools. I looked to prior art and domain experts for guidance and inspiration.

In my interviews with domain experts, they referenced popular media — Minority Report, the Iron Man movies, Avatar, the Tron movies, and Kinect games — for how they expected 3d spaces to 'work'. I analyzed these sources and enumerated common themes that zSpace could leverage:

• Translucency
• Dark backgrounds (to focus attention on the content)
• Blue/Green UI controls and minimalist UI (simple lines and geometric shapes)
• Light/Glow for effect (use lighting and glow for modes/states)
• Rounded corners and edges

I drove the design of zSpace by applying these core design tokens:

• Translucency and lighting effects drove the design
• Transparent planes held together by light defined surfaces
• Blue was the primary color for simple lines and geometric shapes comprising the UI
• Tool modes and states were conveyed with glow, levels of translucency, and alternate colors

Translucent planes and objects provide spatial reference points without completely obscuring objects further away while reinforcing the depth of the 3d workspace. The glowing lines reinforce the shape and modes of objects.

Multiple iterations of design and implementation went into zSpace's workspace and tools. The examples below show different work phases for the workspace, 3d color and material pickers, 3d camera path control, and different menus designs.