Adobe XD CC - CUSTOM UI Design Tutorial

Key Takeaways

hey all Gary Simon of course etro and in this video today we're gonna be taking a look at creating custom user interfaces using Adobe XD now XD just released to the official 1.0 version so it's out of beta so now I thought it would be a really good time to do a brand new tutorial bringing everybody up to date and it's really not going to be about the tools in Adobe XD this video is really going to be about the concepts about what it takes to create solid user interfaces because I know a lot of you are new to this and when you're new to this type of thing you're probably not thinking a lot about these really core fundamentals that you really need to be at the forefront of your mind when you're designing so I'm gonna do my best as I'm designing to describe and explain why I'm doing the things I'm doing alright so make sure you check out corset row comm and also subscribe here on youtube if you like this and you're going to so you might as well just go ahead and do it so I'm gonna switch over to the desktop here and this is the new window the new document portion when you load up Adobe XD we're gonna choose web 1920 just by default all right so also mind you when I go through this I do not have any custom colors predefined usually I'll do that and make my life a little bit easier so I'm just gonna kind of wing it and hope for the best here so the very first thing I want to establish is a background so we click on the artboard name which is web 1920 I'll just call this app by double clicking on it and all these damn dogs and what we'll do is I over here for appearance we want to fill of course we don't want it white I'm gonna choose a gradient I don't always choose gradients actually a very rarely do but for this I make an exception this is kind of more experimental kind of going back to old-school I I'm gonna be using gradients in this design so right here for the first color picker I'm going to come just like in a turquoise sort of of color right around there and you can see the color code down here if you need to hopefully you can see in the video and then on the second one we're going to come around the same area maybe just slightly a little bit more green it's not going to be too different we don't want it to be too too different so something right around there and it's 1 4 9 5 5 D if you want to follow along exactly alright so that looks good the next we're gonna create the actual rectangle that will house the interface itself so I'm just gonna left click and drag out somewhere right around here it's gonna fit in nice and easy with a lot of margin and pagin between the background here and itself and then also once we do that I want to bring these little corner angles in just a bit but not too much maybe right around there alright great so at this point when we're considering color for this we have to really consider and contrast it with the background so if you look here this is great because there's a lot of contrast between this foreground element which will house the user interface and the background eye we could also make it darker than the background but it has to be significantly darker so if I look over here I just realized I I was showing myself when I was doing that sorry about that if we take this darker we can see there's also a lot of contrast so there's tons of contrast here and then there's less Conte or there's more contours the same amount of contrast here if we go really dark what you don't want is this eye this still amount of a decent amount of contrast but if we look over here if you get a little bit lighter oh man that just it just makes it makes you want to shoot yourself you don't want to do that because you can barely see like the the difference or the contrast between these two elements here you know it hurts your eyes almost so that's one thing to always consider is contrast contrast contrast it's like one of the four core foundational principles of any type of design so we could go white or we can go dark I'm gonna go dark and it's gonna be in this blue area and roughly right around there looks pretty good all right so that is two zero three one three AAA or one 3a sorry about that all right we can also add this to the color swatches right there okay next we're gonna create sort of like a top bar along the top so I'm going to hit control D to duplicate that we can check out take a look at our layers too by the way so we can see we have rectangle one into just copies of each other I'm going to drag this one up on top roughly right around here we don't want a border so I'm going to uncheck that and we also don't want it to be rounded here at the bottom so the way we do that I'm gonna zoom up oh by the way this bottom one we don't want a border there either so just so we can see this temporarily I'm gonna make it white we don't want this rounded angle here so we're going to double click choose that one so I'm left clicking on this anchor point and I'm also gonna come over here I'm going to hold the space and my damn cat just jumped on my desk here messing me all up alright so I just I select both of those while holding shift and hit delete and that's how you get rid of that and we're gonna make this top maybe just a slightly darker so to do that on my fill I got my dog up here by the way the cat is on my desk this is turning into like a nightmare oh well I'm not gonna worry too much all right that's pretty good right there alright so also when you do this you could see if I double click this let me make this white real quick let me add is two swatches so we still have it we'll see that this right here is affecting that there's a little directional anchors I just pushed that up and it's happening over here as well there we go now it should be straight across all right so now let's take this will make that color again right around there all right cool that works now we're gonna have a sidebar so to do that we'll also just go ahead and take this hit control D so it created another duplicate over here dragging this in and this time we'll make it the same color as the top just initially and then this is going to be real hard to see I want to make sure we could see all the differences here because the the difference is in color going to be slight all right so we have this yeah actually it's going to be really close to the top so I'm going to change the top here to be slightly darker so now we can see kind of a difference between these three here and what just happened I accidentally I moved that it over nobody'll try to fix this there we go okay all right so far so good now I'm going to add kind of like a logo area right here so with the type tool I'm going to put in tactical stuff that's going to be the name of this weird app or company or whatever it is by default I'm gonna choose railway font and that's a free font you guys can tell I use it in a lot of my videos and I'm also gonna change this here to bold and choose a color like right around here at the top this is going to be white just to create a little bit difference in like a little bit of a word mark logo all right right there's pretty good I'm gonna put a vertical navigation right here make it line up with the very left side where this begins so this is going to be right there I'm going to put in railway for the font we'll take down the size just slightly you right around there and I'm gonna change it to semi bold and also the color we don't want to be gray we'll go ahead and just choose this by default and we'll just bring it up so we have a good amount of contrast there okay so looking at this in terms of alignment alignment is another thing that is absolutely critical when you're designing your user interfaces every element needs to be aligned in sort of a a thought-out symmetrical way and so what I mean by that is if we look at the logo right here we could see I didn't choose to put it right over here because I throws things off there's no there's a lot of padding at the top but now there's like 1/4 of that padding right here so you want equal padding and margins between your elements you can also see that vertically in B when it comes to this top bar right here it's right in the center so you need to make sure you pay attention to that and it's one of those things that if you're new to this type of design you're not usually not thinking about it and that's one of the pitfalls it just results in a design that just looks bad you're not sure why and you're mad and life is horrible and everything so just think of that going forward now the same thing here we don't necessarily have to for instance we have a a certain amount of padding between this portion in here and then this portion here you don't have to maintain that necessarily for almost every element when it comes to repeating elements you definitely should have an even amount of white space between these elements so to repeat a vertical navigation here in Adobe XD we'll click on that little repeat grid and just pull down and we'll just have four links here initially and let's see what this looks like a hundred percent I'm still gonna make these smaller which I can I can make that adjustment and a little bit later right around there is good once we're happy with that we can ungroup it and then I'm gonna take all four of these by holding shift and just scale down just a little bit more I'm gonna make them a little bit smaller this next one I'm gonna call tactical and I'm just coming up with names that really don't make sense briefings and Intel all right cool now we're going to simulate what it looks like when one of these is selected so to do that we're going to create a rectangle right here all right we can adjust few other things afterwards we can get rid of the border here and we're going to use this fill take the eyedropper tool actually I kind of want this to be a little bit brighter so I'm gonna come up like right there and now we're going to position this beneath this one we'll make the fill right here so as you can see when it comes to selecting items you want the contrast also to be quite high so here we're simply inversing the color scheme that we're really working with up here I don't like that this is a little bit off it should be this one right here and we can add this to our swatches - all right great so far so good now notice you know when we were creating the space in between each of these I gave it a lot of room that's another thing that new designers kind of get wrong they cram everything together they make everything extremely tiny no give things room to breathe that's if there's anything that you should walk away with this video it's that things need to have space between them now obviously you can do too much space but usually new designers to cram and everything together I'm not sure why I did the same thing okay that looks pretty good so far to me all right so right here we're gonna have sort of like a video player kind of like a video type thing I really when I design this I wasn't really thinking of any type of specific project in mind I just wanted to come up with something that looked interesting from which I could you know show you design principles and stuff so make sure this is I kind of a hundred percent in this section right here in the main body of this and the color doesn't matter because what we're gonna do now is I found through images google calm I sorted it by free to use images and also free to modify images and I came up with this one I do my best to remember to link this in the description so that you guys can just quickly access this and just take this image you can save it to your desktop somewhere and when you do that Maya that photos right here make sure this is selected and we're gonna just simply drag this over there tada it's one of the exciting things about Adobe XD so this is a pretty good looking right here we're going to take the opacity down quite a bit so maybe around 37% all right that looks good and underneath it we're going to create kind of like a bar where there's like a progress bar as if this is a video so I'm gonna take another rectangle drag it out maybe right around there looks good and no border get this background here click on it make it slightly darker just like that okay now let's go ahead and the next part the one of the also I want to just mention when it comes to these type of layouts detail is key when it comes to sort of futuristic slash gamers there's all the what really makes it are the details so I'm gonna sit here and real quickly trying to make a quick just a little video player UI so we'll take the pen tool holding shift just to create a little play icon and I don't like for some reason they don't allow you to see if this is in the middle or not but yeah no big deal right there is pretty good we're gonna use our foreground color right there we're going to create kind of a by the way going to make this a little bit smaller we're going to create the actual progress section it's gonna take a thin sort of skinny little bar here and I'll put in a slightly darker color right around there all right well let's we want this to be in the center I'm gonna zoom way up here zoom up more we can see we can also drag this out we're gonna have an area where there's the time now once you have that in place ctrl D to duplicate it and we'll change the color to our primarily color here and then we'll drag this and just to emulate you know okay this is perhaps near the center or so it's like inactive actively being played or whatever so let's come over here and put in a type here and what I could do is take from here to here I can left-click and drag out a text area and then Center it right here and I'll just put something random like 0 4 31 again we'll use our railway actually no railway has a really ugly type 4 for font so we're not going to use that let's see here what else do I want to do we'll make it also this bright color take the size down so you can just left click and drag down in this little area right there all right coming along so far so good I another thing I wanted to add real quick would be an area where for instance if you hover it over or clicked I don't really know I haven't thought about it in terms of whether it's a hover click either way this I pop-up will show up over here so to do that we'll take our rectangle tool again maybe drag out an area about this size get rid of the border it's always applying that damn border and then we'll make it black but we'll take down the opacity right around 65% so inside will have some type now just try to remember keeping your mind when we're adding the type or trying to really pay attention to margin padding white space all that stuff so I'm gonna put in waterboarding 101 I don't know why I chose that we'll put in yeah we'll make that our primary color railway we'll take the let's see here we'll make this bold all right so position position so right here seems pretty good the top of the type is matching the middle of this section over here and also from here to here it's being it's it has even space next we'll take the type tool again and the lift left-click and drag out a section and you can see exactly where I have it's pretty much even space all around from its parent container that black container so it has a lot of space from which it can breathe and so if you go to lips um calm you can get you or lorem ipsum generated fake text to put in let me do that real quick right here it's gonna copy that sorry it wasn't highlighting for me there we go take this paste that in obviously some major adjustments here so size goes way down here we don't want it bold mediums looks pretty good I'm gonna put a space in here alright and then we'll go ahead and make this not cut that color because we leave it that color even though we do have a lot of different you know a lot of contrast here there's no separation and this is another thing that's real important something called visual hierarchy and this isn't just specific to UI design it's pretty much universally applicable to any type of design visual hierarchy is creating a separation between the different elements and also prioritizing different elements in your design so you do that through size color in an actual physical horizontal and vertical position and and all that stuff so right here we're giving them the the same color so it kind of creates it's a little bit hard to see a distinction between the two so we can and we can increase that distinction by changing the color so I'm gonna make this color that we've been working with except it's going to be up here more on the G saturated side maybe right around there and then we can also increase the line height oops that was the size sorry about that right around there alright cool another thing will create some sort of very strange kind of navigation for like a sub navigation over here so I'm just going to hit control D to copy that I'm gonna move it over on the right just like a few times my right here book Hiroki take this up to 100% we'll make this the color we've been working with alright and then we'll put in take this control D and right now it's at the bottom just bring this to the top and we're going to rotate it over here to 90 degrees remember try to keep things all centered up right there so if I double click this we have to double click up here and I'm just going to put in intelligence I better have spelled that right or would be quite ironic right there alright and then we'll take both of these and we'll hit repeat grid and pull it out to the right just two times and we'll bring in the space pretty much even with the space that was over here so ungroup it and now we can just change these real quick psyops and this one will be Coogan I don't know what I was thinking here right there all right looking pretty cool at this point um let's see here it's kind of very wide but that's okay the original one design was a little bit less wide like this in terms of aspect ratio all right so let's continue on this is getting close getting there getting close another thing I want to do is add some icons and so a great resource to getting icons is at icon finder calm you can sort by icons like whether or not they're free and don't require backlinks from your website or your project if you want to use them this is one of those cases so I typed in satellite and I found this one and now also had it's a set so it shows all those down there so I just chose three of these and I download the SVG so you can click SVG SVG just get three of them and then save them to your desktop and now you can see where mine are now I'm just going to left-click and drag somewhere at the top and I might as well do each one of these real quickly oops when you do this you want to make sure nothing else is selected because it'll try to impose it into that section all right so now we have this cluttered mess over here now sometimes when you import the SVG's from icon foreigner or anywhere else and you try to change the color you may think you're not able to but you are it just has to do with the groupings and structures based on whoever created it so if I double click or if I try to change a color over here just by click on it we see it's not there but that's because it's in a group and so this one has a bunch of groups for some reason and now we can see we have access to change the color to our main color right here so now we can just really decrease that size quite a bit let's see right there you see it's small I don't want you don't want to saw it you want icons for instance if you can replace them in a bar like this big that's just that looks terrible it will never look good please don't do it so we'll take this down give things room to breathe you can see it's also an equal space from the top and right all right and we'll just keep on repeating that process so come in here here in here take both of these paths by holding shift and change that color let me do that real quick over here while I'm in that mode change that alright great so now I'll take this one scale it down big time kind of just get it over there randomly and then same thing with this one scale it down holding shift and alt while I do this and that changes how it scales down towards the center all right so you want these to be obviously for purpose of purposes of consistency the same size otherwise it's just going to make your design look like garbage and also equal space between and it gives you kind of like a purple guide there to help you with that process all right that looks good we're almost done almost almost so at the bottom we have some empty space here so I thought okay maybe this can be some type of video thumbnails and I oops I'm gonna zoom up like this I'm going to let's hide this real quick take the pen tool I'm going to hold shift left click and left click right around there then hit escape and then we're going to change the cut the border rather right around there so that's 4 4 5 7 6 1 all right and then I'm going to duplicate that with control D and then drag this right over here while holding shift so that they're equal size and I'm holding shift and just dragging it to the right I'm going to take both of these control D to duplicate them holding shift there we go so now we've direct we've drug it down or we flip the order rather and then select let's see here these four might be easier just to go over here and just like these paths and I'm going to group them ctrl G we'll put them in a group and get these even up over here with the whitespace also making a start at the left of this play icon would make sense too all right and then inside of here we're going to take this control D to do duplicate it bring this here in the middle hold shift and alt to scale that up we're gonna make the fill this color all right and then also we'll take a ellipse in the center holding shift and alt and scale that up drag it down up one second let me move this over real quick let's find this guy and drag it up here re lips will go underneath that get rid of the border here and then we'll make this fill that color right here which is this I think it's the same or very close at least alright so we have these two elements we want to make sure that in the center there we go actually the center of this I'm gonna make sure that's yep all right so we'll take this and then this as well and then hit ctrl G and then we'll use repeat grid to make it go all the way across how many are here about five wow it's kind of hard to see those but they're there and especially in this video you may not be able to see them very well all right great so another thing I want to do real quickly is I kind of create what happened there this got moved again I think let me move that into place all right good it creates sort of like a little picker or I'm not even sure what you would describe this as I'm just taking a rectangle right here and then also we'll make it that darker color like I said the details and these kind of intricate user interfaces is what really makes them more impressive so this will be this color I have an ellipse here even space right in the middle right there awesome all right another thing that I wanted to do is to take this the very first layer that we created duplicate it will change we'll take the one at the bottom we're going to hold alt scale this out maybe right around here and then also take the top hold all scale it down just a bit as if there's another panel back here and take the opacity right around 50% and that just kind of adds an extra layer of something that's interesting and they design essentially another thing I wanted to do is take this we're going to duplicate it control D drag it just two above or actually just to the very bottom so let's drink this up here now it's at the very bottom I'm going to move this up real quick because I don't want to select the one on the top so I'm taking my keyboard and just putting that right around there and then I'm going to duplicate that with control D change the fill to anything random and maybe just white and then changes to a background blur so you have this amount over here and the opacity let's see here brightness yeah we can also take down this fill as well and let me just experiment with something because we can really increase the the blur if we do something increase that' pasady take this one it's not blurring it very much there we go that app acity up there has to be changed and has to be increased all the way to a hundred percent ah I do it like that mm-hmm let's see here yeah I think I I think I do I think I like that sometimes you come back to things and thinking yourself yeah I'm not sure if I like that we'll leave it that for now and then finally another thing I wanted to do is we'll take him let's see we'll take ya we'll take one of these actually I'll take this one right here this arrow duplicate it increase the size bring it over here give it a fill make it that color this one will place over here right there looks good duplicate it control D bring this one over here get that lined up more evenly all rights I'm kind of hesitant though I'm not sure if I like this take this make it darker maybe yeah I like that crew in that is it so I really when I was designing I was really trying to remember okay make sure you're describing what you're doing and so I think the biggest takeaway that I had here is that you know in relation to this design one of the things that I felt like I really needed to stress is alignment and white space that is one of the biggest things all in all so contrast those three things if you can get those three three things right you're generally going to be able to create a user interface that is well structured and easy to use for the user this little experimental thing that may not be very easy to use but I wanted to throw in something unique there just for the fun of it but yeah this is the design hopefully you're able to walk away learning some new stuff here in Adobe XD CC 1.0 and also about user interface design in general alright make sure you check out corset row i'm gary simon and also subscribe here on youtube see ya