Top Menus/UI Bar

WebXR work for Frame by Virbela, a US-based company (California, San Diego).

As we kept adding new features to the FRAME WebXR platform, we decided to implement a QUICK UI BAR to provide the users with quick access to the most frequently used actions and features.

This solution, combined with the Vue TOP MENUS (CHAT, ONLINE, GO TO), resulted in a drastic reduction of the clicks required to perform specific actions and, consequently, in a smoother and better user experience.

For this task, I worked on:

Designing custom assets
Restyling already-existing UI elements
Designing the layout of the new menus and UI panels
Styling the WebXR UI elements by editing the code in Vue and Babylon.js

Final Design

Implemented design option v2 (margin and rounded corners).

Implemented design option v2 (margin and rounded corners) showing the ONLINE UI panel.

Implemented design option v2 (margin and rounded corners) showing the GO TO UI panel.

Implemented design option v2 (margin and rounded corners) showing the ADD UI panel.

Implemented design option v2 (margin and rounded corners) showing the SCENES UI panel.

The Making Of

Original UI Styling

The image below shows the initial version of the Babylon QUICK UI BAR created by a teammate developer to start working on the logic and get all the features working.

Custom Icons

I then started working on restyling the Babylon QUICK UI BAR, and the first step was to design pixel-perfect custom icons for all its buttons. The images below show the keyshapes + orthogonals and the pixel grid for each asset.

MIC OFF icon