The UI/UX Crash Course for 2023 - Learn UI/UX Design

this is a crash course which means we don't have much time so let's hurry up and take a look at exactly what we're going to be building today ah yes very nice a simple yet elegant web page for a fictional business and I'm not going to show you just how to design it by placing elements in certain areas I'm going to show you the why as well we'll be using Adobe figma for this as figma has been the most popular UI ux design software for years now needless to say you will learn a lot about the features and workflow of figma now you want to know something that's really cool about this particular project well I also show you how to use HTML and CSS to realize this project in the browser we won't be doing that in this video today that's for another crash course video on front-end development that will be linked here once it's ready and finally the purpose of this crash course is to help you get your feet wet if by the end of watching this video you think to yourself you know what I'd really like to learn more then it'd be the perfect time to join my interactive UI ux course at designcourse.com alright that's enough talking let's get started alright so here I am in figma and after you create an account and you log in you'll see a UI similar to this I have a ton of projects these are from like students that I I revise you know their their design submissions um but you might have something that's completely empty in which case you're probably going to see buttons to create a new design file uh so we want to click this we want to create a new design file so I'm going to click on that all right and here we are now I'll briefly go over the UI of figma here and essentially it's pretty simple I it's not something crazy like you know Adobe After Effects or Premiere or anything like that if we come up here we see we have this uh layers and assets uh panel right here all your layers are going to show up over here we'll have assets like your components and stuff that'll show up here we have a toolbar up here and um the frame tool you'll see that in a second that's kind of how that's basically where we design our user interface we have shape tools and drawing tools like here uh we have the dreaded pen tool we're going to use that we have the type we have resources like where you can access components plugins and widgets and some comment tools if you have people working on a file you and you know you're working back and forth uh and then the hand tool you'll see how this all comes into play as well then over here pretty simple enough we have what's called a property inspector over here a lot of the design apps follow the same sort of pattern when we when we select an element like a piece of type or a shape or whatever you're going to see a bunch of properties right here associated with it we have tabs as well designed so this is where your property inspector is shows up but also a prototype Tab and that means adding interactivity like animations and stuff like that and we'll get into that as well and then inspect I personally never use inspect don't worry about it it'll just like show you CSS code and stuff like that but I always do that by hand I don't use this stuff anyhow up here we do have share so you can share it with people and then a play button so you can play your prototype especially if you interact if you've integrated prototyping into it alright so let's go ahead and get started the first thing you're going to do is get the frame tool out up here all right you want to click this or hit F on your keyboard then you'll notice over here we have all of these you know in the property inspector we have all these different frame preset sizes so if you want to start with phone go ahead I personally when I'm starting with the UI I always start designing with desktop first it's the full uh it's the whole it's the whole what do you want to call it the whole shebang and it's just easier to work uh from you know realizing the full experience of the the layout and then working your way down to tablet and mobile uh then doing the reverse all right so we're going to choose desktop 1440 by 1020 right here all right so real quickly also before we start actually designing um movement I want to talk about some keyboard shortcuts real quickly that you need to get into the habit of using you're going to see me flying all over the place and zooming I first off if you hold the space bar I and you left click you can drag around all right very something I use very often using your mouse scroll wheel you can go up and down and then also to zoom you can hold your control or command on Mac and your mouse scroll wheel to zoom in and out those are the three main things that I use the most to really start zipping around here so try to remember that obviously the more you practice you're going to bake it into your muscle memory all right so if we select right up here I on the actual frame name we're able to select the canvas or the frame as it's called here and this is basically your container of your your website over here you'll notice in the property inspector there's a bunch of different properties so you can change the width and height manually over here you can adjust I the X and Y position of where it's at on here I don't ever do that we can add an auto layout a layout grid we'll get into these things um a fill almost a lot of the things that you guys select you're able to change the color the background color right you're able to add Strokes effects and all that good stuff so this is something that shows up for most of the items that you will select that show up here in the product property inspector so if you want to change your website background it wants to be a different color this is where you would change it right here us we want to keep it white for this example all right another thing that we want to do is add a layout grid all right so we just click on this or click the plus and you can see we have this red sort of squares all over the place I want to change that to columns and notice it says 5 for our column count right here we're going to change that to 12. and then we're going to increase the margins uh from zero to about 140. all right so what does this do exactly well essentially this sets you up um with a grid system which you can use to help you piece together your layout now me personally I ignore all 12 of these the only reason I use these is just to make sure that the very beginning of my design I in the very end of the design to the to this side it has equal amount of white space from let me zoom up from here to here and compare to here to here all right uh so really what I could do is take this layout the layout grid and change the count to one and that's all I really personally use it for okay and then we can toggle this on and off with that little eye icon so now the first thing I usually get started with is the header the navigation all right so when it comes to UI design there's many different patterns that have been established and especially when you're a beginner you should stick with uh and I'm going to stick with the most common pattern for having a desktop header or nav bar or navigation and that is to have your logo on the left upper left corner and then to the right you'll have a navigation all right so let's do that I'm I'm going to have a resource file where you can take you can download it here in the YouTube description just click it it's going to be a zip file and you'll be able to extract those files onto a folder in your desktop or wherever and you're going to be able to follow along with me and one of those assets is going to be the logo all right so the logo all you have to do is I if you're working on just one monitor just make sure this window isn't maximized and then you can view a folder and then you can go ahead and just drag on that logo file it's probably going to be called logo.svg and it'll show up here just like this all right now I have mine pretty much when I pasted it perfectly in exact position of where I want it yep it is and notice it's right along this this line right here so if I move this over it's right there all right and that's what we want we're con we're calling this fictional company foxica premium apparel all right now notice this is where we're going to get into some UI design fundamentals we don't want to put it right up here because that's too close to the top and that is a concept called White space all right this is way too close to the top and this is way too close to the top this would be too far down so there's a there's a a sweet spot so to speak and where you place this logo it's going to depend on a few factors but right around here is going to be pretty good uh and one of those factors is also going to be your navigation and what else is around it but right around here it's pretty solid now if you want to follow along and be exact based on what I'm doing here is a pro tip we hold Alt and you can see these little red lines that appear It's probably hard for you to see it but they're numbers and they're in relation to other elements that might be around it in this case it's there's no other elements there's just the frame so it's 36 pixels away from the top here and we have 100 I 38 away from the left here so you can kind of get things positioned uh using that metric it's also handy for when you're doing HTML and CSS and CSS specifically when you're trying to do a Pixel Perfect representation of the design when it's realized in the browser all right so and we're going to get to that in that course as well so now we're going to have our actual navigation all right and we're just going to have four links and it's going to be simple now it's going to take a while for us to knock out this navigation because I need to cover a bunch of Concepts that don't just apply to navigations but a lot of other design topics as well all right so here's what I mean we're going to hit t on the keyboard or come up here and just select the type tool and we're going to left click and I'm going to type in home all right now by default if I zoom up here remember control scroll will if I select this we'll see over here we have fonts that we we can use this is called enter I want to change that font to a different font called Poppins p-o-p-p-i-n-s all right it's my favorite font so we're gonna stick with that now you can see as well um over here we can change the font weight like we can make it bold if we want which I don't want to uh we do want to change the font size and for me let me look at my reference here my reference design I want to make sure I'm following along exactly yeah we're going to change this to 16. so 16 hit enter and it makes it a bit bigger I'm over here we also have other things like where we can adjust the line height we have multiple lines of text we have letter spacing paragraph spacing all this type based stuff we can Center the text and all this good stuff what I do want to do is come over here to type settings and we want to right here under case the very last option we want to click this one we want to make it all uppercase now why would I do that well it's just a subjective preference that I'm that I'm basically establishing you could leave it normal I were just like you know the regular title case or you could have it all caps lock so there's a lot of subjective preferences that we can make now I'm going to show you something you don't have to follow along with this this uh this point but I want to show you the the inefficient way of creating a navigation and I'm going to show you the much much better way of creating a navigation so let's say for example we have home now how did I do that by the way you take it you select the the element by left clicking we hit Ctrl D or command D on Mac to duplicate and then we just hold shift and move it over holding shift will make sure it stays on that same horizontal axis right here all right so we move it over we type in products um let's say we also have gallery notice there's also a little uh Little Helper tips so to speak where it tells you oop that's that's uh even white space between those three elements so that's good now let's let's make Gallery again you don't have to follow along what happens if for example somebody um maybe your boss says we need to change products uh and we need to rename that to services or service guess what we have an e uneven amount of white space now between this element and this element it's bigger I so this is an inefficient way of creating a navigation we're going to use something called components and auto layout that's going to make our life a lot easier especially when it comes to inevitability of sometimes having to revise the design based on a client or a boss telling you what to do so I what we're going to do before I show you you know those things like components and also Auto layout I'm going to add an underline all right because when it comes to navigation design and UI ux design you should always have an active status for one of the nav items so in this case we're designing a home page so we're going to make it obvious for the user that we're currently on the home page how do you do that you have different options on how you could do that you could change the color you could change the font weight by making it bold or something like that you can use an underline you can use an icon and sometimes you can do multiple of those things together you can even give it a background so I'm going to choose and this is a subjective preference to go ahead and add a line so we're going to take the line tool up here you just click the down and just hit L you could do that instead and I'm going to hold shift and left click and drag tag and create kind of something like yeah maybe I'll make it go in a little bit more something like that or so now another thing to note is if you want to change the thickness of that element you can go ahead and select it and you can change that thickness right here where it says one so maybe you want it to be 1.5 that's fine as well all right me I'm just going to leave it one and of course you could change the stroke color all this other stuff I'm here in the property inspector I'm just going to leave it pretty much like that okay so now that we have the active State version of the button designed we're going to take both of these elements and this is real important to remember when you're creating navigations like this we first want to go ahead and here let's go ahead I'm going to drag that just down a tad bit there we go we want to make sure the this bounding box from this type isn't overlapping this that way we can select both holding shift and left clicking both and we can choose Auto layout right up here all right so we click that now not much has really changed now Auto layout allows you to do a couple things so if I move this over here and I zoom up essentially what Auto layout will allow us to do now now that these two elements are in what's called an auto layout is we could do all sorts of interesting things like we could change it from a vertical direction to a horizontal Direction and now let's move this over here to the right side automatically um we can also adjust the spacing between these elements by left clicking and dragging this value I don't want to do that you can change horizontal padding vertical padding and you have options to adjust all four of the padding options here and then over here you can see we have a center alignment element uh in in an area where we can start to align these things in different Fashions and you'll see how this kind of works going forward so then once you've created this Auto layout for the nav item itself we can now go ahead and create a component components are very a very important topic to understand let me tell you why you don't have to follow along with this portion so I'm going to go ahead and duplicate it duplicate that with Ctrl D and let's say for instance you know we have our nav items here and I we or your boss or a client says I want you to change the color of these links we don't want black we're going to use something else maybe like a blue so I come here and I want to change these all to Blue all right now I have to do it individually or select all of them and do it and it's a pain I a component negates that necessity all right so here's what I'm talking about to create a component we select the element that we have and it's right up here you can click on this button and it'll say correct create component or Control Alt k for the shortcut when you do that it basically outlines it in a purple element and also in the layers panel it's purple as well so we can come over here double click that and change that to nav item all right I'm bad about naming my layers or renaming them rather so whatever you should get in the habit of doing that and so now we have what's called a component now with this component if I duplicate that and I go over here and I change the color on the master component or the initial component that was created this here is an instance of it I if I want to change the color guess what that changes too and we could also do things like come over here and change it to bold and guess what that becomes bold so it's very handy way components are of I'm allowing you to revise things easily that are supposed to be the same all right now next topic component variance remember what I said we we have we want to have an active state but also a state without this little underline right correct so we use component variance to achieve that so we created a component up here remember but now with that selected you can see it's changed the icon to a little plus before it was like this diamond shape but now it has a plus in it and it's called add variant when we hover over it we click on that and then that happens this thing happens like wait what I don't want that in my design well that's why when you're creating component variants they are not to be residing within your main UI frame right here they're going to go somewhere else sometimes people create extra pages so if I come over here and show you notice we're on page one uh we can just double click this and change that to home page we can have another page called components by clicking plus right here and we can just store all of our components and component variants over there I'm not going to do that because it's just a simple project I'm going to store them in the same page you can do that as well so I'm going to create a new frame F on the keyboard and we're just going to draw out a random size and we're going to drag this right there all right and if you want you can be cool and hit the type tool and you can give it a label if you want you don't have to you know you can say this is a main navigation items you know we can just give that a label maybe make it pretty small you have something like that and now we I have this Frame which we can start working with in constructing our component variance so we're going to need a few of them because I also want to have a hover state so on desktop when people are using with their Mouse and you hover over something that's like an actionable clickable item you should also have a hover state which again that could be denoted by changing something like the color I an underline adding an underline making a bold whatever so what we're going to do here is we could see this one if we select it under the property inspectors we can see it or it says property one is default I we're going to change that to active because that's our active State let me get out of here yep there we go so this is our active State and there's only ever going to be one active link because there's only one page a person Beyond at the same time at a time now when it comes to here home I the second one this is going to be the default State I where it's not the active page and it's also not being hovered over all right now before I make changes to this I'm going to duplicate that and we're going to make a change this is going to be our hover State this third one so for our hover state I'm going to double click to get access to this line right there it is selected and we're going to change the stroke color to like a mid gray or something like that so 8c8c 8C is the color code if you want to follow along all right now if I can come up here to this middle one this is going to be the default State one oh and by the way let's go ahead and click on this and we'll change over here variant 3 to hover all right and this one is going to be our default state so we'll change that to default for the property one name and then we're going to go ahead and double click and gain access or control I and left click to gain access to this and we're going to shrink this sucker all the way down to its small size and then also come over here where it says pass through and change that to zero percent now when we do that it's hidden you cannot see it basically it's taking the opacity and says goodbye we're not going to see you now we're going to prototype this middle one so that when we hover over this element it's going to Smart animate into this which makes basically means it's going to morph into this we're going to see this line come from nowhere and grow into this this uh Gray Line on Hover we're going to achieve this into HTML and CSS as well in that video which I hope you will watch so how do we do that prototyping we come up here prototype and with that element selected which it currently is we're going to add an interaction so we click plus we click this click and then this is going to be while hovering so we want this thing to occur while the mouse is hovering over that element that's currently selected so while hovering what are we going to do uh well let's see here we're going to drag this here all right so while hovering it's going to change to property one hover notice it's pointing to the hover element and then we also want to make use Smart animate instant will make it not anime it's just going to show up this this uh gray bar or Gray Line immediately without any type of transition you know animation occurring if we do smart anime it will create a nice smooth growing effect on that line and we have properties down here like the duration 300 milliseconds that's fine the easing which will affect how fast it comes in or how slow it you know goes out and all that stuff and then that's it so now I what we can do is how do we get this this new component variant onto here all right well we can come over here to assets and then we'll see frame one and then we'll see this nav item that's what we want to left click and drag over here and there we go notice it's outlined in that purple and by default it's on our active State we can choose to make it not active by coming over here with it selected first and changing it to default guess what that goes away all right so let's bring that back though because we want our home element that's our first nav element we want that to be the active State now now what we're going to do is we're going to duplicate it Ctrl D hold shift move it over somewhere right around here looks fine to me metal and again the amount of white space you have between your nav items is very important you don't want them to be too close because it might accidentally click on one they didn't intend to or you don't want them to be too far and like really spread out to where they don't feel like they're a cohesive element so I'm just going to put somewhere around here and we'll be able to adjust this white space easily because guess what we are going to select both of these and put those in an auto layout as well so we click Plus all right notice that in new smart it was smart enough to know that this is a horizontal Direction because we're having a horizontal navigation I and then if you want to adjust the spacing we can just take this and move it in and out very handy stuff using Auto layout so now what I can do is for this one we double click into it to select that instance and we can go ahead and change property One to default now what's really cool is we can also double click and change this to products oh no why is that happening we definitely don't want that to happen so what happened that caused this issue right here all right so if you want to make changes to some of the properties of your components you can't adjust some of those properties at the component instant instance level up here is where our main component resides or the master component essentially or the parent component and so essentially what we want to do to fix that is to select our type and we have type options right here you see this one this one's selected where it says fixed size we want Auto width all right and we're going to have to do that for the other ones as well so I'm just Ctrl left clicking to gain access to those and we're going to do auto width for all those guess what it fixed it so make sure you do that that was a bad on my part but I'm glad it happened just to show you how to modify things another thing I did not tell you about is when we have our our sibling eye or our instances of components if we make changes to one of those like the color of the font it only it only changes that component instance so whereas if we adjust the parent component over here it's going to affect all of them okay enough talking now let's duplicate this again and we're going to create yet another link called gallery duplicate that and then we'll make that contact okay so that's looking pretty good I might want to add a little bit more white space like a 41 between them now we can bring back if we select our frame right there we can bring back our columns make sure this is right aligned right there so we have equal white space or the empty space the very left or to the very right of the design compared to the very left of the design very important alignment is one of those key fundamentals that you need to learn so we can go ahead and hide that all right now watch this if we select this Frame hit the play button on the upper right corner we can see that animation take place it's hard to see so I'm going to zoom up control 4 look at that so this becomes quite powerful uh when you use it in different contexts which we're going to as well I know it's very simple right here but you're going to see it's very powerful and a cool way to prototype and it's something that can be achieved with CSS which I will show you in that crash course video for HTML CSS in front of development all right so this right here we're almost done with the navigation now what happens for instance if we duplicate this and we have another page or you create another page over here in that panel and you know maybe you have the products page you're designing for well you're going to have a replication of this this nav bar essentially and what happens if you want to make a change or your boss wants you to make a change or a client wants to make a change to logo it means you have to change it in all these other areas manually well remember what we do to negate that we use components so let's delete that we're going to take both of these elements first before we create a component we can also use Auto layout here and I'll tell you why it would make sense to use Auto layout let's say for instance you don't have to follow along I'm going to hit frame I'm going to get a tablet I will get an iPad Mini right here and we duplicate this and we come over here well guess what if we I did not create a auto layout out of that we would have to find this one and mainly drag it over well guess what we can do here we can essentially reduce the space between the elements right there in the property inspector so much better but they're not components so after you create the auto layout we can now click up here to create a component or Control Alt k and now that is a component all right so if we go back to the layers we can change we can double click on it where for me it says frame three it might say something else for you we're going to call this navbar okay awesome awesome stuff so now the navigation's done uh that's exactly what we want it looks good and it's rocking now let's get started with what's called commonly referred to as a hero section all right the hero section is underneath the navigation typically 99.9 of the times and it contains a few key things that you'll see on many websites I it's going to have a headline or a big piece of type uh it's going to have a sub headline usually like a description of some sort it'll have a call to action which simply means you know a primary button they're they're trying to get you to click it could be a form could be getting you to enter an email Etc and then usually there's an illustration somewhere um we're going to have kind of like a gallery of three different images so let's get started on that and we're going to start it and I typically start with the headline all right so we're going to take the type tool t on your keyboard for the shortcut and we're going to say quality up and right now it's remembering the type settings from before so if I come back here and we change this just to this Dash as type that will be most preferable so now we can see it's fixed that we're going to say quality apparel is that how you spell it I hope it is I'm not sure without the price tag apparel is one of those words that I just not exactly certain how to spell now with this selected we're going to change the font to a font called play fair display just hit enter when it autofills and it's kind of like a nice serif font all right so we need this to be big now this is a UI design fundamental or principle if you will called visual hierarchy it sounds scary sounds complex it's not let me tell you why essentially visual hierarchy is using all these UI other UI design fundamentals such as scale color proximity white space to place emphasis on elements that we deemed are high priority a headline is one of the most high priority elements of a design in a hero section because it's usually the first thing that you want a person to read and if you want them to read something first one of the biggest UI fundamentals that you use at your disposal to ensure proper visual hierarchy on that element is size in this case it's a piece of type it's text it's going to be your font size so 16 is way too small like this gets overshadowed even by the logo we need this thing to be big so let's try something like 52. now look what happens we're much easier able to see here's here it is at 16. obviously you're going to read this first compared to something like this so it's a very important process of understanding visual hierarchy and it's not just achieved through font size like I said it's also through color proximity white space contrast the list goes on all right so with this type selected I don't want this to go all the way out and there's a lot of subjective ways we could lay out this layout or piece together this layout so to speak like we could take these I we could center it and the way you can align certain items based on your selection is up here so if we want to center it within the given frame or the layout we can just click that we can also Center it vertically and all that good stuff this right here quality apparel without the price tag we could put maybe another sub headline underneath it and have like a picture you could piece it together like that and it would be a subjective thing I for those of you who might not be familiar with uh you know English might not be your first language I subjective simply means opinion your own preference objective though would be 100 concrete you must do this or you must not do this uh so there are objective things when it comes to UI design and there are subjective things many more subjective things I would say so I we're not going to Center align this I'm going to put this right back over here notice how I'm making sure it's aligned on the same column and by the way if you hit shift R you'll get these little rulers at the top and left you can left click and drag them on there just so you can quickly visualize things okay and then if you just hit shift G or not shift G I'm sorry R shift R you can toggle those on and off okay so another thing I I want to do and this is a very common pattern for creating hero sections is have basically two columns I'll call them here with our type and our call to action and then a column here which will have like a gallery or illustration or photograph of some sort that supports this section so what I'm going to do is just left click and drag this right there all right so now we have two lines for a headline next up we're going to have a sub headline so I'm going to control D to duplicate that and we can move it down holding shift now here's another way to this is another tip to replicate things you can hold alt and just move it down as well it's up to you so now we're going to have what's called a sub headline and this is just going to be a supporting piece of copy as it's called I and when it comes to visual hierarchy between these two pieces of type in this case we'll get real fancy and call it typographic visual hierarchy we want to step the sub headline to not be as important as the headline so how do we do that because clearly if we just put in we start typing a sub headline like no need to spend XXX on apparel just for the name's sake uh our premium apparel is made from the same stuff okay now if you left it like this that would be bad because there's nothing differentiating these two elements from each other and they lack visual hierarchy they're they're on the same footing essentially so how do we remedy that again the most primary way is going to be font size so we're going to change that font size to 18 from 52. there we go much better now uh proximity is very important and for those of you who are feeling uh adventurous which I typically don't advise for most newbie or newcomering UI designers we can also create more of a distinction with the visual hierarchy between these two elements by changing the font Family itself between these two elements so for this I'm going to do that and we're going to change it to Poppins which is used up in the navigation all right now this is set at a regular font weight another way you can establish that visual hierarchy is to change it to a different maybe a lighter font weight to light so I change it to light it is 18 and it is popping so the three changes that we made and now you see there's a big difference between these two elements very important to have visual hierarchy typographic typographically speaking all right so I another thing that you can do is to make your type more readable when you have lines of type like a sentence uh paragraphs is you can adjust What's called the leading which is a fancy way of saying line height or the the white space or the distance between your lines of text so the area where you do that is right here so I can left click and drag typically I advise for most fonts going anywhere from 120 to 160 percent so I'm going to leave like around 155 155 percent and that's pretty good it just separates things out more this right here is less readable than this all right so right around 155 I think is good all right so now the next element that is pretty typical is going to be the uh call to actions your primary call to actions and secondary call to actions um before we get to that I do want to talk about alignment and also white space we have these two elements newcomers sometimes will put them too close together this is difficult to read just a difference of you know maybe 50 you know 20 30 40 50 pixels makes a big difference putting it around here sounds pretty good if you go down this far it's going to be too spaced out so there's a nice sweet spot in here and it's something that you will eventually develop an eye for the more you start to design all right alignment another thing I'm not going to push this like right here remember if I bring back hit shift r or our grid line just align your type along the same column or the same row sometimes you can have stuff like right here or up here we're going to leave it right here there are sometimes you can break these rules but this isn't one of those times all right next up and by the way all this stuff is is really con it's cemented in my UI ux design course so you should definitely consider joining that all right so let's go ahead and create our buttons our primary and a secondary call to action and again call to action or CTA is just a fancy way of saying a button or a thing that we want a person to do so you know filling out an email clicking on a text field and a form element I you know clicking a button typically is the most common form of a call to action so let's go ahead and we're going to use the type tool type T and we're going to say browse our collection all right hit Escape by the way your Escape key to get out of that text edit mode now for this again visual hierarchy because we have three pieces of type that are closer together it's important that we separate them visually speaking to establish that visual hierarchy so I'm going to make it bold all right so we're changing it to bold all right so the font size of this right here we're going to leave at 18 so it's going to be the same size but it's going to be a different font weight now we could leave it like this but I want to give it an actual pill shape sort of uh container a button container so I'm going to hit R which changes to the rectangle tool left click and then notice how it's on top of it you can use your bracket keys on your keyboard hit the left bracket key to put it all the way to the bottom of the current frame so that just basically means that it puts it right at the bottom automatically if you use your your right your the right bracket it goes to the very top so you can toggle between those with that right there obviously we want the button background to be behind it so now we're going to use a another color I don't want to use gray you could use gray but my subjective preference is to come out here and I'm going to use right here around here if you drag this little slider kind of like in the orangish Hue and then drag this over here I think that's pretty good so that color code is f 1 e 2 D1 right there okay notice we have document colors down here it's automatically choosing some of our colors that we're using I if I get out of here I'll show you something that's real uh it's a tip essentially if we come over here and you want to use utilize this if you had a real serious project I right here has these four little dots under fill if we click that we can click the plus button to create a style so think of it kind of like a component for uh things like colors or your font sizes and all that good stuff uh so we could call this you know this could be like our secondary color uh that we use in our design and we could give it a description too hit create Style and then notice how it changes this area right here and now if we had for instance let's just duplicate this this background so you just hold alt shift and left click and drag over notice it says secondary as well so if we change secondary uh elsewhere and by the way we could do that by clicking here and then see this we can right click edit Style now we can change the the actual color right there so we only have to do it in one place so that's very handy all right that's just a pro tip for you let's delete that one now we're going to take both of these elements you just left click and drag around all of it to select them both and we can go ahead and choose Auto layout and then right here we want to center it and doing that allows us so that if we want to change the size if the type's always going to stay in the center which is what we want all right now I want to give it some rounded Corners now that this is also a subjective design preference you can have these right angle Corners that's fine if I select it we can come right up here and left click sorry you can't see it because my zoom tool is messed up but you can left click and just drag this a pill shape would be all the way just left click and dragging to the right which is fine as well I'm going to make them a little bit less than that probably around 9 or so or eight all right so with that selected I think that looks pretty good might pull it out a little bit for more white space on all around uh the button container all right so that looks pretty good right there notice I'm keeping these two elements closer together with the amount of white space between them compared to this because semantically speaking this is kind of a different element this is an actionable button that they can click and so this is also referred to as grouping but these two elements kind of work hand in hand you're telling a story first you're getting their interest with good ad copy in your headline and then they're going to read a little bit more and then they're going to see this call to action button so we we separate them differently through proximity and white space essentially all right now we can also have oh before we continue to the secondary call to action which will be right here I we can go ahead and take this and create a component out of it and we can create a component variant out of that as well all right so maybe we're just going to have a hover here where we change the background in a very subtle manner now notice this is tied to a actual asset here called secondary for our color so we can break that come over here just make it a little bit darker the color code for that is e4d2bc right there all right so it's just very slightly uh darker essentially so what we can do now is switch to prototype tab click here drag this down and then under our properties this is going to be I on click is going to change to while hovering and we could use Smart animate but for this typically I'm just going to use instant just to change the background color real quickly now we're going to drag this back over here oh no not that I meant this there we go I'm gonna put that right here we're going to drag this out again you can go ahead and switch the design tab first we can go ahead and shift alt drag that over this is going to be primary call to action there we go go back to layers select this we'll double click this change from the name from frame 3 to CTA I think that'll work and then we go to assets and we'll drag CTA on here so that way when we hit play if it's showing this right here this little frame you just at the very bottom you click the right button there you go so now we hover over it and it changes the color all right awesome now let's go ahead and create another uh call to action here it's this is referred to as a secondary call to action and we utilize visual hierarchy between these two buttons to make this secondary so it means it's not as important but it's still important enough to put all right you don't always have to have a secondary call to action it just depends on the needs of your project so I'm going to left click right here we're going to say spring 23 collection all right now we do have visual hierarchy already between these two elements why because this element right here does not have a button background your eye is just naturally more drawn to this because we have a unique color behind it and all that good stuff we can further reinforce that visual hierarchy by changing this maybe to uh regular or we could keep it the same up here and we can just choose light all right that's that's fine as well now we can also add an icon sometimes buttons will have icons next to them like a little arrow Pro tip a great easy way to create arrows in figma is with the the arrow tool so shift L is the shortcut for that hold shift just to make it a nice horizontal arrow and then if you come over here we can take the thickness down all the way to one all right and so look at that we can also utilize if we take both of these Auto layout and leaving it right here it was smart enough to know to put it in the center left if we drag this out it's not going to center it so if we put it in the center you'll see now it's going to stay to the center as well as a center this way and this is fine as is right here all right now I do want a nice cool what's called micro interaction to occur here when we hover over spring 23 collection it's and we're going to integrate this as well in CSS when we get to that in that crash course video and so what I wanted to happen is when somebody hovers over spring 23 collection it's going to shift over this little arrow so we can do that here in figma obviously as well in CSS when we get to that so the way we do that is we take both of these elements we're going to go ahead and click create component up there and once we have that we click again up here to add a variant and now we're going to drag it back right here Let's uh give out a label secondary call to action all right so we take this one the only change we're going to make is adjusting the white space Boop just like that doesn't seem like a big change but there's something satisfying about these little micro interactions for users when they hover over elements it just kind of lets you know it's a clickable element you could also if you wanted to I double click to select the actual type and then come over here and choose underline for decoration so you can underline it as well there's no you know it's just a subjective preference you don't have to but we're choosing to so we're going to double click to select this one go to prototype drag this down create a connection and this is going to be once again sorry to while hovering and we are going to Smart animate that at 300 milliseconds all right so what we'll do now switch back to design tab go back to assets and we also have right here our new call to action we'll get this kind of in place right around there just eyeball it or if you want you know you can hover over this and then hover over that and hit alt and you'll or option and you'll see 45 there's 45 pixels between these elements notice alignment as well I'm not pushing this right up here that looks silly we want these two pieces of type to be right on the same horizontal path now let's go ahead back to our tab if you clicked out of it um the preview or the Prototype Play tab you can click play again of course up here so let's uh zoom up here here's this one and here's that one look at that very nice all right we're moving right along all right so there's one other element that I'm going to have here and again it's one of the things that's entirely optional I'm going to have like a little um card as it's called cards in UI designs are patterns that you're going to come to know quite a bit uh and it's just like a way of saying that it's just like a a a like a rectangle typically that has information inside of it and sometimes you'll have multiple cards next to each other and all this good stuff um and so we're gonna have a card kind of like for an area where it just shows the latest news or something like that so let's go ahead and do that so we're going to hit R for rectangle we're going to left click and drag roughly the width of this current column so that's established by the elements above it so we have it starts here and it goes all the way out to roughly right around here so we can pull this out GS to tad bit more and that'll be good okay so for our card we want rounded Corners as well and sometimes you know you might mix around the corners but this doesn't look good these aren't as rounded as this so consistency in UI design is also important consistency and the the type that you're using the colors that you're using the fonts also your border radius or your corner radius um so what we're going to do is make sure they're both even so we're select up here it says eight right up there we're going to make this one eight as well okay now for our card our card background very important that we establish good practice when it comes to contrast uh people get this wrong often and there's a lot of subjective very good choices but there's also a lot of objectively bad choices people can make one of the core tenets of typography that I haven't yet talked about is contrast and so I'm going to show you a plug-in which we haven't even discussed yet there's a whole ecosystem of awesome figma plugins that you can use to ensure minimum contrast adherence okay so here's what I mean let's say for instance we change this background color here and you don't have to follow along then we're going to make it darker for some reason we're not ultimately but let's just say you decide you want like a mid Gray then we're going to have type on top of it so I'm just going to save myself some time I'm going to replicate this hold alt and just drag this over here right bracket key to get on top and we're going to have some type uh we're gonna make this size 16 make it a little bit smaller put this over here uh for me personally I'm going to copy and paste some type off to the side that I had actually we're going to change that to size 14. and we're going to put it like right there now the darker this background is the more difficult it is to read this type and I see people get this wrong so often in so many different contexts for instance here's another context this is maximum contrast you can't get any better than black on absolute White but sometimes I'll see people do this they'll change the font color to like a real light gray it's like bro I cannot read that come on all right so how do you ensure minimum contrast well there's something called the web content accessibility guidelines and this isn't around in the world of accessibility which is very important to understand it's one of those core principles to understand if you're a UI designer and you're responsible for piecing together the visual Aesthetics of a layout I and the web content accessibility guidelines otherwise known as wcag or Crag nobody says that don't do it you'll embarrass yourself it's it it's a set of guidelines for accessibility on websites and it's not just about contrast but contrast is a very important part of it and the contrast guidelines state that a couple different things about contrast and you want to adhere to minimum contrast guidelines uh to have a truly accessible design because they've gone through and they've done research and not everybody has the same vision right some people have a hard time seeing so with that in mind there is a plugin now like I said figma has an ecosystem of plugins and you can browse those plugins I by coming up here to the little home icon the very upper left most eye Corner icon and we can come over here you click on your username and click community all right and you can search through a bunch of stuff it's more than plugins there's also assets people created for like illustrations and just everything underneath the sun you can see all this stuff here and a lot of it's free to use uh and if we search under the Community and we type in Stark s-t-a-r-k you've probably heard of that before like the term stark contrast well that's the name of this plugin we can come right here where it says plugin and you'll see Stark this one right here so if you come over here it tells you how many people have used it are obviously a ton 195 000 people I we choose try it out it's going to open up a new document and you can actually click run and you can give it a shot but once we do that we come over here back to our original design and we click on this little icon right here and we go to plugins we can now choose Stark we're going to click run and we're going to click run there again there we go so we here's this little plug-in all these plugins have different uis um you can create your own plugins if you get to that stage and we're going to click contrast all right now darn you have to have a free account or sign in so it opened up the browser window onto my other monitor that's why you can't see it but I'm logging in with my my Gmail or my Google account rather go back to click that off let's go back to contrast here it is so with this type selected notice we're I'm going to zoom up here notice how it says normal text and large text all right so it's it fails on all these accounts the color contrast ratio is 2.5 to 1. now so we really want that to be at least 4.5 to 1. large text which I believe is anything I'm probably going to get this wrong 22 to 24 pixels above I you can actually get away with less contrast a little bit because it's larger text hopefully you understand that okay so this also gives you suggestions so like if we do I oh you have to be Pro for that you don't have to buy this plugin but it can at least tell you if you're getting it wrong and then you can also just be like okay well at what point do we need to drag down this color right here let's see remove that click on contrast ah now it adheres to it to 4.77 to 1 right there all right so for me personally we're going to make this background completely white or just get rid of the background color but we're gonna give it a stroke all right there's nothing wrong with adding a stroke so I'm going to leave it with a high contrast black stroke and we're also going to leave that text right here black again 21 to 1 ratio so the higher the ratio or the bigger discrepancy between those two numbers the better ultimately you never want to go under that normal text I ratio of 4.5 to 1. okay so now we're going to put an another piece of type and we're just going to put like 50K now we're just gonna put 50k there we go and we're going to click this little Auto width right here it's going to which simply means it's the width of this little bounding box will be the width of the text that's in otherwise if it's not you know we do something like this it's going to do that okay so it says 50K and what we're going to do is we're going to make this type larger so uh the size of the type I think that we're going to use is 33 or so all right so I personally hmm think so that's size 14 yep that's good for now um actually I want more white space between these elements so moving things over here okay right around there is good notice how these are aligned along the same row essentially so if I shift R bring down a row based guideline they're right there at the very same column or not column but row okay so that's looking good to me now what we can do is I want to add to make the designs more interesting I call them accents and adding accents like these graphic design accents can just make a design a little bit more lively so to speak and this is where the figma community is going to come in as well so if we go back here to the home icon and we're still under the Community section I'm going to type in confetti now they actually have some confetti plugins that you can use I think this one I've used already it says confetti is 39 000 people I think that's the one I use you can really experiment but you can also search for all and there could be just documents people created with confetti so you could do this with all sorts of things based on what you need like for emoticons and just hand-drawn elements just all sorts of cool stuff that you can just use uh in your project so if I go back here and I I okay I use the one called confetti Genie all right so if I click it and click run all right here's how you use this particular one uh we're gonna hit R to create like a rectangle and then we're going to click this button down here it says generate with selected colors I'm not sure what happens please select a frame oh so this has to be turned into a frame so we hit f we have a frame now now we can choose confetti uh let's see here color palette is empty please add color okay there we go oh actually you know what we'll use generate with random colors there we go now we have some confetti over there we'll close that out I don't want this much confetti like over here because this is supposed to be a we're proud to announce 50 000 employees whatever I so what I'm going to do is zoom up and I'm just going to double click to gain access to one and then just like kind of well let's see if we can ungroup that there we go now we can just select a few of these maybe uh maybe this section right here your results is going to look different so just just select a few of them and control C to copy and then Ctrl B to paste we're going to move them over here hit Ctrl G to group them hold shift scale them up all right and there we go we have a little bit of confetti let's delete that just over here and we'll integrate that with CSS as well okay coming along pretty good here's our design so far with a little micro interactions looking good now we're going to worry about the right column so for the right column like I said we're going to have kind of like a image gallery they're going to be cards uh cards with photo based backgrounds of products fictional products so let's go ahead and create that r on your keyboard and we're going to position this right around there good amount of white space between these two columns and again we're going to use the same border radius that we've been using around to keep consistent it's eight so we're going to use 8 over here up in this section with that selected and then I'm going to show you a really awesome plugin that I use almost every time it's probably the most popular figma plug-in it's called unsplash they have an Associated website called unsplash.com and it's where you can use free images 100 free even for commercial it's awesome a very awesome resource so with this selected we're going to come out here um to our plugins and I I have already used and searched for unsplash so it's going to show up here for me I'm going to click run and then we can do an image search all right so if I put these to close together we'll see them when I zoom up and I'm going to search for uh shoes all right I'm going to find a graphic of shoe you know that I like trying to find the one that I used during my reference project that's on my other monitor and of course I can't find it uh maybe I just typed in shoe let's just use this one we click it and guess what it shows up that is awesome very very cool so now what we can do is we can create kind of like a little card within a card on top of this so let's just duplicate this Ctrl D to duplicate drag the copy down hold Alt left click and drag in all will make it so that you know both left and right are being affected otherwise if you let go of alt it's just going to affect this side again these these keyboard shortcuts you'll understand as you you know bacon into your muscle memory as you keep on designing now we also want to put Eco white space all the way around from left bottom and right all right to check that yeah so I was I went off my bottom says 11 the the right and left say 10 so we can just use our keyboard down arrow key to push it down by one pixel now another thing that's very important is is when it comes to Corner radiuses inside corner radiuses this element being that it's nested inside of this element should not have equal or larger corner radiuses it just looks dumb if it's even larger so if they're larger that doesn't look right it just looks awkward all right so we want to make it smaller so we push it out maybe to like five all right now it looks like it scales proportionally from this to that all right next up we don't need an image so we can come over here and just click that and the minus will just delete the image and we're going to make the background white all right so inside of here we're going to have some text we're going to have the product name we're going to have a product very subtle product like description or category and then the price so let's go ahead hit T we're going to say foxica sport 33 is way too large so our size is going to be 16 and bold we'll make it bold again we're using Poppins for this duplicate that Ctrl D or just alt shift and drag down and then again we want to have visual hierarchy between these two pieces of type so to do that we're going to make the size of the running shoe type just two points are smaller 14 and it's also going to be light and we'll also make it not quite black but darker again you don't want to go under that minimum contrast guidelines so now I can double click this and say running shoes there we go finally we'll put the price so I'll just duplicate this one hold alt left click drag over 59 dollars actually if this is supposed to be like Fox like cheap stuff like real cheap stuff we'll make it 49. okay there we go all right so now we're going to change this it's going to be light and for the font size we'll make that 18. by the way you can change uh numeric values over here by just clicking in you can use your keyboard up and down arrow as well another tip and so we'll leave that right there I think that's pretty solid now we can take everything by left clicking dragging around everything right there in that card and we will duplicate it now I just noticed this card is just too big we want to make sure that this second card over here there's going to be two of them stacked on top of each other don't exceed our rulers like right here so your end of your navigation typically will Define that column all right and it's it's important to adhere to that for the most part now if this were like a kind of like a carousel as it's called where you have things off to the side you can ignore that exceed those boundaries but in this case we don't want to so how do we fix that all right well if we could select both of them we can kind of like select everything rather and like drag them in you can see it kind of screws up our text and that's okay um one easy quick way of fixing that is just to drag this out make sure we can choose Auto width right here do the same thing with auto width right there as well Auto with there there we go all right so now if we take this and duplicate it Ctrl d and then we go ahead and move this up move this with it we can go ahead now duplicate that and you do want to have equal white space between these elements um not just from this direction but also this direction as well so if I look at this it's 23 if I look at here compared to there it's 12. so we need to make an adjustment for that so to do that I think what I'll do is simply take this bottom one we're going to move it down now it's at 19. I just put hit 4 just to get to 23. so now we have 23 um from our row white space and our column white space all right so that means I need to take this one and just match them up down there as well and then take this match this up now by the way see these elements like these little cards right here these are exactly the same you could create components out of those you I should have but I didn't I and so that again that just shows you the value somebody you know your boss might say hey I want a border around this so it just means you're gonna have to take these three and add a border or something like that all right so now that we have that we need to change these pictures and make those unique as well so I'm going to go ahead and with that selected right click go to plugins choose unsplash that's another way to get to plugins and I will type in sweater we'll use that one and then we'll also for this one we're going to say jacket all right so for that jacket we'll use this one all right now one final thing I wanted to show you that's very cool components can be also you know quite complex like you can have all this this whole thing can be a component itself so with this selected we can just choose component up here and let's create a component variant out of this so we click the plus up there oopsie don't move that and let's let's really give ourselves some room with this Frame so I'm going to move things around we're going to drag this up here we need even more I'm going to move this all the way up okay let's say for instance when somebody hovers over this card we want the background to grow slightly so what we need to do is we're going to select it and we'll select the first one until you get to the image portion where it shows the image we're going to go ahead and change this from fill to crop now nothing's going to change but we have to do the same thing here so we change this again from fill to crop and now we can take if I zoom up here we can take this outer this is the actual image right here we can move it around or we could scale it as well so I'm just going to hold shift and ALT and then left click and drag and make it a little bit larger and then get out of there so now we can go ahead into prototype selecting the top card drag a connection this is going to be while hovering smart animate 300 milliseconds that looks good now we can go back for our assets we can drag that on back to where it was and again you want to make sure you have proper distance so I think this is you know pretty close yep 23 it's perfect so now let's take everything as well but actually let's just take our canvas uh or a frame rather and move it now sometimes when you move or you size a frame and your stuff inside it like we have all this design it'll move things around it's not happening now if that happens and it's like it's distorting something just hold Ctrl while you do that and it will ignore all that stuff from happening okay so now what we can do is go back here look at that you can even do other stuff too for instance which we will do in CSS what if we wanted this to move up slightly like this little card thing well we want everything so we're going to take all three holding shift so we have four elements selected three pieces just type in the background and maybe just move it up a little bit so now if we go back look at that let me zoom up so you can see this very very cool so we have all of our micro interactions I'm up here and now that is essentially it so uh hopefully you learned a lot uh there's obviously a lot more to learn but this is a crash course and it's already been quite lengthy and now I want you to watch the front and development HTML CSS crash course where we take this exact design and I'll show you from scratch how to make it a working reality in the browser again if you're watching this at the time I launched this video here at the beginning of 2023 it made up of it that video may not be out yet but look at the top uh description and also the top comment um and it's going to be coming out within a week or so of me releasing this video so as always make sure to subscribe I seriously suggest you all consider joining designcourse.com my UI ux course if this is something that you enjoy and you really think you can tackle and trust me anybody can tackle this I if you try hard enough and so my UI ux course is interactive and there there's so many different examples layout examples component-based examples all in figma that will help you have a successful UI ux design career alright I'll see you all soon and goodbye

Channel: DesignCourse

Views: 213,234

Keywords: learn ui/ux, learn uiux, learn ui/ux design, learn uiux design, 2023, learn ui design, uiux 2023, ui/ux 2023, learn ux design, learn figma, figma 2023, figma crash course, figma course, learn web design, how to design a website, how to make a website, gary simon, designcourse

Id: QwSN4n2sjR8

Length: 77min 53sec (4673 seconds)

Published: Mon Jan 02 2023