What is game UI? A complete beginner’s guide to game interface design

When we think about video games, animation and character design usually come to mind. But no game is complete — or even usable — without some good ol’ UI design. Yup! There’s a huge space for UI designers in the video game industry, and you’ll soon see why.

Ready to go from gamer to budding game interface designer? All you’ll need is this guide and some trusty game UI design software — like Sketch

Choose a save slot to begin.

Load/Save screen of Alike Studio’s All of You via Game UI Database. This image is used for educational purposes.

Hint: What is game UI?

First things first, let’s talk about what game UI is. Simply put, game interface design focuses on creating visual cues that help users follow the intended course of action in any given video game. Think of on-screen instructions like ‘Press X to open’ or a map of your surroundings.

Of course, game interface design is a lot more than that — and it’s a space that keeps evolving with new technologies and platforms. For example, designing a game for Xbox, where the player will be using a controller, is very different from designing a mobile game, where it’s all about the touchscreen.

We’ll be diving deeper into these concepts in a bit. But first, let’s get a full-picture view of the game design process.

Game design melee: When UX meets UI

As with most things in design, wherever there’s a UI designer, you’re likely to find their UX counterpart.

Here’s what collaboration between these roles usually looks like in video game design:

First, the UX designer will map out the player’s journey. They’ll usually create a mockup or wireframe detailing these steps and where each decision can lead the player. A good rule of thumb for UX designers at this stage is to only include the steps and decision points that are absolutely necessary.

Next, the UI designer will start creating a semantic language using elements like color, typography, content hierarchy, and shapes to make these steps as intuitive and appealing as possible. The goal is to empower players to make decisions quickly and confidently — except when you want to lead them astray, of course 😉

All throughout, UX and UI designers will work closely with motion graphics designers, who’ll start thinking of ways to animate those cool character selection screens, maps and skill trees we know and love.

And while we could spend hours talking about all of the sides to game design, today’s chosen character is ‘Game UI Designer’. So let’s take a look at what their storyline entails.

You’ve chosen Game UI Designer

Character screen from Atlus’ 13 Sentinels: Aegis Rim via Game UI Database. This image is used for educational purposes.

Want to see more examples of great game UI examples? Take a look at Game UI Database — the team there has curated more than 41,000 screenshots from nearly 1,000 games, so you’re sure to find some inspiration.

First quest: Understanding interface components in game UI design

When it comes to game UI design, there are four types of visual representation: diegetic, non-diegetic, spatial and meta. To become a great game UI designer, you first have to understand what these mean and how you can use them effectively. Let’s break them down.

Diegetic: UI elements that can be seen or heard by the character and fit within the story’s context. Examples: a phone with a visible screen, holograms, and other futuristic gadgets.

Non-diegetic: UI elements that exist outside of the game or story and that only the player sees. Examples: menu screens, quest windows, and health bars.

Spatial: UI elements that are represented within the game space but aren’t visible to the characters. Examples: character outlines indicating who the enemies are, an arrow showing where a thrown object will land, and text labels.

Meta: UI elements that are contextual to the game but aren’t represented within the game space. Examples: scrolling text or colored overlays that indicate a change in the player’s health status.

Here’s a quick look at how you can differentiate between the four types of visual representation.

Second quest: Game UI design in action

As we’ve seen, there are quite a lot of video game elements that actually fall under user interface design. UI designers create anything from health bars to character selection and inventory screens. But there’s one place that’s made up almost entirely of UI elements: the HUD, or Heads-up Display.

You can think of the HUD as an overlay that houses all sorts of UI elements. It’s where the player will find most of the information they’re looking for as they play the game. To understand this in context, let’s look at this example from Persona 5.

A moment in Atlus’ Persona 5 via Game UI Database. This image is used for educational purposes.

Here, you can see how the HUD houses the title character’s health and stamina bars in the bottom-right corner, an actions menu surrounding the character, and even some top-right text guides to remind the player of their next move.

As this episode of Game Marker’s Toolkit explains, we can categorize most HUD elements as gauges or previews.

Gauges, like health bars and maps, help the player understand what is currently happening in the game and what could happen. These UI elements aim to help the player make informed, big-picture decisions.

Previews, such as a text layer indicating you should press X to open a door or throwing arcs showing where an item will land, let the player know about the immediate effects of their actions. The goal is to give the player a sense of reassurance about their next move.

You can also increase or decrease a game’s difficulty through UI elements. If you think about it, the player receives most hints through the HUD. Often, when choosing between Easy, Normal and Hard modes, you’re actually selecting the amount of HUD tips you’ll see on screen. That, and maybe some increased HP for the bad guys.

Third quest: Choosing a game UI design software

Alright, so enough with the lessons! Now that we’ve covered some game UI design basics, it’s time to get to work. How and where should we start creating the next chart-topping video game? For a UI designer, it all starts with choosing the right game UI design software.

On top of meeting your basic UI design needs like layer lists, styling tools, and vector editing, here are some essential features to look out for:

• The ability to create a library of reusable elements so that you can store anything from different versions of the same health bar to maps of varying sizes. Imagine all the time you’ll be saving!
• A prototyping functionality so you can bring your UX designer’s wireframe to life using overlays and preview your UI in action
• Collaboration options so that you can work together with UX designers and other teammates as you fine-tune your design
• Proper handoff tools so that it’s easy for your devs to transform your design into a fully functioning video game.

Ready to try your hand at game UI design? Sketch can help — and you can get started for free

TL;DR

• Game UI focuses on creating visual cues that help users follow the intended course of action in any given video game.
• Those cues can be diegetic, non-diegetic, spatial or meta.
• The HUD (Heads-up Display) is a powerful overlay that houses a lot of these cues — especially gauges and previews — during gameplay.
• Game UI designers work closely with UX designers and motion graphics designers.
• The right game UI design software will have features like prototyping, collaboration, handoff, and reusable elements.

And there you have it! We hope you learned a thing or two about game UI design and that you’re feeling ready to try it out for yourself. And if not… maybe we just gave you a bunch of details you won’t be able to unsee next time you play your favorite video game.

So, what do you say?

Scene from Undertale via Game UI Database. This image is used for educational purposes.