---
name: ui-ux-design
description: Use when designing or reviewing HUDs, menus, inventories, shops, onboarding or any player-facing interface. Covers information hierarchy, input methods, feedback, readability, flows and testing.
---

# UI/UX design

Draft from the Game studio skills library by THE DREAMING JESTER. Adapt it to your game, team and engine.

## Goal

Give players the information they need, at the moment they need it, in a form they can read without stopping play.

## Before you start

- List the player's decisions on each screen and what information each decision needs.
- Confirm the target devices, resolutions, viewing distance and input methods: mouse, controller, touch.
- Collect the current UI, its pain points and any playtest or analytics evidence.

## Process

1. Rank information by urgency: what must be read in combat, what can wait for a pause, what can live in a menu.
2. Sketch flows before screens. Count the steps for the most frequent tasks and remove what you can.
3. Establish a visual hierarchy: size, contrast, position and motion reserved for what matters most.
4. Design every state: empty, loading, disabled, error, full, new and changed.
5. Design for every input: focus order and navigation for controllers, hit sizes for touch, shortcuts for mouse and keyboard.
6. Give every action immediate feedback: visual, audio and, where available, haptic.
7. Prototype in the engine early. Mock-ups hide timing, scale and readability problems.
8. Test with players who have not seen it. Watch where they look and hesitate.

## Quality bar

- Critical HUD information can be read in under a second at the target viewing distance.
- Every screen works with every supported input without a mouse fallback.
- Text meets readable sizes and contrast, and scales with a setting.
- No information is carried by colour alone.

## Output

User flows, annotated wireframes, a component and state list, and an in-engine prototype with test findings.

## Avoid

- Designing at a monitor distance when players sit on a sofa.
- Hiding important stats behind hover-only interactions.
- Adding UI to fix problems the game should communicate itself.