Interactive UI/UX Crash Course

Key Takeaways

what's up everybody Gary Simon here so today we've got a treat for you because we have a 6-hour uiux course that I've uploaded and this is the same videos that I uploaded from the 30 days uiux series that I just concluded I figured some of you would just want one single video to follow along through you know learning uiux design and so that's what you're about to watch so you're going to see each of the videos are separated into different days and there Happ there wasn't 30 days there was 29 and a lot of these have challenges I still advise you to take the challenges because while I do a review of what people submitted in the next video um I'm not doing reviews anymore for these but it's still a good practice so please follow along with the challenges and then look at the reviews thereafter for that particular challenge to see if there are improvements that you can make because a lot of designs ended up being kind of similar based on the challenges so make sure to check out if you want to learn more about uiux designcourse tocom because I have my full uiux course there along with mentorship as well so I'll stop talking and let's get started the sponsor of today's video is protopie so protopie allows you to create High Fidelity prototypes with ease in a no code environment so you're able to take your figma layouts and easily animate and prototype them yes figma does have prototyping but protopie is prototyping on steroids you're able to integrate tons of a awesome interactions across mobile tablet desktop and more now what's really awesome is they offer a free plan and then other plans that will grow as you grow so you should definitely seize this opportunity today to really take your UI designs to the next level with Advanced and easy to integrate interactions with protopie you see this katch-up packet here everybody hates these ketchup packets they get over your hand they suck now we're going to take a step up and we're going to upgrade our ketchup consuming experience this one is much better you can dip it you can squeeze it that's great but then ultimately we're going to level up into the full bottle that's right we get the full bottle thus we get the best user experience user experience the ketchup packet analogy this is stupid why because I'm not a foodie you're probably not a foodie you know one of those food enthusiasts why the hell is that we talking about C up you are a person who wants to design websites so what the hell does ux UI mean in relation to actual webites in apps so somebody who builds user interfaces ux is all about making things logical and easy to use that's the most important thing easy to use I'm going to show you some examples of good ux and bad ux and these are things that you probably have experienced already when using other websites and apps now I'm sure you've experienced this one you're on mobile typing in a password and because you have pudgy fingers you're not sure if you typed in the right password a visibility icon is good ux because you can quickly determine if you've typed the right password how about the all Annoying gdpr consent banners nobody enjoys this except for the carens of the internet or what about websites that ask you to click a button to enter the website guess what we already expressed interest by visiting your website by either typing in the URL or clicking on a link now UI on the other hand is all about the Aesthetics it is the visuals and it's the fun part because it's the thing that you have a lot of control over because you get to build stuff so this means the colors the topography the alignment the spacing the visual hierarchy these are all UI design foundational principles and that's what all goes into UI design it is literally building the UI itself that people are able to see and interact with and if you think about it UI is actually a subset it is a part of the umbrella term ux because if you've ever visited a website that just looks ugly that affects your user experience so you might be wondering should I focus on the UI or should I focus on the ux well you focus on both and you focus by building user interfaces all right so that means means mainly you're going to be acting as a UI designer and in the process of building uis you should always keep in the Forefront of your mind is this easy to use is this easy to use does this make logical sense does it make sense to put this here versus there does it make sense to use this color versus that color and what ends up happening is you tackle a lot of the ux considerations just as a matter of building out the UI and that's why I'm a strong Advocate as a UI ux educator to actually build things and also actually test things once they've been built and so these are all considerations that you end up making and you become better at as you get more experience designing things and designing stuff so don't get stuck in the abstract and all the terminology and the word solid that accompanies ux try to actually build stuff and that's what this course is going to do where this 30-day little series it's going to help you build a lot of things unfortunately there's nothing to build right now because this is a more conceptual topic but starting here in the next video too we're going to get our hands wet and dirty with a lot of actual UI design and in doing so you're going to automatically discover a lot of the ux principles just by designing stuff so if there's anything that you remember about this video it should be this UI is about making stuff look good and ux is about making that stuff easy to use cue the smoke geysers we're going to get to the tools here in a second but first I have a very important statement skills last forever and tools do not what was that skills last forever and freaking tools do not so what does that even mean that means don't get tied to one piece of software don't rely on it too much don't make it to be this huge deal because here's the thing companies they go under software goes unsupported so as long as you focus on your foundational UI ux design skills which we're going to focus on here coming up starting in the next video then it really doesn't matter about which software you're using too much as long as it gets the job done for instance it's sort of like riding a bike when you learn how to ride a bike B then so when you learn how to ride a bike that skill is transferable to other bikes as long as it fits it may feel different but after a while you'll adjust so the same parallel can be made with uiux design skills and the software that you use to employ said skills so the first category of tools that we're going to focus on is the actual tools that you design your user interfaces in the UI ux design and prototyping tools Now by far the most popular tool is going to be figma in this category and this has been the case for the last 5 6 7 years figma offers 100% free plans which will be 100% suitable for you to follow along with this video series and it just allows you to very quickly design and iterate your user interfaces it's a really important step to take instead of just hopping into code first so this allows you like I said to very quickly create your user interfaces and also Implement prototyping so that's going to be the software that we use through the majority of this series now another popular choice which is a direct competitor to figma and it's very similar is the 100% free and open-source alternative to figma which is called penot so penot has gained popularity within the last 2 years or so and they are quickly really adding a lot of features to really compete with figma in a 100% free an open- Source route so that is not a bad route to take either and I will definitely be doing and covering pen pot in this series now another category of tools within uiux design is prototyping so first what is prototyping well let's say you design a user interface in pen poot or figma and you want to show people how this this particular user interface should be implemented and how people and users can interact with it so that means employing micro interactions and animations and you do this with prototyping software now figma and penot do offer limited prototyping abilities but if you really want to take a step up in terms of functionality then you could take a look at a tool called protopie so protopie allows you to take designs that you made in figma and quickly add interactions and animations to them so that you can show either developers or stakeholders how you envision your UI design to behave when users interact with it now another popular category of tools are the low to no code tools such as framer web flow and Wick studio so what's really cool about these tools is you're able to import your designs that you create in figma and then you can use these tools to make them a working re it in the browser that you can ship on their own.com or something like that now some people will skip designing in pen pot or Figi and they'll design straight in these loaded nood tools which is fine but personally I prefer to still design everything in figma and then import it and then make it a working responsive reality in the browser with the load and no code tools and the reason I do this is because I can design much faster in figma as opposed to designing with these load and no code tools now as far as UI design is concerned those are the main tools that you're going to be working in using and for me I'm primarily working within figma when I'm designing a UI now because ux is such a broad term there are other categories of tools that you can use so for instance figma has something called fig Jam which is a great place to collect research and also competitive analysis before you start designing a user interface now these tools right here will help you collect user feedback and also help you determine how users interact with your UI before it's actually live and these tools right here will help you when your website or the app is actually live and receiving traffic so what this means is when people start to use your user interface you want to test things you want to see how long people are on the page you want to see where they're clicking so these tools allow you to see and allow you to make adjustments to the design based on the results so these are AB split testing tools there's multivariant tools and these are things that we can cover more in depth going on in the series so to Circle back to the original Point skills last forever and tools are temporary day four of the 30 30day uiux design Series this is exciting because this is the first time you're going to actually be put to the test I'm going to show you exactly how to build a nav bar on a desktop design this one right here then at the end utilizing what you learned I want you to take this design and do your own navigation based on what you learned then I want you to submit it to me and tomorrow I'm going to check out some of these and I'm going to make improvements and I'm also going to give shout outs to ones that didn't need improvements this way we could all get better together now I know what some of you are thinking 30 minute video on a navbar well that's because I really want to cover a lot of the foundational uiux design principles which I do in this video and so it's a little bit lengthy and I know a lot of you are used to watching 60c design tutorials on Tik Tok and YouTube shorts that's all the rage these days but guess what you're not going to get better by just spending 60 seconds take the time to watch this video and then have fun with it at the end when I give you this figma document that you'll be able to replicate and then you'll be able to do your own little navbar design and then submit it to me and the instructions are at the end so I'll stop talking it's already a long video let's get started all right everybody you excited we're ready to finally get started after 4 days and the first thing I want you to do is click on the figma community file and it's going to be linked wherever you're watching this in a description or so and this is a template that we're going to be using for all the projects that are part of this 30-day uiux challenge and you want to click open inigma right here now when you do that it's going to open up this page right here so this is what figma looks like this is the desktop version you can download it or you could use the webbased version they're very very similar and essentially this is the um project that we're going to be focusing on as you can see there's uh what looks to be like on desktop this is like a desktop frame uh a hero section you know the top part of a section but it's lacking a navigation and so that's going to be your challenge um in this page right here you can see it's an entirely different layout and that's going to be your challenge for the end of this but we'll get to that in a bit so first I wanted to talk about what actually nav bars are and you know what their purpose is and this is very simple simple you should understand this um if you've used the internet at all on a desktop like on a laptop or something you have the browser maximized and you see a navigation and there's a typical pattern for that you typically have The Branding logo on your left side and then on the right column you have the navigation like the home about frequently asked questions contact us join now something like that and so when we create a navigation we have to ask ourself what are the pages um and we we also need to make sure that based on what's currently designed here that it fits it will fit well okay and what we need to do if you could look up here we always have to ask ourself whether we're designing for a nav bar a UI card a footer anything any type of UI element we always have to ask ourselves especially when you're first starting out is the visual hierarchy good is the contrast good is the color the alignment the white space the groupings so you could see right here I have included a little check mark and an X right here right so what we're going to do once we finish designing this desktop navigation is we're going to ask ourselves is the visual hierarchy good and don't worry if you don't know what that means right now I'll explain when we get to that is the contrast good and if so we're just going to drag things over here and we're going to duplicate them and and and we're going to make sure what we cross all the the the the t's and the do in the eyes okay so I'm going to back up here and let's get started so right here you can kind of see over here we have a logo called lra code and then we have Pages these are not really styled except for the logo and typically if you're working for a client or whatever they'll provide you with the logo asset and the first thing like I said that we want to do is we want to place this over here so what I'm going to do is just duplicate this and the way you can do that you can duplicate multiple ways here in figma you can hold alt left click and just drag or you hit contrl D and that will duplicate as well okay so we're going to place this over here and where should the logo be placed this is a good question if you're kind of unsure well what I want you to follow and right now we're going to talk about alignment which is one of the UI foundational principles right here we're going to talk about alignment if you notice right here it looks like the headline and all this type right here where it says console and then also this first uh little trust symbol Tesla right there it's all aligned on the same vertical axis so if I hit shift R and I left click and drag on top of this we'll get a guide and you can see how everything is lined nicely right to that so it would make sense to also align our logo along that same column this is alignment all right it's very important to understand this stuff so if I hit shift R again we can hide that and we can always bring it back by toggling it shift R shift R like that and you could also drag down horizontal guides as well control Z of course will undo stuff like that so shift R let's hide that so now we have this aligned where it makes sense logically based on what's already designed okay so that you cannot go wrong there so alignment is checked off at least in relation to the logo now now what about Whit space you see Whit space right here so what is Whit space Whit space is simply the empty areas of the design and that sounds kind of boring and like a nothing Burger but Whit space is extremely important because if things are too close together or they're too far apart they do not feel right and it will break the beauty of the layout so the next question we have is where do we put this in a vertical context like do we put it here do we put it up here at the very top well typically There's No Going to there's not going to be any right answer but I would say it makes sense to put it right around here and of course you have a degree of flexibility and subjectivity like for instance I would not put it any closer than about here to the top or any further down than about maybe right around here now how would I know that well we need to take a look at the entire design as a whole and we have to get it a feeling for how things or in white space is being applied based on what's Happening and so it would not absolutely make sense if we put this like right here against the edge because it just feels like it's too close and this is one of those things that you just have to develop an eye for eventually so I'm going to put it like right around here and that seems like a nice good area for it to have enough room to breathe okay when things are cluttered it's harder to see them okay so next next up we have our actual pages and you can see the way it's displayed here they're kind it's a vertical navigation but it's not meant to be a navigation it's just to let you know what pages we need so in a context of a primary navigation on desktop like 9 99 out 100 times you want it to be a horizontal navigation meaning that instead of things being stacked on top of each other like this they're going to be stacked from left to right so let's go ahead and design for the actual pages so I'm going to hit t for the type tool and I'm just going to type in home now the first question we might have is what font would we use well in this case we already have the design here for us right now we're designing with training wheels on and what that means is I've already provided the design for you so a lot of the thought is the thought processes are are cut down because a lot of this stuff's already divined so if if you're working on an exist design and we're adding you know in this context some type here we have to ask ourselves and we have to look where are the other you know what other fonts are being used here and I can see too we have enter right here this is enter as well and then this stuff right here we could see is consolle laws all right so it's kind of like a a code Cod sort of font and you could either use you could use either or for this case case um so when it comes to design there's a lot in art in general there's a great degree of subjectivity and then there's also things that are objectively wrong and false so what we could do is we could experiment with both of those so we can change inter say for instance to console us okay maybe make it bold all right so that seems like it works now what about what about over here um actual you know do we do we think it needs to be bold um how about all of them I are should all the links be bold or maybe just the currently active page you know could that be bold these are all questions that you can ask yourself as well what about font size all right so now we're going to talk about another aspect and this is called be quiet this my phone this is called visual hierarchy and visual hierarchy is an extremely important concept to understand and essentially it means means where do we want the eye to be directed to all right visual hierarchy doesn't just relate to uiux design it's an art design in general it's a principle and if if anything is too large for instance then it's it that's what's going to take people's attention because it's really big and bold that's why your headline if that's the first thing you want somebody to read which it typically is you want that to be large okay so what about the font size all right so the font size in relation to what well the the closest element here is the actual logo so would it make sense to have like a home button this size I don't think that's bad actually that font size here is 24 I think that's a fine font size now if we bump this up to 50 you know how ridiculous this looks it doesn't look right it's too large and likewise if we were to go down to say 12 that's going to be really hard for people to see okay so your your topography font size is one of the biggest ways that you reinforce visual hierarchy um in and basically visual hierarchy is about establishing uh elements of importance based on priority and you style it and you you establish that visual hierarchy by adjusting all these other fundamentals I just realized I also need to put in topography right there as well okay so 24 would actually be a good size so I'm going to put 24 and I'm just for now I'm not going to worry about placement too much I'm just going to go ahead and put in home curriculum fact contact and join today so there's a couple ways of approaching this I'm going to do it the real simple way um but it's also the less Dynamic way and the reason I'm doing that is because I don't want to drown you with too much information up front so we're not going to be focusing on uh the correct way to do this stuff yet which would be through components and component variants here in figma we're not going to mess with that so don't worry about that for now we will later in this course so just to make things easy we're just going to duplicate this so control D or command D or alt left click and drag to the right we're going to put in curriculum okay so another question you might have for yourself is okay so we have curriculum how far apart should these be well remember what is the fundamental that refers to the space between the empty space between elements that's white space right so just with font size where I demonstrated too large and too small there's also too much white space and too little white space so before we experiment with that white space let's get the other links here um just so we can experiment now I will introduce Auto layout to you and that's a a it's a core fundamental of figma if I take both of these elements double click hold shift left click and double click so now we have in our layers both of those elements selected right down here we can add what's What's called the auto layout right here so we click plus and it puts it into this Auto layout in our property inspectors right here we can see if we adjust this value we can increase or decrease the amount of white space between these two links links now what's also really cool is if we just double click and we select curriculum we control D and duplicate it it's going to maintain that white space in between and if we hover over we can also real quickly adjust it okay so what are the other links we have faac for frequently asked questions I'm going to lowercase that we'll duplicate that one contrl D we also have contact all right and then we also have join today all right so join today okay so we have to ask ourselves what isn't this a a a suitable amount of white space right so for us I would say too little or or let me just show you the maximum and the minimum of the subjective degree to which it's okay and a an okay amount of white space I would not go any smaller than perhaps I go a little bit larger than that I think that's too close so I would take this and let's adjust this I wouldn't go any closer than this which is a value of 40 pixels between each link now I also wouldn't go wider than perhaps right around here any wider and they will start to feel a little bit too separated in distance so this is also referred to as grouping okay right here are your is the elements that you're grouping together does it make sense how you're uh applying white space to them and Alignment so that's real important as well so here we have joined today and we have to ask ourselves also is there anywhere where it makes sense to where we should Des we should style these links differently based on a context so in primary navigations you should always have what called an active State button you know which page are we currently on well this is the homepage so we can denote that this is the homepage in a number of different ways you can make it bold and that can give you a visual separation between the other elements you can also change the color so for instance now we're talking about color if we were to change this to a certain color which color would make sense well we can see our primary color here is green it's the only only other element that only actual color outside of whites and Grays blacks uh that we have so it would make sense to use this same color and then perhaps make it a little bit darker because we have to ensure contrast is correct so if I grab this okay this looks good right but this is hard to see it's really hard to see so I want you to go ahead and come up here and click on plugins and type in Stark all right stark contrast and accessibility I want you to install this plugin so if you're brand new to figma it has plugins that extend the functionality of figma itself and Stark is a contrast and accessibility Checker all right and we're going to be using this a lot so when you install that if I select this type right here and I click on right click and over here somewhere and I go to plugins and I click on Stark and then we click on contrast with this home button selected you'll see it says all this weird stuff which is confusing and I'll I'll describe what this is now so right now you want green check marks on some of these elements this is telling us that the there is not enough contrast all four are just xed out in red that means it's hard to see okay and it gets these values from the wcag which is the web content accessibility guidelin standards and basically they done a lot of research and they find okay at what acceptable level um is there enough contrast for people to be able to see especially people who might have Vision impairments so what the one way that we can adjust this while keeping the same Hue the same green color is we can we can tint it we can add we can add uh Darkness to it so the way we can do this is if I just move this over here we take this Color Picker and all we have to do is just drag down the the this value right here so when we do that and I scroll out you could see that now it's changed to 3.3 5 to one ratio and let's move this over here all right now we're at 3.75 now we're at 4.5 this is what we want all right so Triple A would be just really high contrast but this is still acceptable if it's at least a 4.5:1 ratio large text you can get away with less contrast a 3:1 ratio as long as it's large this is not large text so right there is a good color value if we wanted to have color and this right here lets us know lets the user know that this is the currently active page now you could also do this by adding an underline or a little icon or a little circle next to it there's a lot of different ways to designate the active State okay now that we have that does it make sense anywhere else in your opinion to emphasize or style any of these links differently well I would say yes and that is the join today because this is a a really important element the there should be a goal for every web page or every app or every page of an app there should be a goal of some sort in this goal we we want people to join our service right so we want this to be styled different we want it to stand out okay so it needs to be grouped or styled differently from the rest of this stuff right here so what I'm going to do is I'm going to take join today and just yank it out of there and then we're going to take this and then up here in the property inspector you'll see these little weird icons these are for alignment if you click this one right here the second one align horizontal this will align it horizontally perfectly within you know based on the width of the frame here in which it resides so now we could take this and just put it over here ah okay so that looks pretty cool and now we've changed the groupings in a way that makes a little bit more sense so we could do this we can really emphasize this as an actual button in many different ways we could put it in a button container like this we can make it bold perhaps and we can make it our primary green color over here yep that would work that's that's that's fine that's there's nothing wrong with that um like I said we could also take this and we can put it behind it now use your left bracket key and that will automatically shift the currently selected layer to the very bottom of the frame in which it resides so now we have this big old button and we want to get this aligned up correctly so what we will do is we're going to select both of these and click Auto layout so remember to select both the elements we we have our our type here I'm going to hold shift left click and that selects both of them then we click on auto layout and we want to make sure it is centered right here so now what's cool is we can do um other stuff in terms of adding white space around elements I and moving this stuff around so I don't think I like having it a white background I think this button background if we come down here and we select frame six or we can just double click and rename this to button BG we can take the fill which is the background color and we can make that our primary col color down here now we can double click and select the type and we can make that black okay now we have to ask us does this ask ourselves does this look centered this text well sometimes when you're dealing with text you can have of some overflow issues with the bounding box and so I'm just going to just slightly decrease the height so that it gets centered vertically in there much better okay so here's our in one thing I might do is reduce the stroke width because it's a smaller button and this is a thicker stroke so I'm going to reduce the stroke width by double clicking on our button BG frame and we're going to go ahead and reduce the actual stroke from five to three there we go all right so now that we have that another thing that we really have to ask ourselves is do we have equal amount of white space from the left of this logo based on the white space that's VIs to the right of the to the right side of the final element on the same horizontal path so in this case it's the join now button is there enough is there equal white space so the way you can determine that determine is to take the actual frame you select it and in a property inspector right where it says layout grid we're going to click this little I icon to toggle that visibility and essentially this will allow you to make sure that you have equal white space on the right and left so we could clearly see this is not set up correctly so what we do is just take it and we make sure it's aligned where where it needs to be we also make sure need to make sure that it's aligned in a way that makes sense based on the other elements here so I've aligned it to the center of this text so join today is now exactly on the same horizontal path of the rest of these and this also you can see it's perfectly in the center here of this larra code logo and that right there is actually a pretty solid let me hide that a pretty solid head Navar and it's not crazy complex but it it kind of feels that way so let's go through these and make sure that everything checks off do the visual hierarchy Mak sense so in order to answer that question the visual hierarchy of this top section right here has to be compared to the other elements that are adjacent to it so what is it so we have a headline and then we have a sub headline right here all right well we know that the headline needs to be the element that people see first because it educates them as to kind of what this page is about right or what this website is about so we want that to be the biggest element we don't want anything in here being bigger right we don't want like the L code Type to be like 80 pixels because then it competes too much so that's what visual hierarchy is so everything here looks to be in line and make logical sense in terms of its height and its size and and all that so the visual hierarchy passes now what about contrast so remember the only contrast issue that we had was on this home because we we we added color to it but we we use star contrast Checker to the plugin to to ensure that it's actually contrasting enough now of course because we have a white background with black text that is maximum contrast so so we're not going to have any issues there you may want to see what your contrast looks like with black on this green color but this is sufficient as well so we're going to go ahead and denote that as a good one now what about color well the colors are fairly simple we're using black and then just the same exact Hue with a different shade over here and over here as the rest of the page now you could add another color but this safest option is to have fewer colors most of especially when you're starting out so are colors good how about alignment all right so we're aligned along the same column right here as you can see now what about this we drag this down we put this into Center everything is lined to the center of this element which I like and it works well so there's also equal white space between here and here so that's good as well so for alignment now what about white space again if we were to take this all these all three of these elements if it was up here we would not have good white space because it's just kind of tucked up there a little bit too close especially given the fact that we're on a desktop I frame here essentially when you're when you get to smaller sizes you also reduce your white space when when I when I mean smaller size like like like for instance going from desktop perhaps apps to like tablet to phone typically you reduce your white space with the less physical width that you have Okay so let's take that I'm going to back up there and a few times just there it is that is good white space so what about grouping all right so we're are we grouping things that make sense together and one of the primary ways you establish grouping is through wh space and Alignment so we have our logo here we have our four most important pages right here and then we have the primary call to action a link to it in the the head uh or the header essentially the Naf bar and this works perfectly fine everything makes sense and then finally topography make sure that you're using consistent topography make sure that your font sizes which is a part of uh topography as well I are making sense and so I would say this passes now I'm not doing anything crazy with crazy effects it's very simple and typically that is what you want so now we're going to get to the fun part where you are challenged so now click on lesson one navbar challenge you're going to see the same sort of situation here except this time I'm going to leave a few things up to you I'm going to leave what color you're going to use so all you have to do is just take this just alt left click drag put this somewhere that makes sense and then what color are you going to use what makes sense to you I'm not going to give you any hints but anything that you do use make sure that you're checking with the start contrast Checker to make sure that you adhere to at least 4.5:1 ratio so I want you to build out a navigation and notice we have I threw in a little bit of a curveball we want to include this icon as well and if you want to change the colors of this you just click on the element itself which we do have currently selected and you click on selection colors and then change the color here so I want you to include a search so think about how you're going to be grouping things together all right everybody it is time to review yesterday's work so I asked all of you watching yesterday's video to design a Navar for this layout right here and I had a bunch of different submissions and in this video I'm going to take a look at a few that I think didn't need any revisions at all and then some that I make some minor tweaks now what's cool is most of you did a great job um there wasn't anybody who really just butchered it which is a great thing so I'm going to take a look at these and we're all going to understand based on these improvements and this is going to help you improve and then tomorrow we're going to do a brand new challenge where I challenge you to do a hero section design which is going to be a bit funner than this one so let's go ahead and see what people did all right so here's the first one and the the first two that I'm going to show you don't need any revisions in my opinion they work and that's what you want um it's they're very simple and typically that's what you want for a navigation especially based on everything else happening here this here there's no issues with it in my opinion um everything's good white space the contrast active State um grouping all is good so let's check out another one all right so this one again I don't think this needs any revisions at all there's two different designs um they're pretty similar in how they were approached but you know they still both work all the fundamentals are nailed off now let's Che out check out another one here this one there are some things I would change and the first thing I would change if I zoom up here is notice the home button while it is bold they for some reason didn't allow it to be white so I would make that white to really make it contrast like like what I just did there and then the other thing I would do is add a little bit more white space between these elements so this is what it was I'm just going to add it a little bit more because we have the space available they don't have to be so squashed together and then the final thing I would adjust is right up here where this icon is a little bit too close to the edge so I just fixed it right there you can see I made it smaller and got it away from the edge so the previous one was here and the updated one looks like this very minute small changes but those small changes um they make a big difference so let's go on to the next one so again some of these are very similar these two this one is very similar to the last one um this time this person kind of did the same thing there's too much white or not enough white space between ele these nav links so I changed that and then over here this is a a big issue because the icon itself is dark all right and that's not what I would do here in this context I would keep it white so I'll show you the changes that I made I also changeed the background of this because there was a little desaturated and it didn't fit well with this blue color so here's the previous and here's the after small changes once again let's go to another one all right so this one's a little bit different we're introducing Like a Pill outline based I button on the contact link and they've also it's kind of hard to tell at italicized and bolded this active State I kind of don't like mixing italics with just regular italics here so that's the first thing I changed just make it standard and then another thing I would change is simply get rid of the pill container for the contact button not because it looked bad because I don't think it did but because in my opinion it doesn't make sense it's just a contact page it's not a high it's not a it's not a page where you really want people to go um I would agree with that button like if they had a sh share your music like a a a Navar based call to action up here that kind of mimics this one but other than that I would just keep it the same now here's another one that introduced a color um that's not found in the design which is okay because the color they chose here actually works pretty well with this other color and these look to be analogous colors meaning um on the color wheel this this greenish is going to be fairly close to this blue so I don't have a problem with that but I do have a problem with how small things are and how up how up top it's really it's it's really just a little bit too close not enough white space so to show you what that was before this is the original and here's my fix for that issue specifically now this little squiggly line that's okay to do I have no problem with that but I'm going to separate it more with more white Space by moving it down slightly so right there that's the change and there we go that's pretty solid there here's another one now for this one all the links appear to be at the same boldness um but they're not this is actually bold and this is semi bold these are and there's not enough difference or a difference of typographic visual hierarchy between active State and the default state so this is what I would do I would simply just make them a regular font weight and that way you really make it obvious which page is currently active all right now here's a another one um where we have a home icon and again they use like kind of like a a teal color which works perfect with this blue I have no problem with that but it's not capitalized like the rest so that's a small change but you want to keep things like that consistent and then additionally I changed the contact dust button to an outline button instead of a solid fill background and the reason is because if you look over here and this is a visual hierarchy issue this is a large contactus button filled up white so that's it's really demanding a lot of attention um and it's actually larger height-wise at least than share your music which is the primary call to action found in the hero you don't want to compete like this this should be the one that really stands out the most so the way you can negate that is to a make it smaller and B just give it a outline instead like this now your attention is more naturally drawn to share your music now we're going to take a look at one final one which in my opinion has a lot working for it but there's some things that are working against it um and you'll see by the end we can really tidy this up so the first thing I guess we'll do is move the um search bar over to the left cuz right now it's kind of in the middle but kind of not so I think it would just make sense to move that over so we've moved it over and now the next change is going to implement quite a bit of changes um I have a lot of problems with the color here so gray text on any type of colored background especially light gray or like a mid gray tone really doesn't work well it's bad color contrast so watch this next change it's really going to change a lot that's what I would change this to so I changed a lot if I go back you'll see what these changes are so essentially I made the the search icon smaller I also take took the search something which isn't ideal placeholder text you really want to just show them examples of what they could type in um like a band or you know tracks music tracks or something like that I also made it not bold cuz it doesn't need to be bold and then I changed the background color because right here it's too desaturated once again and it makes a little bit more sense just to either make it lighter than the current background and uh or just make it darker but still maintaining the same tone value all right um and then finally this little gray separator which is fine you can introduce this if you want it's it's gray and it it doesn't work well um additionally this little active border icon I would extend that all the way and not make it rounded so watch what this change does here that's all I've done there you can see the the color here it's actually the same Hue but it's lighter on the color spectrum and this is extended all the way out so that change looks like goes from this to this and that's it and so hopefully that was helpful as a quick review of just to show you know if you you tackled this project but I didn't see it maybe you were making some of of those mistakes as you can see you can walk away with this knowing that and understanding that there's not one way or one perfect way to get a navigation given a given given a a specific layout like this I there's multiple ways that you can approach this which is great because it's not a one-size fits-all sort of thing um you have a degree of subjectivity but also you have to mind the objective roles of uiux design and hopefully I helped kind of solve some of those issues for you in the next video tomorrow uh we're going to take a look at hero sections and this one's going to be funner because you're going to be tasked with designing a whole hero section which is you know this middle section of a landing page hero sections every landing page needs one it's extremely important to get your hero section correct because the hero section answers a couple things first what is this page about and it also gives them a clear Direct a call to action of some sort so a typical hero section is consisting of just three different elements or four if you think about it first the headline the headline has to be a sentence or just a few words that really speaks to the audience and typically it's the largest element on the page because it's the first thing you want people to read then you have a sub headline which will go into more details about the page and then finally you have a call to action a button of some sort or a form field to fill out out or a scroll indicator icon these are all calls to action actions we want the user to take and then we also typically have an illustration or a photograph of some sort that will accompany the hero section so I'm going to be showing you how to create a hero section with this design right here and then I'm also going to put you to the task by creating your own hero section based on this existing design right here remember we're early on this series so there's a bunch of training wheels that I have on so we already have the design the colors the Topography is already set the question is is can you create a cohesive hero section that fits within the context of this layout of course as always make sure to subscribe and you also be able to share it the instructions for sharing your work that I'll be able to review like with the other project are in the description all right let's get started all righty let's get started here working on the hero section make sure that you clone the figma community file and then you'll have access to what you see right here so we're going to lesson two hero sections right here all right and then we have a challenge where you're going to take this information and create your own hero section afterwards and I want you to submit it to me instructions are below but before we get to that let's go ahead and let me just outline I how I would for this particular example right here create a hero section and this is the information there's not much here so again a hero section consists of a headline a sub headline typically and a call to action sometimes you have multiple like a primary and a secondary call to action right now we only have one primary call to action which is called roof get it now okay A lot of times you'll see like buy now or check out or something like that and then we have this asset here an illustration um something that can grab people's attention some type of visual asset of some sort and this is what um was with actually Adobe illustrators Vector AI generative service which we'll later on in the course we'll talk about AI for sure we're definitely going to have a lesson video on that so um that's our assets and this is the existing design that I created it's kind of like a fun design it's called frisker we already have a nav and then we have kind of like a testimonial section right here of you know potential users and so using this information you know the colors the contrast the topography how can we create an effective hero section for this product so this product it actually is a kind of like a hair a pet hairbrush remover or something um and and that's basically what we're trying to sell so it's always very important what are we trying to sell um so our headline is no more pet hair all right it's very simple four words we can make this thing big that's what we want visual hierarchy the headline is is the first thing that a person needs to read and the way we ensure that it's the first thing is typically through scale the font size okay so let's go ahead and take a look at that now the we're using two fonts here one is called concert one this one right here it's kind of like a rounded font and then we're using a real typical uh font called Poppins which is a Sansa font and it's kind of like an inter font like that um just real super simple clean font that works well well paired with you know other fonts as well so let's just take our frisker logo right here we're going to replicate it by Alt and left clicking and drag down and we're going to put in no more pet hair exclamation point okay so this right here is really small for a headline right like that is way too small this lacks visual hierarchy so the first thing I'm going to do is I'm going to boost u