The 2020 UI Design Fundamentals Crash Course (INTERACTIVE)

today is a really big day because quite frankly I've never done this before all right so you're probably wondering what's new I already did a UI design crash course and last year and that's fine but I also like to rehash my stuff but the thing that's new is the fact that I'm releasing this also on screen be calm now if you click the very first link here in the YouTube description it's gonna take you to the course that's at scrim accom so you're probably wondering what is scramble comm well basically it's an online platform for learning code and I'm choosing to also teach you design over there and what's really unique about it is the fact that it's not video it's a live code editor where you can see my cursor you can see exactly all the code I'm typing along with the mini browser to see what I'm producing what I'm designing in terms of HTML and CSS and what it looks like in the browser and at any point during the actual quasi video it's not really a video you can pause it though and you can interact with the examples in your life and so what's really cool about that I use that feature to introduce challenges design challenges that are going to help you become a better designer based on what I'm teaching you so also what's really cool is that this is the first hour of my full UI design bootcamp that's releasing probably within two months or so and there's going to be hours upon hours of information challenges and examples where by the beginning of it if you're not a good UI designer or you're an absolute beginner by the end of it you're going to walk away really competent so there's an area in the free course at scrim accom if you join up again it's a hundred percent free where you can be notified of when I release that full UI design bootcamp so make sure you do that as well alright so as always make sure to subscribe subscribe if I can talk and let's get started hello my name is Gary Simon and I've been a UI designer in front-end developer for the last 20 years and some of you may also know me by my youtube channel design course which I have ran for the last ten years now this course is geared towards front-end developers who have at least a basic understanding of HTML and CSS and that's because we're going to use CSS to realize effective and great-looking UI designs in the browser now the only way to produce good UI designs is by first understanding the UI design fundamentals and that's exactly what we're going to focus on in this course and you're going to apply these fundamentals through a variety of interactive examples here on screen BA now this course is actually just a small sample from my upcoming UI design bootcamp releasing here on screen but the full course will contain hours upon hours of UI design loaded with challenges and interactive examples all to help you develop the necessary muscle memory to either improve existing designs or create UI designs from scratch so refresh this mini browser and click here to leave your email and you'll get sneak peeks of my upcoming bootcamp plus it will guarantee the very best price when the course launches so let's get started welcome to this chapter where we're going to dive into an absolutely necessary topic for this course which is understanding UI design fundamentals now I know this sounds they re based and that may be boring but I can't stress enough how utterly important this chapter is in fact I'd say this chapter here is probably the most important of this entire course see I reviewed thousands of UI designs and can always spot the designers who don't understand UI design fundamentals verse those who do your ability to design great-looking and effective UI design starts with identifying and understanding what these UI design fundamentals are so as we proceed throughout this chapter you're going to learn what these UI design fundamentals are and how to apply these fundamentals to actual user interfaces and these could be existing user interfaces that you've been tasked with improving or user interfaces that you create from scratch yourself so let's proceed to the next lesson welcome to this lesson where we're going to talk about the first UI design fundamental which is whitespace now before we begin I wanted to note that there isn't one UI design fundamental that's more important than the other I'm just arbitrarily choosing to start to talk about white space here so white space sometimes referred to as negative space is the empty space between the elements in your user interface it's very simple it's just basically a void of space but that's really what gives your layout structure so coming over here we have two examples we have two cards and right now they're designed exactly the same and there's something wrong with them and that is you guessed it white space or negative space now we could see white space all over the place in the absent areas of these cars this would be referred to as white space and in fact if we're just looking at this layout with two cards here in the mini browser there is good amount of white space between these elements but what about inside so we see this very little white space between the text elements and this container and also between the title and the paragraph so actually there's three areas where we're going to improve the white space and you're going to see just how much better this ends up looking so that's why white space is so important so just taking a quick look at the HTML there's nothing fancy happening here we have two cards one of them has a secondary class so that I can target specifically in CSS so let's hop on over to our index CSS here and all this right here this CSS we're not going to worry about we're going to come down here and I'm going to target that secondary class in order to improve this card over here in terms of the white space so the first thing I want to do is to increase the white space that's inside of this container so I'm going to say secondary and that will target the card itself and we're going to say padding now when it comes to defining white space and CSS the primary properties in this type of context would be padding margin now there's other ways to define whitespace using CSS but we'll get to those later but for now it's going to be padding because that's the inside of the element so what if I just say padding 1 am all right by the way the M unit is what I suggest using in this type of context for padding I as you could see we'll see in the future that the font size that's set on the body property which by default is 16 pixels when it comes to responsive design we can simply reset that font size property and all of our margin using M units and padding and any other element that has the M unit will grow I in relation to it so it is a flexible unit so we have padding:1em unit and we can already see it looks quite a bit better it may not be perfect but really I think we can bump it up a notch even in this context of the mini browser so we can bump it up to 1.5 that's looking pretty good right there I would say that's probably around the sweet spot so I want you to realize that there is a lot of subjectivity in terms of the choices you make in your UI design fundamentals and certainly that's the case with our whitespace but there's also objectivity this would be you know 0 a.m. would be objectively horrible i I would say this right here if we choose to go one point I 3 all the way up to perhaps 1.9 that's a sweet spot and let's go ahead also in improve secondary we'll take our h1 element and so let's do margin bottom and we'll say 0.5 p.m. all right so we've also increased the white space and proved it between the title and the paragraph which looks so much better now there's also white space between the lines of the text and this is called leading and the CSS property for that will target the P element would be line height now by default that we can put at 1:00 a.m. but we need to increase this maybe by about 1.5 so now overall this card right here looks so much better in the only UI design fundamental that we changed is white space in this lesson we're going to talk about alignment so alignment in UI design is the process of ensuring that every element and that element could be a simple button or piece of type or anything essentially is positioned correctly in relation to other elements now that might sound a little bit confusing but you should have a good idea by the end of this lesson so let's take a look at an example so in a mini browser we can see that we have this user interface and in terms of all UI design fundamentals everything's good except one thing and that is alignment so we can see that we have really four elements that exist in this UI we have a logo we have a headline we have this element and then we have this button right here and they all seem to be off a little bit in terms of their alignment and it really does throw things quite off so going back to our code if I go to the index dot CSS we'll see I have the regular code to achieve this layout and then at the bottom here I have an improvements comp section right here and also this column area now I'm going to change this alpha opacity to 1 instead of 0 and it's going to show us this column right here and this column has a border and you need to think of every element that is in your user interface as having a series of rows and columns so going back to the slides each element in the UI defines the series of rows and columns so here's an example that shows both a row extending out from some company this first element appear and a column now if we keep on going on we'll see that this element which is the headline also has a column and this as well also has a column so really we're working with three different columns across these four different elements so going back to our code let's go ahead and try to fix those issues so I'm just simply going to take this comment out hit save and if I toggle this back to zero we can see now it looks much better because everything is aligned properly in that same column so just to show you in the slides we can see now how simplified it becomes when we can visualize each of those columns and that's why understanding alignment is so important so going forward throughout this course we're going to see more complex examples of alignment both vertically and horizontally through rows and columns and by the end of it you should have a solid grasp when it comes to applying alignment in your own UI designs welcome to your very first challenge so in the previous lessons we discussed whitespace and alignment so in this challenge I'm going to ask you to improve the whitespace and alignment issues that are presented within these cards so going to the CSS here at the bottom you can see we have this comment here use the following properties to fix the alignment and whitespace issues on the rule sets below this comment so here's a few of the suggested CSS properties that you can use to fix the issues that are present right here in this mini browser and below are a few roll sets that you can choose to apply some of these properties to in order to fix the issues so what I'll ask you to do is go ahead and pause right now and then come up with your solution and then hit play and I'll show you what I would do okay so hopefully you were able to come up with something that fixed these issues so I'm going to provide you with what I would have done and just remember you don't have to do exactly what I do as long as you are fixing these issues in your somewhat closed and you're adhering to good whitespace and alignment fundamentals then you're good to go so the first issue I want to address is lack of whitespace on the left and right of the mini browser there is none at all so that's something that we definitely want to fix because the browser itself is a container so it's inside of the body content that we need to add the padding so we're going to use padding here so we'll say tui m and we could see it's done a good job now the content the content is applied the content class is applied to this white container right here all right so there's a lack of whitespace inside of that so we'll use padding to fix that patting 1e M should work pretty well all right now we also have some alignment issues we could see that these two elements are left aligned but this element right here is centered now you have two options you could choose to Center the awesome title in the description right here or you can left align both of these so I'm going to choose to left the line the date right here text-align:left all right that looks good now we still have quite a bit of white space between these elements and I think we can get rid of a little bit of the white space between the awesome title and the date so on the date selector we're just gonna say margins 0 alright that's looking in my opinion a little bit better and one issue we could see the amount of white space that's present from the top of the date and beneath the little thumbnail here and also to the left its equal but look at the amount of white space beneath the description and at the bottom of the container so there's a lot here but not very much up here so one thing that you want to pay attention to is to try to add equal white space inside your containers so I'm going to take the paragraph description selector and I'm simply going to add margin bottom zero so now everything is lined up much better so this is where I ended up again you don't have to look exactly like this you could have chose two text-align:center these and you could have changed up the white space maybe had more a little bit more maybe you had a little bit less but as long as you overall improved it and you got somewhere in my neighborhood then you have done well now if you didn't don't stress this is the very first coding chance where at the beginning of the course we're gonna go through so many more of these and you're really going to start developing that eye so again this is where we ended up this is where we came from if I just delete these selectors you can see how it's just so ugly I'm gonna add these selectors back and now it looks much better contrast is defined as being in a strikingly different state from something else every element in a user interface by nature has a certain amount of contrast based on the background that's behind it so this is true for button text that's position on a button background it's true for the button background that's positioned on a card and it's true for the card that's positioned on the layout now the WCAG which is an acronym for web content accessibility guidelines 2.0 color contrast guidelines are there to ensure that you're type based elements on your layout are accessible to those with vision impairment issues so there are two variations the minimum and then the enhanced the minimum is referred to as double a and it's simply the visual presentation of text in images of text has a contrast ratio of at least four point five to one except for large text which have a contrast ratio of at least three to one the enhanced version is the same exact thing except the baseline contrast ratio should be seven to one instead of the previous four point five to one enlarged text should be at least four point five to one instead of the 3.0 to one previously so you may be wondering how do I know how my elements are contrasting well there are browser plug-ins for Chrome and Firefox if you simply just search for WCAG contrast plug-in or something like that you'll find them there are websites where you can place in the different values and then there's a UI design application plugins such as sketch and figma in Adobe experience design so let's go ahead and check out an example in the mini browser we can see that we have this very simple layout with this hero section with a headline sub-headline in the button so there's hardly any contrast with this element right here it's a quite a bit harder to read than up here and also there's not enough contrast in the explore Now button in fact I checked out what the color contrast ratios were between these two elements in the sub headline right here where it says come witness our amazing Mountain View's is only one point eight two to one color contrast ratio remember we need to get that to four point five to one at least and the button here is only two point four six to one and we need to get that as well to four point five so here's our index dot CSS and I'm going to come down here and override just a couple elements so first we're going to target the paragraph element which is in relation to this right here and we're going to change that to a different color now if we wanted maximum contrast we would simply change it to black because this is a light background but you don't always have to use black I'm going to use this color code zero zero two eight four II I'll go ahead and save this and now we can see it's coming out a lot better now what about the back background and foreground elements of the button itself so we'll target a which is the selector for it background we'll say this is zero zero six bc6 now let's go ahead and save that we can see now the button background now contrasts much better based on this background image here and then still we have an issue with the foreground element of the the button label text so we'll use the color property and we'll just make this white so now it contrasts much much much better so in fact after checking the color contrast the sub-headline up here is now a seven point six to one color contrast ratio which is great and the button right here is now a five point three one five now is 5.32 one color contrast ratio which is above the baseline 4.51 double-a rating so contrast comes into play in more than just type elements so as we proceed throughout this course you're going to get a lot more experience with setting contrast so just as with alignment whitespace contrast and the other fundamentals the size or the scale of every UI element must be carefully considered when you're designing so just to show you an example so we have this mini browser here and we're going to go ahead and get this centered up and there are a number of issues with this layout in terms of scale alone everything else seems to be pretty solid in terms of the other UI design fundamentals there's good contrast color white space for the most part but the scale of several areas is what we need to work on so one area that we see that's quite lacking is this big open space over here so the size or the scale of these cards is simply just too small for this given layout we also see that there is not very much difference between the headline our colors and the sub headline beneath it and we can also see that we can probably improve the scale the size of the elements inside here specifically we're referencing the type based elements so let's go ahead and see how much we can improve just the overall appearance and look of this design through adjusting scale alone so first we'll take a look at the index of HTML it's very simple we just have a color container class and we're using the CSS grid to align these elements and these are all the same essentially right here so an index dot CSS all the regular HTML is right here and then we're just going to go ahead and override just a couple areas and a fact it's only three rule sets to get this looking better so the first thing we'll take a look at is fixing this big area over here by adjusting the scale of the three cards on each row so to do that color container and rid template columns and this is a property that we're overriding its defined up here right here in this section in fact I'll go ahead and copy that and just paste it in and we could see we have a repeat function of three columns at a hundred fifty pixels so this doesn't really make sense I don't think many people would do this but I did just want to illustrate that sometimes people aren't using or won't use utilize the entire space that's available in a given layout so we're going to change that simply to auto so when we make that change we can now see it's much more filled out and it just looks so much better but we can still make some other improvements for instance the h1 element there's not much of a difference like I said before between these two elements and so what's really suffering here is visual hierarchy and we haven't covered visual hierarchy just yet but we will but you'll find out exactly how crucial scale is in terms of determining effective visual hierarchy so let's fix the scale or the size of the h1 element font size will do 2.2 e/m whereas before it was at one point two so we're increased it by 1m unit and look at that it just looks so much better and don't worry at the end I'll show you the before and then the after with our code so you can see the real different difference between these two now let's also fix the scale of this element right here I think this could definitely be improved so let's come over here the selector for that is P code as in a color code and it's font size 1.5 e/m let's save that so already we've made this larger and it just looks a lot better and let's also make it to bolder and look at that so now this layout really looks quite a bit better compared to what it looked like before so let me show you the before simply removing these rule sets this is the before and here is the after it just looks so much better and that's with the help of understanding and applying effective scale you welcome to the second design code challenge so we can see this monstrosity in front of us in the mini browser and yes it is very very ugly in fact it's the most ugly thing I've presented to you so far and that's because we're going to be reviewing the UI design fundamentals that we've covered so far and there's four of them it's a whitespace alignment contrast and scale and that's what I want you to use in order to improve this and make it look a thousand times better it's sort of hard to imagine that we could make this much better but with CSS properties we certainly can and we will so I want to take a look at the HTML first just to describe what's happening we have a div class of container and that is a CSS grid just to get our cards I organized here we have a grid gap in here and then we have our div class card I all this HTML is repeated twice right here it's exactly the same and the card itself is also a CSS grid with two columns a span which is in reference to this fake avatar right here and also the div class content which is the second column right here so looking at the index CSS this is all the regular CSS rule sets and properties to achieve what you see here and then down at the bottom is where I want your solution to go so in the comment you can see your fixes will go in here you don't have to use all of these rule sets you can use more or less if you wish but this is what my solution used essentially and my solution also included using the following properties of width background padding margin text transform font size letter spacing in color now a couple of those like letter spacing and text transform I that's just a personal sort of preference that I added you don't have to add that and also one thing that's very important to understand is that when it comes to design in general and UI design certainly there is a degree of subjectivity so your result may look different than mine but it still may be effective UI design so hopefully you understand we're just focused on getting the objective criteria correct across those four UI design fundamentals so go ahead and pause and come up with here using these roll sets and others if you wish with a way to make this look better in terms of those for UI design fundamentals and then come back okay so hopefully you were able to come up with something that was pretty good and what I'm gonna do is show you what I personally would have done and again there's a million ways to pull this off effectively and I'm just going to show you one such way okay so the first thing I really want to address is the lack of white space around the container here in these cards so the containing element is a container rule set here so we're gonna give it a width of 90 percent again you could probably use padding for that all you want to make sure is that you actually have space around your elements here so that achieve that next up are the cards the cards are lacking in white space with the foreground elements and the text on top of it so we have a couple options we could take the text and make it white and that would certainly increase the contrast but we could also instead of that we could dim out this background container significantly see when it comes to contrast you want a lot of contrast on important elements that a person has to interact with or use or read like type here but when it comes to other elements like this container element you don't have that requirement so you can have very little contrast and it would still look good and be effective so what I'm going to do is I'm going to place in a background property and we're going to give it a specific color code of 2 C 3 0 3 1 so let's look at it now and see what happens alright so that looks pretty good although overall it's still bad because we have other areas that we have to adjust next up I want to adjust the padding or the white space inside of the container there's none essentially so let's fix that inside of the car so we have padding and I'll do have my caps-lock padding of 1.5 a.m. so let's check that out now that looks much much better already and next up we have our date right here I just want to make a few adjustments on that and these are kind of personal preferences so I'm going to attain change the text transform to uppercase and I'm going to change the font size to 0.75 eeehm to make it a little bit smaller letter spacing 0.1 em2 space them out further let's check it out so far all right there we go and also we'll do color and I'm going to do seven a eight five eight seven and by the way you may be wondering where am i pulling these values from well essentially when I'm preparing this lesson in other lessons I do have a UI design application Adobe XD or Adobe experience design and I'm able to grab those values out let's also add a margin bottom of 0.4 am here all right so it pushes it down slightly now the next up we have an issue with alignment so we have these three elements in the same column but it's pushed over this title so it's really throwing off the flow of the design so let's take our h3 element and let's do margin 0 on the top 0 on the right and left and then 0.3 e/m on the bottom there we go and then also I want to change the color here to something brighter d 6e AFF works there it goes and then finally we're going to do a font size of 1 point a eeehm alright so look at that it looks pretty solid right now and that's because we address those for UI design fundamentals so let's show I'm going to show you the before and then this after again so you can really see the difference so I'm going to simply remove all this this is what it looked like and this is what it looks like now it is a massive difference let me do that one more time so that we can take this into free mode so that you can see what's happening here in real time as we adjust these it's going from that to this so much better good typography requires the understanding of other fundamentals along with a few special considerations that are specific to typography itself so those considerations are font choices so generally speaking when it comes to UI design and your font choices you don't want to use more than two font families in fact most of the time you can get away with just one and also visual hierarchy now this is one of the UI design fundamentals that we haven't yet covered but we will very shortly but in short it's a way to establish the order of importance in terms of typography so if you have multiple type based elements like an h1 element or a paragraph element then you use all these other fundamentals in terms of your font size your color and contrast your font weights to establish that visual hierarchy and you'll see what I mean here in a second when we improve an example also your font size alignment letter spacing and line height your font styles and color contrast all of those works ultimately to create good typography if you understand how to apply them so let's go ahead and take a look at an example here let us show the mini browser and we're gonna get it centered up here and we can see we have this sort of testimonial section where we have three cards and there's a lot going wrong here in terms of the typography first we have three different typefaces that are used in our testimonials and we have this regular sans-serif font here and here and then we have a third typeface here where it says the author's name there's also other issues in terms of the overall visual hierarchy you're not really sure where you should be looking first because there's not one element that really stands out too much or at least not enough so let's go ahead and work with this and improve the typography as much as possible so just a quick look at the index.html we have a container with our testimonial section here and a subheading here then we have a section container which serves as a CSS grid for a three column layout using these a different card right here so in our index scss here's all the regular CSS up top we're importing three different fonts we're going to come down here to the bottom and we're gonna go ahead and make our fixes down here so what we're gonna do is first I want to address the typefaces or the fonts that we're choosing like I said before three in this type of context three different fonts is simply too much we're going to really stick to the basics and just use one and you'll see how much better it will look so I'm going to target our h1 our paragraph block quote and site elements and we're gonna simply say font family montserrat all right so I've imported that font up here as well so if we save this we can see now we're all using the same font family and it looks so much better now the next thing we're gonna talk about is visual hierarchy so right now one of the elements that really stands out is the John Doe but we'll fix that in a little bit but really we have to ask yourself what's what is the most important element that's a part of this user interface and I would say it's the part right here where it's the h1 element our testimonials because it's it's allowing it's informing people rather you know about exactly what this section is about so we're going to head and increase that font size quite a bit so we're gonna say font size to e M alright so now we've really established a little bit more visual hierarchy a more effective visual hierarchy now also we do have something here I in their next section I'm gonna say that our a blockquote paragraph section we want to work with that just a little bit it looks like the text here could be improved in terms of the line height so we can make this a little bit more easier to read based on the current font size so I'm gonna say block quote or yep block quote P we're going to say line height 1.5 um there we go so it's been moved down a little bit and it's just easier to read now also we have to deal with the unnecessarily large site section right here so we're going to use our site selector font size we're gonna make it significantly smaller because it's unnecessarily large it's not a very important element people in this case are just interested in what a person has to say about a given service and not about necessarily who they are so that right there looks pretty solid in and of itself but it is pretty small so one way that you can kind of correct that we could say font-weight:bold so let's see what that does all right now it kind of sticks out a little bit too much so we can use color and contrast to help maybe de-emphasize it and put it a little bit lower on the ladder of visual hierarchy so what we can do is say color and a color code will be 3 7 3 7 3 7 and there we go that looks pretty solid so I'm gonna show you a before and after and this is just to show you how important our fixes have been when it comes to typography so this is the before and here is the after and once again we'll go to the freeform mode and I will show you what this looks like with the before and after so hopefully you can see this fairly decently so I'm going to get rid of it just it looks very ugly in terms of the type and then here are fixes and it looks just so much better the first UI design fundamental that really shapes a users experience is color just think about it when you visit a website or an app or you know a user interface of any sort before you even are able to process and read any type of heading for example really your eye is exposed to color and so color in terms of the UI design fundamental is extremely important so for instance let's talk about color psychology very briefly each color elicits a certain meaning to a certain group of people I green for instance can usually be associated with wealth nature and growth whereas black can be used to be associated with luxury sophistication and elegance I put one thing that's very important to understand is that depending on the company or that you're building a UI for who their target audience is you know where do they come from because certain colors can mean different things to different cultures so you just need to be aware of exactly what it is that your business wants to project in terms of eliciting emotions and who your target demo is for this particular app so next up one thing that you want to avoid is using a bunch of colors in your UI design that's one thing that's a sure way to really just make a UI design that's otherwise in terms of all the other UI design fundamentals is great color will just too many colors will really destroy the quality so here's an example where we have a blue background with this this color that doesn't very work well with this particular blue this pink it doesn't contrast great kind of hurts your eyes then we have a different color here in my card title we have another different color here for the tags it's just all over the place for free or to improve this you can see how much better this is on the eyes and of course we're going to get into many examples that will help you develop develop this ability to create good color another thing you want to avoid is using colors that don't really work well or implement each other well these colors here these three on the side do not work well or contrast well with the colors here on the right but if we keep the same three right here we can certainly find different colors and likenesses and darkness is of those colors that work well just like here as you can see if we go back and forth it just looks so much better to the eye and then finally we can also use slight variances of the same hue in terms of darkness --is and lightness values to really reinforce different blocks of our layout okay so with that said I wanted to show you an example here where we can use for CSS properties to make this particular very ugly design a lot better so as we can see this where it says know your code I mean there's there's colors all over the place I otherwise it's pretty strong in terms of the UI design fundamentals there's good whitespace there's a good scale there's good visual hierarchy there's good alignment either but there's not great contrast and there's not great color that's the main thing that we need to fix so with that said let's go ahead and see what it would take just to make this look a thousand times better and remember when it comes to color there are millions of colors right I mean there's there's so many different variations so there's not just one way to do it I'm gonna show you one of many ways that you could approach this and eventually you will develop that I so I'm gonna come here in the index that HTML we can see it's fairly simple we just have a header element we have a container and a footer all right so we're gonna go there index CSS here's all the regular I CSS rule sets used to create exactly what you see here right now so what we'll do here and overwrites is fix all this so the first thing we're gonna change up here is this color right here that's really killing a lot so what we'll do is change our container to background and the color I'm going to use is 3 C 1 we can see it right there 5 yeah it's 3 c1 581 already looking a lot better just by changing one color also will make our h1 element in paragraph element both white and there we go I mean it's starting to look so much better and finally because there's these these colors right here don't really work well we can see the start coding it doesn't really contrast well enough with the background I will choose a color that more complements this purple way more and really will make that call to action stand out much better so we'll make our a background fe e d00 it's basically a vibrant yellow and there we go so with just three roll sets and a few properties we've gone from this here to this and I'll show you just here I off the side in a free-form version we went from this to this and that my friends is the importance of understanding good color all right welcome to this challenge where it's going to be completely based on color so we can see this UI right here and I intentionally made it all grayscale and we could also see a key down here where you can kind of think is this as your color palette these five colors are the only colors that you're allowed to use in order to give this UI design this little contact form a color scheme and one thing you may be wondering about is how do I know what color codes don't worry they're all in the CSS I'll show you in a second but you can also when you choose your colors you can go a light color scheme if you wish or a dark one in fact I'm going to show you three different solutions I came up by only using these five colors here so here's the HTML you can see we have that little eye key legend area down here there's just a regular contact form inside of a container nothing fancy is happening here in our index CSS here's all the regular CSS and then we come down here to the bottom and your fixes go below here you I want you to use these color codes so you can see how there's a 1 next to each color code that's in reference to the one right here so the color code for number one would be right here alright and so on and so forth through a 2 through 5 and also I'm giving you the selectors to use along with the properties that you can use now you don't have to use all these selectors you don't have to use all the properties you can use more properties if you wish but really I just want to focus on color so try to use only color properties and your CSS rule sets and so I'm going to once again show you exactly what I came up with I'll have three different solutions although you could potentially come up with more and they could be different and just as effective I but I just wanted to give you some ideas here so go ahead and pause use these color codes right here and apply them to the different CSS properties right here to try and make this look good in terms of a given color okay great so hopefully you came up with something that worked well and what I'm gonna do is paste in three different solutions that I came up with so here's the first one okay so what I chose to do was go with a dark color background color here I'm using the number one color code we we can see pretty much everything really works well we have good contrast our call-to-action sticks out quite well I even have I have a section where when you focus on this form elements that lights up which is good for usability right and yeah this is a the first solution that I came up with so let me show you another one which is slightly different I don't really change just two properties for this one and for this one instead of going a real dark for number one I chose number three for the dark color code and made the text backgrounds here this number one color code but as you can see it still works it's still usable and for the last solution I'm gonna show you one that is a light color scheme so I'm gonna paste this in and here we go we could see this one here works pretty well alright so hopefully you were able to come up with something that really I it was pretty close to one of my options although again if you didn't that's okay but really the main thing to focus here is making sure that you're using eye colors that will contrast with each other very well I especially given I already provide you to the color schemes now going on forward throughout the course these would get a little bit more challenging I may not provide you with any of the color options at all i but yeah hopefully you will get a good footing here in terms of color going forward so every element on a user interface has a level of importance and clearly some elements are more important than others so visual hierarchy is how we establish this importance and we do it by utilizing the other UI design fundamentals that we covered previously so I'm going to run through a few examples just to demonstrate how each of the other UI design fundamentals will help establish visual hierarchy in this example so let's take a look at the first example we can see there's no sense of visual hierarchy between these five different squares they're all styled exactly the same so they have equal importance so if we take a look at the next slide we can see now the eye is naturally gravitating towards this square as opposed to the other ones so we've established some form of visual hierarchy through whitespace and alignment now going back to our original example this example we're using contrast in order to signify importance on this particular square now in this example we're using color to establish a visual hierarchy on this particular square and here we're using scale to establish importance on this particular square as well and finally we can use multiple UI design fundamentals such as color contrast and scale together to really establish that this particular element is much more important than the others and that is essentially what visual hierarchy is in terms of a abstract presentation so let's get ourselves I familiar with a real-world example of how visual hierarchy plays out in an actual example so I'm going to go ahead and show the mini browser with a project example here and here's just a submit form basically joining an email list we see this commonly on different user interfaces and this right here lacks good visual hierarchy because you're not exactly sure I which text element you should be King at the call-to-action button doesn't really stick out very well so this is lacking in good visual hierarchy although in other areas of UI design fundamentals it's pretty solid so let's use some of the fundamentals that we learned in terms of design to establish a good visual hierarchy here so just to take a look at the HTML nothing exciting is happening here just in h1 we have a container our form along with a label our input paragraph and finally the button so here's the regular CSS rule sets and properties that we use to create this and now I'm going to use these roll sets or these selectors in order to improve this overall so the first thing I want to do is this h1 element which is join the mailing list this is a quite important piece of content in terms of I informing the user about what this section here is underneath it so we need to make that larger to really make it stand out the most so we're saying that's the most important element we're gonna make this big I'm gonna say font size 3e M units all right so now that's really sticking out and so now we've kind of really improved the visual hierarchy of this design but we're not just there and done yet so our form container element this right here there's a form containing element that houses all of these HTML elements right here you can see it's kind of has some padding inside of it but really to encase in and direct the eye to this area and establish visual hierarchy I want to give it a little bit of a background so what we'll do is just take a background a color code that's just slightly lighter than the background it's sitting on so it's in the same hue it's just slightly slightly lighter all right now that's looking really solid so far now the label the label and this piece of text are pretty much styled exactly the same eye but really in terms of importance the email dress is much more important than this this label right here so you know notifying the user that they're not going to share the email so we want to in for that this is more important and again we can do that through all those other UI design fundamentals we could do it through making it bold making it larger in terms of scale I changing the color all that good stuff so you don't have to use them all maybe you just use one so it's up to you there's a lot of subjectivity so what I'm gonna choose to do on the label is to make the font-weight:bold and then we'll go ahead and make the font size 1.2 éem all right there we go much much better so next I want to change up this call to action button design it's just not sticking out to my very much when it comes to UI design and you have a single call to action like a button you want it to really stand out and this just doesn't do the job really so we're gonna use color and a few other properties to really help reinforce the importance of that button so first font size we're gonna increase it just slightly to 1 a.m. all right so it's bigger there all right we're actually going to take the background and we're going to give it not a really a bright yellow but kind of like it's a saturated yellow so that's FF e d 8c here there we go of course now we have an issue with contrast because you can really cannot see the important label inside so we're gonna make the color of that text the same color of the background let's save that we're looking good so far there is a slight white border we want to get rid of that as well so we'll take border none' all right and really this submit email i text it's not really sticking out enough i'd like to make that bold because it is very important so finally font-weight:bold there we go so that's monkey looking much much better now still I think we couldn't further reinforce the visual hierarchy by making one other small change and that is to this piece of text right here I still think that if we were to compare this paragraph and this label element right here there's still not a big difference so I'm going to target the paragraph specifically and just give it a color that is not as much contrast as just using white there we go so let's take a look at the before and the after so you can see just how big of a difference utilizing effective visual hierarchy can make so I'm gonna take this all these selectors here and just delete those so that's what we were before and that's where we came to now and then finally I'll show you an example with the free form editor here on the side where this is the before again you really we look at it you're not really exactly sure where you should be looking and then here's the after so much better alright welcome to the visual hierarchy challenge here so in front of us here is a simple card design that you might find on a layout yeah and there's issues with the visual hierarchy within this card design and even one outside of it and it's gonna be your job in this challenge to improve the visual hierarchy using the CSS properties and rule sets that I've outlined in index does CSS but before we get to that here's the HTML file I'm just using inline HRC SVG rather for this element right here this little down arrow then beneath that we simply have the rest of the content and nothing special is happening here so we'll go to the index CSS here's all the regular rule sets and properties to achieve what we see here and then at the bottom you need to fix the visual hierarchy by using these rule sets you can use others if you wish and also these properties you can use others as well although this is what I chose for the solution that I'm going to show you in terms of what I came up with after you work on yours so at this point you can go ahead and pause come up with your solution just changing these Auto properties I to whichever values you think will improve the overall visual hierarchy using what you've learned in the visual hierarchy lesson go ahead and pause now and then come back alright so hopefully you are able to come up with something good now I'm going to show you what I personally would have done based on this current design that we have here so the first thing that I want to address is you know let's say for instance this is like on a mobile resolution I there's not much white space between the container and the side of the device so I want to increase the padding on the body element just to perhaps around 1.5 eeehm and that's looking pretty good right there now the SVG element you have to ask yourselves for every UI element you have compare it in terms of it's important in relation to the other elements now an icon this is really grabbing our intention the most just down arrow icon that's not the most important element here that we have in this design the most important element I would say is the headline the h1 element pay your debts and that's kind of just lost so there's no visual hierarchy there that's really emphasizing the importance of that element so the SVG I think we could definitely shrink that down so we're gonna take our SVG from 5m units here to 2.7 or so alright so that's a lot better but still we're not quite there yet you're still not really sure where we should be looking so next up we'll take a look at this pay your debts like I said before that's the most important element and we need to increase the size and we can even make the font-weight:bold so the font size I'm going to change to 1.2 m units all right that looks pretty good there and then the font way will further signify the importance of that element by making it bold all right so on to the next element which is the paragraph now this paragraph it looks pretty good I can already see that it's not quite black so that means it's less important so it's establishing that visual hierarchy when it comes to changing up the colors in the contrast of your type elements always make sure though that you don't go too light this right here would still be dark enough in contrast enough to meet that wcag 2.0 contrast guidelines so one thing I think that's a little bit bad in terms of typography touch / typography this isn't really an issue with visual hierarchy this text is a little bit crammed together so I always like to increase that line height just a bit so we'll go ahead and increase that so the line height will be 1.9 m units all right so that's looking pretty good there and looking at the font size it actually looks pretty good so I chose not to adjust the font size right here so I can just get rid of that and then finally the one element which is very important so this find out how and this is a call to action because it's a link and so we want to try to signify a little bit more that it's an important element that it's a button and we could do that by changing the color of this text or we could also give it a button background container so that's what I'm choosing to do so the background I'm going to make a color code of eat 9e 9 e 9 and that's just a really light color off the background you can't see it yet because we have to adjust a padding so we need good white space inside that button so 0.7 a.m. on the top and 2:00 a.m. on the right and left all right there we go now that's looking a lot better already and optionally I wanted to put a little bit of margin top on just a little bit of it so I could push it down just a bit more so now this looks so much better now you could have taken this in a lot of directions for instance you could have taken this button made the background green or you could have increased the font size on the find out how and just made that green there's a lot of variations that would have worked but always remember as long as you adhere to good UI design fundamentals that you've learned so far then you really just can't go wrong so there's a lot of subjectivity here so hopefully whatever you produced it will turned out well so let's take a look at the before and after as I like to do all right so let's remove this this is what we had before and this is what we had after let me go ahead and move this over just so we can see in real time these changes here so this is our before and this is the after as you can see it just looks so much easier to read and it flows a lot better welcome to the final lesson that's a part of the UI design fundamentals chapter and this is a coding challenge or a design challenge really and in front of you in the mini browser we can see we have this layout it's just part of a dashboard layout and it is lacking obviously in a few UI design fundamentals so there's an issue with visual hierarchy our white space color and alignment so we're not using all of them I but those four are what we want to address so let me show you first real quickly just the HTML that we're dealing with very simple the body is actually a CSS grid container with a sidebar and a main element and then all of our other information is inside of here now if we go to the index dot CSS we can see all the regular rule sets used to achieve what we see here and then at the bottom we have your fixes below please keep the same background color so that's in relation to this color right here and also the sidebar color we want I want you to keep those the same that way we can at least end up in roughly the same result basically when you get finished making your adjustments versus when I show you mine so this time I'm actually going to make it slightly easier on you I have the selectors here that I want you to use there's only three and then I also have the properties that I want you to use for each of these rule sets essentially so right here use grid gap to improve the white space on the body container use the background property to improve the color in contrast here of the content container which is right here so you need to come up with your own color that will work well based on the background that's sitting on and padding as well as h1 we have margin left and font size that I want you to improve these UI design fundamentals so at this point I want you to go ahead and just pause and then adjust these rule sets and when you're done and you're satisfied with what the result looks like in the browser and you think you've really done well go ahead and hit play and you can see what I would have done okay so what we're gonna do now I'm gonna show you what I would have done so the grid gap property is what separates the CSS grid columns and that's in relation to this area right here so the grid gap was specified up here as 0.5 eeehm so we want to increase that amount so I'm just going to take this and we're gonna push it to two e/m units we can see right away that gives us a lot of room from this left bar all right so we're not done yet the content background is these are not good color combinations right here in these type of context is when we have these containers that are sitting on top of a background that have content like tape type base content inside of them I personally and you can really can't go wrong doing this I like taking the same background color and then either slightly making it darker or slightly making it lighter so in this case I'm going to use a color code here in order to fix that and we can see I just slightly went darker I mean it's really not much of a difference but it still helps us you know define this container when again it doesn't have to have a lot of contrast all right so next up I want to increase or improve the white space inside of the container this content container as well I mean these are right up against the edges and it really just throws off the flow of the layout so the padding I'm going to put 21.5 am and we can see the result now already looks a lot lot better and then finally the h1 element this is an issue with visual hierarchy we're not sure where we should look first well the dashboard label is probably the most important elements you would form the user and visitor you know what this section or what this page is you know at a glance so we want to take our font size down here increase that to around 2.3 eam units or M units that's looking a lot better and then finally we have an issue with alignment it doesn't really make sense to have this kind of it's not even centered within this container it's kind of pushed to the left what would make most sense is to make it start on this column right here so I'm going to simply change our margin left of 1 a.m. to 0 and finally this is the result that I came up with so hopefully you were able to come up with something similar if not you know perhaps you got the background color different again you don't have to be exactly what you know exactly where I was you could be I may be perhaps a lot different but as long as you're adhering to good UI design fundamentals in your contrast there's and your colors work together your visual hierarchy and all the other UI design final monitors are there then you have done well so I will do it before and after so we went from this to this here and I will show you in the freeform editor here the same thing just so you can see the real before and after from that which looks really bad and to this congratulations on making it to the end of this UI design fundamentals course now these are the UI design fundamentals that we covered and they're all equally important to get right if UI design is lacking in just one of these areas it seriously degrades the quality of the design now if you ever try producing a UI design that just don't look as good as you wanted it to it's probably because it was lacking in one of these areas now in the full UI design bootcamp launching shortly here on scrim BA we're going to spend hours going through a variety of interactive examples and challenges to help build that necessary muscle memory that will help result in becoming a great UI designer we're going to tackle many topics including dark versus light UI design responsive UI design designing components refactoring existing designs creating full UI designs from scratch and much much more so click on this link here to enter your email to receive sneak peeks from this upcoming course and to also ensure you receive the best price possible when it launches i'm gary simon and i'll see you soon alright so hopefully you enjoyed that and hopefully you also joined up for free at screaming calm and perhaps watched it there and and did the interactive challenges and so let me know in the comments here though how it went if you did that so also make sure you enter your email I oversee remote comm to be notified of when I release that full UI design bootcamp which is going to be out within a couple months I'll see you guys soon goodbye

Channel: DesignCourse

Views: 132,381

Rating: 4.9643116 out of 5

Keywords: ui design, ui design 2020, user interface design, frontend developer, ui design tutorial, ui design tutorial 2020, ui design course, gary simon, scrimba, frontend development, frontend developer 2020, user experience design

Id: tRpoI6vkqLs

Length: 69min 44sec (4184 seconds)

Published: Tue Jan 28 2020