Logic Board UI

WebXR work for Atmos, a US-based start-up (California, San Francisco).

The LOGIC BOARD UI panel is another task I worked on to display logic components that could be wired together to give functionality to any object or scene that the users would create with the ATMOS world editor.

For this task, I worked on:

• Designing UI elements and layouts
• Coding a WebXR prototype to review, test and validate the design in VR mode

The Making Of

Lo-Fi Wireframes

As a first step, I created lo-fi wireframes to represent the actual plane primitive (the one below in light-grey color) that would use a texture to render the immersive UI's custom design in the subsequent iterations.

The image below shows the LOGIC BOARD UI panel layout positioned to the left of the ATMOS world editor.

WebXR Prototype

Before working on the custom design, I created a rough WebXR prototype to test the LOGIC BOARD UI panel's size and position and validate comfort and readability in VR mode.

Hi-Fi Mockups

As a final step, I created a static mockup to present and validate the requested sci-fi look-and-feel we implemented in the ATMOS world editor.

The images below show the wireframes/plane primitive and the designed graphic elements to render as textures.

Implemented Design

The images below show the ATMOS world editor UI implementing the completed LOGIC BOARD UI panel matching the custom design and sci-fi look-and-feel.