
{"id":25657,"date":"2023-05-12T11:39:11","date_gmt":"2023-05-12T09:39:11","guid":{"rendered":"https:\/\/careerfoundry.inbearbeitung.de\/en\/?p=25657"},"modified":"2023-05-12T13:25:34","modified_gmt":"2023-05-12T11:25:34","slug":"game-ui-design","status":"publish","type":"post","link":"https:\/\/careerfoundry.inbearbeitung.de\/en\/blog\/ui-design\/game-ui-design\/","title":{"rendered":"Game UI Design: Everything You Need To Know"},"content":{"rendered":"<p><span style=\"font-weight: 400;\">Gaming\u2014be it mobile, console, or PC\u2014is a huge, and <a href=\"https:\/\/www.statista.com\/outlook\/dmo\/digital-media\/video-games\/worldwide#:~:text=Revenue%20in%20the%20Video%20Games,to%20hit%2039.0%25%20by%202027.\" rel=\"noopener\"><span style=\"font-weight: 400;\">still growing industry<\/span><\/a>, with a multitude of opportunities for passionate and skilled<span style=\"font-weight: 400;\">\u00a0UI designers looking to break into the field<\/span>.\u00a0<\/span><\/p>\n<p><span style=\"font-weight: 400;\">But the game design industry can look unapproachable and the idea of breaking into it can seem daunting to would-be game UI designers.\u00a0<\/span><\/p>\n<p><span style=\"font-weight: 400;\">Don&#8217;t worry, we&#8217;re here to help. I<\/span><span style=\"font-weight: 400;\">f you\u2019re interested in getting into the field of game UI design, stick around.<\/span><\/p>\n<p>This guide to game UI goes hand-in-hand with the recently published <a href=\"https:\/\/careerfoundry.inbearbeitung.de\/en\/blog\/ux-design\/game-ux\/#the-game-ux-designers-role\"><span style=\"font-weight: 400;\">Game UX: The Complete Guide for 2025<\/span><\/a>. Together they\u2019ll tell you everything you need to know about game UI and UX, their respective markets, and how to break into the industry.<\/p>\n<p><span style=\"font-weight: 400;\">In this article, we\u2019ll first get an understanding of what game UI is before giving you an overview of the key interface components in game UI and the categories they fall under.<\/span><\/p>\n<p><span style=\"font-weight: 400;\">After that, we\u2019ll talk about what makes a great game UI and share some examples of these in action. Finally, we\u2019ll walk you through the current state of the game UI design market, before we wrap up with some key takeaways.<\/span><\/p>\n<p><span style=\"font-weight: 400;\">You can use this clickable menu to skip ahead to any section:<\/span><\/p>\n<ol>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><a href=\"#what-is-game-ui-design\"><span style=\"font-weight: 400;\">What is game UI design?<\/span><\/a><\/li>\n<li><a href=\"#the-game-ui-design-market\"><span style=\"font-weight: 400;\">The game UI design market and demand<\/span><\/a><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><a href=\"#game-ui-interface-components\"><span style=\"font-weight: 400;\">Interface components in game UI<\/span><\/a><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><a href=\"#what-makes-great-game-ui\"><span style=\"font-weight: 400;\">What makes great game UI?\u00a0<\/span><\/a><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><a href=\"#great-game-ui-examples\"><span style=\"font-weight: 400;\">Examples of great game UI in action<\/span><\/a><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><a href=\"#final-thoughts\"><span style=\"font-weight: 400;\">Final thoughts<\/span><\/a><\/li>\n<\/ol>\n<h2 id=\"what-is-game-ui-design\"><span style=\"font-weight: 400;\">What is game UI design?<\/span><\/h2>\n<p><span style=\"font-weight: 400;\">First things first, what is a game UI?<\/span><\/p>\n<p><span style=\"font-weight: 400;\">Put simply a game UI is an interface that\u2019s there to help players break through <\/span><a href=\"https:\/\/en.wikipedia.org\/wiki\/Fourth_wall#In_video_games\" target=\"_blank\" rel=\"noopener\"><span style=\"font-weight: 400;\">the fourth wall<\/span><\/a><span style=\"font-weight: 400;\"> (the invisible, imaginary wall that separates the game from players) and engage with the game by:<\/span><\/p>\n<ul>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><span style=\"font-weight: 400;\">Navigating through the game<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><span style=\"font-weight: 400;\">Finding the information they need\u00a0<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><span style=\"font-weight: 400;\">Accomplishing their in-game goals<\/span><\/li>\n<\/ul>\n<p><span style=\"font-weight: 400;\">A game UI isn\u2019t there to attract the player\u2019s attention. Instead, it\u2019s there to increase playability and help to build the seamless, immersive experience that makes up the best games.<\/span><\/p>\n<p><span style=\"font-weight: 400;\">It does this by creating visual cues to help players follow the right course of action in the games. These visual cues can be subtle or obvious; either way, they\u2019re there to empower players to be decisive and confident in their journey through the game.<\/span><\/p>\n<p><span style=\"font-weight: 400;\">As you\u2019ll have guessed by now, <\/span><b>game UI design is the craft of designing, building, and testing game UIs<\/b><span style=\"font-weight: 400;\">.<\/span><\/p>\n<h2 id=\"the-game-ui-design-market\"><span style=\"font-weight: 400;\">The Game UI design market and demand<\/span><\/h2>\n<p><span style=\"font-weight: 400;\">The gaming industry continues to go from strength to strength, with growth described as \u201cstunning\u201d by Ernst &amp; Young in their analysis <\/span><a href=\"https:\/\/www.ey.com\/en_us\/tmt\/what-s-possible-for-the-gaming-industry-in-the-next-dimension\" target=\"_blank\" rel=\"noopener\"><span style=\"font-weight: 400;\">What\u2019s possible for the gaming industry in the next dimension?<\/span><\/a><span style=\"font-weight: 400;\">\u00a0<\/span><\/p>\n<p><span style=\"font-weight: 400;\">Ernst &amp; Young noted a significant expansion as an \u201cestimated 2.9 billion people played a video game in 2021\u201d and \u201cglobal revenue for the industry exceeded $193 billion.\u201d They also cite a compound annual growth rate in the gaming industry of 15.6% from 2016 to 2021\u2014rapid to say the least.<\/span><\/p>\n<p><span style=\"font-weight: 400;\">Naturally, this industry robustness is good news for game UI designers. There is a strong and increasing demand for skilled game UI designers and industry salaries are generally good.<\/span><\/p>\n<h3><span style=\"font-weight: 400;\">Salary<\/span><\/h3>\n<p><a href=\"https:\/\/www.glassdoor.com\/Career\/ui-game-designer-career_KO0,16.htm\" target=\"_blank\" rel=\"noopener\"><span style=\"font-weight: 400;\">Glassdoor figures<\/span><\/a><span style=\"font-weight: 400;\"> (as of December 2023) have the average total pay for a game UI designer as <strong>$125,976<\/strong> annually. This is made up of $105,332 in base pay and $20,644 in additional pay.<\/span><\/p>\n<p><span style=\"font-weight: 400;\">They also quote a total pay range from $81K up to $199K, which will, of course, vary by experience, job level, location, company, and more.<\/span><\/p>\n<p><span style=\"font-weight: 400;\">As is normally the case, industry experience will give you an advantage when trying to get a job as a game UI designer, but it is possible to carve out opportunities without direct experience if you have the right skills, mindset, persistence, and approach.\u00a0<\/span><\/p>\n<p><span style=\"font-weight: 400;\">You can find advice on getting into game design in our <\/span><a href=\"https:\/\/careerfoundry.inbearbeitung.de\/en\/blog\/ux-design\/game-ux\/\"><span style=\"font-weight: 400;\">Complete Guide to Game UX<\/span><\/a><span style=\"font-weight: 400;\">. (Although most of the advice is in the context of breaking into game UX design, it\u2019s also applicable to game UI design.)<\/span><\/p>\n<p><span style=\"font-weight: 400;\">Now that we\u2019ve established both what game UI design is and the explosive game UI design market let\u2019s take a closer look at some of the components that can make up a game&#8217;s user interface.\u00a0<\/span><\/p>\n<h2 id=\"game-ui-interface-components\"><span style=\"font-weight: 400;\">Interface components in game UI<\/span><\/h2>\n<p><span style=\"font-weight: 400;\">Before we can begin to understand components in game UI, we first need to introduce two concepts that shape the four categories game UI components can fall into.<\/span><\/p>\n<p><b>Narrative<\/b><\/p>\n<p><span style=\"font-weight: 400;\">In simple terms, the narrative is the story that the game tells the player.<\/span><\/p>\n<p><b>The Fourth Wall<\/b><\/p>\n<p><a href=\"https:\/\/en.wikipedia.org\/wiki\/Fourth_wall#In_video_games\" rel=\"noopener\"><span style=\"font-weight: 400;\">The fourth wall<\/span><\/a><span style=\"font-weight: 400;\"> is the imaginary, invisible wall that separates the player from the space in which the game takes place. (The concept of the fourth wall massively predates gaming\u2014it\u2019s thought to have been coined by the French philosopher and art critic Denis Diderot in 1758. Fourth walls also exist in theater, television, cinema, and literature.)<\/span><\/p>\n<p><span style=\"font-weight: 400;\">But, how do narrative and the fourth wall relate to game UI components?<\/span><\/p>\n<p><span style=\"font-weight: 400;\">All game UI components are categorized based on whether or not they exist in the narrative and in the game space (behind the fourth wall).<\/span><\/p>\n<p><span style=\"font-weight: 400;\">Which category a component belongs to depends on the answers to two questions:<\/span><\/p>\n<ol>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><span style=\"font-weight: 400;\">Does the component exist in the game\u2019s story?<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><span style=\"font-weight: 400;\">Does the component exist in the game\u2019s world space?<\/span><\/li>\n<\/ol>\n<p><span style=\"font-weight: 400;\">Four categories of game UI components emerge from the answers to these questions:<\/span><\/p>\n<ul>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><span style=\"font-weight: 400;\">Non-Diegetic<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><span style=\"font-weight: 400;\">Diegetic<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><span style=\"font-weight: 400;\">Spatial<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><span style=\"font-weight: 400;\">Meta<\/span><\/li>\n<\/ul>\n<p><span style=\"font-weight: 400;\">This table will help you understand how game UI components are categorized based on these questions:<\/span><\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter wp-image-25660 size-full\" src=\"https:\/\/careerfoundry.inbearbeitung.de\/en\/wp-content\/uploads\/2023\/05\/Game-UI.jpg\" alt=\"A graph of game UI components\" width=\"1320\" height=\"736\" title=\"\" srcset=\"https:\/\/careerfoundry.inbearbeitung.de\/en\/wp-content\/uploads\/2023\/05\/Game-UI.jpg 1320w, https:\/\/careerfoundry.inbearbeitung.de\/en\/wp-content\/uploads\/2023\/05\/Game-UI-300x167.jpg 300w, https:\/\/careerfoundry.inbearbeitung.de\/en\/wp-content\/uploads\/2023\/05\/Game-UI-1024x571.jpg 1024w, https:\/\/careerfoundry.inbearbeitung.de\/en\/wp-content\/uploads\/2023\/05\/Game-UI-768x428.jpg 768w\" sizes=\"auto, (max-width: 1320px) 100vw, 1320px\" \/><\/p>\n<p><span style=\"font-weight: 400;\">Now that we\u2019ve looked at the framework behind game UI components, we\u2019ll look at each of the four categories in a little more detail.<\/span><b><\/b><\/p>\n<ul>\n<li aria-level=\"1\"><b>Non-Diegetic<\/b><\/li>\n<\/ul>\n<ul>\n<li style=\"list-style-type: none;\">\n<ul>\n<li style=\"font-weight: 400;\" aria-level=\"2\"><span style=\"font-weight: 400;\">Does the component exist in the game\u2019s world? No<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"2\"><span style=\"font-weight: 400;\">Does the component exist in the game\u2019s story? No<\/span><\/li>\n<\/ul>\n<\/li>\n<\/ul>\n<p><span style=\"font-weight: 400;\">Existing outside both the game\u2019s world and story, diegetic components are only ever seen by the player.\u00a0<\/span><\/p>\n<p><span style=\"font-weight: 400;\">None of the characters in the game are aware of these components and they play no role in the game\u2019s narrative.<\/span><\/p>\n<p><span style=\"font-weight: 400;\">But their purpose is vital. They help the player track their performance or progress and non-diegetic components include things like point tables or stats meters, menu screens, and health bars.<\/span><\/p>\n<p><span style=\"font-weight: 400;\">Designing non-diegetic components soundly and placing them in context is crucial to a game\u2019s playability.<\/span><\/p>\n<p><span style=\"font-weight: 400;\">Especially in fast-paced games, non-diegetic components need to be positioned carefully so as not to interrupt a player\u2019s sense of immersion.<\/span><br \/>\n<b><\/b><\/p>\n<ul>\n<li aria-level=\"1\"><b>Diegetic<\/b><\/li>\n<\/ul>\n<ul>\n<li style=\"list-style-type: none;\">\n<ul>\n<li style=\"font-weight: 400;\" aria-level=\"2\"><span style=\"font-weight: 400;\">Does the component exist in the game\u2019s world? Yes<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"2\"><span style=\"font-weight: 400;\">Does the component exist in the game\u2019s story? Yes<\/span><\/li>\n<\/ul>\n<\/li>\n<\/ul>\n<p><span style=\"font-weight: 400;\">Existing in both the game\u2019s world and story, diegetic components can be seen or heard by characters in the game and serve a purpose in the narrative.<\/span><\/p>\n<p><span style=\"font-weight: 400;\">Diegetic components include things like holograms, phones with visible screens, and speedometers. They\u2019re usually seen in the game\u2019s world on a small scale, which can make them difficult for the player to view.<\/span><\/p>\n<p><span style=\"font-weight: 400;\">Because of this, some handheld diegetic components, such as maps, can be toggled to a full-screen view. Doing this makes them non-diegetic, as they no longer occupy the game space and the character is no longer aware of them.<\/span><\/p>\n<p><span style=\"font-weight: 400;\">Badly designed non-diegetic components are one of the biggest reasons for poor playability as they can frustrate and confuse players.<\/span><br \/>\n<b><\/b><\/p>\n<ul>\n<li aria-level=\"1\"><b>Spatial<\/b><\/li>\n<\/ul>\n<ul>\n<li style=\"list-style-type: none;\">\n<ul>\n<li style=\"font-weight: 400;\" aria-level=\"2\"><span style=\"font-weight: 400;\">Does the component exist in the game\u2019s world? Yes<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"2\"><span style=\"font-weight: 400;\">Does the component exist in the game\u2019s story? No<\/span><\/li>\n<\/ul>\n<\/li>\n<\/ul>\n<p><span style=\"font-weight: 400;\">Spatial components exist in the game\u2019s world, but not in the game\u2019s story. This means the player can see them on the screen in the game space, but the characters can\u2019t, and they don\u2019t serve a purpose in the narrative.<\/span><\/p>\n<p><span style=\"font-weight: 400;\">Things like text labels, arrows showing where a thrown object will land, and character outlines showing who enemies are, are all examples of spatial components.<\/span><\/p>\n<p><span style=\"font-weight: 400;\">Spatial components are an important part of overall playability. As visual aids they guide the player towards their next action, whether it\u2019s selecting an object, approaching a landmark, or choosing the correct path.<\/span><b><\/b><\/p>\n<ul>\n<li aria-level=\"1\"><b>Meta<\/b><\/li>\n<\/ul>\n<ul>\n<li style=\"list-style-type: none;\">\n<ul>\n<li style=\"font-weight: 400;\" aria-level=\"2\"><span style=\"font-weight: 400;\">Does the component exist in the game\u2019s world? No<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"2\"><span style=\"font-weight: 400;\">Does the component exist in the game\u2019s story? Yes<\/span><\/li>\n<\/ul>\n<\/li>\n<\/ul>\n<p><span style=\"font-weight: 400;\">Meta components don\u2019t exist in the game\u2019s world but do exist in the game\u2019s story.<\/span><\/p>\n<p><span style=\"font-weight: 400;\">Examples of meta components include things like scrolling text and colored overlays to indicate changing health levels.<\/span><\/p>\n<p><span style=\"font-weight: 400;\">While some meta components are subtle, others are deliberately prominent. For those of you who play action and adventure games, the experience of taking damage and your field of vision getting blurred, shaken, or discolored might be familiar. These changes are indicated by meta components.<\/span><\/p>\n<p><span style=\"font-weight: 400;\">Now we\u2019ve looked at the four categories of game UI components, we\u2019ll quickly introduce you to the heads-up display, or HUD.\u00a0<\/span><\/p>\n<h3><span style=\"font-weight: 400;\">What is a heads-up display?\u00a0<\/span><\/h3>\n<p><a href=\"https:\/\/www.sketch.com\/blog\/game-ui-design\/\" target=\"_blank\" rel=\"noopener\"><span style=\"font-weight: 400;\">Sketch describes the HUD<\/span><\/a><span style=\"font-weight: 400;\"> as \u201can overlay that houses all sorts of UI elements\u201d and \u201cwhere the player will find most of the information they\u2019re looking for as they play the game.\u201d<\/span><\/p>\n<p><span style=\"font-weight: 400;\">The HUD, which takes its name from the heads-up display in modern aircraft, is essential to playability.<\/span><\/p>\n<p><span style=\"font-weight: 400;\">HUDs can exist both during gameplay and when the game is paused.<\/span><\/p>\n<p><span style=\"font-weight: 400;\">This example from Gran Turismo 7\u2013with annotations courtesy of the <\/span><a href=\"https:\/\/www.gran-turismo.com\/us\/gt7\/manual\/race\/02\" rel=\"noopener\"><span style=\"font-weight: 400;\">GT7 Online Manual<\/span><\/a><span style=\"font-weight: 400;\">\u2013shows a complex in-game HUD.<\/span><\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter wp-image-25716 size-full\" src=\"https:\/\/careerfoundry.inbearbeitung.de\/en\/wp-content\/uploads\/2023\/05\/gta.jpg\" alt=\"A screenshot of Gran Turismo 7, famous for its complex HUD \" width=\"1600\" height=\"900\" title=\"\" srcset=\"https:\/\/careerfoundry.inbearbeitung.de\/en\/wp-content\/uploads\/2023\/05\/gta.jpg 1600w, https:\/\/careerfoundry.inbearbeitung.de\/en\/wp-content\/uploads\/2023\/05\/gta-300x169.jpg 300w, https:\/\/careerfoundry.inbearbeitung.de\/en\/wp-content\/uploads\/2023\/05\/gta-1024x576.jpg 1024w, https:\/\/careerfoundry.inbearbeitung.de\/en\/wp-content\/uploads\/2023\/05\/gta-768x432.jpg 768w, https:\/\/careerfoundry.inbearbeitung.de\/en\/wp-content\/uploads\/2023\/05\/gta-1536x864.jpg 1536w\" sizes=\"auto, (max-width: 1600px) 100vw, 1600px\" \/><\/p>\n<p><span style=\"font-weight: 400;\">Amongst the 25 UI elements listed you\u2019ll find examples of diegetic, non-diegetic, and meta components:\u00a0<\/span><\/p>\n<ul>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><b>Diegetic:<\/b><span style=\"font-weight: 400;\"> The Rear-view Mirror (3) and Speedometer (15) are diegetic components as they can be seen by the character (the driver) and they serve a purpose in the game\u2019s narrative.<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><b>Non-diegetic:<\/b><span style=\"font-weight: 400;\"> The Braking Suggestion (11) is an example of a non-diegetic component. It can be seen by the player, but not the character, and it doesn\u2019t exist in the game space or serve a purpose in the narrative.<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><b>Meta:<\/b><span style=\"font-weight: 400;\"> The Position Indicator (8) &amp; Fastest Lap Notification (9) are classic examples of meta components, as both serve a purpose in the game\u2019s narrative, but don\u2019t exist in the game space.<\/span><\/li>\n<\/ul>\n<p><span style=\"font-weight: 400;\">As this example from GT7 shows, players might need lots of different pieces and types of information while they play the game. This is where great game UI becomes a game changer.<\/span><\/p>\n<h2 id=\"what-makes-great-game-ui\"><span style=\"font-weight: 400;\">What makes great game UI?\u00a0<\/span><\/h2>\n<p><span style=\"font-weight: 400;\">Understanding what makes great game UI brings to mind a quote from <\/span><a href=\"https:\/\/jmspool.medium.com\/\" target=\"_blank\" rel=\"noopener\"><span style=\"font-weight: 400;\">Jared Spool<\/span><\/a><span style=\"font-weight: 400;\">, the well-known usability expert and the founding principal of User Interface Engineering (UIE):<\/span><\/p>\n<p><span style=\"font-weight: 400;\">&#8220;Good design, when it&#8217;s done well, becomes invisible. It&#8217;s only when it&#8217;s done poorly that we notice it. Think of it as a room&#8217;s air conditioning. We only notice it when it&#8217;s too hot, too cold, making too much noise, or the unit is dripping on us. Yet, if the air conditioning is perfect, nobody says anything and we focus, instead, on the task at hand.&#8221;<\/span><\/p>\n<p><span style=\"font-weight: 400;\">Spool was talking about design in a much broader sense than game UI of course.<\/span><\/p>\n<p><span style=\"font-weight: 400;\">But everything he said resonates if you\u2019re trying to understand what makes a game UI great. A few tweaks to his quote illustrate the point:<\/span><span style=\"font-weight: 400;\"><br \/>\n<\/span><span style=\"font-weight: 400;\"><br \/>\n<\/span><span style=\"font-weight: 400;\">&#8220;Good game UI, when done well, becomes invisible. We only notice it when it&#8217;s distracting us, confusing us, or is too difficult to find or use. If the game UI is perfect, nobody says anything and we focus, instead, on the task at hand\u2013gaming.\u201d<\/span><\/p>\n<p><span style=\"font-weight: 400;\">Just as nobody uses their mobile banking app because they love analyzing the nuances of the UI, no one games to assess game UI.\u00a0<\/span><\/p>\n<p><span style=\"font-weight: 400;\">Instead, like mobile banking app UIs, they\u2019re merely a function\u2013albeit a crucial one\u2013to support user experience, or in this case, playability.<\/span><\/p>\n<p><span style=\"font-weight: 400;\">Because of this, a great game UI is:<\/span><\/p>\n<ul>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><b>Unintrusive<\/b><span style=\"font-weight: 400;\">: It doesn\u2019t get in the way or distract from the gameplay, but masters space efficiency to give players information smoothly.<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><b>Clear:<\/b><span style=\"font-weight: 400;\"> It doesn\u2019t frustrate or confuse players but is informative without being overly complex.<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><b>Convenient:<\/b><span style=\"font-weight: 400;\"> It\u2019s not difficult to find or use, but is a natural, usable, and accessible part of the experience.<\/span><\/li>\n<\/ul>\n<p><span style=\"font-weight: 400;\">Now that we\u2019ve gone over what makes a great game UI, it\u2019s time to take a look at a couple of examples in action.<\/span><\/p>\n<h2 id=\"great-game-ui-examples\"><span style=\"font-weight: 400;\">Examples of great game UI in action<\/span><\/h2>\n<p><span style=\"font-weight: 400;\">We\u2019re now going to take a look at two examples of great game UI from very different eras.<\/span><\/p>\n<h3><span style=\"font-weight: 400;\">The Legend of Zelda: Ocarina of Time<\/span><\/h3>\n<p><span style=\"font-weight: 400;\">The Legend of Zelda: Ocarina of Time remains the first love for many gamers of a certain generation and critics would agree\u2014it\u2019s been rated as the best game ever by many publications and regularly features on top 10 or 100 lists.<\/span><\/p>\n<p><span style=\"font-weight: 400;\">Its UI introduced features such as the target lock system (this was known as Z-targeting in Ocarina of Time) and context-sensitive buttons. Both of these are now common UI components in the action and adventure genre.<\/span><\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter wp-image-25718 size-full\" src=\"https:\/\/careerfoundry.inbearbeitung.de\/en\/wp-content\/uploads\/2023\/05\/octarina.jpg\" alt=\"The Legend of Zelda: Ocarina of Time introduced innovative new UI elements\" width=\"640\" height=\"480\" title=\"\" srcset=\"https:\/\/careerfoundry.inbearbeitung.de\/en\/wp-content\/uploads\/2023\/05\/octarina.jpg 640w, https:\/\/careerfoundry.inbearbeitung.de\/en\/wp-content\/uploads\/2023\/05\/octarina-300x225.jpg 300w\" sizes=\"auto, (max-width: 640px) 100vw, 640px\" \/><\/p>\n<p><em><span style=\"font-weight: 400;\">Source: <\/span><a href=\"https:\/\/tropedia.fandom.com\/wiki\/Camera_Lock-On\" rel=\"noopener\"><span style=\"font-weight: 400;\">Tropedia: Camera Lock-On<\/span><\/a><\/em><\/p>\n<p><span style=\"font-weight: 400;\">This example shows the target lock system in action. A groundbreaking development at the time, it allowed the player to focus their view on an object with a tap of a button, and move around freely while keeping the object in sight.\u00a0<\/span><\/p>\n<p><span style=\"font-weight: 400;\">The target lock system was an example of a spatial game UI component, as it was present in the game space, but not in the game story.\u00a0<\/span><\/p>\n<p><span style=\"font-weight: 400;\">In this case, Link couldn\u2019t see the actual target lock and it didn\u2019t serve a purpose in the story, but it did exist in the game space. It was a visual aid for players that helped create a more immersive, enjoyable gaming experience for players.<\/span><\/p>\n<p><span style=\"font-weight: 400;\">(For more on Ocarina of Time and a broader history of the Zelda series up to 2012, take a look at <\/span><a href=\"https:\/\/www.ign.com\/articles\/2010\/08\/27\/ign-presents-the-history-of-zelda?page=5\" rel=\"noopener\"><span style=\"font-weight: 400;\">IGN Presents the History of Zelda<\/span><\/a><span style=\"font-weight: 400;\">.)<\/span><\/p>\n<p><span style=\"font-weight: 400;\">Fast-forward twenty years and another outstanding game UI comes onto the scene, groundbreaking in whole new ways.\u00a0\u00a0<\/span><\/p>\n<h3><span style=\"font-weight: 400;\">Dead Space<\/span><\/h3>\n<p><span style=\"font-weight: 400;\">Akhil Dakinedi, in his ultra-sharp analysis of the <\/span><a href=\"https:\/\/medium.com\/super-jump\/top-5-best-video-game-uis-db941d6a9357\" rel=\"noopener\"><span style=\"font-weight: 400;\">Top 5 Best Video Game UIs<\/span><\/a><span style=\"font-weight: 400;\">, describes Dead Space as \u201cthe poster child flagship example of how a diegetic UI can truly harness the power of the gaming medium\u201d.<\/span><\/p>\n<p><span style=\"font-weight: 400;\">Pointing to how Dead Space has taken inspiration from Metroid Prime\u2019s HUD, he highlights how it extracts the UI out of the helmet directly into the game UI, so the components live in the world around the player.<\/span><\/p>\n<p><span style=\"font-weight: 400;\">This results in menus being holographic pop-up displays, with a nod to sci-fi movies. As interaction with these menus doesn\u2019t pause gameplay, UI interaction happens in real-time.<\/span><\/p>\n<p><span style=\"font-weight: 400;\">Dead Space\u2019s sophisticated diegetic UI in action:<\/span><\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter wp-image-25717 size-full\" src=\"https:\/\/careerfoundry.inbearbeitung.de\/en\/wp-content\/uploads\/2023\/05\/dead-space.jpg\" alt=\"A screenshot of Dead Space, recongized as one of the best game ui designs\" width=\"1600\" height=\"900\" title=\"\" srcset=\"https:\/\/careerfoundry.inbearbeitung.de\/en\/wp-content\/uploads\/2023\/05\/dead-space.jpg 1600w, https:\/\/careerfoundry.inbearbeitung.de\/en\/wp-content\/uploads\/2023\/05\/dead-space-300x169.jpg 300w, https:\/\/careerfoundry.inbearbeitung.de\/en\/wp-content\/uploads\/2023\/05\/dead-space-1024x576.jpg 1024w, https:\/\/careerfoundry.inbearbeitung.de\/en\/wp-content\/uploads\/2023\/05\/dead-space-768x432.jpg 768w, https:\/\/careerfoundry.inbearbeitung.de\/en\/wp-content\/uploads\/2023\/05\/dead-space-1536x864.jpg 1536w\" sizes=\"auto, (max-width: 1600px) 100vw, 1600px\" \/><\/p>\n<p><em><span style=\"font-weight: 400;\">Source: <\/span><a href=\"https:\/\/www.gameuidatabase.com\/uploads\/Dead-Space02052021-101013-77108.jpg\" rel=\"noopener\"><span style=\"font-weight: 400;\">Game UI Database<\/span><\/a><span style=\"font-weight: 400;\">\u00a0<\/span><\/em><\/p>\n<p><span style=\"font-weight: 400;\">Because of this extraction of the UI directly into the game, most of the UI elements in the game are diegetic, as they appear both in the game space and the game story.\u00a0<\/span><\/p>\n<p><span style=\"font-weight: 400;\">And Dead Space\u2019s game UI design is so widely-respected because it blends seamlessly with the game\u2019s world and narrative.<\/span><\/p>\n<p><span style=\"font-weight: 400;\">Now that we\u2019ve looked at two examples of great game UI in action, it\u2019s time to give you an overview of the game UI design market.<\/span><\/p>\n<h2 id=\"final-thoughts\"><span style=\"font-weight: 400;\">Final thoughts <\/span><\/h2>\n<p><span style=\"font-weight: 400;\">If you\u2019re aiming to be a game <a href=\"https:\/\/careerfoundry.inbearbeitung.de\/en\/blog\/ui-design\/how-to-become-a-ui-designer\/\"><span style=\"font-weight: 400;\">UI designer<\/span><\/a> there\u2019s never been a better time to carve out your career in the industry.<\/span><\/p>\n<p><span style=\"font-weight: 400;\">You might be feeling apprehensive about getting into what can look like a daunting industry, but taking practical steps to build up your knowledge about game UI design\u2014and UI design more broadly\u2014will give you the confidence and motivation to keep going.<\/span><\/p>\n<p><span style=\"font-weight: 400;\">Immerse yourself in the subject area. Learn the components, their use cases, and their categories according to their relationship with the game story and space.\u00a0<\/span><\/p>\n<p><span style=\"font-weight: 400;\">Play a lot of games, read about them, write about them. Analyze them ferociously. Understand the history and evolution of game UI.<\/span><\/p>\n<p><span style=\"font-weight: 400;\">When it comes to applying for jobs, cast a wide net and be persistent. Ask people in the industry questions and get mentorship, if possible.<\/span><\/p>\n<p><span style=\"font-weight: 400;\">And remember, game UI design is built on the foundation of broader UI design. The principles that apply to game UI design are from UI design.\u00a0<\/span><\/p>\n<p><span style=\"font-weight: 400;\">If you\u2019re looking for a good place to get started, our <\/span><a href=\"https:\/\/careerfoundry.inbearbeitung.de\/en\/short-courses\/become-a-ui-designer\/\"><span style=\"font-weight: 400;\">free UI design course<\/span><\/a><span style=\"font-weight: 400;\"> might be the perfect jump-off point. To learn more, <a href=\"https:\/\/careerfoundry.inbearbeitung.de\/en\/connect\/ui-design-contact-advisor\/\"><span style=\"font-weight: 400;\">speak directly with one of our program advisors<\/span><\/a>.<\/span><\/p>\n<p>If you found this article useful, you might also be interested in:<\/p>\n<ul>\n<li><a href=\"https:\/\/careerfoundry.inbearbeitung.de\/en\/blog\/ui-design\/how-to-become-a-ui-designer\/\" target=\"_blank\" rel=\"noopener\">How to Become a User Interface (UI) Designer: A Step-by-Step Guide for 2025<\/a><\/li>\n<li><a href=\"https:\/\/careerfoundry.inbearbeitung.de\/en\/blog\/ux-design\/game-ux\/\" target=\"_blank\" rel=\"noopener\">What is Game UX? The Complete Guide for 2025<\/a><\/li>\n<li><a href=\"https:\/\/careerfoundry.inbearbeitung.de\/en\/blog\/ui-design\/how-much-will-i-earn-as-a-ui-designer\/\" target=\"_blank\" rel=\"noopener\">How Much Will I Earn as a UI Designer? Your Salary Guide for 2025<\/a><\/li>\n<\/ul>\n","protected":false},"excerpt":{"rendered":"<p>What is game UI design and how do you become a game UI designer? Discover everything about this rising industry star of 2024 and beyond.<\/p>\n","protected":false},"author":24,"featured_media":25715,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"_lmt_disableupdate":"yes","_lmt_disable":"","footnotes":""},"categories":[4],"tags":[91],"class_list":["post-25657","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-ui-design","tag-category-page"],"acf":{"homepage_category_featured":false,"cards_inner_programs_lists_left":"","cards_inner_programs_lists_right":"","related_plan_cards":""},"modified_by":"Rash SEO","_links":{"self":[{"href":"https:\/\/careerfoundry.inbearbeitung.de\/en\/wp-json\/wp\/v2\/posts\/25657","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/careerfoundry.inbearbeitung.de\/en\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/careerfoundry.inbearbeitung.de\/en\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/careerfoundry.inbearbeitung.de\/en\/wp-json\/wp\/v2\/users\/24"}],"replies":[{"embeddable":true,"href":"https:\/\/careerfoundry.inbearbeitung.de\/en\/wp-json\/wp\/v2\/comments?post=25657"}],"version-history":[{"count":10,"href":"https:\/\/careerfoundry.inbearbeitung.de\/en\/wp-json\/wp\/v2\/posts\/25657\/revisions"}],"predecessor-version":[{"id":30884,"href":"https:\/\/careerfoundry.inbearbeitung.de\/en\/wp-json\/wp\/v2\/posts\/25657\/revisions\/30884"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/careerfoundry.inbearbeitung.de\/en\/wp-json\/wp\/v2\/media\/25715"}],"wp:attachment":[{"href":"https:\/\/careerfoundry.inbearbeitung.de\/en\/wp-json\/wp\/v2\/media?parent=25657"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/careerfoundry.inbearbeitung.de\/en\/wp-json\/wp\/v2\/categories?post=25657"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/careerfoundry.inbearbeitung.de\/en\/wp-json\/wp\/v2\/tags?post=25657"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}