Tag: game interface

How to Design a One-Level Game Interface and Navigation Tools (HUD, Menus and Maps)

Aven BrisailLeave a comment

A one-level interface is the complete set of screens and on-screen elements a player needs to play a single level of a game: a way to start, a heads-up display (HUD) during play, a pause option, and a clear end screen for winning or losing. Navigational tools are the parts of the interface that help players find their way – both through the menus (buttons, tabs, back arrows, level select) and through the game world (maps, mini-maps, compasses, waypoints and signposts). Both are forms of graphic design: arranging type, icons, colour and space so information is quick to read.

This is a hands-on lesson that puts earlier theory to work. Review The Game UI Design Process and How to Tell Good UI From Bad UI and How to Wireframe a Game User Interface before you start.

Part 1: Designing a one-level interface

Treat one level as a mini-game with a beginning, middle and end. Plan these screens and states:

Screen or stateWhat it needsGraphic design tips
Title / startGame title, “Play” button, optional settings and credits.One dominant button; the title uses the game’s key colours and font.
Level introLevel name and goal (“Collect 20 shells before sunset”).Short text plus an icon; fade out after 2–3 seconds or on a tap.
Gameplay HUDOnly essential information: lives or health, score or progress, timer, pause button.Place at the edges and corners; use icons with numbers; consistent colours.
Pause menuResume, restart, settings, quit.Darken the game behind the menu; “Resume” selected by default.
Win screenCelebration, score, stars or rewards, “Next” or “Replay”.Animated reward, big readable score, clear next step.
Lose screenEncouraging message, reason for losing, “Try again”.Friendly tone; show how close the player got.

Graphic design basics for game interfaces

  • Typography: use one display font for titles and one very readable font for everything else. Keep text short and large enough for the platform.
  • Icons: draw simple, bold icons with the same line thickness and style. Test that each is recognisable at small sizes.
  • Grid and alignment: line elements up on an invisible grid and keep equal margins around the screen edges (a “safe area”, important on TVs and phones with notches).
  • Colour and contrast: use the game’s palette, but make sure text and important icons have strong contrast with the background.
  • Theme: the frames, buttons and fonts should look like they belong to the game world – driftwood buttons for a beach game, glowing panels for a space game.

Part 2: Designing navigational tools

Menu navigation

  • Keep menus shallow: players should reach any option in two or three steps.
  • Always provide a Back button in the same place, and support the controller’s back button or the Escape key.
  • Show the current selection clearly with a highlight, outline or animation.
  • Use breadcrumbs or titles (“Settings › Audio”) so players know where they are.
  • Make it work with every input the game supports: touch, mouse, keyboard and controller.
Game menu with a grid of character icons, a selected kart preview and stat bars
Figure 1 – The kart selection screen in SuperTuxKart: a grid of characters, a highlighted current choice, stat bars and clear buttons along the bottom. Image: QwertyChouskie, CC BY-SA 4.0, via Wikimedia Commons.

In-world navigation

  • Maps and mini-maps show the player’s position, goals and explored areas.
  • Compass bars and waypoints point towards objectives.
  • Environmental signposting guides without any HUD: lights, paths, colour, open doors and landmarks draw players forward.
  • Breadcrumb trails – coins or collectables placed along the intended route – quietly show the way.
Blue map of connected rectangular rooms and corridors drawn on a light background
Figure 2 – An automap from the free game Meritous. Explored rooms are drawn automatically as the player moves, helping them navigate a large maze. Image: Lancer-X/ASCEAI, CC BY-SA 3.0, via Wikimedia Commons.

Game director Masahiro Sakurai explains why menus should express the personality of your game world, not just list options:

Example

For a single beach level called Shell Seeker, a student designs: a title screen with a driftwood “Play” button; a level intro card (“Find 20 shells before the tide comes in”); a HUD with a shell counter (top-left), a tide timer drawn as a rising wave (top-right) and a pause button; a pause menu on a wooden sign; a win screen with up to three starfish for speed; and a lose screen saying “The tide won this time – you found 16 shells!”. For navigation she adds a small mini-map in the bottom-right corner showing shell locations the player has already spotted, and places seagulls that circle above hidden shells as in-world signposts.

Exercise

  1. Choose a level idea and list every screen and HUD element it needs, using the table above.
  2. Draw the full one-level interface: title, level intro, HUD, pause, win and lose screens. Apply at least three graphic design tips.
  3. Design a menu flow with a Back button and breadcrumbs, and one in-world navigational tool (mini-map, compass or signposting).
  4. Build the screens in Scratch, Construct or any tool (or as linked slides) and ask someone to navigate them without help. Record where they got stuck.

Next: Designing Game Characters for Different Genres: Life Drawing, Skeleton, Muscles and Facial Expressions

Syllabus link: This post is relevant to the CAPE® Animation and Game Design Syllabus, Unit 2: Interactive Design and Game Development, Module 3: Animation for Games – Specific Objective 1 (“design a one level interface”); Specific Objective 2 (“design navigational tools”).

Attributions to media used in this post:

SuperTuxKart kart selection screen 2018.png – QwertyChouskie – CC BY-SA 4.0 (via Wikimedia Commons)

Meritous-automap.png – Lancer-X/ASCEAI – CC BY-SA 3.0 (via Wikimedia Commons)

© 2026 Vedesh Kungebeharry. All rights reserved.