Game UI Design: A Complete Guide to Designing Game Interfaces

Game UI design is how players read the state of a game and act on it: health and ammo, maps and objectives, menus, inventory, skill trees, lobbies, stores, and settings. It is every player-facing screen, not just the HUD, and it has to stay clear while the game keeps moving.

Tools and trends change; the work does not. You are always making information readable, actions reachable, and feedback consistent, usually under pressure web and app design never faces: motion, combat timing, couch distance, controller focus, localization, and platform certification. A white ammo counter that reads in a dark corridor can vanish in snow, sky, or a muzzle flash, so game UI is tested against worst-case gameplay, not a calm artboard. This guide covers the fundamentals, then walks through eight game UI surfaces you can practice one at a time.

Game UI vs game UX design

Game UI is the layer players see and touch: HUDs, menus, icons, layout, and feedback. Game UX is the wider question of whether the game is understandable and satisfying to operate, from the first launch screen to a death screen. UI sits inside UX. On a small team, one person usually does both.

How game UI differs from app or web UI

Web and app UI usually sits still on a calm background and assumes a cursor or a thumb. Game UI has to stay legible on top of a moving 3D scene, at couch distance on a TV, while the player is busy doing something else, and across controller, touch, and mouse-and-keyboard at the same time. A common console rule of thumb is body text around 28px at 1080p, scaled up for 4K, tested at roughly 2 to 3 meters. When you want patterns to study, browse real shipped game interfaces by screen type.

Game UI is grouped into four types by two questions: is the element part of the game's fiction, and is it presented in game space? The framework comes from Erik Fagerholt and Magnus Lorentzon's 2009 thesis, "Beyond the HUD."

The label does not decide the design; the player's task does. Use non-diegetic overlays for anything read during aiming, driving, or dodging (health, ammo, cooldowns, timers), and diegetic treatment for low-urgency or atmospheric information. Worth studying: the Metro series wristwatch and Far Cry 2's in-world map (diegetic); Left 4 Dead's survivor outlines and Mirror's Edge runner vision (spatial); and Call of Duty's damage vignette or a cracked-helmet overlay (meta). Diegetic UI can hurt accessibility when in-world text is small, low-contrast, or occluded, so it needs scaling and contrast options like any other screen.

Fix game UI in this order. The higher items cause more player pain when they are wrong.

1. Readability first. If players cannot see or parse the interface fast, nothing else helps. Hold contrast over a bright snowfield and a dark cave alike with a panel, outline, or shadow behind text, keep the default size legible at TV distance, and never carry meaning with color alone. Test against your brightest, darkest, and busiest scenes, at target resolution, not in Figma.
2. Match the input model. Every screen must be drivable with the gameplay input. A gamepad has no pointer, so each screen needs a clear default focus, focus that moves the way the layout looks, a consistent cancel and back, and no focus traps. Button prompts must update for Xbox, PlayStation, Switch, Steam Deck, keyboard, and remapped controls.
3. Hierarchy and timing. Decide what stays on screen always, what appears only when relevant, and what fades once the player has learned it. Aim for input feedback within about 100ms; let pickups and toasts linger 2 to 5 seconds depending on reading load. Veteran players often want less on screen, so let them dial the HUD down.
4. Consistency. The same icon should mean the same thing everywhere, confirm and cancel should hold their positions, and one type and color ramp should run across every screen. Drift means reused icons with new meanings or mismatched controller glyphs, and players catch it fast.
5. Feedback. Every input earns a response: hit confirmation, a cooldown sweep, a damage number, a button that visibly depresses. With no response, players read lag, a missed input, or a disabled control.

Visual style matters after the player can read, navigate, and trust the interface in motion. The same core UI design patterns from product design apply, but they do not transfer cleanly while the player is moving, fighting, or aiming at TV distance.

Accessibility has to be designed before the UI is wired, because text scaling, remapping, subtitles, color alternatives, and reduced motion all change layout, input, and testing. Larger, higher-contrast UI also helps couch players, handheld users, stream viewers, and anyone playing in a bright room.

• Contrast and text size. The WCAG baselines (4.5:1 for body text, 3:1 for large text and UI components) are useful targets, not a full game accessibility standard. Let players scale text, and test the same readout against your brightest and darkest scenes.
• No color-only signals. Pair every color with a shape, icon, or label, and test palettes against the three common types of color blindness (deuteranopia, protanopia, tritanopia).
• Remappable, comfortable controls. Offer full remapping, hold-versus-toggle, and aim-assist options. Platform certification on PlayStation and Xbox increasingly expects this, so plan the UI and code paths early.
• Captions, motion, and photosensitivity. Add subtitles with speaker names and a readable backplate, options to cut camera shake and motion blur, and avoid large, high-contrast flashes (especially red) in the 3 to 50 Hz range. Follow WCAG seizure thresholds and platform guidance.
• Test like a player. Run colorblind simulation, grayscale checks, a 10-foot TV test, a handheld test, and combat readability tests using captured gameplay, not static artboards.

For depth, work from the Game Accessibility Guidelines and the Xbox Accessibility Guidelines. The Last of Us Part II shipped 60-plus accessibility options, from scalable HUD to high-contrast mode, and is a useful reference. Treat it as one benchmark, not the minimum: scope accessibility to your own game's risks.

Game UI is easier to learn one surface at a time, and each of these eight is a different task: a HUD supports split-second decisions, an inventory supports comparison, a store supports trust, a map supports orientation. Study a shipped screen, then build your own.

1. HUD design (health, ammo, objectives)

A HUD is the persistent overlay for real-time state: health, ammo, cooldowns, objective, threat direction, temporary alerts. Show what the player needs this second and push the rest into menus. Respect platform safe areas (and offer HUD-bounds adjustment for TVs, handhelds, and streaming overlays), and consider a contextual HUD that hides elements until they matter, the way Red Dead Redemption 2 and Dead Space do. Study Doom Eternal and Apex Legends for ammo and cooldown readability under chaos.

2. Inventory and loadout UI

Inventory UI is how players store, sort, compare, and equip. The core choice is layout: a spatial grid (Resident Evil 4's attaché case, Escape from Tarkov) turns packing into a puzzle, while sortable, filterable systems (Destiny 2, Diablo IV) scale to hundreds of items. Either way, plan for sort, filter, compare, rarity, stack counts, locked items, and empty states, and make one-action comparison effortless.

3. Progression and skill-tree UI

Progression UI covers skill trees, talent grids, and level-up screens. The job is making a branching system legible: show locked, affordable, and prerequisite states, let players preview and refund, and surface a recommended path. Path of Exile (over a thousand nodes) is the cautionary extreme; Hades and Final Fantasy X's Sphere Grid are clearer studies.

4. Menus and navigation UI

Main, pause, and settings menus carry a lot of player time. Set a clear default focus, keep the top level short, never trap focus in a panel, hold cancel and back consistent, and confirm destructive actions. Settings live or die on grouping, previews, sensible defaults, and explaining consequences. Persona 5 and Nintendo's first-party menus are the references for focus clarity and style, and the hierarchy skills carry over from our step-by-step UI design guide.

5. Character and stats screens

Character screens present equipment (often a "paper doll" mapped to the body), stats, and loadouts. The real problem is comparison: show the delta a new item creates with up and down arrows or before-and- after numbers so players decide in a second. Watch for set bonuses and hidden stats. Destiny 2's item comparison is the canonical study.

6. Multiplayer and social UI (lobbies, leaderboards)

Social UI covers lobbies, matchmaking, parties, friends, and leaderboards. Status legibility wins: ready state, party ownership, invite and voice status, ping, region, crossplay, and clear error recovery. Show matchmaking progress so a wait never reads as a freeze. Study Apex Legends's squad screen and Overwatch's role queue.

7. World map and minimap UI

World and map UI helps players orient: minimaps, full maps, compasses, points of interest, and fog of war. Decide orientation early (rotate with the player or fixed north), respect genre norms (corner radar in shooters, top-right minimap in MMOs), and once more than roughly 20 to 30 markers are visible, add filters, zoom-based clustering, or category toggles. Breath of the Wild's map stamps and Elden Ring's map are strong studies.

8. In-game store and shop UI

Store UI presents currencies, bundles, battle passes, and microtransactions. The hard part is staying clear and fair: show the currency balance and its real-money equivalent, owned state, bundle contents, expiry, and regional pricing, with no countdown-timer pressure or confusing currency math. A clear store keeps players; dark patterns burn the trust the rest of the game earned.

You improve fastest when each practice screen has a genre, platform, input method, player goal, and failure condition. Treat it like Daily UI for games: one screen per session, under a fixed timebox. A few exercises to start with:

• Deconstruct a shipped game's HUD into a wireframe, label every element, and mark what you could cut.
• Redesign a menu you find annoying, then defend each change.
• Port a console interface to a phone, or the other way around.
• Design an inventory for a genre you never play.

Constrain it: one screen in three states (default, stress, error), one platform, a 60 to 90 minute timebox. Then critique it. Can a player read the top three priorities in two seconds? Can a controller reach every control? Does it survive localized text about 30 percent longer? Does it still work in grayscale? Capture the wireframe, the final, and three bullets on what you changed and why. That write-up is what reads as senior in a portfolio.

To put it on a schedule, schedule a daily game UI challenge and pick the Game platform for HUD, inventory, progression, menu, character, multiplayer, world, and store prompts by email, or generate one now. You can also see what other designers shipped. (The generator is rule-based: curated briefs, not AI output.)

Start from play, not tools: define what the player is doing, what they must know, and what mistake the UI has to prevent. A six-step workflow:

1. List the player's verbs, goals, and failure states. What are they doing, and what happens when they fail?
2. Map the information priority for each moment and each input device.
3. Build a state matrix before polishing art: empty, full, error, loading, and the awkward edge cases.
4. Prototype in motion. Get a grey-box version running in the engine with real animations and hit flashes, or a click-through that simulates controller focus and transitions.
5. Playtest with fresh players, including players with different abilities. Aim for at least three to five short tests per major screen.
6. Revise once the engine exposes constraints.

Implementation surfaces problems static art hides: text overflows when localized, a panel that looked fine pushes off-screen at 21:9, a transition that felt instant in Figma costs frames in engine. Budget for safe areas and aspect ratios, localization expansion, font rendering and texture memory, controller glyph switching, animation timing, the cost of frequent UI updates, and networking states for multiplayer screens.

Game UI designer vs game UI artist

A game UI designer decides what information players need, when, and how they interact with it: hierarchy, layout, flows, states, and input. A game UI artist owns the visual execution, the look, theme, iconography, and polish that fit the fiction. Larger studios split this further into UX designers, UX researchers, technical UI designers, UI engineers, and motion designers; on small teams it is one person.

Software game UI designers use

Most designers lay out and prototype in Figma (Sketch and Penpot also work; Adobe XD is effectively retired), then implement in the engine with Unity (UGUI or UI Toolkit), Unreal (UMG, built on Slate), or Godot's Control nodes. Larger studios often add middleware like Coherent Gameface or NoesisGUI, or proprietary UI tech. What does not move cleanly from Figma into an engine is behavior, focus order, responsive layout, dynamic states, localization, and engine-native animation, so you rebuild those in-engine. A designer who understands that ships cleaner UI than one who only exports static mockups.

Skills to build (and how to build a portfolio)

The skill set is wide: visual communication (type, contrast, spacing, hierarchy, iconography), systems thinking, motion and transitions, accessibility, playtesting, and enough engine literacy to hand off cleanly. You do not strictly need a degree; portfolio matters most, though studios also weigh shipped experience, collaboration, and engine literacy. A strong junior portfolio shows four to six case studies, including at least one HUD, one menu or settings flow, one inventory or progression system, and one controller-first flow, with state sheets, input maps, accessibility notes, engine prototype clips, and before-and-after critique rather than only hero shots. To study craft: Koji Ise's menus in Metaphor: ReFantazio (UI as motion and character), Alexandria Neonakis's streamlined combat menus in The Last of Us, and the Dead Space team's diegetic interface.