A game’s UI is the interface its players directly interact with while playing it. Designing any game UI means deciding which information is most critical to share with players, when, and how. Whenever there are armor and weapons to equip, graphic card settings to adjust, light switches to flick on and off, or enemies to dispatch, the UI handles all player requests. It also responds to their choices in predictable ways, usually with clear visual or audio feedback. The best UI is both eye-catching and information dense while matching the rest of the game’s visual themes and setting.
Designing game UI is a skill that can be self-taught, and there are many free options available online for beginners to explore. After gaining some experience, platforms like Coursera and old-fashioned university courses are able to help fledgling designers become fully certified UI/UX designers.
What is UI in video games?
The UI—which stands for “user interface”—is the part of a video game that receives the player’s inputs and displays the game’s response. The most prominent UI feature is the heads-up display (HUD), which overlays the player’s vision in the main gameplay mode. Navigable menus are another recurring UI element, allowing players to adjust different settings and customize aspects of the UI designs themselves. The Legend of Zelda: Link’s Awakening represents the traditional approach to game UI.
The HUD in Link’s Awakening constantly shows the player’s remaining health, MP meter, currently selected item, money, and two types of projectile ammo. All this information is displayed up top, leaving most of the screen to focus on whatever’s about to go down between Link and that approaching soldier.
The UI is the entire visual system through which players interact with the game. Well-designed user interfaces, then, have as much variance as the games themselves. World of Warcraft, for instance, is highly complex and has a customizable UI, so many players choose to fill the screen with text and images to keep track of everything.
On the other end of the spectrum, most 2D platformers get by while displaying little more than the main player character. The original Super Mario Bros. doesn’t even need a health bar, since small Mario is always one hit away from dying, and big Mario is one hit away from becoming small Mario.
UI elements are either built around or made to adapt to the player’s input device. Controller, keyboard, and VR handheld experiences each require different HUD setups. In VR games, for instance, the UI is built around the expectation that players can look in any direction and that their character’s body may be interacting with walls or other level design elements at unpredictable moments.
What are the examples of the best game UI design?
Examples of the best game UI design include Persona 5 Royal, Halo: Combat Evolved, Pokémon Sword and Pokémon Legends: Arceus, Fallout 3, The Witcher 3, Deus Ex: Human Revolution, and Elden Ring, to name only a few. Whether one game UI is more visually appealing than another is a highly subjective question. Aesthetic disagreements aside, though, the following represent some of the best HUDs in gaming—functional, unobstructive, and matching the game’s narrative and overall visual theme.
Persona 5 Royal uses a highly stylized menu UI to spice up the typical turn-based RPG formula. Persona 5 pays especially close attention to detail, using every spare piece of UI real estate to enhance the “phantom thieves” theme of the entire game. The text is arranged like a ransom note made of cut-out newspaper letters, and the character portraits all look like caricatures from some 1930s wanted poster, or a cheesy noir film. Even the enemy’s health display was given an extra visual flair.
Halo Infinite’s HUD is the exact opposite: a clean, simple technical readout. It looks more like a hospital readout or battery indicator than a fun, exciting video game. Halo, of course, is plenty fun on its own—the HUD’s design instead reinforces the character’s perspective as a military soldier fighting overwhelming odds and alien armies. Master Chief has no time for flashy UI elements; he just needs to know whether he’s still alive and his gun has enough ammo.
Pokemon games use a modified version of the even-older-school Final Fantasy/Dragon Quest style of turn-based battles. Rather than having both parties fight all at once, two trainers take turns sending out Pokemon until their whole roster is defeated. On top of the usual names, HP meters, and remaining move counts, Poke Ball icons are added to show the number of remaining fighters. Color is used extensively to avoid making players memorize the huge amount of move/type relationships and status effects.
Fallout games innovated by adding the VATS (Vault-Tec Assisted Targeting System). VATS allows players to target individual weak points on enemies while pausing the otherwise real-time combat. The result is a game that feels lived-in and appropriately dangerous most of the time, but occasionally lets the player be Neo from the Matrix. Fallout games are an example of how simple UI additions can refresh and even improve upon a time-tested formula.
League of Legends has a UI setup that’s not quite as overwhelming as World of Warcraft’s, but roughly in the same ballpark of information density. LoL is also a team-based MMO, so players have to consider their own abilities and equipment, their teammates’, their enemies’, and everyone’s possible relative positions—all the time. Given how much information each player has to keep in mind, the HUD does a remarkable job of cleanly arranging everything.
The Witcher 3’s HUD follows most of the RPG conventions—red health bar in the top left, circular minimap in the top right, etc. But it squeezes in extra information for navigating the Witcher’s vast, complicated world, like the weather and time of day. A list of ongoing quests and side quests helps readers keep track of even more information, removing the burden of memorizing it all.
Deux Ex: Human Revolution’s UI falls about halfway between a survival horror game and Halo. The events of the game are bound to provoke tension in the player, but they always perceive it through a cold, technical, information-dense readout. Deus Ex’s HUD tells the player what they need to know, when they need to know it, without dampening the suspense inherent to its danger-filled game world.
Elden Ring’s HUD is similar to the Witcher 3’s, but more action-focused. Displaying the four chosen button mappings in the bottom left is a higher priority. The combat details take up more screen space than the player’s HP, MP, and stamina, and there’s no mini-map to distract players from what’s right in front of them. When fighting a boss or mini-boss, a giant health bar appears as if to taunt the player. Placing the enemy’s remaining HP in the screen region where the player character spends much of their time focuses all the attention on how much work is still left to do.
Where to find a game UI database?
Game UI databases covering a range of specific UI needs are available for free online at the following sites.
- Interface in Game sorts its UI samples by genre, element type, and general artistic theme.
- Game UI Database has a collection of 60,000+ screens from nearly 1500 games.
- Dribble is organized more like a Pinterest board for game UI, with a curated collection of new and popular UI art samples.
- The Game UI Database on Github takes a more functional approach, explaining each type of game UI and its uses before providing many tables of downloadable UI (without screenshots).
Looking at how multiple games handled a specific problem—then trying them—is far more efficient than designing from scratch.
What makes a well-designed game UI?
A well-designed game UI accomplishes several goals at once. To be a good UI, above all, it must communicate the most important information to the player, quickly and clearly. This includes responsive feedback that clarifies every action and reaction, whether it’s helpful, harmful, super-effective, or anything in between.
The goal is to make the UI as unobstructive as possible while still containing all the critical information. The most user-friendly UIs are compact and efficiently arranged. Trying to convey too many details at once just clutters up the screen and distracts players from the gameplay. On top of being informative and organized, the UI, of course, has to look cool. The player is going to be staring at it for the entire game—make sure they won’t get tired of the view 20+ hours in. Metroid Prime’s memorable HUD does all of this at once, even overlapping its UI elements when necessary.
Metroid Prime builds the UI into its narrative. Seeing everything through Samus’s space suit visor enhances the player’s immersion, making them truly feel like an astronaut exploring a hostile alien world. It also just happens to show your health, missile count, and mini-map. Organizing all the UI elements around the edges of the screen and matching them with the overall futuristic look of the game make this an especially immersive UI setup. The cherry on top is the ability to adjust the opacity manually.
Game UI designs have to match the rest of the game’s visual themes, too. There’s a reason Diablo games have gothic text, gray stone-like equipment screens and deep, heavy-sounding menu SFX, whereas futuristic games like Mass Effect have clean, seemingly LED-lit menus with electronic beeps and boops. Switching them feels strange and de-immersive in both cases.
UI designs didn’t stop evolving with Metroid Prime, though. Increasingly, modern games are adopting UI setups that intelligently turn elements on and off. This really is the best of both worlds—players get all the information they need, when they need it, and get to enjoy the game world unobstructed the rest of the time. Contextually visible UI elements require a deep understanding of the player’s mindset and experience. The master of contextual UI design is Dead Space.
Dead Space built its UI to be as immersive as possible. As a survival horror game, its aim is to make the player feel lost and helpless, but a bright, helpful HUD does the exact opposite. Most of the time, there is no HUD in Dead Space. Interactable elements only get their own UI popups when the player stands near them. Just like a horror movie, the main character is constantly working on limited information, stalking dark hallways full of mysterious monsters without as much firepower as they’d like.
What are game UI elements?
Game UI elements include passive, informational elements (like the HP bar/ammo) and active, interactable elements—like a “Yes/No” button. In the scene below from The Legend of Zelda: Breath of the Wild, UI elements like the heart count and mini-map are informational, while the selectable options like “Drop” and “Throw” are interactive.
Informational UI elements focus on giving the player critical information. These are often displayed constantly, as they’re important to the player in almost every scenario. Many games only stop displaying the player’s health bar during cutscenes or in combat-free areas like towns, making those parts of the game feel immediately calming.
Interactive UI elements instead focus on receiving information from the player. They still have to display the player’s action and the game’s reaction, but unlike the HP bar, these elements always require the player’s input to function. Interactive elements are often programmed to appear and disappear as needed, like Link’s ability-related controls above.
What software is used for game design UI and elements?
Software used for game design UI and elements include Figma, Sketch, Affinity Designer, Krita, and Adobe XD, Illustrator, and Photoshop. Tools like Figma, Sketch, and Affinity Designer are ideal for creating early concept art for game UI. These platforms make it easy for designers to share their work with the rest of the team and iterate quickly. Figma and Sketch are built around team collaboration, while Affinity Designer and Krita are more feature-rich and individualized. All excel at quick experimentation.
Once the UI’s look and feel have been decided upon, it’s time to fine-tune the design in a program like Photoshop, Illustrator, or Adobe XD. Photoshop is still the standard for game UI design. UI elements are nearly always presented in a pixel format, and Photoshop is full of features for making minuscule changes to pixelated images. It’s especially useful for mobile games, which require optimizing many PNGs and JPGs.
Illustrator is mainly used in the rarer cases of vectorized UI artwork. Adobe XD is another vector-based tool that’s geared toward making websites and interactive mobile apps, but is no longer actively supported by Adobe. After Effects is helpful for creating UI/UX mockups before finishing the design in Photoshop.
What is an effective game UI design course?
An effective game UI design course will focus on both player experience and design intent. The truly good UI design courses cover the key user interface and user experience design principles while also teaching teamwork skills. Game UI designers need to understand how to create menus and overlays that are both functional and scenic—while also responding to feedback and adjusting their style. Emily Carr University’s UX/UI Design program’s introductory UI Design Foundations Micro-Certificate course is one of many helpful places to start.
YouTube isn’t the most interactive resource, but it offers a huge variety of perspectives on UI design. Videos from newer devs offer helpful tips for beginners, while experienced devs and studio-run channels are free to go in–depth with specific subtopics across many videos.
Most of the larger online platforms have free courses available to try immediately. The majority offer subscription plans with extra features and course options. It’s wise to take at least one course covering specific software—proficiency in at least one of Figma, Unreal Engine tools, or Adobe XD, Illustrator, or Photoshop is valuable background experience for any UI artist. Check the current UI/UX design courses being offered at each of the larger platforms below.
- Coursera is the best option for gaining university-level proficiency in a specific subfield, including game UI design. Coursera works with real universities to create its certificate programs. It’s also one of the more expensive options, but has more than enough free courses for you to start learning the basic principles of game UI design.
- Udemy has video lessons and focuses more on specific skills than more structured lesson plans. Both beginners and experienced UI designers can benefit from Udemy’s large selection of game UI design courses.
- Skillshare is, as the name implies, a platform for individual designers to share their skill sets with each other. Skillshare has a large pool of video courses available for a monthly subscription fee. It offers more guidance and resources than many of the free course platforms, but isn’t quite as authoritative a source as those aligned with the university curriculum.
- Codecademy lets you filter between free vs. paid courses and beginner, intermediate, and advanced topics. It’s more focused on the technical side of UI design, making it a useful complement to the more open-format platforms.
If you love it, start looking into the more advanced courses available near you and think about what kind of work you’d like to one day showcase in your portfolio. If not—you only spent a small amount of time to learn something important about yourself!
What is a game UI designer?
A game UI designer is a game artist specializing in creating a game’s interactable interfaces and menus. Game UI designers adjust the look and feel of elements in the HUD to match the rest of the experience the game is going for. Excelling at game UI designer jobs means understanding how the gameplay, art direction, and even details as minor as menu navigation sounds all enhance the player’s immersion. In other words, a UI/UX designer creates the part of the game people actually touch. They decide when the player is in control, and when they aren’t—whatever keeps them immersed in the game world.
