Work index11 / 11 — HUD
HUD Sidebar
Persistent left-docked quick-access HUD bar for shop, settings, codes, and inventory.
- Role
- UI design, HUD
- Year
- 2025
- Type
- HUD
- Tools
- Figma, Roblox Studio
Overview
A vertical HUD strip docked to the left edge providing instant access to primary menus during gameplay.
The problem
On-screen HUD icons often collide with default mobile joystick controls and thumb zones.
Process
- 01
Thumb-friendly middle-left placement
Positioned clear of the lower-left mobile movement stick.
- 02
Color-coded icon pills
Distinct background colors allow recognition before reading button labels.
- 03
Active state border
Active open menu highlights with a glowing border.
Solution
A compact 4-button sidebar cleanly integrated into the active game loop.
Ergonomic mobile HUD navigation that stays clear of active gameplay.
Main Menu
Gold-on-black title screen with a four-way portal cluster and a single obvious start action.