The 2019 UI Design Crash Course for Beginners

today you're gonna begin your journey as a UI designer here in 2019 oh and hey I'd like to mention this video sponsor Skillshare calm now it's a brand new year here in 2019 and Skillshare will help keep you learning and thriving as they offer 25,000 different classes in coding design business and more for instance you're about to watch my UI design course but you could learn about UX design afterwards here at Skillshare Skillshare is also super affordable with the subscription that only costs ten bucks a month but if you're one of the first 500 of my subscribers to click the link below here in the description you get the first two months free so take advantage everyone Gary Simon of course cetera here so today we releasing this 100% free UI design course on inferences geared towards beginners now in the past I in this channel I've done different tutorials bite-sized tutorials on designing websites and apps and such which is user interfaces but I've never really put in or put out a full course where I really explained every detail so the initial part of this course you're gonna see me in front of some slides I kind of talking about the very important design fundaments that you you need to understand if you're going to be a good UI designer and then we're going to step into Adobe experience design which is free and you there's a version of it that's free that you can use and follow along although you don't have to you can use anything else like figma or sketch or Photoshop or whatever and we're going to design a fictional UI alright and so the goal here is for you to walk away at the end of this having a lot more confidence than you then you have now and you right at the end of the course I mean you're not going to be a pro if you're a beginner but you're going to minimize that time that it takes from going from creating designs that just look like crap honestly to to more intermediate level stuff and then eventually to pro level stuff alright so make sure you subscribe here if you haven't yet click the notification bell icon as well I'm always putting out eye tutorials and courses and so let's go ahead and get started all right so let's go ahead and begin this next part just going to be a series of slides and then we'll jump into actually applying what we learn here during this conceptual part of the course so first we're going to tackle what is UI design so of course if you're an absolute beginner use UI is an acronym for user interface design alright so I for our purposes we're gonna say it's a digital medium that a user interacts with you know it's a very simple definition although it doesn't in the broader scope of what it means to be a UI designer it doesn't just have to be digital it could be something for instance like a keyboard that you're touching I could even be based on sound I so but for us we're just gonna say it's a digital medium usually a screen in the form of like a monitor or a tablet or a phone of some sort and your role as a UI designer is to prepare all the visual elements that make up that user interface that the person is using so a website is a user interface that they can go just to gain information or to interact with I'm also an app and so these are all things that you know you as a UI designer would be preparing a very simple conceptual level stuff here so what is UI verse UX design I wanted to throw this in I simply because there's a lot of confusion sometimes when it comes to these two terms I really we didn't have these separations early on back like in the early 2000s or late 90s but as of course the industry has matured we started to separate these different concerns so I if you're a UI designer you're not a UX designer in vice-versa unless you understand both fields are the two separate things so a UI is a visual I usually usually in a form of screens pages visual elements and such and UX is or user experience design is focused on the users experience while they're interacting with your product or service alright so you as a UI designer you your villain you're dealing with the the visual aspects that you know a person is using on a product or service and the UX is completely not based on just visuals it really has to do with that users experience thus UX design I thought I would throw in also some quotes from industry Chanel's who can also who really put it in their own words in terms of what the difference between UI and UX is so UX is focused on the user's journey to solve a problem and you eyes focused on how a product serves surfaces look in function and that's from Ken Norton UI is the the bridge that gets us where we want to go and UX is the feeling we get when we arrive that's from Jason ogle and one last one a UX designer is concerned with the conceptual aspects of the design process and leaving the UI designer to focus on the more tangible elements and that's from Andy bud all right so hopefully you now have a pretty decent understanding of you know what the difference is between UI verse UX design I also wanted to throw one more comparison in here example UI design verse front-end developer alright so this is some something I've sort of covered in my video a few days ago about front-end development in 2019 but they are two separate things but sometimes there's overlap just as there's overlap with you know being a UI verse UX designer you know if you're a freelancer and you're building an app for somebody than or a website then you're assuming all of these roles assuming you don't of course outsource any of this work individually but for large businesses who have a lot of resources and money to hire out people they would possibly have a UI designer a front-end developer and a user experience designer as well so the date the key difference between a UI designer verse a front-end developer you know UI designer handles designing and prototyping the screens while a front-end developer takes those design and uses HTML CSS and JavaScript to make them work on a device now when I say make them work that doesn't necessarily mean it's gonna be fully functioning the because if it has for instance a back-end where you have databases you would need a back-end developer to actually make that function but as it pertains to you know the the part that a user interacts with and sees in the front-end like in the browser I that's the difference between you know a UI designer and a front-end developer the the front-end developer tapes those mock-ups or prototypes that the UI designer creates and then uses HTML CSS and JavaScript to make them all work sometimes you don't even need job script depending on the project alright I before we begin with the actual design fundamentals I wanted to talk about designing and prototyping you eyes and the software that you can use alright there's a bunch of them I back in the day used to be you know Photoshop for a long long time then sketch came out and that's exclusively just for Mac a couple years later Adobe experience design came out now even though it says experience design i that does that doesn't mean it's just for user experience this is a design tool and prototyping tool that kind of takes care of both of those those elements there's also a free version available it's what I use and that's what I'm gonna be using in this course although you don't necessarily have to use it you could be using figma for instance which is another very popular tool that's web-based for UI design in prototyping I believe there's also envision there's gravity there's AI which icon is that oh yeah framer there's a lot of others that you can research out there alright so I design fundamentals this is really what you need to understand first before you really get yourself involved in UI design and we're gonna go over it very quickly it's not something you have to spend weeks or months and studying or whatever I just for you to really get your feet wet if you're new or your first time to this you need to understand at a very basic level design fundamentals and these don't these type of fundamentals don't apply just to UI design they really apply to any type of visual design in the sense and so we're gonna go over these individually one by one here in a second but first these six different principles I and there could be more but these are the most important especially in relation to UI design our color and contrast whitespace visual hierarchy complexity versus implicit e consistency and scale all right also you probably throw in having an understanding of typography is also important as well which we'll talk we'll touch on here in a second so let's start with the first one and by the way these are in no particular order I'm you don't have to understand one more than the other you just you have to have a understanding I from all of them in my opinion to really make a UI design come together and look professional so the way I'm going to do this we're not gonna have any more text alright because text gets boring after a while I'm gonna do this by based on examples so we were talking about color and contrast having an understanding of color and contrast when you're designing you eyes is so freakin important it's one of the most important elements out there let's take a look at this thing right here and I'm sorry if you get blinded by how ugly it is but right here we have just kind of like it what's called an email capture and you may see something like this on a website or an app or something to try to get people to enter their emails I just just for lead generation as its called the color in contrast here is is wrong both are wrong color in contrast is wrong if we look at the starting at the top inner do win today go on a trip of a lifetime with your family this this actually contrasts pretty well with the chosen background you could probably also use white and it would still contrast' well because this is kind of like a mid-level eye in terms of lightness this color right here but when we get from this section right here we're just kind of brown to this pink there's not enough contrast between these different hues and they just kind of hurt your eyes going forward your email address you can barely see this placeholder text and you want people to be able to see your your type based I content especially the real important call-to-action type stuff where you want people to take action to enter their email or click a button and I if you look over here enter todai this is also called a call to action it's a button you can clearly see enter today so there this in this example the button itself it does it does it well in terms of contrast and color that really sticks out but we can make a massive improvement by just changing one color in this example right here alright so this already looks a lot better than it did before we just changed this color from that pink color to white and now it contrasts with this top section a lot more let's see if we can make additional improvements with this all right so now we kind of took that red or pinkish sort of teller and it really kind of competed too much with the AI in terms of color for this call-to-action button so we're simply just making it gray very light gray and then making it so that we can definitely see it with like a five pixel stroke or a border at the end and we also increase the contrast so you can actually see your email address and also we can further improve it I think enter to win today in terms of being white in this text I sticks out a lot better and we can also make other adjustments so there's a lot of it that's subjective you have a lot of options that can work for instance if we wanted to use black text we could just make a very light I great right here and you can still see a separation of these two containing elements and necessary you don't necessarily even need to have a color up here so there's a lot of options you could also turn this into a night theme if you understand contrast and color well like this so if we're looking at the background here we can see it's an element that's it still works with this background it's the same hue but we're just lightening things up I we made all the text are the text either light or white so that it contrasts well this color here works well with these other colors and really sticks out as a call to action should so understanding color and contrast is something that we'll talk a lot about when we're actually designing a UI going a little bit later in the course let's also talk about white space all right so what is white space all right well let's take a look at this example everything that's wrong with this element right here right now is a problem with what's called white space and so white space is basically the the negative space as it's referred to as or the empty space around your different UI elements so up here when it comes to the type based element so if we look at I the top of enter or this whole element right here to the top of the container we have this amount of white space but then look to the left there's only like half of it same thing with the bottom and it throws off the flow of the design so much when you don't get white space right and this is something I see new designers UI designers doing all the time they're just inconsistent in their approach towards applying white space we could also see this is kind of thrust over here but then the buttons all the way over here this is maybe centered it just doesn't flow well also even inside of here this container we have an equal amount of white space on the top and bottom but on the left it's just pushed way over you want to try to make things consistent in mathematical in terms of your application of white space as much as possible so if we go back to the original example you can see just how much better the correct usage or an application of white space really is to the overall aesthetic in the composition of a UI design let's also talk about visual hierarchy sounds scary but really it's not I again will use our example everything wrong about this one this time is a problem with visual hierarchy in terms of color and contrast it works well in terms of eye scale I in in white space we also have its eye terms of white space it's working pretty well but you your eye doesn't really know where you should be looking first I read for instance if we go down and our call to action button it's using the same color as up here so it doesn't really stick out too much it doesn't grab our eye the enter to win today has the same exact type properties as it does here on this sub headline right here so this is where visual hierarchy is so important you use a lot of the the UI design fundamentals in terms of understanding you know your usage of color scale in position in white space and you use all these things to reinforce a visual hierarchy as it's called so the most important element here entered to win today which is the the headline that we want to grab their attention that should be much larger and we use stuff like font weight making it bold stuff like scale stuff like color to make things really stand out and put things into their proper order in terms of a hierarchy so if we go back to the original example you'll see that it becomes much better I and easier to understand I when you utilize that proper visual hierarchy making this larger making this button stand out from the rest of the colors and all of that good stuff now what about complexity of our simplicity let's go ahead take a look at another example now I can't tell you how many times when I do my live design reviews on Friday here and you tried ace on YouTube now you know you new designers they're excited they have a lot of tools at their disposal but unfortunately I more is not better so you know trainee when you get into this realm where you're adding outer glows you're adding strokes you're adding in bosses you're adding gradients all over everything it really takes away from the overall composition so going back you want to four especially a new designer stay away from all that stuff you can use it but you have to know how to use it properly and so this works much better right here just by removing all of that junk so stay away from that most importantly alright so now let's talk about consistency all right so let's look at another example here here we can see something's off alright so first let's talk about the type we have Times New Roman or a sans serif or a serif font as it's called mixed in with a sans serif font right here now you can actually mix serif with sans serif font fonts but you have to know how to do it correctly so I always advise if you're just starting out stick with one or the other we can also see down here in the enter todai button text I it's comic Comic Sans so we're mixing three different types typefaces with each other and on the same UI and it's pretty much always a no-go and we can also see for instance there's also an inconsistent application of white space here with this your email being pushed over here to the left where everything else is on this sort of same column right here so you know in in terms of how you're applying you know these different visual element properties you want to be consistent as possible there we can see everything is now consistent as it is and it's just much better-looking and then finally and last not but last but not least we have scale all right so when it comes to type based elements I see a lot of people getting the scale wrong they'll either make things too large or too small and we sort of have both of that happening right here the your email just placeholder way too small it's too hard to read and then we have enter today which is quite large I wouldn't say it's too large but really in terms of the rest of the type it's thrown off so there's there's not a really consistent again a lot of these design principles will overlap and some will take from the other it's not a consistent approach to scale assets as it applies to this design so once we fix all this stuff it becomes much better alright so I now hopefully you have a least a basic level understanding of these different design fundamentals and how they all should work together and what we're gonna do now is we're gonna step into Adobe experience design again if you're using a different application you can still do that I'm not doing anything crazy that requires specific tools and your UI design software and we're gonna apply all these design principles and hopefully at the end you're gonna walk away feeling quite confident if you're new to UI design maybe this is the first time you've done it alright it's the first month that you've been subjected to it I even after watching this course you're not gonna be become the best designer ever in the world you're not gonna be creating designs that you know the lot of the top people on like behance and dribble or whatever are producing because that simply just requires practice requires practice practice practice but you can really I negate the the length of time or you can reduce the length of time that it takes from going from producing beginner level work to intermediate to advanced if you understand these design of fundamentals alright so hopefully you'll follow along and let's get to it alright so we're gonna get started here in Adobe experience design I'm going to again assume that you haven't really touched before so when you open it up we have certain presets that we can use right here you can also choose your recently opened documents we're just going to choose web 1920 right here and we're gonna assume that this is just not really an app it's a website for some fictional service alright so just real quickly just to zoom in and I'll as I just did you hold the Alt key in your mouse you can pan by holding the spacebar and left clicking dragging around and all that good stuff that's pretty pretty much all going to go over in terms of how to move around that's mainly what you're gonna need to know of course if you just use the scroll wheel you can I you can scroll up and down with the different artboards alright so I for this one if we double click here we can change the name we'll just make it home and so the very first thing I usually start with which makes most sense because it's at the top of a website or an app or whatever is you know where are we gonna place a logo in the navigation bar alright so sometimes people try to get real creative with this especially new designers who are trying to be extra creative and they'll put the logo to the right somewhere or maybe they'll place the the primary navigation at the bottom of the screen try not to do that I mean there's certain times when you can break out of you know the typical patterns but more often than not you're what you're gonna want to do what your users are most accustomed to doing and it makes the user experience so much better when they don't have to go search for things and it might be a little bit confusing so alright for us we're just gonna make a fictional logo for a fictional business that doesn't exist alright so usually as a UI designer I that is completely separate from being an identity designer which is somebody who handles actually creating the logo and in the color the website color themes and in the colors that are associated with a business essentially so sometimes you will be provided with that of course if you're a freelancer there's gonna be overlap here and you may be expected to do both I which you know it's tough because you're all separate crafts but for us we're just going to take the type tool left click here and I'm just gonna come up with a fictional company name I don't know why I've been seeing this 23andme commercials all the time 26 and 4 that's the name of our fictional business so if i zoom up here all in a squirrel we'll we can get a better look and over here we have the properties which this all changes based on what you currently have selected so if you select the canvas for instance we can change the background color and all that good stuff we're gonna leave our is white and so if we suck back down to that text layer all of the fonts that you have installed on your machine I will show up here so I think I'll just use Tahoma bold you know pretty much any actually I don't know if I like that you know what yeah that's fine we'll leave like that I'm not gonna be too picky about the fictional logo so I'm gonna make it black as well and by the way if you couldn't see that it's showing up right behind me oh yeah it's just the fill little button right there very easy to change colors obviously and another thing I want to mention if we're talking about UI design and web design specifically when you click on the canvas you can see we have this grid option I right there if I toggle that on and off we could see we have this grid with options down here with like a 12 columns and also as well as the grid color that's showing up behind me again and really what that's for is I when you're dealing with web design and layout design this is also applicable to some apps I you you design based on a grid system and these are twelve this is the most common is a twelve column grid and when you're designing a mock-up like we are and we're not yet in HTML or CSS I it's always a good idea to have an idea of you know your grids in how these are going to be structured especially if you pass this on to a front-end developer who's able to open this up I in your software your UI software and they could see you know okay so we should structure this HTML element with a certain amount of columns and so on so you'll see how this works going forward so periodically I will toggle this on and off the columns just to get an idea of where things should start and end all right and so that brings up yet another topic I'm sometimes you have to ask yourself are we gonna have a hundred percent fluid I where you know if a person is on a large desktop for instance and they have their browser maximized will I the the left portion of the you I like the the logo for instance will go all the way to the very outer edge of the browser or is it going to be maybe a fixed centered sort of I layout kind of like how we have here more often than not unless you have an extremely content heavy site we have a ton of content I having a fixed area in the center is is probably the best bet if you have a site with not much content I it's it's usually not a good idea to space everything out real far because it makes it difficult for the user to go back and forth like looking at the certain elements that they need to access all right so I will bring that back real quick the grid all right what I want to do here is just I'm gonna add like some sort of fictional like letter mark or symbol rather for the logo so I'm just gonna drag out a rectangle and these little corner radiuses right here I'm gonna drag in just so you can see that they are just rounded completely on the side we're going to give it a fill and I'm just going to give just some coming random color possibly that's a pretty good blue by the way I do want to toggle that off because it's kind of getting in the way at this point so we have this blue and then we will also duplicate that with control D and then we'll make this some sort of color that kind of goes well with it maybe right there so we can just add this to our swatches and this as well and by the way in Adobe XD we also have an assets panel which you can access by clicking that part right there and you can see we have colors and all this good stuff so for instance if we select this we can choose colors so we've just added a color to our assets and so if we go to change this color than any other element with that color will automatically be updated so you'll have to individually select elements and change them so that's a good idea to do as well all right so let's go ahead and toggle that off then just to make it a little bit more interesting maybe I'll go I hold shift in and then rotate it and then scale it down maybe something like that it's not the world's greatest logo but I I think it'll work maybe make it a little bit larger like this that's something like that and so the size you can experiment the size this is entirely a point are important at this point let me try my favorite font yeah I like that better montserrat people were probably probably wondering why I didn't choose that the regulars on this channel I'm always using that font all right so this is the logo that we're using let's bring back our grid okay that's good and now it's worried about a navigation traditionally when it comes to the most common pattern for aligning and setting forth a nation for you just your average landing page like this okay a page if somebody lands on essentially it's just to have a horizontal navigation usually situated somewhere in the middle to the upper right and usually write a line I whether that's you know if it's a fluid it's going to be all the way to the right of the browser or to the very end of the 12th column of the grid right over here so what I'll do is just take this type and duplicate it ctrl D and we will go ahead and I'm just gonna put in some fictional links right here or paste or two sub pages so we have home here I'll duplicate this and I'm just kind of holding shift and right clicking and dragging it over holding shift will make it so that you can't go down it'll stay on the same horizontal axis I'm gonna type in services here we'll duplicate that and by the way when you I move things around you see this little guide show up like 84 pixels between those I think maybe the grids kind of interfering with that process but usually to get them aligned up we'll worry about that after once we I set this all up with it with the right type well this one will just be like an about page and then we'll do one more contact all right so we're not going to use this type yet we're not going to focus on that just yet but I just want to get it placed right here there we go we can see it it's it there we go they're all an even amount not away from each other so now we have some some questions to ask ourself I right now remember we did talk about what visual hierarchy is and we could see that we have I the the the logo that has this type and then we have the home services about in contact which has the same exact type applied to it we didn't change this at all really we want the logo to stand on its own and we also want to separate it visually in some way from the navigation so that they don't look like they're the same type of elements and this is one of the core functions that you have as a UI designers to understand what visual hierarchy is so like we mentioned before we went over visual hierarchy we have different ways and manners and when from which we can change I the in reinforce visual hierarchy through different properties so in the in the case of type one of the things that we have at our disposal is size or scale we can make these smaller I we could change the color or contrast so I mean we could change the contrast perhaps to a mid gray now all of a sudden the logo automatically stands on its own we've created a separation just through contrast we could change it to a color all right so that separates it and I would say that that's not too that actually works so a lot of this is subjective as long as you get these design fundamentals correct we could also change the font weight and this is one of the most common ways and the ways I like handling it and changing and reinforcing visual hierarchy I so if we change this from bold to regular or medium we can see that completely separates it visually from this logo right here and I like it a lot I think we're gonna stick with that so now oh and by the way you don't you're not just limited to changing one of those properties you know you could you could also bring down the opacity or you obviously change the contrast a little bit which would work as well but I'm just gonna leave it like this as is so let's check our grid and what we would normally do are that the front end developer would do is I probably just right align it to the very edge of this grid right here all right so another thing that we have to concern ourselves with is should this be contained in some sort of container I like this and really that's kind of a subjective eye preference as a UI designer it depends on what you have down here maybe you have some type of big photograph based hero image as they're called or maybe you don't what matters ultimately if you do decide to have some sort of container up here is that you implement it correctly with those design fundamentals in mind I'm personally not going to add one with this but I will real quickly integrate one just to show you if you if you wanted to have some sort of navbar strip that you do it correctly all right so this come here is completely fine as long as you're not for instance you having like a massive sort of photographs hero section right here which could cause issues with contrast and readability which would be a big no-no I see a lot of people do that unfortunately but let's say for instance we're going to copy this we'll duplicate it control D if we have a a navbar section with a big strip going back here let's go to our layers down here we can just I sort this all the way to the bottom all right we want to make sure that this is implemented correctly if we do decide to have some sort of colored bar up here so let me go ahead and we'll make the fill maybe we'll make the fill this color it could be either or really so when I change this what are some things that might be wrong about this are you pause it if you if you have to but there are several things wrong about the way that I implemented this bar going behind the logo in the navigation all right so let's go through this this checklist that we went over in terms of UI design fundamentals first we can ask initially these are in no particular order first the thing that I think that's that's sticking out right away to me as being incorrect is there is an uneven amount of whitespace vertically all right so I'm talking about from the top of this element this this 26 and for the the work market of the logo and all the way to here we have a certain amount here I can illustrate it with the rectangle tool we have that amount but then beneath it we have only half that amount it does not look correct and it it throws off the flow of the design and if you're not aware of these subtle issues then that's the difference that's the whole difference between being a good UI designer and somebody who's new who just doesn't understand it doesn't have the I yet and the intelligence to see yet or the experience that there's something completely off so if we wanted this to be matched up well we have to make sure that we bring this thing down to even whitespace on all sides all right so that looks a lot better than what we had going before now it might be a little bit too much padding on the top and bottom just because if the size of our you our user interface is only this big we'll say that this is above the fold when the user doesn't have to scroll anymore in the browser then this is a pretty thick looking eye now far ideally maybe right around here would be better and then I would just take these elements inside I'm gonna hold shift and left-click to deselect the background and then just get them centered up right around the center mark which is right around there so that looks pretty solid in my opinion next up the next consideration would be for this logo you obviously these clash big times so this wouldn't be a good color if you're using the same color that's already a part of the logo because you're missing elements of it so you can make this white and this another color but if you can't change the colors of the logo of course then you can only change the background element itself so in this case you want to make sure things contrast enough I so if you did have certain colors that you didn't want to you know I clash with or hide if they're the same then you could just make these very light gray or very light colors like this so everything contrasts still well and back when it was this color I I would might experiment with adding or changing these and making these white impossibly bold as well so that they really contrast with this this blue which is kind of like a mid-range contrast area it's not an absolute black or or a white alright so like I mentioned know before we're not going to be adding a bar like this so I'm just going to delete that we'll make these black again and then yeah we're all good to go I'm also gonna move this down just a bit okay so we're all ready I'm quite far into this and we've got a couple elements on here but that's because I want to spend a ton of time making sure that everybody understands I you know my exact every detail thought process about you know why I make certain decisions so let's continue on now we have I the what's commonly referred to as you know in a typical landing page I a hero section right here and you obviously have a million different routes that you could take this a different amount of columns it all depends on really what the objective of this page is every page should have a goal of some sort especially if we're talking about marketing landing pages and such which is kind of the the fictional case that I'm using here a lot of things a lot of things that I'm seeing in terms of trends from 2018 into 2019 are having nice illustrations heavy illustrations vibrant illustrations somewhere in this section I also as always you should always address what the purpose of the the the page is so that people aren't confused they want to know instantly or usually they just leave we've known that for a long time through different studies and such and also usually outside of some sort of headline that really sticks out well with good type and good design fundamentals maybe a call to action of some sort don't just leave people hanging give them a button give them maybe a scroll indicator I again it all depends on the case you know of you know whatever this particular project is so for us I'm just gonna have a very simple illustration and I'm gonna I'm going to design it here in Adobe XD and just to show you that it's pretty capable it's a pretty capable design tool now when it comes to this illustration this technically is not part of a UI design it's a graphic design essentially so that's why there are just graphic designers who specialize in that stuff and then there's UI designers front-end developers on yada yada yada but again because most people aren't in jobs that are just confined to one strict area unless you're working for a massive company that's a ton of employees then you're gonna want to know how to work with the pen tool in the shape tools as well and and how to actually as well as outside of just understanding the tools when it comes to graphic design also creating effective graphic designs and illustrations to get your point across so we're going to assume that 26 and 4 is a web hosting company of some sort and so we're gonna reinforce that with some sort of very simple abstract design kind of just centered right here and again you could you could position in in any different way as long as you do it again with these UI design fundamentals in mind so I'm going to create kind of like a an isometric I'm gonna say like a quasi isometric perspective icon right here because I'm technically you would probably want to use Adobe Illustrator for this because there's more tools to achieve it and make it easier but I'm gonna do this rather quickly as possible in here just to save time and so we're not jumping back and forth between different apps so I'm gonna take the I at the rectangle tool and I'm gonna create a square I'm gonna hold shift and alt or just shift itself it just changed how changes how we're and how and where it draws the the tool or the the box rather and we're gonna give it no no border and we'll just make it this initially are our blue color all right I'm going to rotate this holding shift so that it's more of like a diamond sort of set shape and then I'm going to double click into it and in Adobe XD that gives you access to the individual anchor points that you can move around alright so I'm just gonna I unfortunately at the time of recording this they don't have the ability to skew or perspective distort things so I'm just gonna do it by I I'm holding shift and bringing this down holding shift and bringing that down as well and just trying to eyeball I could get another rectangle here to make sure that these are all even from there but I'm not gonna worry about it that too much okay right around there is fine now I'm going to duplicate it ctrl D and then just put the other one right there and now creating kind of like just a very abstract computer at this point so I'm gonna take the pen tool hold shift left click then hold shift come down here come down here and there we go so now I've created another box or a side of the box and we're gonna give it this color except I'm gonna come and make it perhaps maybe a little bit lighter actually now I think we'll leave that side the light side the same color and if you need to make adjustments you can just double click make sure you get that anchor point right there then hold shift to make sure it stays on the vertical plane there we're gonna duplicate this control D and then I'm just going to left-click and drag all the way to the other side and this one I'm going to assume the the light source is coming from this direction so I'm gonna make a darker I would say yeah maybe somewhere right around there and maybe this one this side will make a little bit lighter so there we go we've we've made a cube that looks pretty pretty accurate in terms of being isometric we can also delete this bottom one because we can't see it at all and we just put that one back look at that so just by utilizing the same colors consistently in your UI which is you know another UI design fundamental alright we can see it's already coming together quite well and it looks solid I even though we just have really just three different objects and we have this blue here it's being used here in different shades and it just looks nice this in and of itself doesn't really make sense so I'm gonna add just a couple buttons on the side of it and a quick way I found to do this is just to duplicate this right here this this selection and then hold shift and all in real quickly we'll just make this like I don't know almost a white color or you could go why it doesn't matter and then we'll scale this down hold shift and so that helps it maintain the exact angle from the rest and we can just pretend that this is like a server rack or something so we could take the repeat grid tool with that selected and just pull down and then in between them we can drag them close to other people's bring it all the way down yeah something like that and I'm looking to make sure that there's an even amount of white space from the left bottom and top and it looks pretty solid to me so then we could take this and duplicate it maybe put one right there and then I'm going to ungroup this grid and then just get rid of all the rest of these and this one I'm just gonna change up a little bit and maybe make it a little bit longer maybe right around there again try to keep it in line with this line up here right here and then we'll just go ahead and take the repeat grid once again oops and try to get these to line up as much as possible we'll go ahead and ungroup it and delete the bottom two now if it kind of got off a little bit you can just hold shift and drag these down as needed now they look pretty close together and we can also change up the color so that this has it makes a little bit more unique and diverse so with those selected we'll just choose we'll choose this color alone and then maybe we'll make this we'll change the hue and you can change the darkness as well so you have a lot of options as long as your elements are contrasting enough you don't want areas that just barely contrast because it makes it look at like absolute garbage I think I might change a couple things here see right here two here this doesn't quite contrast as much as I would like it so maybe something right around there I'm gonna take all these elements except for this so that this what we just created and scale them down although first we have to select ungroup' grid there we go so we're giving them even more room to breathe in terms of white space all right and of course you would want to keep on doing this until of course you have something that's solid and it communicates the idea properly so what I'm gonna do you you've seen me and use these tools enough and it's going to use the same processes to add more to this and I'm going to speed up the video [Music] also I kind of want to simulate the idea that data is flowing through here in some way so I'm going to take the the ellipse tool and hold alt and kind of create an oval and then create a dark area out of this so we're gonna get rid of the stroke let's get that color right there with the eyedropper tool and we're going to rotate this just slightly all right something yeah right around there I think would work and make sure it's kind of centered here all right I and then what I'll do just to create let's see yeah we'll do kind of like a dot a dash to line coming out of here so just starting right here will create a line hit escape we're gonna take the size and increase it a bit we're gonna change the the corners to a round cap and then also we're gonna increase a dash with a gap that's kind of a bigger in the the size or the dash will be maybe yeah I would say right around here we'll take the size down maybe two three or four and then we want to choose a color also that kind of works well maybe this yeah that works pretty well and you may want to expand I experiment with with the gap and in the size and all that I think that's pretty good right there and we can just duplicate that and we'll take this layer here well we'll right-click and choose a range and send it back so that puts at the very end so it makes it look like that there's um the data is going through this as in like website traffic or something and so now we're getting pretty good i we have an interesting look maybe what we can do is take everything with exception to the to the line right here and that line and we'll group it up and we'll rename this to pc one we're gonna duplicate it the whole thing and then we'll take the one at the bottom we're gonna move it off to this a little bit and then we will scale things down maybe maybe we'll put one like right over here something like that and there as you can see you can keep going and going if you wish you don't want to make it too too elaborate but I think this for now is fine one last thing I want to do is to add the illusion of depth to it is to add a shadow coming off so I'll take the pen tool hold shift and I'll come out maybe right around here wow I did that for almost perfectly I got it lined up right there but I was holding a ship the whole time and then what we'll do is I will put this set to the absolute bottom for now get rid of this the border and give it a fill and we'll give a linear gradient right here and we can go ahead and adjust this the angle of the gradient so we're starting maybe way out here and then just very subtle hold shift and there we go when it comes to the shadow you don't really want it to stick out too much because you don't want it to contrast a lot I mean because you want Matt you want a lot of contrast so that your your your primary element sticks out real well all right so that's good I'm gonna group that all up and then we'll just call this I'm server okay so we're doing pretty good right here now I now we have to ask yourself you know where do we want to put this do you want to maybe make it larger and and and stick it over here to the right which we definitely could and then maybe have some text right here and a call to action or something or we do we want to Center it either way it's fine again as long as you you implement it with good UI design fundamentals in mind so putting it up here would be a bad idea because it's way too close to the navigation especially on this this larger viewport resolution of 1920 by 1080 which is the canvas size so we want to put it at least probably no taller then right there and I'm probably gonna scale it down maybe to right around that size okay now this this shadow right here is kind of throwing me off because it's hard to see exactly having it centered so what I'm gonna do is we're gonna take this path and take it out of that group and then right here we can align this horizontally there it was it was almost perfect already but um that will make sure it's aligned now we can put this back into the server group right there awesome so again alignment it's one of those important things when it with or when there's just an element standing on its own whether it's text or an icon of some sort you want it to be aligned in the center all right so everything is looking pretty solid now so now let's let's think about I've the the you know addressing what this site is about this icon alone is its enough so we need to have a headline of some sort so for a headline we're going to take the tab the the type tool and I'm for initially what I will do is just left-click and drag out a text area and then I will Center it right here and then we're gonna have our primary headline now you as a UI designer that's not your job to think about what it should say that's the job of a marketer / a person who deals at the ad copy so again it's nice to have these skills so understanding ad copy is extremely important if you're kind of like the Swiss Army freelancer so that's something you would want to research I'm just gonna type in web hosting for the modern era alright and so then I'm going to increase this quite large alright so there's a few things happening here in terms of UI design fundamentals that we have to make sure we've nailed down first is it large enough so that's kind of a a weird question because we have to consider what exactly this type is and what its purpose is well it's a it's a headline into a dress you know what exactly this site is about or not what exactly this site is about but to give them a good idea and this is probably one of the most important elements if not the most important element on this page right here so we want to make sure it's large and it sticks out quite well and it has a lot of white space around it otherwise you push it like this and that's not enough it's also inconsistent we have this amount of white space right here from the top but then we have nothing right here so you're going to want to make sure it's based out and XD obviously has this stuff already worked in pretty well when it comes to the guides so I also the contrast it's sticking out quite well we could make it this blue color but then the contrast isn't quite as high and it's harder to read actually plus we already have a ton of blue right in this section so in terms of visual hierarchy this time this sort of gets lost so we're just going to make this black alright and then we're going to duplicate it and we'll have a sub-headline which is also very common on most web sites and will bring down the size and again this goes back to visual hierarchy the most important element is this headline therefore we're going to reinforce the importance of it I by separating these two visually in different properties in different ways so we've already scaled it down let's get a I I'm just gonna say go serverless the extra ad copy go service go serverless and pay only for what you use okay all right now let's say for instance we we can see if we click on this this is 51 the size and this is 37 it's quite different right but is it enough I mean these are almost too similar so you have to make sure in some other manner if not through scale through another property that you reinforce you know the the hierarchy between these two Inlet Inlet and basically let this element this type element right here this piece of ad copy know that it is secondary is inferior to this very important element right here so if we're gonna leave it at this size we have to do something else I could take down the opacity but still it's not good enough just because this the scale between these two elements is too similar so we want to make sure it goes down probably right around there and probably no larger and maybe you could get away with going a little bit smaller and then you can also so we can see now that it's a lot better because your eyes automatically drawn here also if we use and make this I maybe semi bold there that that works out a lot better and then we can also take down and make this maybe I kind of like a darker gray you don't want to go to gray like this because then it won't be readable for some people who have bad eyesight so maybe right around here and then it could be debatable now we may not have to make this bold we could just go to regular and something like that maybe yeah well maybe we'll go back to two medium I think I like medium actually and one thing you have to do you definitely have to consider is how many different weights you're going to be integrating this is where an understanding of front-end development will help I because the more font weights you integrate into a layout that's more load time because those have to be downloaded so if we're gonna use like a medium we want to probably only use a medium and then just the regular or semi bold semi bold might be better to go with this that way we'd have two contrasting weights that contrasts with each other quite well all right so now looking at this I the next question is naari obviously if this is a landing page of some sort this isn't enough we have to have more information scroll down and if we're not gonna have any type of call to action like a button or some area where they fill out an email which wouldn't make sense really for for this to context right here and the purpose of this site then we need to have we need to let people know and have a clear path of what should they do this could be in the form of a button like for instance I it could be a button that says learn more or our services etc but if there's more content that you want them to access you can have what is now pretty commonly associated a good pattern for to let people know to scroll and you can usually use a CSS animation to make this even more evident in the the icon so we're gonna have a scroll icon kind of like the mouse wheel and that's very easy to make so I'll just zoom up here and we'll take I ya the rectangle tool just holding alt size somewhere around there i we're gonna make it completely rounded on the edges no fill on this and we'll make it our blue color and we will increase the size of the the weight or the stroke rather so looking at this the size of the stroke is also very important I first of all I'm looking at all the other elements here and trying to make sure that I have a good weight for instance if I made this just one you could barely see that right if I made it like that that's way too much to eye so we're just going to stick to around five and then also to make this more obvious that it's a scroll wheel we'll duplicate this hold shift and alt we'll get rid of the stroke and this time make it a fill of the same color and we want to make sure there's enough space here between these elements now we can push it down that would makes more sense because we want them to scroll down something like that alright so you can adjust this as needed maybe you think and you should be wider and then Center this or make any of those Justin's that you think but I think this is pretty good right here like that and then just make sure it's all centered up with your alignment tools so I think this is pretty good and what what we would do what I would recommend is that this is once this is implemented for from the front-end developer or yourself if you're taking on that role is to make this kind of hover up and down a little bit very subtle you don't want it to take too much attention away just to let people know that it needs to scroll all right so now looking at everything that we have before we continue again make sure that first if we're looking at the top I make sure that everything that we have here we can see all right so color and contrast very important this is clearly not a problem with any of this because we're doing with type that's black on a white background so we know we're good in that department is the white space and the margin and the padding is that good you know is it consistent I so that's real important it looks pretty consistent to me how about this element I are the color is working with the rest of the site colors and ya look sporty pretty decent to me I may make some tweaks to it in the future but it's fine to me for now how about its location and in terms of white space between the other elements is absolutely centered as it should be yes I how about the headline text can we read it is it of a good size it is to separate itself from the other elements on the page how about this in relation to that a lot of there's a lot of concerns clearly if we think about this these two element has their own block and I'll group these up we can see we have this amount of white space which is pretty consistent from the top of this to do that and how about this element will group that up too compared to the rest that's pretty pretty darn close as being you know something that a design here at least just initially looking at this that has all of the UI design fundamentals pretty much nailed at this point and of course this is a more simple approach I but I want to keep things simple especially for beginners so let's go ahead and select the canvas and we're gonna create a secondary portion eye on this UI design so when they scroll down they're gonna encounter this area over here now first you may be wondering what is that - line and that - line eye is basically the viewport height so I don't want to see that dash line because it kind of throws me off so I'm just gonna make it the same height as the canvas itself and it's there just to let you know like where the viewable area is or traditionally has been called live whether or not below the fold for the user before scrolling down so now let's go ahead and we'll do in a section right here of content now right now at the top we have a lot of white occurring here all right it would be a good idea to break that up somehow either through maybe like a photograph like background its water marked or through just a solid color now traditionally we could just die we could do something like this we'll take the rectangle tool don't do this yet just watch me maybe we'll take this blue color there we go notice where I put it we have a lot of white space between these elements which is very important especially on a bigger viewport resolution like this and this would work perfectly fine what we're seeing now as a trend from 2018 ish to to now into 2019 is to use I to break outside of the standard box of the rectangle and structure these different sections of content I may be more uniquely so some people have been doing stuff like this maybe just placing a slight angle that's a different way to approach it and we can even take that a step further so this is what I'm gonna try to do we're going to take the pen tool and we're gonna create just a very slight so hold shift so that you're at a 45 degree angle it may be writing around here and then let go and then just create a very slight angle just like that and we'll make it go all the way to this side left-click and drag to create a Bezier curve and then down right there and you can obviously adjust these with your keyboard if you screwed something up and then it will come down here hold shift and then we'll just make this one a typical line at the bottom and then connect it up so then we could fill this in with a blue alright and just notice how different I in more stylish that this looks and this is a certain aesthetic that then can be used over and over again throughout the design which is really important for the UI design fund much fundamental of consistency so I think that's pretty solid right there we have a decent amount of white space if this angle is too dramatic because you don't want it to be to mujra maket I'll throw it off you can always make adjustments so if we want this to be a higher put it like right around there and that's maybe a little bit better it's less dramatic of an angle all right so now we have two really contrasting sections of content here to deal with and now we can put in supporting information based on this landing page and if you're a UI designer you're doing this for a client or a company then you will be provided this information I usually in a context of maybe like a wireframe or just a general document outlining what they want on the page so for us let's bring back the grid and let's put in three columns of information maybe with an icon at the top and maybe some text beneath it supporting text that's relevant based on the different type of the qualities of the features associated with this service that makes it a good service right so we will bring this the grid back but for now let's just get rid of it actually no let's keep it and I'm just going to use the type tool and we're going to zoom up here and if we're gonna have three then we're gonna situate these so that they're within four grid containers and I'm going to adjust this I'm going to do something and then make an adjustment just to show you a demonstrator point I'm gonna left click right here at the very beginning of that grid into the very end of the fourth one all right and I'm just going to type in test for now and I'm also going to make this white so it contrasts better then that black did all right and I'm also gonna go use a plugin Adobe XD and if you just go to discover plugins and you search for a plug-in called lorem ipsum text you'll find it I'm just gonna select this right here you could do quick lorem ipsum and there we go that's just filler text that you use it's Latin if you don't really have content right off the you know initially to to put in there so I will say somewhere yeah actually I wanted a little bit more lorem ipsum text so I'm gonna go back I just put fill with placeholder insert there we go so now we have more and we can just cut off based on the amount that we want or not now if we have three columns of this so I duplicate this don't do if you're following along don't do this part I just want to make a point and you make it you make this text that four columns and there's only twelve home and there's going to be so close together that you're not you're gonna lack I white space between them this is way too cluttered so that's just something to keep in mind i when you're doing this I when you're working with the grid you want to put spacing in between there so let me demonstrate this in a different way it might be a little bit more dynamic and time-saving for bringing the grid back and we take this in you're ready around in there and then we do repeat grid and drag this out to the right just a three and then we extend this so that these are roughly around the same area if we change one of these for instance will change I this one if we change this one the rest will change as well so that's just one tip that's handy about the the repeat grid tool I'm going to ungroup it though and just get rid of these initially and we're just gonna focus on what this first one will look like so let's get rid of the columns here or the grid there we go and we have to ask ourself you know first we have to get the scale of this type correct we also have to determine whether or not we're gonna make it the the thicker font weight the bold we have to make sure we have a good amount of white space again and also spacing I mentioned before we're gonna have some side at some sort of icon but instead of here trying to design icons from scratch we're gonna use a resource so I'm gonna get up my browser window right here if it'll load and just off-screen i'll type in icon finder comm and this is just one of many resources that you can use to find icons for your project so if I type in calendar for instance and I sort by license type no link back just so I can use it here and I look through and also we're going to choose free now these are all icons that we could potentially use and so the type of icon that you use by the way I really should match the general aesthetic of your website especially if you've already have established a certain style and some of them obviously are a little bit more silly than the others and you wouldn't use some for certain projects for me I just want something that's real clean and simple maybe like this right here and usually when you click these they will be associated maybe as a part of an icon set and you can use other ones in your project there are many many other resources that you can use by the way for finding icons but this is just one of them and you could download sorry SPG's as well and it which is what we're going to do for this so click download SVG and you open this up I in the Explorer so if I show in folder and I drag that on I mean by the way when you drag it you want to make sure you don't drag it on top of an element because it'll replace it sometimes now we're gonna drag this on here if I can get it it's transparent so I can't really there we go boy scale this down we're gonna make it white as well because we really wanted to contrast as much as possible all right so you can use your guides you can see that it's centered it within this element beneath it the first thing I'm looking at here is there's two things I'm looking at its scale and as well as spacing contrast rate nailed that down so the white space around it I mean it should really everything should really flow together I'm looking at the white space between these elements and between this element here between this element here and then between the top to the top of this element and right here as well now of course because we do have this container that's sort of changes in height right here it's not going to be perfect they're not all going to align with each other in terms of equal spacing when we have the other three but that's okay as long as it's subtle I think right here around here is pretty good for the amount of white space from this part to here you definitely wouldn't want to do something like this that throws everything off to me when I look at this it's just too close so we'll put it back down right around there and then it will also change this to regular as long as our font size is a little bit larger like this we should be fine the size is 28 the size of this is also 28 right there we could probably go down a little bit more in terms of the size maybe right around there is good and then also I'm looking at the bottom of this comparing it to the top of up here so if I take real quickly don't do this you can do this if you want but it's not a part of the design I make this like it's something that's really ugly ink in a contrast this is the amount of white space from here to here this is the amount of white space from the bottom of this element to here in obviously there's too much so if we double click this take these two anchor points and drag them up suddenly it's going to look a lot better now I looking at this from this angle it's looking okay but really sometimes it's hard to judge until you actually get in there and add the three replicas of this so let's I let's bring back our grid so this is four grid columns long and or wide rather and with a decent amount of padding within it so let's take this and this will duplicate it we'll put it roughly right here and this can be pretty much in the center of the entire document and then over here will match the right there we go perfect so now I if we get rid of the grid this is what we have going so far so I think looking at this now that I have it zoomed way out looking at the amount of white space between this element and this element compared to the amount of white space between this element and that element we can probably definitely move these up more so I'll just take all this and just deselect the background right there and move this up probably right around here just to account for the fact that this is on a slant right here so I think that's much better we can drag this up a little bit more as well and there we go now I'm gonna just change up the text here just to make it look a little bit different like that also another you know what I may do it looks like there's just too much text right here so one thing we can do is adjust the line height so we could change it from 28 maybe to 38 and now it's a lot easier to read so that's another thing that I you could pay attention to I'm translating this real quick there we go there we go pretty much a lot better right there all right great so now I we're gonna have a second area or a third area or a third section really we have our first hero section up here we have this section right here with the icons by the way I probably will pause this and just take some two more icons from that same set and put these in so I'll do that real quick alright and there we go just took up wallet here in the phone whatever you want to make sure that they're the same size and the same thickness though otherwise it'll look inconsistent which again terms of UI design I'll just throw everything on for instance if I if I made this smaller all of a sudden things just don't look right and that's because they're not consistent that the in terms of the thickness okay so so far we're looking really solid let's do that third section down here you don't necessarily have to keep on doing this I think we'll do it maybe for the footer for that there's a certain aesthetic that we have applied here all right for this one let's just I maybe do a smaller section just for like testimonials and so we'll have we whatever you want to do you want to make sure that your sections will contrast with each other well enough so when it comes to different types of content that's just one way you can you know prioritize visually over different sections and so to do that you can either go lighter or darker right so if we take the same color I which you wouldn't want to do if it's if you're separating the different types of content so this is just features and then we're gonna have testimonials we're going to style them differently what we could do I could go darker you could also experiment with the saturation as well I mean you could go you could even go darker or with pretty much nothing I've no color you could go black if you wanted to one thing you wouldn't want to do is come up around here that looks horrible there's not enough contrast and it kind of hurts your eyes when you look at it see that it's terrible but I see people do that all the time so you want to stay away from the mid ranges when you're dealing with colors so you want it to either go up here where you can still see that there is certainly a container here but it contrasts enough with this element as well or as well as up here I mean this was d saturated this is bringing in that blue a little bit this works as well or coming down darker and you can get pretty close while still having you know get without what's still creating enough contrast for me though I think we're just gonna go kind of with like a a very light gray right around here again you could go darker whatever again some of this is subjective alright so we'll keep that around it writing around there I'm gonna drag this down just a little bit further because we're gonna have me bead a little bit more area down here and now in this section we can go ahead and put maybe two testimonials so we will bring back our grid let's save this by the way I haven't done that yet i know i tught alright it looks like it's saving in the cloud this is an updated version I haven't used yet so now we can ask ourselves do we want to have three more columns of testimonials which that could be a little bit repetitive looking so I think we'll just have two columns alright so as long as it fits within with a good amount of padding inside of the element either the content and the grid I it'll work well within six rows so I'll take I see we're gonna have like an avatar associated with a cap person in them I'll put one right here and we may end up moving things around and one thing that I like to use will get rid of the stroke is I there's a plug-in called photo splash that you can use I think there's a few others but photo splash should work I actually there's one that's more specific to this it's called UI faces there we go now you get just generates avatars in your design mock-ups you have to select an element and then I choose if you want Mel and happy with choose chicks for this apply faces there we go I love it all right so this is one of the reasons it's so much better than Photoshop adjust which old-schoolers used to use so we'll put this right around here for now and then we'll have a text area and right now I'm not worried about the size too much I'm gonna left the Lynas and I'm just gonna put in probably just some more lorem ipsum text so I'm not concerned about the color right now it's I'm gonna get this in here lorem ipsum I will do okay for now let's get rid of this it's throwing off my ability to see it clearly so what we'll do is make this here block all right so contrast real well maximum in fact I given this background so I because this is a quote we just put I quotes like that and if you want yeah we can also make it italicized like that alright and then we can also put a person's you their name or something or whoever they wherever they're from I was going to put Jane Doe alright so now we have three elements here and we have to type elements but they they're not separated from each other visually right and then we're going back to visual hierarchy here so I for this element we have to ask yourself which is most important is that the person's name or is that what they're saying that that could be debatable but for me I we want to separate these two at least two just so that people don't confuse and get confused by them we want them to immediately know there are two separate elements so we do that we can do it through color maybe make it bold and I'm not too much of a fan of this this this blue on this gray it feels like it doesn't quite contrast enough so we could take this background and just lighten it up just a tad and I think that works now we could also change the scale as well so now we've really separated these elements out quite a bit from each other we could also probably afford to make this a little bit wider because again once we get we're going to get the grid back out and make sure it fits within the the eye the area the six grid column so now what I'm looking at when I run a position this is the amount of white space between this section in the bottom of this text and then this section in the top of this text so that's where we get consistency I as much as possible and then at the bottom bring that up just like that okay so now let's bring back the the grid all right so grid all right so our columns are right here that that's the end of the six columns right here so we're going to take these three make sure that they're pretty much even with each other this start is starting right here on the left this line so again the alignment is important here I think that looks pretty good so we're gonna take this duplicate it and then just put it I basically where it would be on the second column alright so now let's get rid of this view here alright and that looks pretty good we could take this and just go to UI faces doc are you - Thomas UI faces plug-in apply it seriously hold on let's try that again UI faces this time we'll do it male there we go all right cool so that seems to work pretty well right here all right good everything's looking solid and very consistent visually so next maybe we'll have a strong call to action - I may be by the service or try it out so let's figure out how we'll do that and again there's many different ways but as long as we know those fundamentals down we'll be good to go so what I'll do is um we'll take let's see we'll just take a type or the type tool just randomly right there I'm gonna say start your free trial now all right so we're gonna make this black I would make it regular we're gonna make it large because this is important right so we're gonna reinforce the importance of this just through the size now notice how I have it off to the side we could put it exactly in the center and then have a button right here or we could put it to the left with a button right here up to you and ultimately I if you have somebody hopefully who's ever site this is they have somebody on the team to split test this stuff I which is a process of doing a/b split test and determine the placement of elements on your UI like which ones result in the most clicks and there's ways to test that with JavaScript and all that cool stuff so anyhow we'll just assume we're going to give this a starting point right here so we're going to create a button and we want to be pretty big and most important when it comes to these calls to action you want them to really stick out because they're they're a direction they're an action that you want the user to take so you want them to see it so what making it blue may not be the best idea I because there are already a lot of blue elements on a page so if we have a secondary color like an accent color that might be a great eye color to use so if you want to again when it comes to this type of eye when it comes to consistency you know do you want to have completely rounded corners for your buttons or do you want them completely square there's no right or wrong it only becomes right or wrong if you're mixing styles up in the same UI and so really I think we're just gonna go and make the determination that we're gonna use rounded corners because some elements are rounded like this is rounded this little icon is rounded our icons right here have rounded corners so that would definitely be the best bet to take so now let's put in some type right here so I'm gonna left click and drag from the very left to the right of the button and then Center it and then we're gonna type in get started some sort of effective call-to-action button text and that may not be it but I'm not an app copy guy and I'm thought about this one too much this project at least which is fake so then I'll put in will make this bold because we really want the type to stick out in the size again there is the such thing as too big that looks horrible such thing is too small that looks horrible so you want to find a nice medium right there somewhere maybe right around there you want to make sure use your keyboard arrow keys that it sigh all even inside of this button if the buttons too wide for instance I you could take it in hold alt maybe bring it in a notch all right and then we could bring these things maybe a little bit closer maybe right around there so if we're looking at spacing between these elements you don't always have to go like for instance between these this element here let me draw it out just so we can get a visual of what the amount of white space looks like so we have that element here if we duplicate it we have this which is almost the same we should probably bring these down because they're not and I want them to be the same there we go and then we have this going from really when it comes to the bulk of the content it's kind of in the center so this sort of offset offsets it so I think it should go from here to grade the round there which is pretty even all right and then from here to here that's pretty much exactly even right there all right so you don't necessarily have to make them all even especially if you're dealing with a different area that's important you could bring it down maybe by about 30% more and that's the judgement that you can make we're almost done we're gonna put in a footer so let's go ahead and change this viewport height here I don't want that dotted line there three one one three let's save things alright and let's put it in our footer so what we'll do is I'm gonna take this duplicate it ctrl D and we could keep it like the same flow or we could do something really different and just flip them holding alt all right and then this is too much blue now we have this big area with blue it has a very specific purpose and then we have kind of more of an afterthought which is the footer so let's change that up in some way you could go real light or you can go maybe darker oh maybe we could work in something like this up here but because it's not so important I might want to desaturate the color so it doesn't stick out quite as much and maybe we'll go something like that let me take this up a little bit right around there and then take canvas height and match it right around there all right one thing I'm not kind of liking is I this is quite a steep angle that I put there but yeah that's okay for now now there's an uneven amount of white space here so I'm just gonna take this there we go that's more centered vertically in there and then I then we could just do something simple like we could take the logo we'll duplicate that we right-click and arrange and bring it to front and then will I get this aligned up to the very first start of the column right there so it's in line with the top logo we'll make this white there we go and then we'll put in something like we didn't I well maybe put like the the address of the place or something and again when it comes to secondary type content like this it doesn't have to really stick out Melrose Place 902 - oh no Toni video I'll do it who remembers that shell oh man we'll take it we'll make this go regular and because it's not entirely important we can bring down the opacity and that way it creates separation between itself and the logo we'll put a second thing here USA whatever there we go all right good now look how much white space I have I've utilized right here let's see how it looks like it looks in the bigger context of everything we could probably make that a little bit bigger and then we can ask yourself if we want to have another common patterns to have vertical sub men sub navigations right here if you want to do that I'm not going to do that I think I might just take this and duplicate it and put it over here right align it we could do something like Terms of Service yeah but I didn't really have to write a line that let me um duplicate that and privacy policy or something something like this and you and these you wouldn't want to make sure is right aligned up to that I the grid so if we get the grid back out and then align it I know we we know it's aligned horizontally where it needs to be needs to be aligned up in a place that makes sense and consistent with the text to of the left as well alright so now let's uncheck that and I would say this is pretty solid and normally I mean there would be more content here to fill this out a little bit more but for now I think we've got a pretty good grip on this UI design here so let's go ahead save that and what you would really start to do now is you would I if there's where a full real project you would duplicate this artboard by selecting a ctrl D and then you would start designing what the services page might look like for instance and again you would just want to make sure that everything you're doing is consistent visually with those basic UI design fundamentals that we discussed both throughout this project and at the beginning of this video so I think this would be a pretty good area to end this bit of UI design crash course and hopefully you were able to learn a lot it shows a pretty basic layout that I think would be quite effective especially even in this day and age I think the things that we're seeing now for some of the modern UI did not design trends they're they're going in ways that are a little bit more complex than this but I think if you're starting out try to do something like this and it would still look nice and modern and what I will be doing is creating a second crash course using this for front-end development so we're gonna take this design that we created here in Adobe XD and then make it a reality in the browser through HTML CSS and perhaps even work in some JavaScript as well okay so hopefully you enjoyed that if you liked it share it around with other aspiring UI designers and make sure you subscribe here if you haven't yet click the notification bell icon and I'll see you guys soon goodbye [Music] [Music]

Channel: DesignCourse

Views: 1,212,340

Rating: 4.9458861 out of 5

Keywords: ui design, ui, ui designer, ui design 2019, ui designer 2019, 2019 ui design, 2019 ui designer, ui vs ux design, how to become a ui designer, becoming a ui designer, user experience design, web design tutorial, course, user interface design, crash course, web design 2019, adobe xd, adobe xd tutorial, adobe xd course, adobe xd cc 2019

Id: _Hp_dI0DzY4

Length: 96min 52sec (5812 seconds)

Published: Wed Jan 09 2019