So You Wanna Make Games?? | Episode 9: User Interface Design
Mech targeting systems. Helmet displays. Ammo counters. Character action icons. District management menus. Spaceship diagnostics. Chair telekinesis indicators. Gun crafting interfaces and murder wheels. These are all UI or user interfaces. and they’re created by UI designers. In this video, we’re going to learn all about UI design, how it relates to visual design and how it differs from UX design. Okay, let’s get started. User interface, or UI, is the interface through which a player interacts with a game. UI is also sometimes called UX, but they do mean different things. I think… Let me just look up which is which real quick. Hold on… Alright. UI is the user interface itself or basically all the visual elements that make up the user interface. UX, however, is short for user experience. The user experience is the entire information architecture of a game. Basically, it’s about where to store all the information in a game and how that information is accessed by the player. In practice, a UX designer usually does their work first. They focus on making the interface a good experience, making the interface a good experience, helping players get the information they need with the fewest necessary actions. They essentially cultivate the flow, or journey, a player takes when interacting with the various parts of the game. UI designers take that mapped out experience and build out the actual visuals and detail, ideally making the flow even more intuitive and easy for the player to navigate. Ultimately, both UI and UX have to work together very closely and sometimes they’re even combined into the same role. Alright. Let’s get into the nuts and bolts of the craft. UI design follows the guiding principles of visual design. Visual design can refer to many, many things: logos, typography packaging, print layout, web design, basically anything that can relate to the aesthetics of a product. But at its core, visual design is about presenting complex information in a simple way that your audience can intuitively understand and act upon. And that’s why understanding your audience is so important. In order to design a system that your audience can easily and intuitively navigate, you need to really understand who that audience is and how they think. What kind of things do they connect with? How and where will they be experiencing the UI? What information are they looking for? And when? For example, playing a game on a PC is very different than playing the same game on mobile or console. If you look at the “Fortnite” UI, we can see how these differences change the PC vs mobile interface. What about game genre? Some genres require robust UI that makes a ton of information easily accessible and clear. Take a trading card game, for example. It’s 90% UI. Oh and 4X games and simulation games they have tons of information, and so they need a lot of UI. Other genres, like more narrative games, might have a minimal UI if the player doesn’t require as much real-time information. But UI is a lot more than just the HUD or overlay on top of the gameplay. UI designers have to design stuff like level maps, character select screens, inventory screens, level editors, sophisticated skill trees, lore and web experiences, quest windows, and tons of other stuff. How do you make it all work together? A unique thing about visual design, especially with UI, is that we’re responsible for creating an ecosystem for the whole game. The goal is for every part of the game experience to feel unified and share a high level flow. That means there should be consistency throughout the game experience. There needs to be rules for the meaning behind different colors, text, position on screen, Everything we do affects everything else in the game. We can look at development of the League Client Update as an example. We started the client redesign by defining the core thematic behind our UI. We then came up with very specific rules and guidelines for the style, like typography, iconography, color, shape language, animation, everything you see and interact with in the client. One of the core parts of the thematic is hextech magic. Incorporating hextech into the client was a chance to define and reinforce the look and feel. All the visual design decisions we made had this in mind. It seems like layout is a huge part of visual design and UI. Out of all the infinite possibilities, how do you go about choosing a layout? Layout’s like a puzzle and figuring out all the different ways it can come together is one of the most fun parts of visual design. Layout is critical because it affects the way a viewer understands information on the screen For example, your brain makes associations based on things like proximity of words and images. Yeah, like putting a bar next to an enemy name tells us that that’s the enemy’s health bar. Whereas putting an experience counter next to a bar tells us we are still very far from level 6. It also affects how quickly the viewer is able to navigate that information. And in games, we often need to get critical information very quickly. [INTENSE SHOUTCASTING] It seems like if you’re really into layout and arranging visual elements, visual design and UI design might be perfect for you and the problems are really open ended. There’s no single right answer and balancing familiarity and intuitiveness with creative arrangements is super exciting. You may have noticed that UI and visual design in games is not static. It’s always moving, and changing, and updating, as the player interacts with it. And, that’s where motion graphics, aka “MoGraph,” comes into play. If visual design aims to achieve communicating a message that is clearly understood, then motion aims to have that message clearly felt. So, is mograph just adding polish to make something feel good? Polish and flare are fun and important, but you can’t polish a bad design into functioning the way you want. For both visual design and mograph, the design process puts the desired functionality and experience first. And the art itself, whether visual design elements or mograph animation, should always compliment the information being delivered. That makes sense. It’s too bad that motion graphics doesn’t have like a list of goals or something we could follow. UI motion is motivated by five goals. I did not know that. Responsiveness: Interactions are fast. Clicking feels fluid and effortless. Intention: Focus is led towards key actions and pathways as needed. Awareness: Elements adaptively respond from their location. Consistency: Element types and actions use repeated motion patterns to establish familiar behaviors. Physical intuition: Elements are stylized to fit the game’s brand and feel natural. For instance, what better way to open up the Ammonomicon than with a bullet? Their movement is affected by forces like friction and scale. Yeah, like the style of movement in this Rift Rivals login screen feels like paper. Whereas the sweeping parallax motion of this World Championships login screen gives the sense of grandeur and epicness in scale. Alright. We just covered a lot. But before we end the video and go to the advice section, let’s just refresh ourselves on the overall workflow of UI. It starts with the UX designer. They’re figuring out the overall flow of information that the user is going to experience. UI designers take that flow and build the visual design elements, keeping things like the shape, the color, the layout, the values, all consistent throughout the entire game’s ecosystem. Throughout this, they’re working with motion graphics artists to reinforce the messaging of the information, and to guide players and give them feedback based on how they’re interacting with the interface. Alright. You know what time it is. Being a visual designer is more than defining the aesthetics for the game. It’s about problem solving. So, if you are interested in being a visual designer, go play a game and find the pain points, and maybe you can figure out a solution for that. Somebody once said that good artists copy and great artists steal… That ain’t advice….alright… One of the ways that I learn is by copying artists that I really loved and was really interested in their work. Along the way I just learned so many techniques and programs that just allowed me to grow so much faster than if I would have started with a blank canvas. So if you’re interested in something, find something that you love already in terms of mograph, if it’s that, and copy that and see where it takes you. And, in the end you’ll probably throw your own twist on it. And, that’s a great place to be. I never thought I’d work in games, though one day I decided I might as well try it. I took a bunch of my favorite games and I recreated their HUDs and their menus. It wasn’t perfect but I actually really enjoyed it and I learned so much. And, that’s when I realized trying is half the battle. You should never be afraid of trying because once you’ve done it, you realize you’ve taken the biggest step. And from that point on, it’s just a matter of polishing it. If you want to be a game developer, just start working on it now. The biggest difference between people that you probably look up to who are super talented, is really just time and effort. There’s not these magical people who appear with like immense talent. They actually spend lots of time and hard work and that’s how they get to where they are. Just get going today. Start painting, drawing, animating, coding, whatever it is you want to do. Just start working at it right now. The best advice I can give you guys is to try new things and make mistakes, like, I make them all the time, and at the end of the day that’s what’s going to help you get to the final line and know what good looks like. Real art is knowing which mistakes to keep.