Art Direction for AAA UI

So, thanks everyone for attending this session on art direction for triple A UI. My name's Omay Younis. I'm the lead graphic designer at DICE LA. Uh just quick show of hands, who here is a graphic designer or UI artist? Okay, quite a few of you. Uh art directors? Damn. Uh designers? Coders? All right, okay. Producers? Anything else I've missed out? Nice. Uh so, okay, let's get started. Uh just a couple of friendly reminders, uh please silence your really old phones so they don't make noise. Uh and also a reminder to fill out your surveys after this uh presentation's

done. So, ahlan wa sahlan. Which loosely translates to welcome. Willkommen. Bienvenido. Yōkoso. Uh hopefully I pronounced those correctly. Um so, we're going to be talking about more of this later. But just a quick note, you can see how, you know, in different languages the same word has different length. And when we talk about localizations, this is going to become more important. So, today's session we've got a lot to cover. Uh hopefully this is going to be like a reference manual for you guys, so you can basically refer back to it when it gets uploaded to GDC Vault. Um but I also want this talk to be interactive, so we're going to be asking for like a couple of sections where get the audience to participate. Um we're not going to be focusing on mobile or app development. This is mainly for triple A. So, it's the big screen format.

Uh mainly console and PCs. Uh but before we jump in, I'm just going to give you a brief intro about me. So, I was born and raised in London. It's just there on the map. Um and I'm the youngest of four brothers. My dad made our first computer with his own hands. I don't know what it was called, but back in the day you basically had to solder chips on the motherboard. Um and but I do remember the C64, the Amiga. Uh playing games on them was like my childhood. And using Deluxe Paint 2, which kind of got me interested in game art. Couple of years back, I moved over 5,500 miles to Los Angeles. And I've been working in the games industry over here since then. Uh here's a pic of me when I first started in the industry. I was young, I was passionate, bearded. And uh this is me with Kojima when I was working at Kojima Productions today.

Uh you develop pretty fast in the industry. So, I've been working in the industry for 10 years, over 10 years. Uh these are some of the games I've worked on and some of the studios. The latest game I've been working on is Battlefield 1. I worked on Kojima Productions. I worked on Metal Gear Solid 5 at Kojima Productions. And before that I was working at Crytek in the UK uh working on the Crysis franchise. So, just to give you a bit of a flavor of what I do, um I've put together a small showreel. Uh let's have a look at that.

So, what do you think? Nice. So, let's move on to some terms now. Let's get into what this talk is about. Um so, a lot of people think that UI and UX are the same thing, but they're not exactly the same thing. Uh when it comes to UX, it's actually This is a big thing. It's actually from the point of where the user buys your game at the store all the way through to when they play the game. So, it's like the end-to-end interaction. Um but UI kind of still is part of that UX, um the user experience. Uh UI is more or less the in-game stuff. So, it's the UI, the menus, which you probably know, that's why you're here for this talk. Uh but the UI is also the visual identity for the game, and it conveys the style and tone in like every detail. So, the information that the UI does is

actually is presenting information to the player, whether it's visual, sound, touch, vibration. Um and all of this essentially boils down to player feedback. So, any event or any message in the game that you need to communicate to the player is what UI kind of does. Um and generally when people think about UI, they think of it as the HUD, the heads-up display, which is when you're actually playing the game, the core gameplay. Uh but I like to split it up into two things, so you know, we have the front end and the menus, and then you also have the HUD in the gameplay. And this kind of has a different approach. So, each one of these uh the HUD is more like context-based, where, you know, you're you're talking about messaging, you know, the things need to be instant and recognizable to the player. And the front end is all about the navigation. It's more about like information architecture and how your game is structured. So, people probably know that design isn't linear. It's like a mess, and you'd go back and forth between like everything that you

do. Um you know, you'd iterate, you'd refine, um sometimes you just scrap ideas completely. Um but we're trying to make this a lot easier by looking at art direction and also cognitive design. And we want to help like streamline that process if we can. And basically go for form and function um to kind of guide us along the road. But why is this important? You know, when we're looking at our games, we want our players to see UI in context, and we also want it to be transparent. So, you don't want to always show UI like, you know, "Hey, here's UI, blah blah blah blah blah." You know, it's in your face. So, you want UI to be subtle. Um it's kind of like utility versus aesthetics. You also want it to look nice, but you also want to make sure that it's not always front and center. You don't want people playing your UI, you want people to play the game, and the UI is there to support these actions. Um so, without UI art direction, you end up with something like this.

You know, everything on is on screen, everything's calling for attention. There's no consistent style. There's like 500 fonts just in this one screenshot. Um so, you want to make sure that, you know, there's no like, "Hey, your health is low." Throwing on next-gen effects doesn't help it either. So, you know, you need to be subtle, make sure that everything works together. Uh so, just reset your brain by just looking at this dot in the center. Just ignore what came before. So, we need to get our bearings. We need to look and see where we want to go. Um how do we attempt to create a UI that's visually appealing and usable? Uh but we also want to keep in mind the brand identity and the style, and we want it to be unique. Uh so, we're going to be thinking big here. This is like the broad strokes. This is like the planning phase. So, essentially with games, we want to design for the five senses. And the more senses you kind of design for, the more

Think blue. This one out there. Uh so, there's an excellent TED Talk uh by Jin Soop Lee, where he talks about designing for the five senses. It's not games related, but it's still extremely interesting to see. Um the last two, taste and smell, they're not really uh mainstream at the moment, so we're not going to concentrate on those. Games do focus on touch and the interaction, uh the sound and the sight. So, you know, in the the interaction is key to what makes games games. So, we're going to take a brief look at the platforms, understand the input methods, and translating that to our senses. Um so, touch input. We know for console, you have like a controller. It's got face buttons, so that's the way that we're interacting with our games. And we all understand how, you know, the inputs actually affect game or the UI. Um you need to have release state for buttons and prompts and that kind of thing. So, that's why it's important to

understand what the controller can do and how you want to represent that information on screen. Uh, same for PC and keyboard. The PC master race. So, you know, the mouse has similarities to the touch screen, also the analog controller, um, but it's still unique and you want to try and cater for this as well. We are trying to think of like, you know, everyone. You want to try and make your game as inclusive as possible. Uh, sound is 50% of the experience. You know, you can go and watch your favorite movies and just turn the volume to zero. It doesn't have quite the same impact. So, sound is actually a huge part of UI, but that's not my area of expertise. So, I'm not going to talk about that. Uh, we're going to be focused on the vision. The visual, sorry. Um, and what makes a good visual or image. So, we need to understand a couple of key areas of theory and uh, how we can relate this to our design and how we can make our images more appealing. So, this is an image of Blade Runner

uh, 2049 and that movie won awards for its cinematography and there's a reason why, you know, this image is actually really nice and pleasing to the eye. Um, you know, composition, uh, the style, the mood, the tone, the color, the grading. Uh, you have a central focus. You have these parallax, uh, sorry, the perspective lines kind of leading your eye. Um, you can actually look at the image and your eye has a chance to relax and take in the imagery. Um, it also works in black and white, which is a very important feature. It's still readable. Composition is Um, so, you want to make sure that all of these, uh, components actually work in your UI as well. You know, that you can take all of this theory and apply it to UI. Uh, similarly, if you look at this image, it doesn't quite have the same impact. Even though the tones, maybe the perspective is slightly off, but there's

quite a lot for your eye to look at and that's the basis of this. You want it to basically be, um, you know, you want your eye to rest at a point. You don't want to just overload the user. You know, it's vibrant, it's saturated, but there's way too much noise. Um, you know, you want We want to understand how we perceive this information, how how we perceive uh, visuals. So, to do that, we need to understand how the eye works. So, light enters our eye um, and hits the retina. And at the back of our retina, we have a concentrated pit of rods and cones. Um, which kind of looks like this and the signals are sent to the brain. Um, the rods, they basically have a certain color. Sorry, the cones have a certain color and they're sensitive to light uh, based on like red, green, and blue. And you can see in the center of the image, uh, there's a lot of concentration of red and green and blue is towards the outer edge.

So, our eyes are actually super sensitive to red and that's really important for UI. So, we want to use red to call to attention. So, whether it's danger or whether you want, you know, bring the user's attention to something, then let's use red for that. You know, the science kind of informs how we should design UI. So, if we kind of simplify that diagram, uh, you get this. So, the center focus point is where, you know, you have red and green sensitivity and towards the outer edge, you have blue and yellow and luminance. So, when it comes to designing a UI, especially for the heads-up display, this is actually quite important. So, you know, the biology already tells us how we want to distribute the color in our designs. So, we're going to put the crucial information in the center and then towards the periphery, we want the secondary information. Um, and keep in mind for HUD layouts, you know, this is extremely important. Um, let's look at perception and how our brains actually understand what we're looking at. So,

initially, our brains will always pick up shape. So, silhouettes, you know, large bold straight, uh, shape, sorry, uh, really help make a faster imprint on a memory. The second thing is color, uh, which is connected to emotion and maybe brand association. And the third thing is the form. Uh, it takes longer for our brains to to process language and content third. So, we need to understand that, you know, this is the sequence of how our brains kind of figure out what we're looking at. Um, so, this kind of theory should help us design better. Uh, speaking of theory, Gestalt theory is actually extremely important when it comes to UI design and in design in general, um, there's a set of rules that we can follow um, to understand to make sense of like what we want to design. Um, so, these principles are based on like cognitive research and how we perceive the world through our senses.

So, closure, we have, uh, the circle, but it's not actually a circle, it's just a dotted line. But, our brains kind of perceive that as a circle because it makes It likes to close gaps. Proximity, these things are close together. So, you know, our brains are picking up that this is kind of a group, maybe. Continuity, you can see the line, even though it's broken by this horizontal line, it still feels like it flows all the way around. Similarities have the gray colored circles and squares. They kind of feel like they're a group. Um, and then you have the invert the hollow versions. Figure ground, there's even though this image is 2D, it kind of feels 3D, but you don't get a sense of what's in the foreground, what's in the background. That's what figure ground is all about. Enclosure, basically taking proximity and just having this gray box behind it, uh, you're kind of grouping those elements together using that. And then there's symmetry.

So, let's look at a game example and see how these, uh, this theory actually functions. So, this is a screenshot from Battlefield 1, the spectator mode. And you can see that the space in between is kind of forming a a closed gap by the cinematic bars at the top and bottom. Proximity of these elements next to each other form like the squad list and the, uh, icons in the center for the score score mode. Then we have continuity. So, this line, even though it's kind of broken, it feels like a continuous line going all the way across. Uh, similarity in terms of the the highlighted box with the inverted text. So, you have a white background with black text instead of a black background and white text. Figure ground, all of these elements kind of occupy the same space. There's no like Z-sorting, but we know that, you know, we need to give a certain location for these so that people can understand like where this information is laid.

Uh, enclosure, we're basically using boxes and kind of keeping things grouped together. And then we have the symmetry, basically reflecting the, uh, the squad list on the left and right. Uh, there's also some usability principles which we need to look at. Uh, so, whenever you're designing any kind of screen, uh, you don't want to have more than seven items that are unique on one screen cuz it will just get overloading for the user. Uh, you don't want your menus to be more than three levels deep. Affordances are things like buttons, sliders, check boxes. You want those to look and function like how people expect. Uh, focus area, you always want to have a focus area in your UI so that people know what they're actually looking at. Um, if you just had the screen and nothing was highlighted, people get confused. It's like, am I supposed to do something here? Did it go wrong? So, you always want to have a highlight or some kind of button to show focus area.

You want to make your state changes clear. So, you know, when you click on something, it looks different from when it's unhighlighted or unclicked. You also want to have a page flow so that your information like has a hierarchy going from like top left to bottom right. And you always want to provide helps and hints. Uh, so, let's look at this any any example here. So, this is from MGS with customization. Uh, so, you can see there's seven elements on screen here and we don't add any more because it will just get confusing for the player. Uh, the menus are like three levels deep, so you only have to click three times to get there. Buttons look like buttons, they function. Uh, you have a focus area here. This isn't a video, but this will be pulsing. State changes are obvious, so what's selected, what isn't. You have a nice page flow as well, so you can understand how that information is laid out. And we're also providing helps and hints. So, here's some, uh, cheat sheets for you guys to look at. I'm just going to

take a drink of water. You can print this out. Put it on your bathroom door. Just remind yourself of these things. So, essentially, we want to design for effective perception. Uh, but we also want to look at visual harmony and make sure that elements kind of work together. Uh, we don't want things like fighting for attention cuz that's where it gets confusing. It's like, am I supposed to click this or am I supposed to look here? Um, so, let's go into data gathering and research. So, this is kind of like doing your homework and doing your research. Uh, you basically want to understand your game, your creative direction, the art direction, your target market. Uh, you want to collaborate with all the disciplines, make sure that, you know, you speak to art, code, design. Make sure that everyone's on board and aligned when it comes to the vision of

the game. You always want to always want to ask questions. You know, what's best for the user? You know, you're making a game, but you're also making it as if you are the player. So, you want to always question like what are you doing? Is this the best way to do it? You also want to understand the visual orientation of your game. You know, what's what's the themes? What's the tone? What's the style going to be? What era are we setting this in? Cuz all of these things will play into your UI design. And we also want to think about usability like we did with those the theory, the Gestalt theory and the usability. And try and bring that into our design. You also want to go treasure hunting and basically find as many good references from movies, games, TV, mobile, rubbish on the floor, anything. Just get all of that reference and gather it together because the more reference that you have, the better it will be informing your decisions. So, yeah. Just make a folder. Right click, new folder, done.

Uh You want to be aware of design trends. Um because there's a lot of designs that come and go and you don't want your designs to fall into that trap of being like oh, that was so PS2 era. You want your designs to outlast the console generation or, you know, the hip new design for that year. You always want to challenge the status quo. But you also want to keep the brand in mind and think of the bigger picture. Even within franchises, you want to make sure that each game looks and feels unique. So, this is kind of like the crux getting into the process. This is like designing the core components of your visual identity for your game. So, we've got a lot of things to get through here, but the grid is the first one we're going to start off with. So, grids can help you establish hierarchy, navigation, flow, consistency. It'll ease users' memory load. You know,

it'll provide shortcuts so people know where things are when they go back and forth between pages. And you can apply this to the front end and also the HUD. The example here is a 20 by 13 grid, but you can make any grid that you like. Just make sure that you stick with it. This is also a golden ratio grid. So, you know, all of you guys have mobile phones and you can get those those third grids. And it kind of enhances your design. So, if you kind of place things at the intersections of all of these lines, it'll give a nice pleasing layout. You also want to keep in mind aspect ratio. So, right now we design for 16:9 screens, which is kind of like the standard across the board. But then you also want to make sure that it works on 4:3. So, you know, if people don't have the latest technology or they don't have screens that, you know, work on the used to, you need still need to make sure that they can play the game without things overlapping. You know, you want it to reformat nicely. You don't want things to get scaled in the wrong way.

But we also want to cater for the future where, you know, things got a bit crazy and people have multi-display setups or 2019. So, you want to keep these things in mind as you're designing your UI and the grids will really help with that. So, when it comes to grids, you want to keep everything within a safe frame. So, that's roughly 90% of your screen. And that's things like text, icons, things that are, you know, really important for your UI. It doesn't matter if, you know, like a flourish or some kind of like bounding box just kind of bleeds out, but it's the most important information like text and icons. You also don't need to fill up every single piece of the screen with information. So, leave some negative space for the information to kind of breathe. Let the content breathe. You also want to think about alignment. So, you know, you can see that the left-hand side has is a bit janky. But even if you have everything left aligned, make sure that,

you know, you have consistent spacing between things. You want to anchor elements as much as possible. Speaking of anchoring, so this is a screenshot from BF1. We have If you imagine that the screen is divided into these nine quadrants, and those quadrants have an anchor point. The anchor points basically are there to help you lay out your information cuz when it comes to the UI, there's a lot of information that can easily overlap and you want to make sure that there's clear and concise area and location for things to kind of sit. So, at the top here in the middle, those elements are actually anchored to the top center. This one's to the top right. These two anchor to the bottom left. These anchor center. And these are lower right. And this also ensures that when you reformat your screen for 4:3 or 21:19 21:9, sorry,

that this information will actually move out and still be consistent like throughout your design your designs. Typography. So, I've got another video here for you guys to watch and explains why typography is so important. Take a look. Awesome. So, you can see why choosing the right font is important. I don't want Ryan Gosling after me. So, yeah. So, when it comes to choosing fonts, we need to look at the bigger picture. You know, the legibility, the readability, you know, the branding, the style, the tone. We're going to talk about font variations later on, but we also want to look at trends and localization and pricing pricing budgets. So, fonts can be expensive. So, this is Crisis. Well, mock-up of Crisis and it looks really different because the font was actually something that we experimented with. And we had to kind of go back to Agency

FB, which is the font that we used. It just didn't feel like Crisis. So, I know these screenshots don't look exactly the same, but the font is the biggest thing I want to look at here. There's also the 6-ft rule. Does anyone know what that is? What it could be? Any guesses? No? Okay, so it's basically Yeah. Yeah, it's basically on average when a console player plays their games on their big screen TV, they're going to be 6-ft away and the font needs to be legible from that distance. Obviously, that's down to font size as well, but you still need to click choose a font that's clear and concise. So, fonts are There's a lot of information which, you know, goes into designing a font, but the main thing that we're concerned with is the x-height. And that's this area here.

It's actually the height of an X. And also the counter, which is kind of like the opening within letters like O, P, B. You can see in this example here that when we look at the B and the E, there's a difference between like the Freestyle Script and the Open Sans font. And at smaller sizes, it gets harder to read. So, you want to make sure that fonts with a bigger counter um are basically a lot easier to read at distance. You also want to look at extended character sets. So, don't just go and like the internet and download a free font. That's not going to work for AAA games. So, you need to make sure that your characters support like all the foreign characters. They have the numeric ranges, the diacritical marks, which are like the small accents on top of the letters. And they also support the glyphs and special characters. Generally, you want to try and buy the

entire font family because it will come in really handy later on for you. You know, there's so many different weights that you can choose from, condensed and extended versions. And, you know, generally professional fonts have all of this. When it comes to your body text, you want to make sure that when you're using lighter fonts, at larger sizes, you want to use lighter fonts and at smaller sizes, you want to use heavier fonts just so that they work on your screen on your screen space. You want to make sure that things don't get like too thin because then they become really badly aliased. So, you want to make sure that you use a heavier font at a smaller size. These are font variations and you generally don't want to use more than two font variations. Don't do the one at the bottom, please. If you're just completely, you know, like new to this and you don't know which fonts to choose, this is a good list to start with.

So, these are professional fonts that you can get from like the major sites. And they generally cover like all the extended character sets. They have like all the font weights. So, you know, these are good ones to go with. They're not perfect, but they're a good starting point. Also, please don't stretch fonts. Stretching fonts is like stretching your face. You know, people you won't like it. Looks weird. If you do want to stretch it, just scale it proportionally. Or use the condensed or the extended versions. It's a lot more professional. When it comes to text as well, you want to make sure that your text sizes, you have enough uh to display in the text without it going off screen. So, generally you want to word wrap to like 60 to 120 characters per line. Um it's easier to just left align and then, you know, that's easy for reading as well.

Localizations, you also want to add like 20% more Oh, sorry, 40% more text uh text size for overflow. Um and you also want to be conscious of like uh right to left formatting for Arabic and Hebrew. So, this is an example of BF1 operations um in English. And we have a crazy thing that just puts the largest strings it can find on one screen. And that's a good way to test like does your game actually work in localizations. Um so, you know, we can see how big text boxes are going to get, how big buttons are going to get. And you can see this the box on the right, we actually have to shift it shift that up because the buttons at the bottom were just like too long. So, I'm just going to flick between them just so you can see. It's a big difference. So, you need to cater for those edge cases. Does anyone know what this is? Yeah.

Sorry? It's uh the longest string that you can get for a gamertag. So, whoever has this gamertag, just don't do don't use it. It's just really bad. Especially for UI designers because we have to cater for this. Uh but sometimes you have to add on things like the clan tag and the rank. And you have to display this whole string um in your UI. So, you have to make sure that, you know, if you have a sentence with like someone's name in the middle, you have to make sure that this can fit. So, you know, this is kind of like the worst case scenario. And we always design for gamertags this long. Um there's also other variations of this with WM WM WM. Um but yeah, whoever has those gamertags, just get out. Get out. So, we're going to play a game. And it's called What the Font. So, you guys are going to try and guess what these fonts are. Here's the first one. Yeah, it's pretty easy. Impact.

This one. Yep. Well done. Oh, nice. Anyone know this one? No. Any other guesses? Sorry? Microgramma, yes. Nice. A lot of movies use this. Comic Sans. So, now we're going to talk about shape language. And this is kind of drilling into the details of what your your art is going to look like, you know, this is kind of like the the elements that create visual harmony and interest in your design. So, the fonts are one important thing, but this is like the next next thing you need to look out for. Um this is kind of like tying into the grander visual identity of your game. We're moving from like low fidelity

block outs to like kind of high fidelity assets here. Um the shape language will inform like your style guides as well. Um and it'll support your cognitive aspects of your design. So, essentially these are kind of like the building blocks we want to basically you know, run with a shape language that's consistent. Um we also want to provide like framing and backdrop for our UI. It helps to establish like the look and feel. Um these are kind of like the signature elements as well. Things like patterns, brushes, uh signa- uh lens flares, sorry. Uh we also want to look at shape consistency. So, if you have a stroke, you want to make sure that those strokes are consistent. Um you know, if you started with the top style and then you ended up with the bottom style, um that's actually still going to look weird in a UI. It won't look consistent. Uh similar thing with like angles and rounded corners. Uh you want to keep those things kind of consistent as well. So, we're going to look at take a look at some examples. So, this is from MGS.

Um when you customize, so you can see that the elements kind of feel like they belong together. Uh there's no kind of like odd shapes. Everything's kind of nice and rectangular, kind of fits that military theme. Uh this is kind of like the a bunch of screen grabs from different areas of the game. They still use the same kind of squared out shape language. Uh the color schemes is still there. This is from Crysis 3. Where we have the angled boxes. And then we have some screenshots from various locations. You can see that the theme's kind of still run through the whole game. So, it doesn't matter what the screen is, it should still feel like it's part of that same product. Um and these are things that kind of tie into your shape language, you know, do you want angled corners? Do you want it to be like brushed? Do you want it to be, you know, a lens flare, like just full out lens flares? Then go for it, but keep it consistent.

Next, we're going to talk about iconography. So, there's a couple of things with icons. Um some kind of ground rules. So, you want to make sure that they work on the minimum screen size. Uh you want to keep them simple but varied. Uh you also want to try them with the squint test, which is kind of like just squinting your eyes and just seeing if you can make out the shapes. Um that's what makes good icons basically. Something that you can tell from afar. Uh things that are easy to see and read. And the 1 in by 1 in is kind of like the largest size that you could probably have an icon on screen. Uh you don't want to just have a massive icon and then, you know, that's everything. You want it to work on multiple sizes. So, to get good icon designs, you want to have a construction grid. Uh kind of like the grids that we're using for the UI, but we also want to do this for icons. Uh this will help ensure that things are consistent. Um it'll make sure that you stick with this kind of grid format. So, um as you

design your elements, you know, they'll feel nice and cohesive. You also want to kind of create icon specs so that, you know, people that actually create icons for you would understand that, you know, things like rounded the rounded corners, the smallest point size, uh what gaps should look like, all of those things are kind of detailed even down to like the angles of what lines are going to be at. Um these things are really important when keeping a consistent like framework for your icon design. And there's also something called optical balance, which um in this example, the square, the triangle, and the circle, um you can see that the triangle and the circle kind of like overextend slightly. And this is actually really important for icon design because even though they're not mathematically correct, this will actually make your icons feel a lot more consistent in terms of size. So, uh in this example, you've got like a nice square icon, a thin a triangle, a circle, and you can

see that the outer lines, they don't actually extend all the way out. You have like a gap when it comes to the squared icons. And this is basically just down to optical balance so that things feel consistent in size even though they're not mathematically correct. And you need to do this throughout your UI design. So, you know, it'll keep things really nice and pleasing. This is like designing for visual harmony. There's also things like testing your icons in different uh like line weights, uh testing them whether they're filled or inverted cuz that can have an impact on how fast you can read these icons. So, even though they're they're really minor, it's like during gameplay, if you have an icon that you can't really tell what it is like instantly, then you're going to have a problem with like maybe a player missing out on something major. So, you want to make sure you test like this in in game. Make sure you're like trying out different variations and see what works and what doesn't work. Uh icons can also be like ambiguous. So,

um sometimes they might need text to support what they what they mean. So, you probably unless you play Battlefield a lot, you probably don't know what these icons mean. And there you go. These are buddy action icons from MGS MGO, sorry. So, some of them might be a bit ambiguous, but when they have the descriptions next to them, then you understand what they do. Uh the treatment also kind of falls into your visual identity. You want to make sure that all of your icons have like a consistent style uh going through. And this relates to your shape language, and it also ties into your your broader uh visual identity for your game. So, this is kind of like boiling down your art direction into one single icon. Uh this is how important icons are for your game. And they can also replace text. So, um with an icon, you can basically save a lot more space. We've got a game. Another game.

This one's called Universal Icon. So, what do you think this icon means? Capture point. Anything else? Yeah, it can mean more more than one thing. So, that's the thing with icons is they're a bit ambiguous. Um this one? Mhm. Network connections terminals. This one's pretty easy. All of those things. This one? Appearance, customization. Yeah.

And that's the last one. So, moving on to colors. So, color plays a lot on your emotions and the branding. But, I generally want to try and say don't rely on color. Even though it's important to your brand, uh you'll see later on that colors can be perceived in different ways. Um but, you know, you still want to tie it into your direction. You still want to tie it into the themes and tones of your game. Uh you want it to show states. Uh so, everyone kind of knows color theory. Or if you don't, you can look it up. It's pretty easy. Um but, each color kind of has a meaning in different cultures as well. So, just be wary that you might not be wanting to use colors that might be offensive or maybe seen as like derogatory or something like that. So, just look up your color schemes before you actually cuz your game is going to be AAA, so it's going to be worldwide and global. So, yeah, just be wary of what colors mean in different uh cultures. Generally, you want to try and limit your color palettes as well. You want to

have like five colors. And you want these to be varied and distinct, but you also want to make sure that, you know, each one has a purpose. Um you know, avoid like completely full saturated colors because that tends to bleed. Um just experiment and just make sure that, you know, you use colors kind of sparingly. Uh so, this is an example from Crysis again where uh we're using colors to kind of represent the button states. And it kind of matched the military theme. You can see that the colors actually quite subdued. Um we're not relying on colors 100% here, but even though it's it's basically enhancing the visuals. Uh here's a good test for everyone. The image on the right, just hold your finger up and just cover over the line and just see if those uh something special happens. So, you can see that the the environment actually has a big impact on the shade of the color. So,

you need to be wary of where you're being where you're using your colors. So, when it comes to the HUD, it's going to be against all this kind of like environment art, and you want to make sure that your UI still stands out. But then, your colors can be perceived differently based on the environment. So, you know, what you originally designed for might not work well. So, ideally, you might want to have a color luminance range for your UI that's not being used in the environment. And that way, you'll make sure that your UI is always readable. Here's an example from Uncharted 4. Uh you can see the color breakdown on the right-hand side. So, they're using color kind of pretty sparingly. They use it for the teams and for certain events, but then you have uh a nice limited color palette. Here's a shot from Far Cry 4. Similar kind of thing. And a shot from Final Fantasy 15.

You can see here they've actually used red in the center, which is actually really important when it comes to like critical information. And at this point, you need to press red. So, or press square. And it's showing a little bit kind of like glow around the outside. Uh color blindness is another reason why you don't want to rely on color. Um people have like a lot of uh you know, impairments. So, like 15% of the entire population of the world from like the World Health Organization say that um people have disabilities when it comes to visual impairments, sound, uh motor, or cognitive cognitive impairments. And this kind of affects 5 to 10% of our players. So, we need to keep that in mind when we're designing our colors or choosing our colors. And these are different types of color blindness. Green, red, and blue. And some games actually cater for that. So, a lot of AAA games do cater for color blindness. But you just need to be wary that uh you don't want to be giving like

a preset color scheme that people actually don't find that good. Uh so, maybe, you know, allow the users to customize the colors based on um the UI and what they feel comfortable with. Next, we're going to talk about UI representation. So, this kind of like more is more focused on the HUD side of things. So, you have non-diegetic and diegetic, spatial and meta. We're going to go through each one of these. Uh but diegetic in general is basically taken from movie and films where you have a character that kind of narrates over uh what's happening in the story. So, it's something that's actually part of the narrative. Um and generally, non-diegetic UI is what you see in most games. It's kind of detached from the gameplay. Uh the characters don't actually interact with the UI in any way. It's just like an overlay. Diegetic UI, on the other hand, is something that's part of the gameplay. And games like The Division, Dead Space,

they have um the characters actually interacting with the UI itself. And it's also something for players to take in as well. Um I love diegetic UI. Spatial UI is things that aren't typically associated to like bars and health and text. These are more kind of effects and trails, character lines. Um like in The Last Last of Us and Uncharted 4, they have like the character outlines. And then, the meta ones are kind of like they're not really spatially uh telling you anything. It's just a screen effect that kind of desaturates your UI or your your gameplay or it's kind of blood splatter. Uh I want to get a bit controversial here. So, there's some standard UI elements that a lot of games use. And just because everyone's doing them doesn't mean that that's actually a good thing. Um

example here is the damage indicator, which you see in a lot of games. I like to call it the banana because it looks like one. Um but, I don't think this is actually a good UI element. I think it's trying to convey a you know, a 3D event in a 2D asset. And when I'm playing like first-person shooters or uh third-person action games, you know, this thing is 2D. You can't tell if there's someone below or above you. Um this thing will just tell you like direction based in 2D, but it's not really telling you if they're above or below or behind or in front. So, it's not really working in a 3D sense. So, come at me, bro. I think a better way is to actually have something which which is a bit more diegetic. So, um it's something that's in the game world. It's 3D. You can tell that there's attacks coming in or threats coming in from different directions. Um so, you know, it's a lot

more visually you can understand spatially where things are. Uh if you're having a 2D element and it's trying to show you something in 3D, it just doesn't kind of work. So, I think trying to think of other ways to represent that information rather than just sticking with the standards that everyone's going with, I think is a better way to go. Here's example from MGS4. 2D artwork. So, this kind of falls into its own category. Even though it's still part of UI, it's something which is uh you know, it's like the artwork that goes with all of your UI, like dog tags, medals, imagery. Um these are things that we still need to think about as well when it comes to our visual identity and how we style these things, how we want to present them to the player. Things like screenshots as well and loading images. Engine knowledge. So, understanding the our limits. So, we want to understand the limits of your engine. You need to basically, you know, figure out what kind of tech you need. You want to exploit the system. Make sure it's performant. Um you want to document

these things and make sure you test them out regularly. Uh so, one good thing about engines is that we can use shaders to kind of do half the work for us. So, example here is where we have a base base artwork, which is kind of flat. Um but then, you add drop shadows, blur effect, chromatic aberration, and it kind of looks a bit more dynamic. It's uh a lot more pleasing to the eye compared to the one on the left. Here's another example with some kind of distortion effects. And in Crysis, we kind of did the similar thing where we had uh the UI have this kind of like scan line kind of glow effect. So, it looked like a projection. Um and this is kind of how we set it up. So, we basically had um our UI elements kind of mapped to polys. And then, we applied the shader effect to those polys. And this is kind of like the layout. Uh you can also use the engine to kind of do more 3D things. So, things like scenes, um you know, composite your UI along with your environments.

And there's a lot of fun in experimenting with this. And it it kind of connects the UI a bit better to your gameplay. So, you want to try and think of ways that you can do that more often. You don't just want the UI to kind of be disconnected from the game. Right, it's hammer time. So, now it's time to like execute on things. So, generally, these are the my go-to applications when it comes to mocking up things. So, Photoshop, Illustrator, After Effects. I'm a big fan of Illustrator. Uh it's just a lot easier when you're working with vectors to kind of scale up. Uh raster's kind of have their limitations. So, you know, raster graphics, you can't really scale them well. But when it comes to vector, it can kind of translate to polygons as well if you need to. Uh always start with the art board and Illustrator is awesome because you can just have as many art boards as you like and I generally just start with like a 1080p screen and just like go from there. So, there's different types of mock-ups that you can create. Static mock-ups, which are kind of like your your base

UI. Um you want to basically try and like figure out the core components of your UI. So, when it comes to buttons, drop-downs, sliders, progress bars, this is where you want to try and experiment as much as you can. Um you know, figure out your tone, your theme and just work with the art and just see what works and play around with Illustrator. You have like, you know, infinite art board space, so you can just go crazy. You also want to figure out what kind of uh button states you have. So, things like highlighted, unhighlighted. Um and this will really help like This is kind of like the the core components of your visual identity, figuring out what you want to do with the UI. Same thing for your icons. You want to make sure that you're actually getting through, you know, getting across those states, making sure that people understand what's going on. Um and keeping those consistent with like your button selections. And then going back to our cheat sheets, we basically want to keep this in mind as well as we're designing our components. Uh we can start blocking out our UI, making

sure that, you know, um how we want to present this information. This is kind of like the user journey, the flow. It's kind of comes into UX, but it's also part of UI art as well. Um so, you want to just lay things out, making sure that, you know, with your style, you have clear focus areas, you have like information kind of blocked out in different locations. And you can try out as many different styles as you like. And the same for the HUD, you can basically block out the HUD, making sure that you know where your focus area is and moving out to periphery. So, put your most important information in the center. Um when I do my mock-ups, I always pick these key areas of the UI to to kind of approach first. Uh so, title page, the front end main menu, the server lobby, customization heads up and the ending round. And we're going to look at some examples now. So, these are title screens from different games.

So, this is kind of like the really bare-bones basic uh UI, but you still want to to work when it's simplest to click this. Um and you always try to you always want to try and like simplify the UI as much as possible. There's the front end screenshots. You can see how each one has its own kind of layout, shape language, fonts, color schemes. Server and lobby screens kind of get a bit busy, but you want to try and still keep that information understandable to the user. Customization gets a bit crazy as well, but this is where you can introduce a lot more diegetic elements. So, maybe having like the the weapons loading up in the background, having call outs. Uh you can really kind of like tie the UI to the gameplay here. Same for loadout selections. And then a screenshot of the HUD. And then an ending round. So, you always want to design for the

worst case scenarios as well. So, make sure that you blast the UI with everything that can go on. Um and that will help you figure out where you want to put things. So, this is like an early screenshot for the spectator mode in Battlefield 1 and it's just too much what's going on. Um motion is another area that you can basically use to really uh call attention to elements. And just use animated mock-ups. This kind of ties into your style as well. So, uh we can see in the examples in a minute that, you know, the style of motion can actually really have big impact on what kind of UI you're conveying. square, but it shows that, you know, you can have a nice clean animation or you can have something that's more exaggerated. Take that, Pixar lamp. Or you can have something that's a bit more sci-fi and technical.

Let's have a look at all three of those together. Um and then you also want to do the same thing for your icon states and button states. Show how they would those things animate. And here's a kind of a complicated example. It's It's a good way to also show flow. Like if you're just sitting and talking about this, it wouldn't have the same impact as showing like an animated mock-up through like After Effects or Flash. So, it's kind of like, "Hey, this goes here. That goes there." And it's like, "No, just show it in an animation. It's easier." And then here's a kind of a longer mock-up from MGS.

Okay, it's enough. Uh the last thing is interactive mock-ups. So, this can be something that which you can use uh in engine or you can do it through using a couple applications like Adobe XD or Flash, um Animate. Um but essentially, you want to just keep iterating on everything. Um and even after you ship a game, you know, you're still going to be iterating on it. And this like my presentation list of this presentation I was working on,

so I kept iterating on it. And here's an example from Crisis 3 where we're looking at the main multiplayer menu and how it's kind of evolved over time. This was the final version. Okay. Uh one last game. So, this is kind of based on like the minimal posters that you find. Can you guess what game this is? Any ideas? Breath of the Wild. This one? Battlefield. Yeah. This one?

I kind of stripped out a lot of information because I wanted to show that, you know, it's it's actually quite important. You can have a screenshot and see that, "Oh yeah, that's that game." This is MGS. This one's a bit obscure. Yeah. Nice. This one's really tough. If you can get this, I'll give you a bottle of water. No. Close. It's Half-Life 2. Uh so, this is the last thing that we're going to kind of look at, which is invisible forces, things that actually affect your UI. Um and you need to keep these things in mind. So, again, localizations, which we talked about before. So, you need to have like extra spacing in your text boxes to make sure that, you know, things are catered for multiple languages. Uh think of colors and meaning their

colors and their meanings. Um any kind of symbols that might be offensive. And try and use icons as a substitute for text. Uh TRCs, which is technical requirements checklist. This is kind of based on each platform and you need to follow these kind of guidelines when it comes to console development. Um but you also want to think about screen sizes, your input controls. Um think about the visually impaired, loading times. Uh all of these things kind of fall under TRCs. Um even their button hints. Yeah, if only we could do that. Um and then one last thing like UI can also be non-UI. So, things like particle effects, the character animations, audio cues, haptic feedback. All of these things can actually tie into UI. So, it doesn't have to be a number or a text or a bar on screen. It can be something that's conveyed through the characters themselves. Um and you don't want to just make um you know, confusing layouts. You want to

stick to your guidelines as much as you can. Um you don't don't just want to copy and paste like from other games. Uh that's just really bad and you kind of lose you lose out on having your own kind of visual identity for your game. So, let's just summarize what we've gone through. So, number one, research. Uh you want basically form and function. So, you want to go, you know, hand in hand, art and design. Uh make sure that you have the broad strokes understood. Uh your pillars of your game, uh the creative direction, the tone, the themes. All of those things you want to make sure that you understand before you do any kind of work. Uh visual identity, which is kind of like the core components of your UI, uh you know, your typography, your shapes, your icons. Uh these are kind of like the building blocks. You want to experiment with these as much as you can and try and figure out something which is unique. And you don't want to upset Ryan Gosling or whatever, so choose a good font. Uh execution, so this is uh

when you're thinking about composition, your heads-up display, your front end, uh you want to try those different mock-ups. You want to try and like create motion interactive mock-ups so people understand the flow they use, you know, the way they the game will play out. Um try and like you know, experiment with that stuff early on. It'll make it a lot more easier before you actually start working on it in game. And think about the invisible forces, so things like the constraints per platform, uh the technical requirements checklist, and localizations. Uh UI is like a ninja. It's unnoticed to the player, but when seen, executes beautifully. Yeah, mic drop. Thank you.