[Music] thanks everyone for attending this session on art direction for triple a UI my name is Uma Yunus I'm the lead graphic designer at dye survey just quick show of hands who here is a graphic designer or UI artist okay quite a few of you are directors dam designers code is all right okay producers and the outside myself I said so okay let's get started just a couple of friendly reminders please silence your really old phones so they don't make noise and also reminded to fill out your surveys after this presentation is done so Alan was subtle which loosely translates to welcome willkommen bienvenido yoga so hopefully I pronounced those correctly and so we're gonna be talking about more of this layer but just a quick note you can see how you know in different languages the same word has different lengths and when we talk about localizations this can become more important so today's session we've got a lot to cover hopefully this is gonna be like a reference panel for you guys so you can basically refer back to it when it gets uploaded to Jesus evolve but also what it is told to be interactive so we're gonna be asking for like a couple of sections where get the audience to participate we're not gonna be focusing on mobile or app development this is mainly for Triple A so it's the big screen format mainly consoles and PCs but Before we jump in just gonna give you a brief intro about me so I was born and raised in London it's just there on a map and the youngest of four brothers my dad made our first computer with his own hands I don't know why I was cold but back in the day you basically had to sold with chips on a motherboard and but I do remember the c64 the Amiga playing games of them was like my childhood and using deluxe paint to which kind of got me interested in game art a 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 here's a pic of me when I first started in the industry I was young I was passionate bearded and this is me with consumer when I was working at could you're in production today you develop pretty fascinating industry so I've been working in history for 10 years over 10 years these are some of the games that I've worked on and some of the studios today this game have been working on its battlefield 1 I worked on with Kajin productions waitin mariya Solid 5 at Kojima Productions and before that I was working at Crytek in the UK working on the crisis franchise so just to give you a bit of a flavor of what I do I put together a small show real let's have a look at that [Music] [Music] [Music] [Music] so what do you think so let's move on some terms now let's get into what this talk is about so a lot of people think that UI and UX are the same thing but they're not exactly the same thing when it comes to UX is 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 anterior end interaction but you I kind of still it's part of that UX the easier experience 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 but the UI is also the visual identity for the game and it conveyed the style and tone in like every detail so the information that the UI does is actually its presenting information to the player whether it's visual sound touch vibration 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 you I kind of does and generally when people think about you are they think of it as the heart the heads-up display which is when you're actually playing the game the core gameplay but I like to split up into two things so you know we have the front-end and the menus and then you also have the heart and the gameplay and this kind of has a different approach so each one of these the heart is more like context based where you know you're you're talking about messaging you know the things going to be instant and recognizable to the player and the front end is all about the navigation is 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 you know you'll iterate you'll do fine and sometimes you just scrap ideas completely but we're trying to make this a lot easier by looking at art direction and also cognitive design and we will help like streamline that process if we can and basically go for form and function to kind of guide us along but why is this important you know when we look 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 you why like you know hey here's you why you know it's in your face so you want you I to be so it's kind of like utility versus a sakes you also wanted to look nice but you also want to make sure that it's not always front and center you don't want people to playing your UI you want people to play the game and the UI is there to support these actions so without UI art direction you end up with something like this you know everything else is on screen everything is calling for attention there's no consistent style there's like 500 fonts just in this one screenshot so you wanna 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 so make sure that everything works together so just really set your brain by just looking at this door in the center and just ignore what came before so we need to get bearings we need to look and see where we want to go how do we Templi create a UI that's visually appealing and usable but we also wanna keep in mind the brand identity and the style and we want it to be unique so we're gonna be thinking big here this is like the broad-strokes this is like the planning phase so essentially with games we want to decide for the five senses and the more senses you kind of design for the more now there so there's an excellent TED talk by jinsub Lee where he talks about designing for the five senses it's not games related but it's still extremely interesting to see the last two taste and smell they are not really mainstream at the moment so we're not going to concentrate on those games do focus on touch and the interaction the sound and the sight so you know India the interaction is key to what makes games games so we only take a brief look at the platforms and understand the input methods and translating that to our senses so touch it boom 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 understand how you know the inputs actually affect game or the UI you need to have three the state four 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 same for PC and keyboard the PC master-race so you know the mouse has similarities to the touch screen also the analog controller but it's still unique and you want to try and cater for this as well you're trying to think of like you know everyone you want to try and make your game as inclusive as possible 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 the UI but that's not my area of expertise so I'm not going to talk about that we're gonna be focused on the vision the visual story and what makes a good visual or image so we need to understand a couple of key areas of theory and how we can relate this to our design and how we can make our images more appealing so this is an image of played Runner 20:49 and that will be won awards for it's similar tog Rafi and there's a reason why you know this image is actually really nice and pleasing to the eye you know composition the style the mood the tone the color the grading you have a central focus you have these parallax sorry the perspective lines kind of leading your eye you can actually look at the image and your eye has a chance to relax and take in the imagery it also works in black and white which is a very important feature it's in readable composition it so you wanna make sure that all of these components actually work in your UI as well you know you can take all of this theory and apply it to you I similarly if you look at this image it doesn't quite have the same impact even though the tones may be 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 you know you want your eye to rest at a point you don't know just overload the user you know it's vibrant and saturated but there's way too much noise you know you want we want to understand how we perceive this information how we perceive visuals so to do that we need to understand how the eye works so light enters our eye and hits the retina and at the back of our retina we have a concentrated pair of rods and cones which kind of looks like this and the signals are sent to the brain the rods they basically have a certain color sorry the cones have a certain color and the sensitive to light based on like red green and blue and you can see in the center of the image 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 it to your attention so whether it's danger or whether you want you know bring the users 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 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 our 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 will put the crucial information in the center and then towards the periphery we want the secondary information and keep in mind for hard layouts you know this is extremely important let's look at perception and how our brains actually understand what we're looking at so initially our brains would always pick up shape so silhouettes you know large broad straight shape sorry really help make a faster imprint on a memory the second thing is color which is connected to emotion and maybe brand Association and the third thing is the form it takes longer for our brains 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 so this kind of theory should help us design better speaking of theory Castleberry is actually extremely important when it comes to UI design and in design in general there's a set of rules that we can follow to understand to make sense of like what we wanna design so these principles are based on like Hong cognitive research and how we perceive the world through our senses so closure we have 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 group 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 one figure-ground is all about enclosure basically taking proximity and just having this gray box behind it 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 this theory actually functions so this is a screenshot from battlefield 1 a spectator mode and you can see that the space in between is kind of forming a closed gap by the cinematic bars at the top and bottom proximity of these elements next to each other form like the squad lifts and the icons in the center for the school school 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 similary in terms of 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 Zed 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 layered enclosure we're basically using boxes and kind of keeping things grouped together and then we have the symmetry basically reflecting the squad lists on the left and right there's also some usability principles which we need to look at so whenever you're designing any kind of screen you don't want to have more than seven items that unique on one screen because it'll just get overloading for the user you don't want your menus to be more than three levels deep affordances are things like buttons sliders checkboxes you want those to look and function like how people expect focus area you always want to have a focus area in your UI so that people know what they're actually looking at if you just have the screen nothing was highlighted people get confused it's like am I supposed to do something here did it go wrong so you're always gonna have a highlight or some kind of button to show focus area you're gonna make your state changes clear so you know when you click on something it looks different from when it's on highlighted or unclick 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 hits so let's look at this in a in an example here so this from mgs and customization so you can see there's seven elements on screen here and we don't add anymore because it'll just get confusing for the player the menus are like three Devils deep so you only have to click three times to get their buttons look like buttons they function you have a focus area here this isn't a video but this would be pulsing state changes obvious or what selected why isn't you have a nice page flow as well so you can understand how that information is laid out the worlds are providing helps and hints so here's some cheat sheets for you guys to look at I'm just gonna take a drink war 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 but we also want to look at visual harmony and make sure that elements kind of work together we don't want things like fighting for attention because that's where it gets confusing it's like am I supposed to click this or am I supposed to look here so let's go into data gathering and research so this is kind of like doing your homework and doing your research you basically want to understand your game your creative direction the art direction your target market you want to collaborate with all the disciplines make sure that you know you speak to our 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 players so your honor 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 theme source a tone what's the style gonna be what era are we saying this in because all of these things will play into your UI design and we also want to think about usability like we do the thoughts 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 bear will be informing your decisions so yeah just make a folder right click new folder done you want to be aware of design trends 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 wanted 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 time we're going to start off with so grids can help you establish hierarchy navigation flow consistency ill ease uses memory load you know I'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 head 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 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 gives for a nice pleasing layout you also want to keep in mind aspect ratio so right now we designed 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 they don't have screens that you know wake on they 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 also on a cater for the future where you know things go a bit crazy and people have multi displays apps or 2019 so you're gonna keep these things in mind as you're designing your UI and the grids would really help with that so when it comes to grids you want to keep everything within a safe frame so that's roughly 90 percent of your screen and that's things like text icons things 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 because when it comes to the UI it is 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 it's also the top right these two anchor to the bomb left these are anchored Center and these are all right and this also ensures that when you reformat your screen for 4-3 or 21 19 21 nine sorry that this information will actually move out and still be consistent like three orders are your designs typography so I've got another video here for you guys to watch and explains why typography is so important let's 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 they run 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 phone was actually something that we experimented with and we had to kind of go back to agency FB which is the phone that we used it just didn't feel like crisis so I know these screenshots don't look exactly the same but the phone is the biggest thing I wanted okay here there's also the 6-foot rule does anyone know what that is what it could be any guesses okay so it's basically yeah yeah it's basically on average when a console player plays their games on the big-screen TV and they're gonna be six feet away and the phone needs to be legible from that distance obviously that's down to the font size as well but you still need to click choose a font that's clear and concise so fonts are it 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 Exide 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 Opie 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 are basically a lot easier to read at a distance you also look at accent character sets so don't just go on like the internet and download a free form that's not gonna work for Triple A 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 I like the small accents on top of the layers and they also support the glyphs and special characters generally you are returned by the entire foreign 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 size you want to use heavier fonts just so that they work on your screen set on your screen space we 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 formatted smaller size these are for variations and you generally don't use more than two font ovations don't do the one at the bottom please if you're just completely you know like noob 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 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 is where you want to make sure that your text sizes you have enough characters to display in the text without it going off screen so generally you want a word wrap to like 60 to 120 characters per line it's easier to just left a line 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 text size or overflow and you also want to be conscious of like right-to-left formatting for Arabic and Hebrew so this is an example of bf1 operations in English and we have a crazy thing that just puts the largest strings that can find on one screen and that's a good way to test like does your game actually work in localizations so you know we can see how big text boxes are gonna get how big buttons are gonna get and you can see this the box on the right we actually have to shift it shift that up because the bonds at the bottom is just like too long so I'm just gonna flick between them just so you can see it's a big difference so you need to care for those edge cases does anyone know what this is yeah sorry it's the longest string that you can get for a game attack so whoever has this game attack just don't do going to use it it's really bad especially for UI designers because we have to cater for this but sometimes you have to add on things like the clan tag and the rank and you have to display this whole string 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 designed for gamer tags this long there's also other variations of this with WM w MW m but yeah whoever has those gamer tags just get out get out so we're gonna play a game and it's called what the fun so you guys are gonna try and guess what these fonts are it's the first one yeah that's really impact this one yep how nice anyone know this one no any other guesses sorry Michael Rama yes nice a lot of movies users don't make sense so now we're gonna talk about shape language and this is kind of drilling into the details of what your your art is gonna look like you know this is kind of like 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'd need to care for this is kind of like tying into the grandeur visual identity of your game we're moving from like low fidelity block outs to like kind of high fidelity assets here the shape language will inform like your style guides as well and it will support your cognitive aspects of your design so essentially these are kind of like the building blocks we wanna basically you know run with a shape language that's consistent we also want to provide like framing and backdrop for our UI it helps to establish like the look and feel these are kind of like the signature elements as well things like patterns brushes signal dense layers sorry we also want to look at shape consistency so if you have a stroke you want to make sure that those strokes are consistent you know if he started with the top style and then he ended up with the bottom style that's actually still gonna look weird in a UI it won't look consistent similar thing with like angles and rounded corners you want to keep those things kind of consistent as well so we took it take a look at some examples so this is from MGS when you customize so you can see that the elements kind of feel like they belong together there's no kind of like odd shapes everything's kind of nice and rectangular it kind of fits that military theme this is kind of like the a bunch of screen grabs from different areas of the game this still use the same kind of squared out of shape language the color schemes are still there this is from Crysis 3 where we have the angle boxes and then we have some screenshots from various locations you can see that the themes 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 and these are things that kind of tie in to your shape language you know do on angular corners do you want it to be like brushed do you want to be you know a lens flare like just for our lens flares and go for it but keep it consistent next we're going to talk about iconography so there's a couple of things with icons some kind of ground rules so you want to make sure that they work on the minimum screen size you want to keep them simple but varied 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 that's what makes good icons basically something that you can tell from afar things are easy to see and read and a one inch by one inch is kind of like the largest size that you could probably have an icon on screen you don't just have a massive icon and then you know that's everything you want it to work on multiple sizes so to get cleaned icon designs you want to have a construction grid kind of like the grid somebody's in for the UI but we also want to do this for icons this is helping sure that things are consistent make sure that you stick with this kind of grid format so 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 what gaps should look like all of those things that kind of detail even down to like the angles of what lines are gonna be at these things are really important when keeping a consistent like framework for your icon design there's also something called optical balance which in this example the square the triangular circle 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 in this example you've got like a nice square icon a thin a triangle 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 an optical balance so that thing's 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 like line weights testing them whether they fill or invert it because 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 can have a problem with like maybe that 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 look I cons can also be like ambiguous so sometimes they might need text is or what this what they mean so [Music] you probably unless you play battlefield a lot you probably don't know what these icons mean and there you go these are body action icons from mg s mg oh 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 the treatment also kind of folds into your visual identity you want to make sure that all of your icons have like a consistent style going through and this relates to your shape language and it also ties into your you brought a visual identity for your game so this is kind of like boiling down your art direction into one single icon this is how important icons are for your game and they can also replace text so with an icon you can basically save a lot more space oh girl game another game so it's called Universal icon so what do you think this icon means capture point yes yeah it can mean more one on one thing so that's the thing with icons is they're a bit ambiguous this one our connections terminals this sounds pretty easy all of those things this one psh 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 you'll see later on that colors can be perceived in different ways 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 you wanted to show States so everyone kind of knows color theory or if you don't you can look it up is pretty easy 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 may be seen as like derogatory or something like that so just look up your color schemes before you actually because your game is gonna be triple-a so it's gonna be world wide and global so yeah just be wary of what colors mean in different cultures generally you want to try and limit your color palettes as well you want to have like five colors and you only is to be varied indistinct but you also want to make sure that you know each one has a purpose you know avoid like completely full saturated colors because that tends to bleed just experiment and just make sure that you know you use colors kind of sparingly so this is an example from crisis again where 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 are actually quite subdued we're not relying on colors 100% here but even though it's it's basically enhancing the visuals 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 there's 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 your being we're using your color so when it comes to the HUD it's going to be against all this kind of like environment art and going 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 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 a nice limited color palette it's a shot from Far Cry 4 similar kind of thing and short 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 ready to press wear and it's showing a little bread kind of like glow around the outside color blindness is another reason why you don't rely on color people have like a lot of you know impairments so like 15% of the entire population of the world from like the World Health Organization's say that people have disabilities when it comes to visual impairments sound motor or cognitive cognitive impairments and this kind of affects 5 to 10 percent of our players so we need to keep them 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 Triple A games to cater for color blindness but you just need to be wary that you don't want to be giving like a preset color scheme that people actually don't find that good so maybe you know allow the users to cut mine's the colors based on the UI and what they feel comfortable with next we're going to talk about UI representation so this kind of like move is more focused on the hot side of things so you have non-diegetic and diegetic spatial and meta we're going to go through each one of these but diegetic in general is basically taken from movie and films where you have a character that kind of narrates over what's happening in the story so it's something that's actually part of the narrative and generally non dry non-diegetic ey is what you see in most games it's kind of detached from the gameplay 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 division dead space they have the characters actually interacting with the UI itself and it's also something for players to take in as well I loved yjq I spatially why is things that aren't typically associated to like bars and health and text these are more kind of effects on trails character ends like in laughter 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 especially 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 I want to get a bit controversial here so there's some standard UI elements that love games use and just because everyone's doing them doesn't mean that that's actually a good thing example here is the damage indicator which you see a lot of games I like to call it the banana because it looks like one but I don't think this is actually a good UI element I think it's trying to convey it you know a 3d event in a 2d asset and when I'm playing like first-person shooters or third-person action games you know this thing is 2d you can't tell if there's someone below or above you this thing will just tell you like direction based on 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 the 3d sense so come at me bro I think a better way is to actually have something which which is a bit more digesting wood it's 3d you can tell that there's tax coming in or threats coming in from different directions so you know it's a lot more visually you can understand spatially where things are 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 bad way to go it'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 you know it's like the artwork that goes with all of your UI like dog tag it's metal it's imagery these are things that we still need to think about as well when it comes to our visual identity and how we start these things how we want to present them to the player since they're screenshots as well and loading images ancient knowledge so understanding 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 performing you want to document these things and make sure you test them out regularly 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 but then you add drop shadows blur effect chromatic aberration and it kind of looks a bit more dynamic it's a lot more pleasing to the eye compared to the one on the left it's another example with some kind of distortion effects and in crisis we kind of did the similar thing where we had the UI have this kinda like scanline kind of glow effect so it looked like a projection and this was kind of how we set it up so basically had our UI elements kind of mapped in Pawleys and then we applied the shader effect to those Poly's and this is kind of like layout you can also use the engine to kind of do more 3d things so things like scenes you know composite your UI along with your environments and there's a lot of fun in experimenting with this and it kind of connects the UI a bit bad to your gameplay so you're going 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 marking up things so Photoshop Illustrator or After Effects I'm a big fan of illustrator it's just a lot easier when you're working with vectors to kind of scale up rosters kind of have the limitation so you know raster graphics you've already scale them well but when it comes to vector it can kind of translate polygons as well if you need to always start with the artboard and illustrator is awesome because you can just have as many apples 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 markups which are kind of like your your base cui you want to basically try and like figure out the core components of your UI so when it comes to buttons drop down sliders progress bars this is where you want to try an experiment as much as you can you know figure out your tone your theme and just work with the art and just see what works and play around with the illustrator you have like you know infinite artboard space so you can just go crazy you also want to figure out what kind of button States you have so things like highlight and highlighted and this will really help like this is kind of like 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 and keeping those consistent with like your button selections and then going back to our cheat sheets we basically only keep this in mind as well as we're designing a components we can start blocking out our UI making sure that you know how we want to present this information this is kind of like the user journey the flow it kind of comes into UX but it's also part of UI r as well 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 head you can basically block out with HUD making sure that you know where your focus area is and moving out to the periphery so put your most important information in the center when I do my mock-ups always pick these key areas of the UI to kind of approach first so title page the front end main menu a server lobby customization and heads-up and then around and we're going to look at some examples now so these are tile screens from different games so this is kind of like the really bare bones basic UI but you still want it to work when it's simplistic like this and you always trying to you always want to try and like simplify the UI as much as possible there's a 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 weapons loading up in the background having call-outs 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 inbound so you always want to design for the worst case scenarios also make sure that you just blast the UI with everything that can go on and that will help you figure out where you want to put things so this was like an early screenshot for the spectator mode in battlefield one and it's just too much what's going on motion is another area that you can basically use to really call attention to elements and just use animate welcomes this kind of ties into your style as well so we can see in the examples in a minute that you know the style of motion can actually really have a big impact on what kind of UI you're conveying so this is kind of like really simple animation with white 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 and then you also wanna do the same thing for your icon States and button States show how they was those things anime and here's a kind of a complicated example it's it's a good way to also show flow like a video 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 kinda like hey this goes here that goes there and it's like no just showing an animation it's easier and here's a kind of a longer mock-up MGF okay that's enough the last thing is interactive mock-ups so this can be something that which you can use in engine or you can do it through using a couple applications like Adobe XD or flash animate but essentially you want to just keep iterating on everything and even off you ship a game you know you're still gonna 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 Crysis 3 where we were looking at the main multiplayer menu and how its kind of evolved over time this is the final version one last game so this is kind of based on like the minimal posters that you find can guess what game this is any ideas breath of the wild this one 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 that 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 clothes it's half-life 2 so this is the last thing that we're gonna kind of look at which is invisible forces things I actually affect your UI 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 think of colors and meaning their colors and their meanings any kind of symbols that might be offensive and trying to use icons as a substitute for text TRC's which is technical requirements check this this is kind of based on each platform and you need to follow these kind of guidelines when it comes to console development but you also want to think about screen sizes your input controls think about the visually impaired loading times all of these things kind of fall on the TRC's even their button hints yeah finally we could do that and then one last thing like you I can also be non-ui so things like particle effects the character animations audio cues haptic feedback all of these things can actually tie in tu I so it doesn't have to be a number or text or a bar on screen it can be something that's conveyed through the characters themselves and you don't want to just make you know completely layouts you want to stick to your guidelines as much as you can you just don't just want to copy and paste like from other games that's just really bad and it kind of leaves your news 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 you want basically form and function so you're going to go you know handed hand art and design make sure that you have the broad strokes understood your pillars of your game at 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 visual identity which is kind of like the core components of your UI you know your typography or shapes your icons 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 over there so choose a good fun execution so this is a when you're thinking about composition your heads-up display your front end you want to try those different mock-ups you want to try and like create motion interactive mock-ups so people understand the flow the ease you know the way they gain will play out try and like you know experiment with that stuff earlier and they'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 the technical requirements checklist and localizations UI is like a ninja it's unnoticed to the player but when seen executed beautifully yeah mic drop thank you [Applause]