Design & Prototype a Game Menu UI in Adobe XD #MSI

hey guys you're watching danske and in this tutorial we're going to learn how to design a game menu ui in adobe xd and this video is in partnership with msi so like before i'm going to be using their creator 17 laptop and here's a quick rundown on the specs it's powered by a 10th gen i7 cpu 32 gigs of ram 2 terabytes of ssd storage and an rtx 2080 super gpu the screen is also massive and very bright thanks to the mini led technology with 100 adobe rgb color accuracy so this is the hardware that i'm going to be using for this video i'm also going to hook up a ps4 controller you can do this with xbox as well i'm going to be using this to assign gamepad triggers to the prototype in xd and i've got a usb cable to connect this up as well so there we go we have the laptop controller usb cable let's get started rightio so we're now in adobe xd and you can see that i've created a document we have a bunch of different art boards and i've just named all of these these are the artboards i'm going to be using and they are all sized in 1920 by 1080 pixels and over here on the left i've got an assets sheet now some of this may look familiar we created some similar icons for the weapons and items in a previous video we've got some text and text sizes that we're going to be using we've got some playstation icons we have an x and a circle you can of course create square and triangle if you like and down here we have a few images we have our characters together we have the man and the woman atlas and lucy i've called them and lucy may look a bit familiar from the earlier photoshop tutorial where we applied a bunch of different effects so we're in a slightly different setting here and then we have those same images with atlas on his own and lucy on our own as well and i'll show you how this all comes together and before i forget at the top we have the logo the residence and a bit smaller the residence again and you can you can probably tell where the inspiration came from if you are a little bit of a gamer and for reference the font here is futura pt and then this one down here and all of these actually are sf pro display now the reason i created this asset sheet was so i could spend the bulk of the tutorial focusing on the game ui itself and how to link everything together but if you would like to follow along with the previous tutorials for creating icons or applying cool effects to a photo or an image then i'll link those in the video description below and things like the controller icons here you can create these using the line tool the ellipse tool the square tool and the polygon tool if you wanted to go and create the triangle and the square icons so simple icons like this can easily be created with adobe xd's basic shape tools now on the left here you can see the assets panel if you don't see this just go down here you can click this icon to bring out that panel and we have some colors that we're going to be using predominantly it's going to be white and red these are the character styles for the fonts that you saw on the asset sheet and we've also got some components down here that i've already created and we're going to be adding a few more in a moment now components are incredibly useful essentially they are reusable assets that you can repeat many times throughout your document and if you need to make a change to all of them you only have to change the master component and it will update every instance of that component throughout your entire document so when you're working on a document like this for a document that is incredibly large this is a huge time saver and as i mentioned i'm just going to show you how this works so we'll zoom in here we have our logo so i'm just going to click this one right click we've got make component the shortcut for this is command or control k and you can see it adds this as component 9. we'll double click this and give this a more suitable name so we'll go logo dash large and then we'll do the same for this one here right click make component and we'll go logo dash small there we go and you can tell that it's the master component because it has that green diamond with a solid fill in the top left corner and if i just duplicate this with alt or option and dragging you can see it doesn't have a solid green fill so i can right click any instance of this go edit main component jump in here make a change boom they all change so incredibly useful stuff now i'm just gonna delete all of these instances and just make sure i have my master there okay so a few more things that we need to create i'm just going to come back out we'll go down here we're going to select our main hero image with both characters here we're going to make this a component and i'm going to name this team you can see it's already using the layer name there so no work required from me and down here we have them individually atlas and lucy now when it comes to animating our prototype what i'm going to be doing is i'm going to be taking this image of the characters here together back to back and i'm going to be splitting them out atlas is going to move to the left lucy is going to move to the right there's a little bit of animation trickery that i'm going to be using and showing you in this so what i need to do is first grab the rectangle tool and we'll create a rectangle now i know the size of these images as i mentioned they match the artboard so it's 1920 wide and 1080 hi we'll just deselect the border give this a bright bonkers color there we go and if i just use the align tool to make sure this is aligned so it sits perfectly over the top of the image next what i can do is i can drag this in and you can see the smart guides there mark the midpoint so i know that that is exactly half and i'm going to hold alt or option and drag now holding alt or option and dragging will duplicate the selected object and what i'm going to do is select this bright colored shape hold shift and select the image right click and go mask with shape we have a shortcut there as well there we go here's masked i'm going to do the same with lucy hold shift select both of these mask with shape and then i can double click to go inside the mask in fact if i open up the layers panel here you can see what i'm doing so we have mask group 1 we have the rectangle in there which is the mask and then we have that character dash atlas which is the main image so i can select this and i can move this around so i could reposition him like so so as i mentioned the animation is going to move him out to the left and lucy out to the right so i'm just going to double click to go inside these groups move them out and there we go and then i'm going to right click on this we'll make these components because they will be used across multiple artboards now i could go and rename my component here however it's much easier to just rename this from the asset panel and if you rename from the asset panel it will update every instance of that components layer with the new name so if i go and call this character atlas mask there we go i'm going to do the same here with lucy right click make component and we'll go character lucy mask and you can see how these two fit together so there is of course a clear division here but don't worry i'll show you how the animation works a little bit later in the video okay so that is a quite long intro but necessary i think we're gonna go and start actually building out the ui now so i'm gonna grab this title here drag this on center this in the middle with the align tools up here and actually before i go ahead let's just make the background of all these artboards black so we can actually see what we're doing so i'm just going to drag over everything go over here to the appearance part of the property inspector click the fill bottom left corner we'll go with black there we go makes it a little bit easier and the entire ui is generally very dark anyway so now what i can do is move this onto the artboard but i don't want to move the master i'm going to keep the master out the way here and just hold alt or option to drag a copy of that or what you can do is you can drag this from the asset panel and it will drag out an instance of that and again we'll use the align tools to center this on the artboard and then right click and go arrange and center back or if you're on mac it might be up here in the top left corner along the top of the screen that's just one of the few differences between the mac and windows versions okay so we've added an image we have our title or our logo i'm just gonna grab an instance of the x button here grab an instance of the text and zoom in so i'm going to make this say press i'm going to have x hold alt or option click and drag and we'll change this to button so we'll do something like this just zoom out and see how that looks and then we can select all of these and just drag them around make sure they sit centrally okay fantastic now what we're going to do is just drag over all of these right click and copy jump over to here right click and paste and of course you've got the shortcuts there i'm sure you're familiar with those ones now you may have noticed we've got start screen 1 and start screen 2. what we're going to be doing is we're going to have the press x button fade in and fade out now when auto animating between two artboards the way xd works is it looks at the layer name so if i go up here you can see this layer name is cross icon and it detects the change in things like position scale rotation or opacity between artboards so if i move it over here make it really big like this which of course looks awful but if i did and i auto animated between this it would detect that these both have the same layer name cross dash icon and it would animate that change so what i could do is i could select all of these by holding shift and then just take that opacity and drag this all the way down so if i get the transition or the animation between these two artboards to work on a timer what's gonna happen well it's just gonna fade in and fade out and fade in and fade out and that's exactly what we're going to be doing and it will continue doing that until the user interacts with the prototype and then moves us on to the next stage so this is why i've staggered these artboards i just find it easier personally for me because essentially this is a journey through the user interface and down here in the bottom right this is going to be our end point where the game starts and fades to black okay let's carry on building out our ui so we can take all of this copy and paste this here i'm using those shortcuts to make this a lot quicker and we're going to jig this around a little bit so we're going to change our text we're going to go story move this over here we're going to have an options menu because of course every game needs to have some options and we're going to change this to exit i'm just going to move this up here i think i might go below actually just make sure those two are aligned together yes they are fantastic and we'll just space these out something like this and then with everything selected what we can do is just zoom out and make sure that this sits centrally and then what i'm going to do is i'm going to add a little bit of animation here so when we're on a particular option it's just going to hop up a little bit so the x will come along and it will nudge up the active option so what i'm going to do now is just select all of this and then go and complete this for the other options so i'm just going to move this up move this to the middle and then bring this one down there we go and lastly over here on the right make sure you don't have the entire thing selected there we go nudge this up and if you don't want to use the dragging of the mouse you can actually use the arrow keys as well which is quite useful so if you move it up or down it's one pixel you can hold shift and use up or down it's 10 pixels so that's a good way that you can move things around consistently so there we go we have all of our options and one thing i'm also going to do is i'm just going to fade out the inactive ones so if i select options and exit we'll just change the opacity we'll drop this down a little bit go for something like 40 and then i can do that here drag this down drag this down just so the user knows exactly which option they've got selected uh if it wasn't obvious already now personally the way i like to work is i like to do a little bit animate a little bit and then move on to the next bit the reason being if you make an incredibly complex design with tons and tons of artboards and you don't animate as you go there is the chance that you'll run into issues and it's much more complicated to try and unpick the issue and find what's causing the problem if you animate as you go and you get a problem you can stop solve it and then move on that's just my personal preference and we're going to start animating this right now so what i'm going to do is hop over into prototype mode at the top and you can see here i've got my start screen selected with the blue home icon we can of course select another one this will be the first screen in my prototype let's just undo those last few steps there we go we're just going to be working with one flow here and what i'm going to do is click the artboard itself and then drag out this blue tab and we're going to go over here and define this interaction so for the trigger it's going to be a time based trigger there'll be a delay of one second so after one second the action will be auto animate we're going to be using this a lot the easing we're going to go for ease in and out so it slowly fades in and slowly fades out and we'll set the duration of this animation to one second then what we're going to do is select start screen 2 we're going to drag this back so they link back to each other and adobe xd remembers those same settings from before which is very helpful so now we can go and click play and see how this looks let me just try and move this up onto the screen so you can see a bit better there we go fantastic so that's working which is always a good start next what we're going to do is we're going to link both of these so whichever artboard the user is on at the point that the x button is pressed is going to link to the main menu so i've got my ps4 controller connected you can of course do this with an xbox controller as well we'll select start screen and we'll drag this down here so we want the trigger to be keys and gamepad and on my ps4 controller i'm just going to go down here click in this box and press x and i'm going to click the x button on the controller and there we go you can see the cross appears next to the little controller icon again we're going to have an auto animate we'll change the easing to snap it's pretty nice and snappy and we'll go point five on the duration and we'll select this one here start screen one we'll drag this to story as well now it remembers those same interaction settings we're just going to need to select the key in this box and press x again or cross and then what we can do is we'll play this one again again i'll try and move this up so you can see i'm going to press x and there we go boom okay so now we've got that working what we can do is we can go down to these artboards here so we've got the user successfully to the story artboard now we're going to drag this to the options one keys in gamepad now we want to move along to the right so we're going to go from story to options so we'll press right on the d-pad we'll use those same settings snap in 0.5 and then we're going to go from options back to the first one and you probably guessed it we're going to set the trigger to d-pad left and then we're going to select options again and go to the last one exit on the right d-pad right and then select the exit artboard and go left back to options now you can see as i work through this i'm gradually getting a little bit faster and when you become familiar with this it's a very quick process so i'm just going to select the story artboard we'll skip the first bit jump in and just check this works so we should be able to go backwards and forwards through our menu and we can and if you do get any problems and one bit doesn't work for whatever reason you can troubleshoot that before moving on to the next step okay so let's move on to the next bit now this is the really clever bit you may have noticed i have an artboard called switcheroo now this is just a word i use because it well i find it mildly amusing but this artboard serves a very important purpose and what we're actually going to do is switch or restructure our layers for the remainder of the prototype and all of the animations hence the name switcheroo so here we have the one image of both of our characters together and what i'm going to do for the switcheroo art board is select both of these i'm just going to come back into design mode hold alt or option and drag an instance of both of our characters onto here so you can see between this image and this image we have a very harsh divide we don't really want to draw too much attention to that but this artboard is purely going to serve as a stop gap to get the user to this artboard here in fact this artboard here this switcheroo one will be on the screen for zero seconds or as close to zero seconds as we can get and as i say the main reason we're doing it is just so we can switch from our image of both characters together to the artboard where they are separate and then the animation will play out here so let's go back into prototype mode and i'll show you how this is going to work so we'll go from story and we'll link this down to the switcheroo artboard now this is going to be my keys and gamepad trigger again it's going to be x when the user is over the story option and we're going to set the duration to 0 seconds now by default it will go to 0.2 and just press 0 and then spacebar and press return and it will allow you to easily enter zero seconds the easing doesn't really matter because there is no duration and then what we're going to do is go straight away from switcheroo based on a time trigger with a zero second delay and then we're going to animate straight onto our character select screen and we'll go for 0.5 with snap as the easing so hopefully that made sense if it didn't don't worry what i'm going to do now is build out atlas's character selection screen and then i'll show you the animation in action and hopefully if it didn't make sense it will make a bit more sense then so first of all what i'm going to do is select both of the characters again just jump back into design mode hold alt or option and shift and drag get this in position and then we're going to grab some assets from the asset sheet that i've created so we've got some weapons and items there we've got the text over here and we've got these icons here but remember we can just bring these in from the asset panel so we don't need to always keep going back to the asset sheet now i'm going to make sure this is central you can see the smart guides here are really helpful and we've got the cross so i'm going to bring this in here now you can see i don't want to bring that onto the image because it will replace it so if i just drag it outside of the artboard and then bring that in and then line it up i'm also just going to type some text that text will be select and then i'll give this the respective character style and just make sure again everything sits centrally we'll nudge this up and we'll duplicate this holding alt or option shift and dragging and we're going to type his name we've got atlas and then the surname gray now i want to centralize this i could go over here and then edit this character style from here if i wanted to it doesn't look like we can do alignment from here but that's okay i can just select this and from the property inspector on the right we just make sure this is all centrally aligned and then i'll give this the title one the name's gonna be a bit bigger and we can just select all of this holding shift including our main image and make sure this is all centrally aligned there we go and we can zoom out so there we go we have atlas as one character that you can select and we're going to need to add a back option as well so i'm just going to create a copy of this we'll type back and then we'll grab our circle icon remember we don't want to drag this onto another image or component so i'll drag this just out here and then we'll position this like so again just make sure we're central on the artboard yep all good just so the user knows you can press the circle button to go back and i'm just going to nudge this up so it's perfectly in the center there we go and just while we're here we're gonna set up our other character lucy walker as well so we'll drag atlas his name over here we'll change this to lucy walker we're gonna grab her set of weapons and items as well we'll just make sure this does line up with the other one snap that in the middle and there we go fantastic now we're just going to add one more thing to make it obvious that atlas is selected by default to start with so we'll grab the rectangle tool and create a rectangle that matches half of the artboard and again you can right click go to arrange and use these shortcuts here just to get this in the right position so i'm going to send this all the way to the back and then just bring it forward one so it's in front of the character artwork but it's not in front of any of the ui elements and i'm going to go over here and change this from solid color to a linear gradient select the white we'll make this red you could even use the same red up here so we can type that value in ff5454 press return and then i'm going to set this one on the right to black and drag the opacity all the way down so we're going to transparency you can use it with white as well but i just find black does actually look a little bit different with transparency for some reason now i've actually done this gradient the wrong way around but that's okay i'm just gonna rotate this around and hold shift to snap that in place and with the addition of blending modes in xd i can change this to soft light and even bring that opacity down if i want something a little bit more subtle so there we go we know who the active character is now i'm going to be using this gradient again so i will select it and make this a component and we'll just call that gradient so if i wanted to change the gradient from red to blue at the very end of the video i could do it just by changing this one component rather than updating the gradient on every single artboard okay so let's see if this works so now we can go back over here to our prototype click on story and play this when we press x what should happen is it should split the characters in half and take us onto the character selection screen to go ahead and play the story let's see what happens so that's not quite animating as intended so let's click x and let's have a look at what's going on so if we click on our story art board and click this link here we can see that we go to our switcheroo artboard and then from here without delay we go to the next artboard so let's try increasing the time to two seconds now this is a trick i find quite useful when you're trying to find an issue with an animation but it plays too quick for you to actually see anything so we'll try and play this again now so we can clearly see that this animation isn't playing out over the course of two seconds i'm going to spend a few minutes now just trying to figure out why this isn't working and i figured it out the reason that the animation isn't working is if we double click to go inside this let's just jump back to design mode we'll go inside this what i needed to do is move the characters back into the center so let's move them in like so so this is almost as if they are back to back however we have that horrible split but because this artboard is only displayed for like zero seconds or 0.1 seconds at the very least you can sometimes just see a slight transition but it happens so fast that when i go back and play this now you're gonna see the characters animate from the center out to the side now that was our two seconds that we set a moment ago a bit too slow i want this to be really quick and snappy so in prototype mode i can select that artboard change that back to 0.5 but the whole one second two second five seconds on your animations is really good for watching it in slow motion and finding out where the problems are okay so let's play this now boom there we go so a clever little bit of auto animate trickery to separate the two characters out now of course we do need to go back as well so we're going to select the artboard drag this back this is going to be a keys and gamepad trigger we'll press circle that is of course the back button but actually we don't want to go back to this switcheroo artboard because that will just lead us back into the same atlas one so let's actually go and change the destination to story that's going to take us back up here and again i'm just going to select this press play check it works there we go back to story fantastic so now we should be able to go around in a loop and there we go okay i'm sure you've guessed what's coming next we're now going to need to add the option to change character so back in design mode we just select everything copy and paste this onto the lucy artboard and this is really quite easy now we just drag the gradient over here use those shortcuts to bring that forward a little bit we're going to move the select and the x icon over to this artboard and i think one other thing i'm going to do is just delete all of these bits of information now earlier i said the auto animate operates on detecting the change between artboards for layers with the same name if it can't find a layer with the same name it will just default to a fade in or fade out animation so if i make the inactive or the non-selected character 40 opacity and we can just click on atlas and we'll play this one now no we won't because we need to assign triggers so without the selected in prototype mode we'll just drag a link over to lucy and we're going to be going right again snap 0.5 on the duration is good and then we're going to go from lucy back to atlas and you guessed it by pressing left so let's go in so there you go this is where you really start to identify these problems so that layer that gradient layer is actually moving up in the layer stack and it's causing this weird jump animation so let's close this down we'll open out the layers panel and we'll take gradient move that above lucy on this first artboard here because what it's doing is the gradient's moving over and then it's jumping up in the layer stack which is why it looks so instantaneous so now we've moved gradient up a little bit we should be able to flip between them like so now we can choose which character we'd like to play as or we can just go back okay nearly at the end now what we're going to do is we're going to select all of this no we're going to design mode then select all of this and copy and paste this we are going to select lucy as our playable character so i think what we'll do is we'll have the the back icon and atlas they're going to slide off over here and we'll drop the opacity all the way down so they're going to fade out and we'll make the gradients span the entire width like this and if we just hide the gradient a second what we can do is take lucy's character mask not do that what we'll do is we'll go inside this in the layers panel inside the mask group we'll extend the mask all the way to the artboard and then we'll re-center the character now of course this image isn't actually central or the images but the character isn't because we had them back to back so what i'm going to do is just scale this up holding shift and pop her in the center myself and it will have a nice little zoom transition as well so the image of the character will get a bit larger and we'll just put these in the center as well and the select icon well that can just fade out as we've already selected our character and then we're just going to turn the gradient back on and then it's going to fade to black and then the game would theoretically start so let's go and link this up now into prototype mode at the top click on the artboard now you can assign these triggers to different objects if that makes it easier to remember so you could assign them to the icons themselves but for me i just find it easier with a simple prototype like this to assign it to the artboard itself just so you have that one place where all of your interactions are going to be added so we'll drag this down here and of course this is going to be an x or a cross press on the gamepad and i'm going to set the duration to one second it's just going to be a little bit longer but we'll still go with snap and then we're going to select this artboard and just fade to black at the end there that will be on a time trigger so we'll have like a one second delay and a one second fade out or maybe actually no let's go with the two second fade so it's a little bit slower there we go so let's see this in action see if it works and then if it does see it in action so we can switch between our characters press x and there we go we have selected to play the game as lucy now there was one other thing that i noticed now we've set everything up you're going to see one of the benefit of components here if i switch back into design mode i've got this same large logo here we didn't actually end up using the smaller logo and it looks like i actually moved the master as well for the large version naughty naughty we could go and put that back and then copy it back but it's not too much of an issue so because we didn't use the small one what i'm actually going to do is once they've pressed the x button and got into the menu i'm going to bring this down in size remember xd detects changes with layers for the same name between artboards so if i just bring this down in size and then copy and paste this onto the respective artboards even though i've adjusted the size this is called a component override and i could actually go in and change the font here and it would update to these but it wouldn't interfere with the resizing that i've just done so very very useful very powerful stuff components so if we go to start screen 1 we'll click play and we'll just see how this looks so we've got our press x button flashing we're going to press x you can see the sizing of the logo just came down a little bit and story doesn't seem to be moving right for some reason so again we're gonna do some troubleshooting we'll go back in jump into prototype mode we'll click on the link and we'll see what's going on so there we go i must have pressed that wrong by mistake d-pad left we'll change that back to right we'll just check this one while we're here this one's going left so as you create more and more complex prototypes this kind of stuff just happens so again we'll go back to the beginning we'll click play and we'll try and go through the entire prototype from start to finish so we'll press x we've got to hop through the options we're going to play the story press x again we get our character select screen we're going to play as lucy and there we go and the game in siri would start and that's pretty much the process in adobe xd from start to finish now if you have prototypes that have lots of high-res imagery and loads of different artboards and assets it can get very complicated and also very demanding on your hardware so if you do have a solid bit of kit that's definitely going to help speed up your workflow and just keep everything running nice and fast and because xd was designed from the ground up as a piece of software it's very snappy and responsive anyway and there we go so that is how to design a game menu ui in adobe xd so a huge thank you to msi for sponsoring this video and to you for watching if you've got any questions or comments you know what to do drop those down below but as always like this video if you enjoyed it take care and i'll see you next time [Music] you

Channel: Dansky

Views: 29,728

Keywords:

Id: i9VmpfOjJ4w

Length: 38min 20sec (2300 seconds)

Published: Fri Oct 16 2020