Learn UI/UX Design & Figma - 2022 Interactive Crash Course

hey everybody what is up gary simon here it is a new year 2022 and i do this sort of thing a ui ux crash course every year but this year it's the best one i've ever produced and i'm going to show you why so we're going to design this right here solely within figma and i'm going to assume you've never touched figma in your life and you're also never designed anything like a layout in your life either we're going to cover a lot a lot of the figma basics and even intermediate to advanced stuff within this single project but not only are we going to do that we're going to start off this video by making it interactive so at designcourse.com there is a free what's called a ui u e y a e y e rather game and this game helps you develop an eye for the ui design fundamentals that are necessary to be good ui designer so we're going to start off i'm going to ask you to pause the video and to take one of these free ui games or these challenges and then i'm going to describe what's happening and we're going to do this through five different challenges and there's obviously a lot more that you can do as well for 100 free and this is going to help you like i said develop an eye for ui design then we're going to hop into figma and design that full user interface like you just saw [Music] now wait one second with the launch of the new year is the launch of designcourse.com which i've been working on for over a year and a half it is finally here at design course you're going to learn ui ux design in a fun and interactive way my course offers over 16 hours of video nearly 40 ui challenges and over a dozen of project submissions where you're tasked with designing components and layouts not only that you can also sign up for my mentorship program where i take a look at the work you've designed and i provide you with actual feedback and even design iterations and this will really help you improve to become a better designer and get this it's not hundreds upon hundreds of dollars i've priced it cheaply enough so that most people can take advantage of it we also have parity pricing and if you look into the youtube description you might find a coupon code that makes it even cheaper but make sure to get it fast because it's not going to last long let's get started all right so let's start with the interactive ui test with my custom ui as in ueye game so i have that linked here near uh in the top line or near the top line of the youtube description or just go to designcourse.com and click on play now all right so this is what you're going to see here are all the designs or not the designs but the tests rather and you can click on here how to take the test watch a video um you don't have to do that because i'm going to show you right here so the very first one the one i want you to take now is called activity feed okay so this is the interface the goal with all these is is to choose these options over here which ones you think have been applied applied incorrectly all right so what is white space i'll go over these design fundamentals really quickly white space is just the empty areas around a design so see like around this card how there's a good amount of empty white space all around uh that's called white space has that been applied incorrectly i don't know just hang with me don't take it yet also contrast contrast for instance notice how where it says james it's completely black that's high contrast against the white background this right here opened up a new app that's low contrast so you can have varying amounts of contrast but you especially for i items that you're supposed to read you don't want too little contrast color color is obvious are the colors being used correctly do they work well with with each other in a design topography just means your type you know like this activity feed what type of fonts are being used i what about leading which is line height what about tracking which is letter spacing is that stuff being applied incorrectly in this case how about scale you know it's something too little something too large how about alignment are things not aligned properly um how about visual hierarchy visual hierarchy is essentially notice how where it says activity feed is real large text because it's important text it's notifying you what's happening and then notice the smaller stuff it directs the eye that's what visual hierarchy is very important all of these are in ui design and understanding them is also extremely important so these little challenges are going to help you develop an eye for all of these ui design fundamentals which is absolutely crucial it's a requirement for you being able to design awesome looking user interfaces so we have all these free ones right here that you can take but there's also nearly 40 of the 40 other ones that are worked in strategically throughout the main design course curriculum that i hope you will take all right so what i want you to do now is pause this video take this click on the ones that you think are incorrectly applied based on this design um every time you answer one that's correct you'll get a point up here if you answer one that's incorrect then you it'll remove up a point and trust me this is not easy so pause i'm gonna wait for three seconds and then i'll show you the answer all right so let's go ahead and look at the first one white space is white space applied incorrectly somehow i have to say yes why look at the amount of white space that's established by this column right here based on the beginning of this card you could tell it's a good amount but then look at the tiny little amount of white space here it's about half that so if we click on white space it's going to show you where that should properly be now because the test hasn't ended yet there's something else that's incorrect because it only moves on once you answer all the correct questions as you probably know by now so contrast now there's something called the wcag which is web content accessibility guidelines which i it's all about accessibility if you have type that does not contrast enough based on the background sitting on people sometimes can't be able to read it or they have a hard time and i would say that would certainly be the case with this type it would certainly not fall by above or at 4.0 which is a contrast guideline you can read more about i have videos about it as well so we're going to click on contrast that's been applied incorrectly there we go now we've we've brought that up so there's actually another issue color is all fine these are just simple status indicators topography is fine as well scale is fine but what about alignment notice how this these lines of text where it says james opened up a new app or alicia i created a new milestone notice how they're a little bit down further from the little status indicators let's click alignment and get those pushed up so if i collapse this and i show the before you'll see everything that was wrong that will show after this is what it should look like you can see there's a clear difference and it's these tiny details that really help you develop knife for good ui design so now we can go back all right to the next one called feature blipped alright so what is the issue here go ahead and pause i'll wait for three for three seconds and we'll come back all right hopefully you did well so what is the first issue no and by the way some of these tests may not feature all the same uh exact uh fundamentals so white space is there anything wrong with the white space not necessarily what about color all right i have to say color is bad this is hurting my eyes this red text on this mid-gray background so i'm going to say color all right so that's a better color choice because it contrasts much more what about topography remember i mentioned tracking which is letter spacing this extended letter spacing between each letters does not look good and it's going to make it difficult for people to read so i'm going to click topography so those are the only two things that were wrong about that show before and show after you can clearly see it's a much better approach here's a simple login form we'll do a few more of these and then we'll get into the design section so go ahead and pause and come back all right so for this one what's the issue here we could see i for white space not necessarily anything wrong all around our elements inside the button container everything's looking pretty good the forgot info button isn't too close to this section uh the actual text fields so we're going to leave that off i what about contrast all right so one thing that's going to be difficult is i the text fields you can see the text fields don't contrast very much typically you might either want to use a higher contrast background inside of the text field or a outline a border going around that's high contrast so let's choose that and there we go we choose that first approach next up is color everything looks good with our color here topography everything looks good with the type itself and scale everything looks good a nice size call to ac call to action down here we also have alignment alignment is also off here and the reason is we have a left aligned text right here and a left align button but we're centering our text which doesn't look good so we're going to click alignment and i'll show you the before and after so here is the before here is the after a much more accessible and better looking form let's do two more and we will continue on all right there's quite a bit happening here go ahead and pause now and then come back okay hopefully you did something right all right i know because they're very tricky most people they they don't get all the answers right okay so for this um let's look at white space is anything wrong with the actual white space it looks fine in my opinion how about contrast all right so it looks like contrast might be an issue here under risk management so let's see if that's actually right i'm not even sure i've been taking this in a long time correct there we go that's better for a current page indicator or a hover um how about color color is all looking good here i like these vibrant colors they work well they complement each other how about typography now this is the one thing it is incorrect because if we look at the type here for home services in the faq page versus the type here they don't mix well because this is a condensed font and this is a a wider font and the two i when you compare them together they just don't look good they're not consistently applied so we're going to choose topography here and it's going to update these so that it matches the same font family after that scale do we have an issue with scale yes we do the logo seems way too small in relation to the size of these elements right here let me re set this to 100 there we go and so i'm going to choose scale and there we go it's going to bump this up so this is what the uh before looks like and here's the after much much much better all right let's continue on with the final test that we'll do for this video the url shortener all right so what could be the issue here go ahead and pause and then come back in three seconds or not three seconds you know what i mean you're not gonna finish this in three seconds all right so hopefully you came up with something good let's go over these again i'm not even sure what all the issues might be i could tell you right now topography is an issue because we have a different strange font for for the late for the label and then we're using some other type of font over here so i'm going to say typography for one all right there we go now we're using the same font it looks much better already and how about contrast perhaps notice it says maximum of 15 urls per day that's not contrasting very well with this background so i'm going to say contrast there we go and that was the only two things wrong with that show before and show after much much much better okay great stuff so i'm not going to do any more of those hopefully you get the the the idea and if we go back to the modules here there's a lot more here to do and of course if you join the full course of course at and if there's a there's a promo going on you can get it for really cheap um and you'll trust me you'll be able to get so much better but now let's go ahead and actually get our hands dirty in figma and design an actual ui all right so if you are brand spanking new to figma you've created your account you're going to see something like this although you won't have any projects either way log in click new design file right there okay so assuming you've never touched figma i'm going to very quickly explain what's happening in the user interface uh before i can quite do that i we need to click on this tool right here which is the frame tool it's basically everything you're designing inside and you when you click on it on over here on the right hand column of the property inspector as it's called i it will show you different devices to design for like desktop tablet and phone uh for me personally when i start out designing a an app or a website i i start with the largest view first which is usually a desktop so i'm going to click desktop now before we start to get into design like i said i want to describe the figma interface here so first over here we have two different sections we have uh the layers section and we have the assets so under layers you can see our little frame called desktop once we design inside of this you'll see that we can collapse it and hide it and that's because we can have multiple pages that are a part of our design so if i replicate this by the way you don't have to follow along at this point uh you'll see we have desktop too this might be like a home page we can double click here to change the name or we could do it right up here double clicking and this could be like about us and you can see they're all organized in this uh hierarchical tree view sort of thing so here's an individual layer inside of this and of course once you start building out big projects you could have potentially hundreds of layers and groups i and even by other things like components inside of this view right here all right so let's close that out also we have the top toolbar up here so again we have the frame and slice tool we're not going to use the slice tool in this demonstration um we also have some drawing tools like lines arrows ellipse polygons stars place an image et cetera we also have drawing tools like the pencil and pen tool i we're going to use the pen tool to create something here actually pretty soon we have the type tool for placing text we have the hand tool move things and then also we have a comment tool and that's usually in the later stages of the design when you're dealing with stakeholders and other people all right over here we have the share section so if you want to share your prototype after it's finished or whatever you can do that um we could also play the prototype but right now there's nothing interactive we don't have a design yet don't worry we'll get to that and then over here we have the property inspector this stuff changes based on what elements you're selecting so for instance we don't have anything selected so the background allows us to change this color right here and we can maybe make it darker or something like that um if we click on this element this little you know rectangle we see all this other stuff that pops up where we can add strokes effects uh we can change the fill color of it uh we can do a lot of stuff this is the property inspector but it's also um split up into different tabs here we have the design tab where we're actually designing we have the prototype tab where we can add interactions which we'll get to that and then we also have the inspect tag tab that we're not really going to be messing around with this at all but it does give you some basic information and even css stuff for the front of developers that's the only introduction i'm doing and it's too much talking i like actually doing things so let's get started with actually designing so i'm going to delete this and we're going to work without a project brief now you know 99 out of a million times 100 times rather you're going to have a project brief if you're working for a client or an employer they're going to tell you give all the details about the project and this is part of the ux process as well we're not going to do that i'm just going to you know quickly just give you the information as we go if you're really interested in that full process of course check out designcourse.com and i work in project brace design systems all that good stuff so this is going to be for like a vacation spot uh some type of website that offers you know really cool exotic vacations all right um and they're they're gonna be really heavy on um just tropical water and we're going to make it a kind of like a dark themed website so for the background which is usually that one of the first things you consider like the background color um or if there's a photograph or there's a pattern or whatever that's one of the first things you consider as a part of your color scheme we can go solid a simple solid color like this uh but we could also have an actual background photograph now when you're using background photographs it's very important that you ensure whatever you use will allow for good contrast especially if you have type sitting on top of it because it could be very difficult reading type sometimes that's on a background that doesn't allow for really good contrast or it might be too busy so one of the great ways that we can add a photograph here as a background i personally like just to take the rectangle tool over here and left click and drag will go the whole size of this frame and we're going to right click and go to plugins and you want to go to browse plugins and community especially if you're new and you haven't installed anything yet under plugins we can type uh unsplash now if you type that in and we go to plugins at the top you'll see unsplash i already have installed 820 000 installs it's very popular they also have a website unsplash.com you can search for photos here and do it this way or you can actually do it in app as well so we're gonna do it in app assuming you've already installed it maybe just refresh your project and with that rectangle selected we're gonna right click and we're gonna go to unplug unsplash not unplush but unsplash and in here we're going to type in dark water so we want a dark theme i know that and maybe we also want some water actually a lot of these would work for what i want to do but there's a specific one right here that does have a little bit of high contrast based on the wash in the water so i'm going to skim simply click on that all right and there it is okay so it looks like i it's changed this okay yeah so it changed the name of our frame we're just going to call this home by the way so double click it and change it to home and i also want to extend the height of this a little bit just for to allow us to design for more content so this is our background image now our frame is kind of hidden because it doesn't have a fill at the at this point in time now i do want to give it a fill so we're going to take this color uh selection right here and we're going to let me make sure we have this selected properly ah right here fill we're going to click plus under fill and then we're going to just grab a random color here and we can see it's in the blues um and this slider right here it allows you to change the brightness i you can add tone or grays um and so i'm going to come out probably something to right around here for now um we'll see how that works later on but you can see how it does match the overall hue that's here in inside of this uh actual photograph all right so another thing i want to do real quick i don't like the gray how it's contrasting our canvas based on our actual design so what i can do here is grab this and maybe just go a little bit darker and now it just looks a lot better all right i like that so next up we are going to get a layout grid so what's a layout grid if we click plus you're going to see all these little kind of red tiny red squares we don't want that type we want the column view now right now by default they make it red but i'm an advocate of changing the color of these little uh columns that you don't know what you know do at this point so that it matches well with your design so i'm just going to make it white and we could probably even reduce the opacity by left clicking and using your down keyboard arrow key so like right now it's at like five percent that's all i need and what is the purpose of a grid well first let's put 12 in there and let's put 120 on the margin all right so on desktop when you're when you're creating your design i the grid is helpful in multiple ways the first way is to ensure and to give us like a visual of exactly where the beginning of our design should begin and also end all right and the reason that's important i unless you have a completely fluid design that's going all the way out to the corners i it's because it's this goes back to a design finder fundamental of consistency you want to consistently align your content uh and you also want to deal with good white space very rarely do you want to have elements of importance like a logo right here let's make it a little bit larger size like 24. right up against the edge you want white space so this first column right here gives us that that visual guideline you can also add a guide or a ruler so shift r we can left click right over here and drag one right there and then also drag left click and drag right to the end and then so now we can toggle both of these things on and off shift r hides those and ctrl shift 4 hides the grid view now another thing if we hit ctrl shift 4 again that the grid is good for i it allows front-end developers especially those are working within a grid system i it allows them to help quickly help them structure their html markup based on uh how many columns certain elements or components of your design spans across so i won't go into it much more than beyond that it might be a little bit confusing at this point but hopefully it made a little bit of sense so what we'll do now is ctrl shift 4 to get rid of that we're going to give ourselves a logo here and i'm going to call this oh shiannaka all right so right now it's size 24. i we're going to leave it at that but we're going to change the font so over here once we select the type you see the property inspector we have a text section where we can change all the fonts uh the font wait let's go to bold um sizes a bunch of stuff about type um i like a font called a i l a a loren i have no clue how to pronounce that but it's a-i-l-e-r-o-n it's a really nice clean sans serif font uh and i just i like it a lot now this isn't a logo design tutorial by the way um but i did want to show you one of the things that you can do based on the drawing tools how he mentioned we're going to use that scary pen tool and we're also going to create a mask masks are something that you use often sometimes as a ui designer so let's go ahead and create a little symbol for this oceanica fictional you know getaway retreat company so the first thing we'll do is we are going to create an ellipse so left click shift alt drag out from the center something maybe right around this size and then we're going to go ahead and make it white and then on top of it we're going to just to the left of it hopefully you could see this we're going to take the pen tool and then left click and then hold shift somewhere around the center it doesn't have to be perfect and then we're going to left click and drag we're still holding shift to create a 45 degree angle and then we'll go ahead let go and then left click one more time and notice how we kind of have a nice little wave because we're oceanica whatever and then we're going to come back around anywhere around here back to the original point now once we do that we're going to remove the stroke we don't need that i will give it a fill and then what we want to do is rearrange our layers so click on the move tool and we're going to take the the ellipse one is on top already that's what we want we're going to select both of these uh layers right here the way we can do that there's two different ways to select multiple layers we can just click here hold shift and click there so now we selected both of them or we could do it here if we hold shift and we select down to it's going to select everything in between that's not what we want instead hit control or command on mac and then you select both of them as well once these are both selected we can click this little middle icon uses mask and there we go this is our little logo icon so to speak so now we can hit ctrl shift 4 make sure we're moved up or we could have hit shift r for our roller our world wasn't perfectly in place yeah right there is good and then we'll move this into place and we can use our arrow keys on the keyboard to kind of get this matching up well with our logo and then there is our little logo it's not the greatest thing but at least you learned how to use masks right so we're going to take both of those um we're going to go ahead and create a another thing and this is a brand new again this is a crash course this is going to be intense we're going to create a component so what is a component by the way you click that little icon up there i'll go back see this right here you can create a component by coming up here clicking this icon or ctrl alt k on your keyboard or right click and create component so when you create a component it it makes it purple gives us purple bounding box and also gives it a purple uh name over there we're going to name it logo by double clicking it and what it allows you to do for instance just you can you can just watch at this point i'm going to replicate this you don't have to follow along a logo is something that shows up on every page usually on a website or an app and any component like your navigation uh your footer nav or buttons that show up multiple times i you want to make those ideally a component why well if you want to change something about it for instance if we want to change the color of this type we only have to do it in one location so if we click on this one which is the duplicated version of this component over here you'll see we can go to main component so if we want to edit this component watch what happens let's just change it to red which would be a really bad color choice but just to show you change the fill to red and guess what it changes over here so if you're working with a website or an app that has like 20 pages you only have to change it in that one location if we did not have created a component out of it it wouldn't have changed now another thing about components is we can do combined overrides so for instance on any of the the instances of the of the component and not the main component over here if we want to change something about it like we only want to change that instance color then guess what it only changes on itself not over here at the main component and that can be useful for certain situations not this one because the logo should always be presented the same okay all right i know i'm there's a lot to go on here and of course at the main course everything's much more paced out but this is crash course so here we go um we have our logo next up what we want to do is we also want to have a navigation of some sort so what we'll do is we're just going to take our type tool left click around here and we're going to say home now one thing about a navigation now notice when i'm moving this around left clicking and dragging around you can see all these red sort of guides showing up and that's just to help you align things so like right here would be perfectly aligned when they're all three showing up like that um and so you want to make use of those now notice the size the the the size of this type right here is 24 and then size of this type right here is 24 as well i'm not a fan of that because it doesn't give us a good typographic visual hierarchy i think your logo should kind of stand out a little bit more direct a little bit more attention than your navigation itself so we're just going to take this down to 20 so we're going from size 24 to 20. all right so we're gonna have a home button right here and we're gonna make it also large or bold rather because whenever you're dealing with a navigation item like your home about us contact you want to signify which page you're currently on and the way you can do that is by reinforcing that visual hierarchy or in other words you're going to make that particular page i stand out a little bit more or that link that corresponds to the page you're on so but making it bold is one great way you can do that you can also do it by changing color adding an underline adding an icon as well so that's looking good and what we could do at this point right now i which would not be the correct way but i'll show you quickly we can just duplicate this control control d and move it over by the way another way to replicate something we can just hold alt and drag same thing as duplicating now we're going to change this one to and again we want to establish that visual hierarchy so we're going to make this regular now let's hit ctrl shift 4 real quick to get rid of that so we have our tours button and then we can duplicate that as well and hold shift and notice ah we have equal white space it says 58 between each one of these that's another very handy feature and then i could say contact all right so i wouldn't want to do this the way i just did it we wanted to create components and use what are called component variants to construct this navigation and also use something called auto layout i know there's a lot to to take in here so what we're going to do is we're going to delete those two we're going to create a component out of it so now this is a component and then we're going to create a component variant so notice once we create a component notice this variance section down here with this little plus icon we're going to click plus to add a new variant then it creates this little dashed you know purple bounding box around both of them what we want to do is move that off outside of our frame and then what we'll do is we're going to create a a second variant or a second version of this component or this nav item that is not bold all right so what we'll do is we're going to change it i under our type if i double click into it right here from bold to regular alright so you can see the slight difference between these two elements so if we click over here on the bounding box and we'll change this from home to we'll say nav item so if we click on that you'll see we have i it says default and it says variant two we can add a new property right here in this property let's just name it uh is bold all right so is bold is this bold is this first version bold yes it is so we're going to change its value to is bold to true we're going to take this one and we're going to change it to false all right so then if we want to get this back onto here what we can do is go to assets and we'll drag nav item right over here just somewhere over here randomly and guess what we have a toggle button is bold yes no yes no okay isn't that cool we can create even more variants as well so for instance i we could take this one and duplicate it ctrl d i and how about a hover state all right so what we can do now is we can experiment with a color that might work well to signify if somebody's mouse cursor is hovering over the item so i what we can do is double click into this and we'll change this here just to a color right around here maybe we'll make it kind of uh right around there so if we look at the hex value that's 6 0 f 7 f f so if you type that in as a hex value you'll get the same exact color that i'm working on alright so there's the color and what we'll do now is we're going to change this one to we're going to add another property rather so what we'll do is we'll come and add a new property we'll say hover and then this is going to be false this will be false and this one will be true so now what we can do is go to prototype and then we'll click on this one we'll drag it to this one and then notice on interaction details you have on click on drag while hovering all this means is how do we get from here to there what type of action is required so we're going to say while hovering because it's going to be a hover all right there we go that's all that's required now if we click play it's going to load up a new tab in your browser and if we hover over this look at that it's working just like that awesome stuff okay so now what we can do is we can duplicate this and we can change the name of these so this one's going to be called tours and this one will be contact now if we left that tab open these all work automatically isn't that cool now for the home though we're going to change this to is bold all right so now we can see the difference up there all right great another thing that we're going to add here um between these and is it just me or is this kind of off slightly there we go so if i just select these two for instance we'll see we have auto layout and a click plus and now it's made in auto layout and there's a section right here where we can choose the direction of the auto layout and you'll see what auto layout is in a second we can make it vertical for instance if it was a vertical navigation or we could also change it to horizontal right here all right so what's really cool is let's delete that contact if we i double click into this and just hit ctrl d it'll automatically maintain this the white space between the elements and you can also change alignment and spacing or in padding with with these elements so what you can also do is let's change this real quickly to contact contact right if i can type all right then what we can do is we can i double click and move these around real easily so this becomes handy in certain situations not exactly this situation i but certainly this one as well so there we go so there's our navigation we might want to spread these out a little bit more and all we have to do to do that is just adjust this value right here we can left-click and move things around all right so there is our navigation at this point okay we also are going to have a call to action so if you're not familiar with ui design or the ux design a call to action is um a a button it could be a button a it could be a form it could be a scroll into indicator icon telling somebody to scroll down and typically when you have a navigation like a top primary navigation you might have one element that's really sticking out further it's the single action that you want the user to take usually it's to join the service or something like that so for us we're going to create a strong call to action it's going to be set it's going to be styled differently from these ones and so we're talking about visual hierarchy now we want to direct the eye more so to um this this button that's going to be right aligned over here um and it's going to be named start a journey like i you know start your journey start a journey something to get uh people to from going from visitor to somebody who might call or fill out a form um to you know take their their vacation with them or whatever like that so what we'll do here is um we're gonna create a new piece of type start a journey all right let's get ctrl shift 4 or shift 4 right now in this context i or shift r rather for our rollers and we're going to put this make sure it's aligned exactly the same as everything else all right is that it's it's real close there we go and we'll get that right aligned there and we're going to make it bold and we're also going to use for our fill color we'll use this one right here now another thing that's really important another concept i'm going to introduce you to i are your libraries so you have like this little four dot icon right here called styles you have styles for text you have styles fulfill and if you click on it you can add the current color for instance in this context and you can give it a name like primary color all right so now primary color is attached to this piece of type and it's works similar in the in the same idea as components if you go to change primary color which you can do so by clicking it right clicking and editing it and any other element that has that color specified will update automatically for us because we're only this is a demo and this is only one page it's not as important but for a real project doing that becomes more important as well and same thing with text styles uh you might show it to somebody they're like we don't like this typeface you have 20 pages if you didn't use your text styles right here and apply it and attach it to everything then you're gonna have to manually change all that stuff which is a pain in the butt um we're also going to have i will use one of the other drawing tools that arrow that kind of just points to this text right here we can't see it because it's black so let's give it that same color the primary color we can also change the thickness of this i'm just going to change it to one and i like that right there quite a bit so it's let's hit shift r and ctrl shift four it's not the the type of call to action that stands out like crazy but it certainly does demand a little bit more tension than this stuff over here okay so that is our navigation right there i think it's pretty solid it works well we may want to align this perhaps to the center but we can always move things around no big deal another thing that's real important you can create components inside of components or in other words nested components all this stuff up here if i just left click right here and select everything and then deselect the background holding shift and left click we can make this a component alright so we can click up here and guess what that becomes our top navigation component and you can store all your components here in the same page or we can add a page i come over here we click plus and we'll say components and this is usually a part of a design system so we can take these two things we'll just copy them we can come over here and we can paste those in i component one should be renamed to top navigation i i didn't spell that right because i typed too fast top navigation there we go and then we have nav items right here now we can go back to page one which you can desktop change that to desktop for instance and then we can go ahead oh we didn't take our logo and put it there either i don't think so there we go okay so we can go to desktop now go to assets and take our top navigation put this here alignment we haven't touched that yet we can align things uh center and vertically let's get this up here and there we go let's let's delete that by the way that was just a demonstration so now if we hit shift r these are should all be pretty much centered up all right so in the next stop the next thing that you're going to find on a landing page or the home page of a website or for a service especially is what's called the hero section we have our navigation up at the top here and then we have what's called the hero section right here this is the area where you have your headline or strong large piece of of of type essentially you have sometimes a sub headline and a description and a call to action as well and sometimes you'll have an illustration over here or around here it can vary a lot so for us we're going to have uh we're going to create a piece of type and it's going to be our headline discover the water that's all we're using now if we left it like this what is the problem here there's a lack of visual hierarchy we're not sure where we should look first based on all this stuff happening here so we want to make this large in our case we're going to go from 24 to 72 now look how much better that looks just by making that change right there i think it's a lot lot better notice as well if we we take this rectangle we can kind of move things around i wouldn't want this white washed area of the water behind the portion that says water i'm but i kind of want this to be up like right around here now if we click over here on our image we can see we have a lot of areas here you can actually change there's some photo editing worked within here you can change the exposure you can do a lot of different things but the thing i want to change is um right here and this is like how the photograph is going to be interpreted inside of this given container this rectangle i'm going to choose crop so crop will allow me to move this down a little bit and that way it gets it out of the way of my important type so now we're going to have a sub headline oh by the way before we duplicate that if we hit shift r looks like it is all right where it needs to be we're going to duplicate that ctrl d and then we're going to have what's called a sub headline which is usually your headline emphasizes features i or benefits rather and then your sub headline gets more specific about the details of your service um so i'm just going to type in right here from pristine i think that's how you spell pristine i'm not sure waters to majestic forests and i'm going to put two dashes you can't see it right now we've got it all we want to make this smaller and not compete as much again that's a visual hierarchy with this headline so we're going to make this considerably smaller and change the font weight so uh let's change this to around 36 and then also let's just make it light then drag this in all right i think maybe that's pretty good looking at the size everything all right so what we can also do if we double click back here uh you you'll find yourself referring and changing things if we take this outer bounding box hold shift and alt alt we scale it up now we can kind of move things even further away now we have good white space behind the important areas of our type and this this little wave kind of just it works with it it's a really cool photograph i love it all right um after that now let's go ahead and we'll create a second column a column over here all right i actually kind of do want to move this if i oh it's right you can't move it uh the instance so we go back to components we double click here and now we kind of move it there and then we'll we'll see it moves over there okay all right so now what i want to do is i'm going to create a second column and we're going to employ a technique that's sometimes referred to as glasmorphism morphism clap yeah glassmorphism okay we're going to left click drag out an area roughly right along this side by the way if i didn't tell you before alt in your mouse scroll wheel will allow you to move up and down and then holding control in your mouse a scroll wheel will allow you to zoom in and holding space your space bar left clicking will allow you to pan around you'll see me doing that a lot it becomes a muscle memory eventually now let's go ahead and make this black and let's go ahead also and we're going to go to effects so under effects by default it'll add a drop shadow we don't want that we want a background blur it's not blurring the background why because we have a hundred percent opacity attached to the fill so if we click over here we can change this opacity i've percentage value just by left clicking dragging his slider now if i bring it somewhere right around there you can tell it's a little bit blurry right well we can make this even more blurry by clicking this little icon and just either manually typing in a value or using your keyboard arrow up key and that's what i'm going to do right around there right around 23 i actually like that quite a bit and let's extend it all the way out as well so i kind of like it right there notice if we get our rollers out shift r and we drag this down the top of this is aligning with the top of this this uh type right here again this goes back to alignment uh when it comes to ui design very important to have alignment that makes sense and works well in your design all right so shift r to get rid of those and here's this little weird looking block so to speak i think i might want to drag this down actually now here's the thing if you drag something down that you've applied the crop to i it stretches it and we don't want that so let's go back to fill drag this down right there i actually kind of like that and it still works with our particular image okay so now um actually if we after making that change we can go back to let's see crop here and we'll make our image larger not that version one second just hold shift alt make it larger and you bring it down there we go that's a little bit better but we may even i adjust a little bit differently going further so we have this element here and this is going to hold um three different elements or rows all styled the same with a title and a description outlining the various things that you can do at oceanica all right let's just design for that right now so i'm going to left click right here and we're going to say salt water fishing all right visual hierarchy let's first duplicate this and then i'm going to drag this out to our by the way you don't always have to get the guides out you can see the little red x's right there by started journey that way i know i'm already out there and aligned to where i want to go and i'm going to simply copy and paste something off screen right there now if we look at this this is size 18 it's a font weight of light that's still not a good enough visual hierarchy separation because this is size 20 it's only two points larger and it's regular font weight let's make this bold now that's a better separation between these two elements in my opinion and in fact i think we could make saltwater fishing even larger to 24 and now we have a good typographic visual hierarchy as it's called and that looks pretty solid to me right there okay so let's take both of those elements we'll go ahead and control d to duplicate them ah you know what would make sense because we're gonna have elements repeating each other we can go ahead and make this a component all right create component now we only have to edit this one when we have the other two underneath it if we want to change all three so we'll duplicate this hold shift and bring it down all right so that's looking pretty good right there you don't want to have all this empty white space here because that wouldn't really quite make sense so we may end up moving things around just a bit maybe we'll drag this up and we'll drag this one up as well again we don't want to do that situation where it was just like taking our image so we're going to change this to fill we'll go back up let's go back to crop and let's learn enlarge this and drag it down right there because i'm looking at this area i don't want to get in too close to that portion okay so now after this we want to have a call to action that says start a journey or start your journey um it's going to be like this one except i it's going to demand more attention so to speak so we could just put a big button right here but i i want to try to do something a little bit more interesting than that so uh what we'll do is we'll take the line tool which you haven't yet used yet left click hold shift and drag down perhaps somewhere right around here and make the stroke white all right and then we'll take the arrow tool left click right where that one ends somewhere around here i'm not sure yet make it white and also make it one for the size all right now what i'm going to do is i'm going to take a rectangle tool and i'm just going to create a rectangle i'm going to say let's see here maybe it'll go from right there where that logo ends you can see that little guide and i'm going to drag it down so it's underneath these two lines and then i'm going to grab this background color right here all right then i'm going to take this color and i think we're going to go ahead and make it maybe just slightly lighter so we're just pushing it up slightly and we'll just drag this down so i'm starting to build out kind of like a blocky sort of layout um we're gonna make some changes though because i don't like how it is currently but what i will do is duplicate that one or rather let's duplicate this one we'll duplicate that drag it down we're going to move it over we'll put it right here and then here now of course a lot of this is just about experimenting and having fun with shapes and rectangles primarily um for this one let's go ahead and maybe maybe we'll have a black background blur i'm not sure but let's take our fill color and change it to this and then take the opacity and just drag that down very subtle and maybe also reduce the amount of blur so maybe we'll have a little bit of blur and we'll leave it maybe right around there but maybe we'll increase this again there we go so it just adds interest to these to the design um and what i'll do here now is i think maybe we're going to move things up slightly so notice the amount of white space from here to here and there's not as much from here to here we want to have equal white space so we're going to move that up and then we'll move these two things up we'll move this background up now it did squash it slightly i'm not too worried about that um i think that's good right there so now i we can get our type start uh my journey today we'll go ahead and make that bold let's get the size 24. all right that's looking decent right there um and then yeah we'll just we'll leave that one white and let's capitalize my as well actually i don't like that let's just do start journey today no let's leave that in okay that's enough enough of that for me let's move this over so it's kind of like centered in this container oh by the way i just kind of noticed that was not lining up there we go and we also want to center it vertically in this container as well and that's going to be right around here we'll move this down so that's in the center there and we'll drag this down as well all right finally we'll move this over a little bit closer holding shift all right so we kind of have this interesting little line uh pointing to this area i like it personally i think it looks pretty cool i could drag this down we're really making good progress at this point so now we're going to have one final area just to show case a little bit more design and that's going to be in this area right here so we're going to use what's called a watermark and a watermark you can have typographic type based watermarks you can have photograph based watermarks you can have illustration based watermarks and all is a very very very low contrast element of sorts any of those three that i mentioned that are in the background to give texture so if you didn't have any of that you're working on solid background colors which is completely fine uh but we're we're going to add a typographic based watermark just to give ourselves some texture to work with and make this area more interesting so um we're going to take a type tool and we're going to say historic destinations i'm not going to leave it anything like that though so we're going to change the font we're going to use a nice kind of uh serif font which is the type of type that has little things hanging off at the end of the letters this is going to be font face um let me my mind is going blank right now i let's let's let's get this over here i'm on my reference monitor um yeah garamond okay um so we're gonna change we're going to type in guerra and it's just hit enter and we're going to make this really large like what's 300 okay so 300 let's do italic and let's just kind of put this right around here it doesn't matter if it's off the side the purpose isn't necessarily to be able to read it it's just to give us texture and then we're going to take the opacity way way down so under fill we have our slider we're going to go really really just barely noticeable all right so it's around four percent i'm not even sure if you can see it based on the video compression i think i like that right there and we could actually get the same background color and then just make adjustments here as well or if we go like that we can also take down the opacity there's a bunch of ways to do it and right here we're going to go ahead and send this to back which means automatically sent down to the very last frame or to the very last i you know the very bottom underneath everything we can just uh right click on it and choose uh send to back or hit these bracket keys as a shortcut now i do kind of want it on top of this element um so if that's the case we can also just bring it right back up there then we're going to lock it because i don't want to select it by accident see so i can no longer select it when you place this little click this little lock icon all right so now we're going to have three columns and we're going to have basically a card design which is just a component sort of representation of a bits of information so we're going to assume this place has three different destinations that you can choose from each one will have a photograph at the top a title like the name of the destination and like a little description so um let's get started with that what we'll do is we're going to take the the rectangle tool we can hit shift r and we can left click right around here let's hit uh before we do that back up control z to undo we can also hit ctrl shift four and we can see if we know that we have three we're gonna have three columns next to each other then we know we also have 12 columns as well there's one two three four if i count it it's going to be 12. so we could say each one of these can be about four columns long but i don't want them quite four columns long because then it doesn't leave much white space between them because these gutters are not very there's not much white space what i'm talking about by the way if i just die let's hit shift r here if i left click from the first column to the fourth column and then duplicate this holding ctrl d and then duplicate again that's not a lot of white space between these elements so what i'm going to do is i'm going to make it probably right around here in the middle of those and so this one is going to be a container so we're going to right click with it selected go to plugins in unsplash which we already installed and we're going to type in tropical so when we do that we can click uh some of these pictures we'll just choose one just to make the assumption that it's here actually that's too crazy and vibrant let's choose this one all right i we can double click this by the way change that to crop and we can just move this around maybe a better look right there all right so there's that then what we can do is create the next section um and we can reuse this actually because it's very similar to what we want um for this section so let's actually try that i'm not sure if i'm i'm going to keep that idea right click bring the front and we're going to put it right here and then we're going to drag it right there there we go so we could actually double click this and give us a fake name like punta monita or something um and then we'll just leave this here i actually i am gonna use what let's let's change this text up a little bit um from pristine waters to majestic forests we've got it all start your journey today for 50 off there we go we have three lines of type right there okay so now what we can do is we can take both of those we can actually create a component because it will be reused we'll duplicate that drag it over holding shift make it start on the very first uh the very beginning of the fifth column and then duplicate again all right uh we can see these don't quite these aren't quite matching up with how we would want them to so let's see if we can take all three and just kind of scale them out there we go so now it starts on the left column and ends on the very right column all right so ctrl shift 4 to hide that all right uh let's move these around maybe we can take our type our um our watermark rather and maybe just push this up a little bit that way we can see more of it and we can also under plugins go to unsplash we can double click into this image right here type in tropical and we'll change that up to something else um let's just do that one and then we'll double click and do the same thing here now we could do this one okay not great pictures of the resorts or anything now by the way if we double click that depending on the ratio like if you have one that's too wide or not quite as tall the aspect ratio when you had this in the format of crop or whatever you may want to make adjustments here suitably there we go i think that's fine i'm not going to bother adjusting these elements or making this type unique just because we already understand the point uh so far so now that's going to be all the design that we actually do for the most part so what i want to do now is create some interactions and this is where we're getting into prototyping let's say for instance we wanted somebody to be able to when they hover over one of these these areas right here then we'll have like a little some type of indicator letting them know they're currently hovering over whichever one one thing i am do going to do is change this to hang gliding real quick and then we'll change this one just to get a little bit different content parasailing all right i so what we'll do is kind of what we did with the home contact and towards the main nav items component with a component variant so we're going to make another component variant but in order for this to work the way i want it to be to work i don't want people just to be able to only hover over the text right here for it to work i want them to to kind of be able to hover their mouse over the whole section of each one of these three rows so we're going to take the rectangle tool and kind of just go all the way out from there we don't need a fill for this but i do kind of want to get these lined up pretty decently from each other right there in there that seems to be pretty decent for a bounding box okay so now click on rectangle four again we're going to take these two elements right here holding shift so they're both selected and we're going to create a component out of them all right and then what we'll do let's move this out of the way is we're going to add a variant so let's move those two things out of the way all right so the fun stuff what we'll do is we're going to add a rectangle so the rectangle is going to be something like this and really we want it to match up all the way and we want to make sure this rectangle is under variant two so if we look at variant two we see these elements do you love uh in these two so if i hover over them you can see them changing on the right side of the screen we want to get that rectangle we just created which is rectangle five and put it into uh component one ah why isn't that working i wanted to include this just to show you that if you start nesting uh components inside of each other too much then you're not gonna be able to make the alterations that you want so what we'll do instead is we're going to back up here and what we'll do is delete that we're going to take this it's they're all styled exactly the same and we're going to click here detach instance what that does is it removes it from being a component all right now it will if we right click it will be grouped up so we can right click and ungroup so now let's get rid of that let's get rid of this stuff as well we don't have those components anymore let's move this up and now we're going to create a component out of that but before we do that let's create what we want to happen during the hover state so if i left click here and we drag this down let's get another eye version right here and here so that we kind of have an idea of how big or large we want these to be there's going to be basically a white bar that shows up and animates in when somebody hovers over this particular element so let me move it over here for a second so we can get our height kind of correct and i think that's probably a little bit too tall that way and we'll bring this down a bit right around there looks good so then what we'll do we'll push it over right here and get your thickness right you can always make adjustments afterwards so we're happy with that we're going to take those three elements and then what we'll do is create a component now we're going to create a component variant and what we can do is get out of the way here drag this over let's delete this stuff don't need that and this is going to be the one without um this thing so instead of deleting it if we wanted to smart animate which you'll see in a second we can create that right now so we'll double click into it we're going to use our keyboard keyboard's left arrow key to push it outside and also give it a zero percent pass-through or opacity all right so now what we can do is we can go to prototype so let's go to our prototype tab we can click on that and we can say while hovering and instead of instant which we're going to leave it at instant we're going to do smart animate in a second but i want to show you the difference so let's go to assets and let's go into desktop here drag this in all right and we'll duplicate this right there as well again sorry i'm going to change these again hang gliding is that what it's called hang gliding i think it is okay parasailing clearly i've never done it before and let's go back here see that's instant it just shows up instantly but if we come back to prototype and we click this and we change this from instant to smart animate you can see we have some custom easings which kind of controls how the animation uh appears like if you wanted to start in fast and then slow given the duration you can do that as well let's just leave it at 300 milliseconds just duration of the animation watch this look at that and how smooth that looks i just i just absolutely love it very very very very very cool all right so let's create another version of this i or let's get more practice and create another type of uh animation right here let's say for instance when somebody clicks on this uh it changes this whole button container to white and inverts this text to something dark like this back background color right here all right let's get work in doing that so we're going to take this element the type element um we're going to take this element as well the background and that's it for now but we are going to make one adjustment so what we'll do now is create a component we'll go ahead and create a component variant to move this off and for our component variant this one double click changes to white and a hundred percent opacity right there take the type double click i know we can't see it right now so you have to kind of guess and we'll make it um this color right there all right so we'll go back to assets we're going to drag this back where it was before now when you drag back into assets it puts it at the top automatically but we want it to be underneath this arrow too so this asset is component 11 arrow 2 is right there drag it underneath let's go back here oh we have to do the prototype first though so go to prototype and come over here this will be while hovering all right that's all good it remembers your previous stuff and look at that now one thing i don't like is this this arrow is hidden so we can add in another copy of the arrow so what we can do is switch the design with this selected c ctrl d to do duplicate that element and that's called if we have it selected arrow three we need to get arrow three inside of here in variant two so arrow three drag that in variant two and then we will drag arrow three right over into there all right so now we're gonna make this black all right let's see what happens it's not gonna be perfect it kind of just shows up like that let's do this let's move it a little bit closer let's move this one change the width back up just a tad bit now let's look what happens so now it kind of just jumps forward but it's not a quick transition so what we can do is we can double click this we can i we can duplicate it over here and from component the default component we'll drag arrow four into there and then move it back just a little bit and then also change the opacity to i zero now let's see what happens here alright so when we hover over that let's go to prototype we do have smart animate on all right so the reason this isn't working is we have one layer named arrow four and the other one up uh here zero three oh and it's also let me see here let me make sure i'm working on the right one this is variant two and variance two's arrows down there default the arrow is down there still i'm sorry about that i must have screwed something up so we want to get this in the same location as the other one okay so now this one is still opacity zero let's try that again it's still not creating a smooth animation so i'm gonna leave this in just because i oh yeah the issue is the name is different so let's change that to arrow three so for smart animate to work to i to transition from various properties from one element to another you have to be named the same now notice how it kind of just slides in like that all right so now that's that's pretty much what i'm happy with look at all this very cool stuff now let's do one more design interaction and let's say for instance when somebody clicks this button right here it's gonna pop up sort of like a modal or an overlay and it's going to create it's going to show a little loading icon which we're going to do with something called lottie animations it's a plug-in that we can use and then it will refer and kind of load up a new interface for them to choose and the the first step of the process of choosing one of these three destinations all right so let's go back what we'll do is right here in our main design temporarily we're going to take our rectangle tool left click hold shift and alt drag that thing up and we could also use our alignment to get it right in the center vertically and horizontally now we're going to change the color to our background color here and we can also give it rounded corners just a little bit by left clicking and dragging these in alright so that looks pretty good right there this is near black isn't it might want to give it a little bit of color if you want your right around there is good that's one two one five one five if you wanna follow along and now we're gonna create we're gonna duplicate that shift alt scale it down we can't see it because it's not changed the same background color we're going to right click go to plugins if you go to browse plugins and type in lottie l-o-t-t-i-e you'll find this plug-in install it once you have it installed we're going to click it it will ask you to log in and create an account if you don't have an account there yet but don't worry it's free once you have that ready and you're logged in click search and we're going to type in loading they have a bunch of these really cool loading animations or any other type of animations that you can search for we're going to choose this one right here now if you click it you can insert as svg now if you do that it won't animate but if you convert it to a gif you will be able to see it animate when you play the prototype it does take a while depending on how many frames there are there's like 90 frames for this one so it may take a couple minutes i already have this ready to go on a different project so i'm simply just going to copy that now once you do click convert to gif with this element selected just i think there's a button that says add or whatever you click that and it will actually add it to your selection so i'm going to delete that and just paste mine in right here clearly you can see we used a different background color you can also specify the background color to use as well on that previous screen that i just closed out of so you'll want to use the same background color as whatever this one is but for now i can take this and we can grab that uh we can grab this color right there there we go so now we left we get that situated and now if i hit if i just go back you'll see this overlay is there by default and it creates that really cool animation but we don't want that there by default that overlay we only want to show when somebody clicks on something so what we can do is we can um with those two elements selected right click and we can frame it so we can actually create a new frame we're going to drag it over here it's called frame two let's change this to uh we'll just call it overlay for now and then i what we can do is under prototype let's select this button here and let's drag a connection to overlay and this is going to be on click which is what we want we want to not navigate to because then that changes it hides this whole design we want to open overlay now we also want to close the overlay when clicking outside of it so if you click anywhere else outside it'll close it so if we click this notice how it shows up we can click outside to get rid of it then what we can do i we can also change some other elements to it you can make it like animate by making it move in like for instance moving down so if we click this notice how it comes down very cool um just to show you those easings we can do ease in and out it kind of changes the look and feel of everything but you can also do custom easings i for instance you can drag these or you can drag these up and down like this and watch what happens to the animation so if i click this notice how it kind of came down and bounced back up we can see it even more so if we increase this maybe to 800 milliseconds and we click it again notice how it kind of just bounces up very very cool so then what happens here so we just click on this we just don't want to see a loading animation the whole time right of course not i we want it to load up another ui of some sort right correct so what we'll do is we'll duplicate this over here we're going to delete that and then we'll get some design in here real quickly so for me i already created a design um and we're already getting long into the tutorial so i'm just going to quickly i copy off the screen from my reference monitor some design into here all right and we want to make sure that this is in our correct spot right there okay so i think that looks pretty good right there um let's deselect that yeah that's fine so now what we'll do is on overlay if we drag a connection here we could change it from on click to after delay and let's make a delay of about 200 milliseconds or 2000 ms rather which is two seconds we can navigate to or we can just swap overlay that's what we want now we don't need move in or anything like that let's just do instant and let's see what happens now so i will click this one two and look at that now i'm not sure what will happen if we change this perhaps to smart animate uh let's try that that's actually kind of cool either way there you go i very very cool stuff so i under here where's our overlay element i think i'm going to get rid of that there we go just to simplify things a little bit more so we click this two seconds very very cool and look at all these hovers that we've added our custom design that works well and at this point maybe you would start designing more pages so you would take this we would duplicate it i maybe you decide you're going to get rid of all this maybe you decide you're going to get rid of these things over here maybe we'll leave that um we'll change this here back to fill and we'll move this up maybe this is a contact page so you create contact which name this up here contact and then maybe you have like a sub headline and then you have your form design and all this stuff down here of course it's a crash course i'm not gonna be going through everything but just to show you you then create your connections under prototype tab and we take our our uh actual navigation and i take our double click into here pull that down there on click navigate to you can make it smart animate uh we do a simple dissolve as well so now if we click this contact there we go it shows the contact page then we can make home go back to this one same thing now we click on home and there you go awesome awesome stuff all right hopefully you enjoyed that now if you're really interested in learning more after that crash course your mind might be going in a million different directions definitely check out designcourse.com it's my interactive ui ux design course that i've been working on for over a year and a half and it's finally ready so make sure to take advantage of any parity pricing that might be available in your region and also discount codes i'm telling you right now if you're really interested in maybe just bettering your own design skills maybe you're a developer or if you actually want to make a career in this my service will definitely help you especially if you add on mentorship where i personally help you become a better designer all right everybody i'll see you soon and i hope you subscribe goodbye [Music] you

Channel: DesignCourse

Views: 250,382

Keywords: figma tutorial, ui ux design, ui/ux design, ui ux design tutorial, figma 2022, figma tutorial 2022, ui design tutorial, ux design tutorial, ui/ux 2022, 2022, learn figma, learn figma design, learn figma 2022, crash course, free, learn web design, web design 2022, designcourse, gary simon

Id: YiLUYf4HDh4

Length: 82min 53sec (4973 seconds)

Published: Wed Jan 05 2022