← UX/UI WORK

HUD / Controls / Feedback

Game HUD & Controls UI

UI-03

A touch-first gameplay interface study that distributes health, score, level, pause, movement, and actions around an active playfield.

Focus
Game HUD, control placement, visual feedback
Format
Static design study
Status
Concept
Full side-scrolling game HUD and controls study.

The design at a glance

Keep play central and controls reachable.

Persistent information stays near the top edge. Movement and ability controls occupy opposite lower corners, leaving the center open for character movement and threats.

This is a static composition study. It is not presented as a working or usability-tested gameplay prototype.

01 / Problem

Show status and controls without covering the game.

A mobile action interface needs enough information and input surface to support play while preserving awareness of enemies, platforms, and movement space.

02 / Design intent

Assign each screen edge a job.

The top communicates status and session state. The lower-left holds actions, and the lower-right holds directional movement.

03 / Key decisions

Build spatial consistency.

  • Health and score share the upper-left status area.
  • Level sits at the visual center of the top edge.
  • Pause is isolated to prevent accidental activation.
  • Movement and ability controls use familiar gamepad-like groupings.

04 / Interaction & usability

Design for thumbs and changing backgrounds.

A working version should validate reach, safe areas, handedness, opacity, active states, haptics, and contrast as the scene changes behind the HUD.

05 / Tools & skills

What this demonstrates

HUD composition, control mapping, player feedback, action grouping, touch affordances, visual hierarchy, and gameplay-centered interaction thinking.

06 / What I’d improve next

Prototype input behavior.

  • Test reach and occlusion on several phone sizes.
  • Add pressed, cooldown, unavailable, and remapped states.
  • Strengthen contrast behind dynamic scenery.
  • Explore customizable control placement and accessibility labels.

Connecting interface and game feel

My gameplay work helps me treat the HUD as part of the control loop: input, animation, system response, visual feedback, and player understanding should reinforce one another.

Next level / Let’s work together

Let’s make something
clear and playable.

Start a conversation ↗