UI Polishing - Have you ever noticed Blizzard games do this?

the UI design and blizzard games so got them awesome some of the things they drew in their user interface are really subtle and hard to pick up so in this video I'm gonna show you some things they do that you probably never noticed before even if you've been playing these games for a very long time you might wonder why does it even matter why should you even care about your user interface and my response to that is just are you out of your mind people spend about one third of the play time in these things at the very least and online games like overwatch on top of that it's the first thing players see when they launch your game so it can totally change the entire perception of the rest of the game you might not like it but the user interface is just as much part of the final product as everything else and if you want to be a good game designer if you want to make an awesome game that a lot of people play you should probably pay attention to these UI polishing details you won't be a good game let's start with something you've probably noticed everything spatially separated have a look at the backgrounds when you click play the camera moves up the transitions really short so let's look at it frame

by frame you can clearly see that the camera is moving to a new position and this is no freaky coincidence let me tell you that I mean sure design-wise it makes sense to switch the background because these four panels right here wouldn't have worked on the other background but I think there's another reason I'm absolutely convinced this is not just due to the aesthetics how do I know that let's have a look the overwatch UI is just absolutely littered with these kinds of camera transitions every menu kind of has its own space and this is not just overwatch no no no no no other Blizzard games - something very similar every part of the user interface has its own background and of course there are some transitions I mean look at this this is just an insane amount of Polish for something that happened so quickly how are these little panels flip around look how the background changes here when we go to our collection we see this nice little zoom out and different

background same thing when we click on looting obviously the loot boxes neutrophilic ascend emotions of all am i right and we change the background again for the replays and even different game modes have slightly different backgrounds now why do the UI this of Blizzard to all of this the first advantage of constantly changing the backgrounds is obviously that you always know exactly where you are every part and every menu of the UI is very distinguishable from one another so that just makes it easier to navigate and way harder to get lost then secondly having a variety of backgrounds is just way more engaging than having to stare at the same background all the time the third point is throwing I'm most fascinated by it makes the UI feel more like a game because you have some real space to some real rooms you're navigating through and it feels way more like navigating through a real level so it basically gave me fights the UI it gives you that sense of exploration what will I see when I click that button in my opinion makes a lot of sense to specially separate different menus because think of the user interface like a house there are different rooms the rooms have different functions and they look different

that's exactly how Blizzard does its UI there's a living room a kitchen a bathroom you can instantly see what each of those rooms is supposed to be and you know what their function is so ever game constantly switches backgrounds that's a big house a big nice house but unfortunately a lot of games really have just one UI background I use for everything that's a one room apartment with everything stuffed into one room now where would you rather live where would you rather spend your time I mean honestly in some games you're not supposed to spend a lot of time in the menu for those games a one room apartment is totally enough you also have to consider building a complete house is a lot more work than just renting a one room apartment type into the next topic Micro animations how's the UI animated this is really interesting I wonder if you've noticed these animations before sure I mean there are some more obvious animations like this one let's admire those first before we move on to the really subtle and little animations these animations right here are the ones everybody picks up on but it's they're very hard to see everything that's going on so let's have a look at this again

for example did you notice that only dependent the first column was falling over like this the ones in the second column are doing it a little bit and the ones on the third column are not doing it at all they're just moving to the right a little bit and even the small interface element at the top here is following the same motion all of these little details result in a very smooth and satisfying animation and if you look at it in real time you barely notice all of the things that go into it humans just laugh or we patterns but what we love even more is creating order and that's exactly what these animations do they create order they show us how the order is created how the pattern is created and that's exactly what makes it so goddamn satisfying to watch even more satisfying than if the pattern just were there just from the get-go just think about it what's more satisfying to watch a beautiful painting or a complete time-lapse of how that painting was created for me I'd say it's definitely the letter because you get both you get the final result but you also get the process and the process is also incredibly satisfying to watch there are a couple of videos on YouTube called most satisfying video ever have you ever watched one of those they are almost

always about creating stuff about creating patterns about trading order and the process of creating that pattern of creating that orders always in the foreground once again that's just what we find satisfying we love watching things moving to their intended place even if it's just a very small and subtle movement the quit game prompting overwatch moves into place just a little bit for a couple of frames you can see it moving downwards and even that in combination with the sound just makes it so much more satisfying to use because it feels like it's moving into place it feels like it's creating order and I guess that's why Blizzard uses these micro animations quite generously in their UI even when you press step in game 2-0 sets everything takes a couple of frames to move into position first of all the background star change then all of the text and the icons appear this text moves slightly down the verses in the middle has a slightly more complex animation and does a little jiggle the line in the middle extends outwards and the player I can move in opposite directions this texture moves down this moves to the right and down once again we have an extending line and all of that just for this maybe that's ten frames or

something like that is that really worth it apparently the UI designers of Blizzard think so here we have yet another micro animation when you click on your abilities in heroes of the storm once again the slight movement in combination with the sound design it's not always little moving things though let's for example have a look at the overwatch pause menu here we have these cool triangles creeping in from the side once again very subtle effect but it's really cool when you see it in real time another thing they do is they have intro animation for all of their characters which makes them feel like they react to reactions even in the menu tons and tons of particle effects and of course genius sound design not to forget awesome guy of course you always know where you need to click if you liked this video the easiest way you can support the channel is to watch another video my name is Jonas and I kind of document the entire journey of becoming a game developer always sharing useful tips like this if that sounds like something you might like it is subscribe button have an amazing week peace