when i first started dabbling with web design about 15 years ago i knew very little about it there were very few courses or tutorials on the topic and i had to learn a lot by myself as a beginner you'll probably be stuck around the same notions that i did many years ago and you'll probably have the same questions like how do i pick typefaces how do i pick colors how many colors what about icons how do i use them correctly where do i get them what the heck is white space how do i position elements correctly how do i size them well that's exactly the kind of information that you'll find in this course but hey if we're just meeting my name is adi pordilla and i'm a web designer from romania my goal is to help you become a better web designer and developer by creating content that's easy to follow and offers great value i'm a big animal lover and i currently have 22 dogs and cats in my care and my god that number just keeps getting bigger and bigger but that's enough about me let's talk about you and how this course can help you first of all it's a pretty big course it has 36 lessons structured in 14 chapters and i made it this long on purpose because i wanted to properly cover the fundamentals as well as some common patterns in web design in terms of fundamentals you're going to learn about color typography spacing sizing and imagery in each of these lessons we'll discuss the theory behind each concept i'll show you some best practices and also a few tools that you can use to make your job easier when it comes to common patterns you'll learn about the various types of elements you can use to design a web page things like headers hero areas buttons image galleries contact forms and more now for each common pattern we'll look at its definition and some use cases and then we'll apply that knowledge to a demo project and the demo project is a three-page portfolio website that i designed specifically for this course i won't show you the full design process but instead together we'll design the various common patterns presented in the course so for example when we're discussing headers we'll first define what a header is i'll show you some best use cases from live websites and then together we'll design the header for the demo portfolio website you'll also learn about project briefs and wireframes i believe that every good website should start with these two elements because even before considering colors or typefaces you need to know about the content of the website finally we'll wrap up the course by learning about responsive web design this is a crucial stage in any web design project and i'll give you some general information to get you acquainted with the topic and then we'll uh change the design of our portfolio website so that it looks good on smaller screens uh we'll be working in figma because it's awesome it's free and it's cross-platform you can also use it in your browser but any technique or principle that you learn in this course can be successfully used in other ui design software out there like adobe xd or sketch or any really any software that you plan now throughout this course i'll be using some third-party resources in the form of stock photos ui kits and logos and most of these are downloaded from envato elements nowadays this is my go-to place for these kinds of resources because on envato elements you can get unlimited downloads of web templates fonts icons and ui kits that's millions of creative assets all ready to use and with simple commercial licensing plus no locking contract means you can cancel anytime check out the link in the description to subscribe [Music] all right so as i've been saying previously in this course we'll be working on a demo project and there will also be an assignment for you don't think about it as homework because nobody likes doing that but instead as an opportunity to take what you learned during the course and putting it to good use to practice right so first let me show you the course project and then we'll talk a little bit about the assignment all right so for the course project we are designing a three-page portfolio website for a nice chat called robert fox who is a freelance ui designer and web developer now obviously this is a fictional character this will be a fictional project brief but i think it's going to be a great example for this type of course so we need to design as i said three pages a home page an about me page and a contact page based on a project brief which i'll show you very soon [Music] all right so let's see what's up with all these acronyms ui ux web designer what's their deal how is a ui designer different from a ux designer are both web designers or are they just something completely different let's find out first let's look at the term web designer this refers to a person that is in charge of designing the front end of a website or web application front-end meaning everything a visitor sees and interacts with so for example if i look at a website like envato elements everything i see and everything i can interact with like buttons and links is the work of the web designer that includes colors typography spacing the shapes of elements the information architecture how i get from point a to point b and so on this is the front end the back end is where you'll find the engine that drives this whole experience you'll find the code the databases the files and the scripts that transform a static design into a functional website or app now the person that is responsible for the backend is called a web developer or as it's called in some places an engineer so the web developer is in charge of the back end while the web designer is in charge of the front end i wanted to explain this difference because sometimes people employ a web designer and expect them to do everything not knowing that it's not in their job description to build a website or vice versa they hire a developer to do the design logo and coding so you need to be careful both as a client and as a professional and you need to carefully define your boundaries so people can know what you can deliver anyway we're getting a bit off topic we were initially talking about ui versus ux versus web designer and we defined the web designer now let's look at the other two a ux designer is in charge of creating or designing the front end of a website or web app from a user's perspective that means they need to understand what users want and what they need and based on that create a seamless experience right this is actually where the ux acronym comes from user experience so ux includes things like information architecture user psychology usability testing content strategy wireframes interaction design and so on it's all the little things that you never know they're there if done properly for example information architecture or how the content is structured within the website right if a user can very easily find the information they're looking for then the information architecture is correct the website is properly structured so the ux designer did his job or her job properly here's another example let's say you want to test a service or app and upon sign up you need to fill in this form are you really going to stick around to fill in every single field most likely no however a good ux designer will use this form instead because there's no point in collecting every single information at sign up time an email address and a password is enough for now the rest can be filled in later from the user account section so when looking at both of these which one are you more likely to use and complete the sign up obviously option b right so these are the kind of decisions that ux designers need to make and often they work you know from the shadows so to speak from behind the scenes and don't don't always get the credit they deserve but they do play a very crucial part now a ui designer is also in charge of the front end of a web project but covers aspects that relate almost exclusively to the visual appearance of the project ui stands for user interface so it's all about things like color typography spacing sizing shape and so on ui designers are usually responsible for taking the structures defined by the ux designers and dressing them up with the things that i mentioned earlier so uh from choosing the shape of a button to how far apart elements should be to uh how thick or thin the headings should be right and of course they need to do that while also keeping balance and making sure that the overall experience of the user is not damaged or compromised so then now that we defined what each term is all about how do we use these in the same sentence well it's pretty simple actually both ui and ux design are two separate specializations within web design there are areas of overlap between the two of course but in the end they fall under the same umbrella term of web design so it's also correct to say that you are a ux web designer or a ui web designer it just means that you're a web designer that specializes in ux or ui or both you can be a ui and a ux designer at the same time which is great news for you because that just gets or increases your value as a professional for example i consider myself to be a web designer that specializes on the ui side of things but i also have some knowledge on the ux side of things which is something that i plan on improving in the future alright so with that said let's take a look at some key takeaways a web designer is in charge of designing the front end of a website or web application a ux designer is in charge of creating the front end of a website or web app from a user's perspective ux which stands for user experience includes things like information architecture user psychology usability testing content strategy wireframes and interaction design a ui designer is also in charge of the front end but covers aspects that relate almost exclusively to the visual appearance of the project eui stands for user interface so it's all about things like color typography spacing sizing shape and so on both ux and ui design are two separate areas of specialization within web design it's correct to say that you're a ux web designer or a ui web designer or both alright so hopefully that answered some of your questions regarding these three terms and the correct way of using them now it's time to move on and start discussing about some aspects of a web design project and we'll kick things off with project briefs every web design project should start with the ux part right the user experience because that's what we need to focus on even before considering colors or typefaces we need to know about the structure of the website and we need to know who we're designing for and this is where a project brief comes in very handy so for this application we'll pretend we're the ux designer and we just had a talk with the client based on that talk we created a project brief so let me quickly walk you through it you can find the link to this project brief in the video description so go ahead and download it and let's see what we got so we are designing a website for robert fox who is a 30 year old freelance ui designer and web developer based in new york we have a little background on him the companies he's worked for and we also have some contact information uh robert also provided us with his logo which is an abstract view of a fox right based on his name now moving forward we land on the website structure so we need to create a three-page website that will showcase robert's work will provide some information about his services and also allow potential customers to contact him so the three pages are home page about and contact next up we can see a short description of what the home page should uh should contain and then the same thing for the other two pages and then because the header and footer are common on all pages we can see their structure here so we need the logo nav menu and some social media look icons uh in the header and in the footer well we have a cta or a call to action area and the usual copyright text external links and again some social media icons then we move on to the website content and based on the discussions with robert we created this structure and we outline exactly what we need to place in the website as content right so for the hero section for example we can see the title the subtitle or short description so this is roughly the the final copy or content or text content that needs to go into the website and then on the client section right we want to display a list of these logos and so on and so forth the project brief kind of gives us all the information we want or need to move forward with the project and then we have the content for the about me page all the sections laid out we have the testimonials that we need to include and then we move on to the contact page and so on and so forth then we land on the final page which is for the design guidelines so robert in our talk told us that he wants a modern looking website that would be easy to use by anyone and also that he likes to keep things nice and simple and clean and loves designs with with lots of white space and we also asked him about colors and he said that he really likes the color scheme of his logo and that he will be developing the website himself making it responsive of course so we do need to make sure that our design works well on other screen sizes so that is the project brief obviously i won't uh like go through every single piece of it uh you can download the brief yourself and study it more closely but yeah that's this is our starting point this is what the wireframe and eventually the final design will be based on and whenever you're starting a new project i highly recommend you have a sit down with your client ask him a bunch of questions try and figure out what he wants from that website who he is who are his clients and then put all of that information into a pdf like this one so that you can move forward with your project much more easily all right now let's take a look at some key takeaways from this lesson always start a web project with a brief in the brief be clear about what you're making and who are you making it for be as detailed as possible regarding the final content and include that in the brief the project brief will serve as a basis for the wireframe all right so now we have a project brief we know what we need to design who we're designing for and we also have relatively the final versions of the content for the project the next step is to create a wireframe based on this project brief and that wireframe will serve as a basis for the final design so let's go ahead and do that next [Music] all right let's talk about wireframes these are low fidelity versions of your final design you can even call them sketches and the idea with a wireframe is that it represents or it shows the final content of the project and also its structure but in a way that overlooks any aesthetic decision meaning in a wireframe we don't care about colors we don't care about typefaces spacing sizing any of that a wireframe is purely representing the content and the structure of that content now coming back to our project we're still on the ux side of things right we're still looking at things from a user's perspective and because we have a project brief ready uh we can get started on a wireframe and uh to save a bit of time i went ahead and created the wireframes for this project and now i'm gonna walk you through and explain uh my reasoning for or how i made those wireframes based on the project brief let's go because we have three pages to design i created a wireframe for each of them and i did that in figma because it just makes sense uh i'm creating the final design in figma so i'm also creating the wireframes in figma there are specialized apps for creating wireframes you can do a google search if you want but i think that figma is more than capable of doing this kind of thing so this is what i'm using so what i did is i went through the project brief and i started with each section and each page so on the home page right if we scroll down here we of course have the the header and footer which are present in all pages so for the header i know i want a logo a nav menu and social media icons so i went ahead and i just typed in logo and then a simple menu with the pages and then some social media icons these don't necessarily need to be the final icons we'll be using in our design they're just here to tell the ui designer hey this is what you need to do all right and remember this is a sketch so then besides the header in the home page we start with a hero section where we have a title subtitle and description so i took those and i arranged them in a way that obviously is not final i put the subtitle here the title here the sub the description and then under that because the hero area should also display the contact email and phone number and a button i put those elements here so email phone and button will this be the final layout probably not but it doesn't matter because remember the purpose of a wireframe is to display the content and currently this is the content it's then up to the ui designer to dress this up and he can decide to you know align this to the left he can decide okay i don't want this button here maybe i'll put it below maybe i don't want this contact information here so it's not like what you see here is the final version of the project no the ui designer can also make some changes as long as he doesn't compromise the overall user experience so then i did exactly the same for the rest of the content just checking the project brief adding content to my wireframe without having to worry about color or you know typefaces i just use whatever typeface i had selected at the time which was roboto and the color is just pure black and i did the rest of the sections so here we have the portfolio section and this is where we should put the portfolio images this is a testimonial and this is the footer call to action right with its title subtitle some additional information uh this is the footer which contains the copyright information external links and again social media icons and then the about me page has the structure again based on the project brief we have a introduction section here some images then some benefits for working with robert some testimonials some services these are the tools that robert uses for design and development and then the footer again and finally the contact page looks like this again an intro section with much more visible contact information a q a and then the call to action which in our case is the contact form so these are the wireframes basically you don't have to get fancy with them uh you don't have to worry about how elements look like what color they're using any of that stuff you just start putting elements in the page and it's then going to be up to the ui designer to dress it up now in case you're the ux designer but also the ui designer then you know you will probably make the wireframes a little bit more visually interesting or a little bit closer to the final version because you already have an idea of where you want to take this project but if the ux and the ui are handled by two separate people then it's totally okay for a wireframe to look messy unorganized just like a sketch basically because again its purpose is to present the content and the structure of the contents now if you want you can create your own wireframe based on the project brief or you can use the one that i created that's totally up to you but if you want to use this one check out the video description for a link to the final figma file and that's going to be there as a separate page okay time for some key takeaways a wireframe is a low fidelity version of the final design a wireframe should display the final content as well as its structure a wireframe should be devoid of any intentional aesthetic decisions like color or typography all right so with the wireframe complete we can now move on to the ui design side of things so far we've covered the user experience but now we can move on to the user interface and start dressing it up as i've been saying before we do that though we need to decide on which ui ux design software we need to use so more about that coming up all right so as we're slowly getting into the ui design parts of this course it's time to figure out which design software we're going to use and i'm sure this is one of the main questions you're asking yourself as a beginner because sure it's relatively easy to learn how to use a design software but it's always helpful to know about certain pros and cons of all the all the software that's available nowadays so you can make the best decision when i started designing websites back in the day you only had like one option for the software and that was adobe photoshop a lot of people were were using it you know a lot of templates that were up for sale were photoshop templates well let's just say that was a painful time compared to today all right photoshop wasn't and still isn't to this day designed to be used for this kind of task eventually i moved on to sketch back then it was obviously a lot different than it is today in 2022 i think the version i started on was version 3 or something like that but just so you understand how much better it was moving to sketch i remember this interview with bill gates and steve jobs and when talking about itunes being available on windows steve jobs said that it was like giving a glass of ice water to someone in hell right and that's that's pretty much how i felt moving or switching from photoshop to sketch it was definitely a breath of fresh air and it also gave me a good insight into today's software and today things are very different we have a lot of design software available to us we have sketch we have adobe xd figma envision studio and a few others and even today of course you can use photoshop or illustrator to design a website but do you really want to i promise you you don't want to do that instead take my advice and use one of the apps that i mentioned earlier photoshop and illustrator have their uses they're designed for something something completely different so let them be used on those things that are good at but for ui ux design things like this use one of the apps that i mentioned previously you'll thank me later now for this course i'll be working in figma nowadays this is my go-to app for ui ux design and for a lot of other things and i've been using it for a few years now i also made a dedicated course on the topic that digs a lot deeper and you can find a link to that down below now obviously you're free to use any design software you want but if you're still on the fence about this i would highly recommend you take a look at figma it's very easy to use it works in the browser it's cross platform it has all the features you need for web design oh and it's also free so five great reasons for using figma sketch is also a great option but it's a paid app and only works on mac os adobe xd is also very popular and works on both mac os and windows it's free and it has some pretty unique features but honestly xd seems to have fallen behind its competitors in terms of features it's still updated regularly of course but the features that are coming in seem a bit underwhelming compared to what figma and sketch are are doing nowadays of course i might be wrong about that it's just my personal opinion but still my recommendation is figma of course you're free to use any design software you want everything that you'll be learning in this course can be successfully applied to other software other than figma of course um but if you're a beginner and you're looking to start working with something that just works great out of the box then figma so then uh mayank padawan have we learned anything from this lesson well for ui design avoid photoshop and illustrator and focus on using a more appropriate app sketch adobe xd and figma are great options to consider each having their own pros and cons and my recommendation is figma because it's free cross-platform and works in the browser alright so hopefully at this point you've chosen your weapon so to speak so now it's time to go to battle but before we go to battle we actually need to learn a bit more theory and the first theory that we'll start with is the color theory that's coming up next [Music] when it comes to color theory there is a lot of information out there and if you did any kind of design work before then you're probably familiar with the basics of color theory but if you're not or maybe you just need a refresh well this lesson is all about that and i'll try and give you all the critical essential information about working with color in web design without making it overly complicated so let's see how it goes let's start with the three main categories of color we have primary secondary and tertiary the primary colors are red blue and yellow they're called primary because you cannot mix any other colors to obtain them they're the building blocks from which all other colors are created secondary colors are obtained by equally mixing primary colors so if we mix red and blue we get purple if we mix red and yellow we get orange and if we mix yellow and blue we get green tertiary or intermediate colors are obtained by combining primary and secondary colors these are blue green blue violet red orange red violet yellow orange and yellow green it's also important to know the color terminology so let me show you a few key terms you need to understand and i'll explain these concepts while working in figma so i opened up the color picker and the first term i want you to get familiar with is hue and hue represents the dominant color in a color family right for example pure red pure blue pure green just pure yellow etc etc so the ones that you can see here in this section are the hues and they represent like the purest colors in uh in the family and more than often when we use the term color we actually we are referring to the hue so then after hue we have to talk about tints shades and tones a tint is when you add white to a specific color so for example if i were to duplicate this color i'm going to create a white background over it and set its opacity to let's say 10 percent or let's say 40 so you can more clearly see we just created a tint because we mixed white with the color that we had before right and of course this works with any base color if i change this to a blue you'll see that i have the original hue right here and then by adding white i created a tint that's all there is to it using a color picker we can add a tint by moving the color cursor to the left see where the white is right here so we actually stay on top and we move to the left and we're going to achieve exactly the same result by doing this we're basically uh that pure color that we see here right in the top corner with white so that's a tint a shade is mixing that color with black so if i change this to black instead we'll get a darker version of that hue and in the color picker you can get that by moving the color cursor down towards black right essentially mixing that color with black just like this so that's a shade it's a darker version of the hue now a tone is when you mix a pure color with a gray so black and white so i can basically take this and i can move my cursor something like this so this is like an equal mix of white and black essentially giving me a gray color right and in the color picker because i'm mixing with both black and white to mix with gray i can move this cursor like this diagonally or i can move it like this or like this depends on the kind of gray i'm looking for right so as you can see as i'm moving it i like to to this side we're kind of getting the same uh the same color as we did here so that's a tone it's the mix of a pure color with gray another term that you'll hear a lot when talking about color is saturation and saturation basically refers to how rich or how dull a color is so for example if i set this color right here it's the purest version so it's saturation a hundred percent but if i start mixing in some gray you'll see that that color becomes desaturated right it's muddier looking it's not as sharp and as vibrant as the pure color so that's saturation another term you'll hear is brightness and that just basically tells you whether the color is closer to white on the scale or closer to black on the scale right so this is in terms of brightness this is less bright than for example this one because this one is closer to white and this is closer to black that's brightness and finally let's talk about color temperature that basically tells us whether a color is warm or cold and cold colors are considered these right here so blue green purple so around this area and warm colors are considered these yellow orange red that's what color temperature refers to when working with color it's also important to understand the different color models that are applicable like rgb cmyk hsb and i'm sure you've heard about these terms before especially rgb uh but maybe you didn't you weren't curious what they mean or maybe you read about them and it sounded too complicated but it's not really it's actually very simple cmyk stands for cyan magenta yellow and black and to create colors this model uses what's called subtractive mixing i won't go into details because this model is used for printing so it's not that important for this course this next one is important and it's called rgb we all know the term right well rgb stands for red green and blue and it uses additive mixing of light to create different colors when overlapping red green and blue at full brightness we get white and this is how screens work a very simple explanation would be this every pixel on our screen is made up of three dots that emit red green and blue light at various intensities so the brighter those three dots are the brighter the color is going to be when all three dots emit red green and blue light at full intensity the result is white light when those three dots don't emit any color so zero brightness the result is black because that pixel is not lit up so in rgb you basically mix red green and blue to get the color that you want let me show you a quick example in figma i open the color picker and i'm going to use the format switcher to go from hex to rgb and you can see that this pure red has the code of five zero zero the first value is for red and as you can see it's at max and by the way if you didn't know this 255 is the maximum value in this format zero is the minimum and then green is zero blue is zero to get pure blue we can set the red to zero green to zero and blue to 255 and then we get pure blue same goes for green if i make this 255 and the other zero so 0 2 5 5 0 is pure green but then to achieve a certain color i can start mixing these values i can say let's go with 100 for red 154 green and maybe 240 for blue and we end up with this color but usually you don't really do that with rgb you just you know use the color picker you define your hue and that's going to give you exactly the amount of red green and blue in that color and as i was saying previously if we set 0 0 0 that's black because no red green or blue is used and if we go max on all of them we get pure white so that's rgb the third and final color model we'll talk about is called shb and it stands for hue saturation and brightness this uses a mix of these three attributes to create different colors this also works in digital design and i actually think that you get way more control over the resulting color when you're using this model let me show you what i mean so when we're switching from rgb to hsb we get a similar interface this first value stands for hue second saturation third brightness so here's how this works every hue on the color wheel can be represented by a value from 0 to 360 degrees so for example red is both 0 and 360 degrees but then as i move the slider to the left you can see that the hue number changes for example blue is around 200 degrees like so and then the second value saturation this basically tells us how pure that color is so if i bring this all the way up to 100 percent it's going to be fully saturated i can set it at 50 percent and that's going to be the midway point between no saturation and full saturation and then brightness how bright is this color 100 okay then it's totally towards white but if i set this to 50 then it's halfway down towards black and i said that this is a great way of getting finer control over the resulting color and that's because let's say that i want you know a color that looks something like this and i want to find other colors but i don't exactly like the way this is going so maybe i can tamper with the saturation a little bit maybe 70 percent or maybe i want more saturation let's say 85 maybe i want a bit more brightness let's say 90 right so i can fine tune a color by using these numbers this also comes in handy when i want to create a color palette right so let's say i want to add another color to my design and let's say that i want to keep the same levels of saturation and brightness but only change the hue well i can very easily do that i can say okay let's try it with this hue or maybe that's not working let's try it with something like this 25 degrees for the hue which gives us this orange color all right or maybe i want to go the other direction maybe i want to add a purple something like this so by using hsb or hue saturation brightness you can fine-tune uh the resulting colors in your project now there is another color format that's widely used and that's the hexadecimal or in short hex this is made up of a hash sign in front and then six letters or numbers this is a friendlier way of displaying rgb colors because the first two letters or numbers refer to red the next two refer to green and the last two refer to blue so if we jump back and we switch to hex you can see that this is the the color format right here it's without the hash sign in front but usually in in css you would use a hash sign so for now this is comprised of a7 for red 2 2 for green e5 for blue these are written in hexadecimal formats hence the name of the uh of the color format and as i said it's a friendlier way of representing an rgb color so instead of you know using this format it's much easier to just copy this paste it somewhere else and it's just as good in fact i think the hex format is the most popular when it comes to web design a lot of websites that work with color like gradient generators or color scheme generators will usually provide the colors in hex format and then you can copy those you can paste them in your design software and you're good to go now let's see some key takeaways there are three primary colors red yellow and blue these represent the building blocks for all the other colors the secondary colors are obtained by mixing the primary ones red plus yellow equals orange red plus blue equals purple blue plus yellow equals green tertiary colors are obtained by mixing primary and secondary colors a hue is the dominant family of a given color tints shades and tones are obtained by mixing a color with white black and gray respectively the cmyk color model cyan magenta yellow and black is used for printing the rgb or red green and blue and hsb which stands for hue saturation brightness models are used in digital media the hexadecimal or hex color format is a more friendlier way of representing rgb colors all right so now that you hopefully understand more about how color is created and represented on our screens let's dig a little deeper and learn about how to pick the right colors for our projects and it all starts with color harmonies and psychology that's up next working with color can be daunting at times especially for a beginner because sure you know the theory but how do you put it into practice how do you pick colors that work best for your project but also work well together well to answer that let's begin by learning about color psychology or the meaning of color let me just start by saying that what i'm about to show you is not an absolute truth it's more of a set of guidelines because color can have different meanings in different contexts in different cultures but generally speaking it goes something like this red is the color of passion and it's great for grabbing attention or getting a message across it represents intensity energy excitement and it's very often used in sports related websites or in websites that want to make a bold statement next up is blue the color of the skies and the seas this is the most used color on the internet fun fact and it conveys trust calm peace intelligence security it's highly used by tech brands like twitter and facebook but also by a lot of financial institutions and political parties let's talk about yellow this is very fun yet very bold color it's the color of the sun so it brings joy and happiness it can also convey warmth and energy and it's used a lot in the entertainment industry and in children's toys next up green which is the predominant color of nature it represents health well-being balance fertility safety and it's usually associated with brands from the health industry with eco brands with medical products and of course with anything related to landscaping gardening and so on orange is the color of happiness joy and confidence since it's made of red and yellow it also borrows traits from those two like energy and optimism orange is said to be the color of communication but it also works really well in lots of different contexts because it's complementary to blue and finally we have purple one of my favorite colors it stands for luxury royalty wealth sophistication and it's usually associated with luxury brands and high-end products alright so now that you have an understanding of how color can be perceived let's talk about color harmonies let's say that you picked a primary color for your project but how do you know which colors work well with that primary how do you create a color palette for your project well this is where color harmonies and a color wheel come in very handy let me show you let's say that you picked this blue color as your primary and what you need to do is copy its color code and you need to go to color.adobe.com this is a great tool that i recommend for every web designer and what you do is you find the color that is indicated by this carrot which is the base color and then you paste in your blue and just like that adobe is going to give you updates uh sorry about that i meant suggestions not updates suggestions for possible colors and these suggestions are based on color harmonies and we have a couple of them here and if you switch between them you'll see the suggestions of colors change but also you'll see how those colors are being built so let's start with analogous this harmony will basically pick neighboring colors for your base and as you can see if i'm going to move my base color around the neighbors will move as well right and of course the resulting color scheme will be changed as well monochromatic will basically give you tints and shades for your base color triad looks something like this right so you get kind of a three point star with the base color being on one end of the star and it just creates a color scheme like so uh complementary is the most contrasting color scheme because it uses colors from the opposite end of the spectrum so for example if i were to use that blue that i got from sketch as a complement it gives me a nice orange color that sits on the opposite end of the spectrum and of course as i switch around you can see uh the colors that are being generated uh split complementary is pretty similar instead of one color on the opposite end of the spectrum it kind of picks two so it gives you more variation in your color palette double split complementary is very similar but on top of the opposite colors it also picks two neighboring colors and then we have square which looks like this compound and then you can also use adobe color to get shades of a base color which is really cool now out of all these i believe that analogous monochromatic and complementary are the most used but obviously don't let that stop you if you cycle through these and you find a color combination that you like and you think would work well then by all means go ahead and use that in your project but usually you'll probably stick with these three analogous monochromatic or complementary now since i showed you adobe color which by the way is an awesome tool and i recommend it to everyone i'm also gonna show you a few more so that um whenever you need them you know exactly where to go so here are a few more useful tools for working with color the first one is called color space it's currently in beta you can find it at my color dot space uh but basically what you do is you paste in your color code or you can use the picker um to um to pick your color right here and there and you click generate and that's going to generate a bunch of color uh palettes for you with your base color as the origin as the first one here so you can just cycle through them and when you find one that you like you can simply copy that and use it in your project so that is a color space next is color hunt you can search for palettes based on uh the color that you want you can also use some of these filters here like a retro and that's going to give you like a pre-selection of different color palettes which is really nice you can you know click on a specific color and that's going to copy it to your clipboard really cool next we have mosley color colors by envision actually this is a very cool app so you can paste in a color code or name or you can pick one of the colors and what's really cool about it is it gives you a live ui kit demo so you can see how the color palette that you pick will work on that ui kit right so you just hover and you can see the colors being used in real time and then you can um you know of course randomize this you can click on a specific palette and you know copy the colors from there but yeah this functionality that just uh shows you how it looks like in a real environment is pretty cool so that's mosley colors by envision uh then we have uh web gradients uh this is a website that i use frequently whenever i wanna get some really cool gradients there's a bunch of them pre-made and you can copy each color individually or you can copy the css and just use it in your project another source for getting color inspiration is dribble so for example i can open a dribble shot and if i scroll down i can find the color palette that's being used here and i can download this as an aco file i believe this is for photoshop and i can also click on an individual color and that's going to search like all the shots that contain that color or probably something similar to that color pretty cool and finally one last suggestion here if you're using mac os there is an app called color snapper and it's a really cool app you set a shortcut mine is command option c and it brings up a system-wide color picker which i can then use to pick any color i want from my screen and that gives me by default css hex like so but i can choose the format from this list i can grab rgb rgba hsl and so on and so forth so that's color snapper it's a paid app and it only works on mac os but it's really really cool very helpful all right so with that out of the way let's take a look at some key takeaways colors can have different meanings in different scenarios or different cultures color harmonies allow you to easily create a color palette a complementary color palette will give you the most contrast while a monochromatic one will give you the least contrast use adobe color to explore color themes or create your own okay so now that you know how to work with color and how to create a color scheme let's take that knowledge and apply it to our project coming up [Music] all right so now we're in the realm of ui design we have a project brief a wireframe and a pretty clear direction of where we need to go now our job is to create a design based on that wireframe and the easiest place to start with is a color scheme so let's go ahead and create that i'm in figma and i renamed the initial page to assets and this is where i'm gonna keep everything that's color related typography related and so on so to get started let's um settle on the primary color for that i'm gonna jump back to my project brief and i'm gonna pick a color from this logo and i can either go with you know the orange maybe the more yellowish or i can go with this pinkish purple kind of color so let's go ahead and sample one of these two i think i'll go for this one right so here i'm just going to create like an oval just make it 160 by 160 and i'm going to paste in that color so this is a starting point and i'm going to open up the color picker and i think i want i want this to be a bit more towards red so i'm going to move the hue to the red and maybe i want a little bit more brightness to it so i'm going to move it you know to the top something like that and after playing around with it a little bit i ended up with this version so fc3a79 this is currently our primary color so in figma we can actually create a color style we can click these four dots here click plus and we're going to call this primary so now every time i have another element that i want to apply that color to i can simply click here select it and it's going to be the same if i'm going to change that color and let me actually switch this view mode i can click on edit style right and i can update it to whatever other value i want and that's going to update all the other elements that use that color it's a pretty sweet functionality but for now we're going to stick with this one fc3a79 so that's the primary based on the primary we can now start building our color palette and for that i'm going to use adobe color so i'm going to jump in here paste that in and i'm actually going to use an analog harmony rule because i feel that using colors that are closer to our primary on the color wheel is going to be a good thing first of all because the logos colors are pretty much like that they're all using kind of an analogous color harmony but also if you remember the color theory or the meaning of color right these as you we see here are you know oriented towards uh red orange so they represent energy and you can use them to draw attention and this works really well with the kind of website that that our client robert fox is trying to create so i'm going to use this color scheme and i will grab this kind of reddish orange as my secondary so let's copy that let's duplicate this one and let's unlink paste in the new color and then we'll create another color style called secondary awesome now i'll also be creating a gradient between these two colors so under fill i'm going to choose linear so we go from this color to this color so we go from the secondary to the primary and let's make sure this is 100 and also let's make the gradient from left to right like so and let's uh rename this or actually let's create a style which will be called brand gradient awesome so now we have the primary secondary and then a gradient at this point you can go further than that and create you know tertiary colors you know picking these or variations of that color but for me for this type of website i think just primary and secondary colors are more than enough now let's turn our attention to the grays because this is super important grays will basically be used for text and other elements but mainly for text so it's really important that we get it right uh one thing i would advise against doing is to use pure black so if you go this and this and you plan on using that for text that's a big no-no uh pure black is just it contrasts too much and it just doesn't look good instead what you can do is use a darker gray something like this just tone it down a little bit so that it's not too harsh on the eyes now what i also like to do is mix a gray with my primary color and have that as my resulting black color or gray color so essentially i'm creating a tone of my primary color a couple of ways to do that first of all i can you know go to go to the color here and just mix this directly like so you know with black and with white so mix it with gray basically until i get to the desired result or something else you can do is you can duplicate this on top of itself fill it with pure black and then reduce the opacity to you know 80 percent or 90 it really depends on how much of uh how much black you want to mix into this personally after um a little testing i got to the following color 2 6 1 f 2 2. so i'm basically mixing my primary hue with a bit of gray and on a color picker i'm around here somewhere okay so i'm gonna again create a color style i'm gonna call this black and then i'm gonna duplicate this to create some variations and the first variation is going to be 75 and i'm going to call this block 75. the next one is going to be at 50 percent and i'm going to call this black 50 and we'll do the same 25 percent black 25 10 percent black 10 and then finally 5 percent black 5. so what this allows you to do is first of all have a great selection of color styles you can always edit and apply to multiple elements but also it saves you the trouble of searching for tints of the same color later on during the design process so for example if you want a piece of text to be more muted well you can just simply choose black 50 or black 25 if you want to create like a line separator you can use the black 5 or black 10 color all right so they're right here easy to access and if at some point you decide to change the underlying color it's really easy to do as well you just edit for example black 50 if you want to choose a different one just you know change its hue from here it's going to keep its transparency and because it's a color style um that change is going to be reflected on all the elements that are using it and finally i want to create a let's call it a contextual color for errors because uh you know we have forms and maybe in those forms at some point we'll have to display an error message and to properly color the error message we usually use um some kind of red color so if we go back to the color palette we can see we have a kind of a red here which is pretty nice so we're going to copy that paste it in here and we're going to call this error pretty simple so that is our color palette we have the primary secondary we have a gradient if we decide to use it then we have the the grays as that column starting with the base color and then a couple of tints and by the way maybe you're a bit confused about the whole transparency thing uh this is another way to create tins so instead of mixing the color directly with white right if i have a a white background behind those elements and i lower the transparency of one of the colors i basically got a tint of that color because i'm mixing the original with the background because of the transparency does that make sense if not leave a comment down below and i'll try to to explain this again but you know when creating a tints for this type of color you can also do it the old-fashioned way you can open up a color picker let's say you have this color and we want to mix in some more white well you can simply uh you know drag the cursor up until you get to the to the desired hex value in our case that value would be something like this so a little bit higher up than than what i showed you but i find this approach with the opacity much easier to manage because if you want to change the underlying color you don't have to redo those tints because of the transparency they're done automatically for you okay so we have the primary secondary gradient the grays and then a contextual color for the error messages now before we end this lesson quick word about color contrast you see when whenever you're using text in a web design you have to ensure that it has proper contrast compared to its background right so that people can read it properly especially people with visual impairments and there are online tools that can do that for you you can simply search for online contrast checker personally i use an app that's called contrast let me see if i have it open here there it is so with this app i can basically sample any color from my screen and then i can sample the background color and that's going to give me a test result double a plus with a contrast ratio of 3.94 that's a pass right so any text that's this color on a white background passes my contrast check this is what you're always aiming for let's see about the secondary color okay this passes as well my primary black passes with an even higher ratio my 75 passes my 50 passes but then once i get here i get a fail because i have a too low of a ratio which means any text that is this color on top of a white background will be hard to read because it doesn't have enough contrast okay so this is something you should always check uh to make sure that the colors that you're using for your text have enough contrast to meet the accessibility guidelines and there are plenty of apps if you're using mac os then i highly recommend this app it's called contrast let me see if i have an about there we go this is a paid app by the way but there are a couple more there are a few color pickers like sip that have an integrated color uh contrast checker there are online tools and those are probably the uh the easiest to use for everyone but just remember to check for color contrast before signing off on on a color palette like this alright now for some key takeaways when starting the design process it's always easier to begin with the colors create the palette for primary and secondary colors first then move on to grays when creating the grays mix in a bit of the primary color make sure that every color you're using for text or interactive elements has enough contrast all right now it's your turn to create the color palette for your version of the project and i encourage you to be a little bit more adventurous here while it's totally fine to follow exactly what i do uh you could also pick a different primary color for example and a different harmony for that if you want you can choose a different logo for your version of the project and base your color scheme off of that again it's totally fine to to copy exactly what i do but you know feel free to to change it up every now and then and make it your own uh with that said now that we have the color part taken care of let's move on to another fundamental aspect of web design and that is typography i'll see you very soon arguably typography is the most important part of any design because the majority of content is usually text so if you're not using the right typeface um font size line height font weight and so on everything else just kind of falls apart and it doesn't really matter how good looking your website is or the rest of the website is if your typography is subpar uh that's gonna translate to the other things so how do you get started with typography how do you uh pick the right typefaces and the right attributes for the fonts that you're going to be using well it's a multi-step process and i'm going to try and simplify it for you but it all starts with choosing where you get your fonts from most often you will get your fonts from foundries or font libraries but there are also individuals that or teams that sell fonts on marketplaces like graphic river envato elements also has a huge collection of fonts and you can easily refine your search by various font categories spacing size and so on but marketplaces aside uh it's very easy to get a hold of fonts nowadays quality fonts i mean and since you're a beginner i recommend you get your fonts from either google fonts or adobe fonts first of all let's have a look at google fonts it's a service provided by google and it's totally free you can find a bunch of fonts here once you access it you can browse this entire list you can type your own sentence hello and you're going to see a preview of that sentence using every single font you can also search for specific fonts like so and you can also browse the various categories of fonts serif sans serif display handwriting monospace and so on so if i'm looking for example for a mono space font i can just select that and i'm going to see all the options here now adobe fonts also has a ton of fonts you can choose from but this is paid so you need an adobe creative cloud subscription to access this and i believe you can also access it separately although don't quote me on that i'm not exactly sure but personally i do use an adobe creative cloud subscription so i do have access to adobe fonts and i think this has um higher quality fonts than google but that's to be expected this is a paid service this is a free service and even though you can find really high quality fonts here you can find more of them right here on adobe and this is like exactly the same you can go to all fonts you do have some extra options here you can filter by the various languages but also by some predefined tags for example i don't know let's go with cursive and these are lists curated by the team at adobe fonts and then you also have some additional properties here classification allows you to choose just like google fonts from sans serif slab service script and so on uh but also you can filter fonts by weight width x height contrast and a couple of other things here so you have a much more granular control over the filters in adobe than you have with google uh you can also type in your own sample text or you can you know choose from a pre-existing one you can modify the text size and what i really like about adobe font is that once you're signed in and you're also signed into the desktop app the creative cloud desktop app once you find a font that you like you can activate it and that's going to automatically download it to your computer so it's ready to use right then and there so that's a quick look at adobe fonts and google font the two places i recommend you get your fonts from as a beginner okay so let's say you picked the place where you want to get your fonts from what's next well it's time to pick the actual fonts and for that you need to understand the brand that you're designing for and also its end users right so the people that are going to be using that that website basically uh that part should mostly be done in the ux stage where all the user research is happening and all that so now you need to decide on what style of font you want to use and what would help uh the brand get the message across for example if you need to design for a luxury brand and the feeling you're trying to evoke is that of luxury and sophistication then you might go for a serif font as the big headliner like swarovski is doing here however you wouldn't use that serif in a tech website like stripe here you would use sans serifs to evoke a feeling of modern and trust one very important factor in font choice is readability so after you've chosen a couple of fonts that you think would work well with your project think about how those fonts would look like in different sizes especially smaller sizes because if you're displaying all this text content of your website on a mobile device and the text is like really small and people can't read it then what do you do loading time is something that we often forget about and the thing is the more fonts or font weights we use in our design the slower the loading time of that website is going to be and the bigger the impact on the performance and yes i know that website performance is is on the web development side of things so technically not our job but if you're sending a developer a design that requires them to load six or seven different fonts or font weights and the website performance has to suffer because of that well that's on you because you should have thought about that see how there's an overlap between two different specializations web development and web design you got to be mindful about these things and always um have the bigger picture in your mind right so yes technically you're the designer but you must also design the website in such a way that's not going to pose problems to the developers right and finally we're talking about font attributes so let's say that you picked your font or fonts for your project next you need to decide on the font rules and their attributes and roll meaning what font will be used for what element for the headings what will you choose for paragraphs what will it be and attribute meaning size weight line height and so on in regards to roles it's very simple when you're using a single font family for the entire website right because all the elements will be using fonts from that family but when you're using two different font families or as they're also called typefaces then it gets a bit trickier personally i like to use the fonts with the greatest readability for smaller elements in my ui like you know body text buttons menus captions and that sort of things and i'll use the other typeface on larger elements like headings so that takes care of roles now we need to talk about attributes so how do you pick the right font size the font weight letter spacing and all that well when it comes to font sizes because that's probably the biggest deal thankfully we have something called type scales i made a separate course on tots plus on this topic so if you want to learn more about type skills go ahead and check that out naturally i will be using the type scales in this course and i'll show you how to create them because they make our job infinitely easier but i won't go into as much detail as i did in the dedicated course for type scales right because it's pointless to repeat uh the same information now let's see about some key takeaways for this lesson to properly define the typography of your project there are a few steps you need to follow first decide where you want to get your fonts from i recommend google fonts or adobe fonts then decide which fonts would work best for the brand and audience based on the message you want your website to convey fonts should also be picked using criteria like readability and loading time after you picked your fonts you need to set the proper roles and attributes like size line height weight etc alright so now that you got this introduction to typography let's focus on our project and see what fonts we'll be using and how we'll be using those coming up [Music] all right so let's um follow the steps that i described previously and pick the right typography characteristics for our project let's begin first step let's pick where we'll get our fonts from personally i'm a big fan of adobe fonts i have access to the service and this is what i'll use next step is to pick the font that would work well with the brand and the audience and the message that we're trying to convey so if we look back at the project brief all the way down here under designing guidelines it says this robert wants a modern looking website and he likes to keep things clean and simple so in terms of fonts when i hear the word modern i immediately think sans serif right and if you don't know what the difference is between serif and sound serif well let me show you this one right here is a serif see these embellishments on the letters all these are called serifs but a sans serif or without serif is just a cleaner looking typeface right you can't see any of the serifs here because well there are none and usually serifs are considered to be more classic more old-school typefaces while sans-serifs are considered to be modern so we settled on sans serifs now which ones because there are so many right if we click on this uh category we have uh almost 800 font families of songs sun serifs in google fonts well robert is what a ui designer right so let's think about what keywords come into mind when we think ui designer one of them could be geometry right so maybe geometric well there is such a thing as a geometric typeface it's one of the classifications and there are a couple of geometric typefaces out there one of which is brandon grotesque and brandon grotesque looks something like this you can see all the different fonts here this looks really good adobe fonts also shows you some some use cases here on the top and i think for this type of website for a designer's portfolio basically this fun family would work awesome so this is one of the fonts that we'll be using brandon grotesque from adobe fonts now i'll be using two typefaces in this design and i'll be using brandon for the larger elements like headings so that means we need another typeface that i'll be using for the smaller elements like the body text captions button menu items and so on and you know you can google this stuff you'll find font pairings font combinations from different foundries but from my experience i know that brandon grotesque pairs very well with proxima nova this is another sans-serif typeface which looks something like this it's relatively similar to brand and grotesque but also has a distinct characteristic and proxima nova also works well on smaller font sizes like if i were to reduce this to like 18 or even 16 pixels and i try to read the text here it's very readable right and it looks very good even in bold italic it works very well in contrast if i were to use a brand and grotesque in smaller font sizes right it's uh it's readable but it's not as readable in my opinion as proxima nova so these are the two uh typefaces that we're going to use brandon grotesque and proxima nova so once we install these on our system we can jump back to our design software and we need to determine the roles and the attributes so for that i'm going to create a frame and i'm going to call it typography and inside i'm just going to start listing a couple of elements that i want to showcase elements like a paragraph just some some dummy text for now let's just resize this and for font size i'm going to use 21 which is our base font size and the line height is going to be 30. right so that's going to give me an exact representation of what my paragraphs will look like and i can even go one step further and choose the exact color that we're going to be using let's say black 75 something like that next up we're going to make a list of all the headings that we plan on using so we start with heading one or you can start with heading six um the other way around it's really up to you let's start with heading one heading two and let's duplicate this three four five six all right let's set their [Music] fun family to brand and grotesque let's make all of these bold now let's set their font sizes for that we're going to use a nice tool called typescale so we'll go to typescale.com and this is a tool that creates typographic scales the thing i mentioned earlier in the course so with a typographic scale it's very simple you start with a base font size and a scale or a ratio and the algorithm basically creates font sizes based on these two elements by multiplying the base font size with the scale and then just keep repeating that process until you get this right so for example uh 16 pixels multiplied by 1.25 will equal 20 pixels 20 pixels multiplied by 1.250 is going to be equal to 25 and so on you take this you multiply it with the scale you get to the next value and the next and the next and the next and so on so for our project we're going to use a base font size of 21 pixels so a bit larger than usual but because robert wanted an airy website with lots of white space i think a larger than usual typography will serve as well and when it comes to the scale it goes something like this the smaller the ratio the smaller the contrast between lower font sizes and bigger font sizes and you'll see that as i'm increasing the scale the contrast between small and big gets more and more obvious and if i go like to a golden ratio you can see that it's a crazy amount of contrast between this and this for this type of project i will choose an augmented fourth scale or 1.414 and this gives me a nice balance between smaller font sizes and bigger font sizes so once i do that all i have to do is reference this tool and apply the font the font sizes to my elements here so the first one heading 1 is 118.70 and we're gonna round that up to 119. so 119 and also the line height this is very important in figma you actually get a bit of help if you delete the original value and leave it on auto figma will kind of calculate that for you based on a certain multiplier but to truly see if you're happy with the line height you can just enter some additional lines of text and then work on this experiment with different values until you find that this text looks as it should in my case 144 is um the correct line height that i'm looking for there's not too much space between the lines but not too little either for example if i were to set this at 90 the the text would kind of be crammed in this very small space and i don't want that so 144 it is for the heading one and following uh this exact uh same procedure i do uh the rest of the headings so for heading 2 i will use 84 pixels of line height of a font size excuse me and for the line height i'm going to set it to and twelve and i'll keep doing that for the rest of the headings so after doing that the type scale looks something like this we have the heading one two three four five and six now let's see about font weights because these are headings uh most of them will be bold but every now and then i think um kind of a a change in this rhythm can be beneficial so what i like to usually do is have the heading three use a different font weight usually something that's uh a lot different than the others like light so heading one and two will be bold four five and six will be bold but heading three will be light and i think this will create uh some nice visual interest in the page it will contrast really well with the other headings and overall i think it's going to be a welcome change and finally what i like to do is name these frames to also reflect the base font size and also the ratio just so i know um in the future if i want to change something or i want to add another element in the mix i know exactly what the base font size was and the ratio and then of course if we want we can select all of these we can give them the color of black and we can even create text styles for them so we can select our paragraph go to text click on these buttons click on plus paragraph this h1 h2 h3 and so on we'll do the same for the other three and that's it that's how you get your typography started with figma and this great tool called type scale there is another tool i wanted to show you that's called archetype and with this tool you can pick your fonts here you can define the various sizes for the base paragraph for the scale ratio and you can see a nice a nice preview here personally i prefer working with type scale i find it much faster to use it's much more fluid but as an alternative archetype is also there if you need it okay so with the typography taken care of let's see about some key takeaways start your typography process by defining the type scale font weights and line heights use tools like type scale and archetype to make this task easier if your design app allows it create text styles for elements like headings and paragraphs okay uh now it's your turn so go ahead and create the typography for your version of of the website and of course you can copy everything i do but i encourage you to try other things try other typefaces other type scales play around with the font sizes the font weights see what what looks best to your eye now the main aspects of our project's typography are in place so along with the colors that we defined previously we now have a solid foundation to build on but speaking of foundation uh there are still some fundamental aspects about web design that we haven't talked about or that we haven't covered and one of them is spacing and sizing so let's go ahead and do that next all right spacing and sizing in web design this refers to how much space you should use inside and outside of elements and also how big or small they should be and sometimes these will overlap because the size of an element can sometimes be dictated by the interior spacing like for example in a button right the bigger the padding inside a button or the bigger the font size the bigger the button will be now for both spacing and sizing i'm using something that's called the eight point system and in this system every dimension is basically a multiple of eight so for example this button has a padding of 16 pixels on top and bottom and 32 pixels left and right both of these values are multiples of eight and i use the system everywhere from margins and paddings to distance between elements to widths or heights for images or other fixed dimension elements i've been doing it for a while now it's worked out great for me and i think the main two reasons i use it for are simplicity and consistency simplicity because it's very easy to remember the multiples of 8 and consistency because no matter what project i'm working on i know all the measurements are made using the eight point system so even if i come back to a project after a while it's easier to make changes because i don't have to check all the time what the existing measurements are not to mention it's also easier for developers because once you tell them that hey i'm working with the eight point system uh it becomes much easier for them to deduce certain measurements without having having to measure every single time there are also more technical reasons for using this system and you can read more about that in this article on medium you can find the link in the video description but for now uh please take my recommendation and use this system at least for this project and you know give it a go i'm sure you'll be very happy with it now you might be wondering about grids those are used for sizing and aligning content right well yes they are but i'm not going to use grids for this project and let me tell you why so the use of grids in web design is pretty straightforward basically a grid consists of a set of columns that are of equal width and between those columns there is a fixed amount of space and in figma you can easily create one using the layout grid functionality so you just add one here you select columns and you input the number of columns typically you would use a 12 column grid for various reasons and you can play around with the with the margin let's say 32 pixels that's gonna add like a small margin here and the gutter is the distance between each column right so this is a typical grid and then once you start placing the content on your page you would basically align it to the grid right let's say you have another element you can align it like so maybe another one you know you can align it like this maybe you have a piece of text and you're going to align it like this so that's you know the whole point it it creates a nice set of guidelines for you to align and size your content and it's also beneficial later on when you're developing the project right when you're writing the html and css because there are grid systems in place that you can just include in your project and it's going to make it much easier for the developer to create the layouts or build the layouts that you created in your design with that said sometimes grids can add a certain degree of complexity to a project and you don't really need that complexity right for certain projects grids are not absolutely necessary and especially if you're a beginner i don't really recommend you would work with a grid system because there are far more important things to consider when it comes to web design than you know grids or how your content is is placed in the page so that's why i'm not using grids in this course instead i'm going to show you a much simpler method for aligning and sizing content and that's going to allow you to focus on the more important aspects of ui design so the technique that i'm gonna use is with guides so i'm gonna get rid of this layout grid and to activate the guides you would go to the figma menu view you need to show rulers and that's going to display these rulers on the top and at the left and then you can simply click and drag a guide and just snap it to your content and here in red at the very top it's going to show you the exact position of that ruler you can also click on it and then you can do the same you know on the other side and here our ruler is at 135 pixels and then you do 1280 minus 135 this gives you 11.45 and then just grab this and using your arrow keys just move it into place so right now you'll have the exact same distance from both sides and you can create as many guides as you want depending on the type of layout that you want to make and if you want to hide the rulers and the guides you can simply press shift r and that's going to hide both and you can use this shortcut to toggle but to toggle the visibility basically and of course you can create horizontal rulers just like this and if at any point you want to delete one simply click on it select and then press the delete key or the backspace key and i think this is much easier for a beginner rather than you know getting caught up with grids and how many columns do i want what kind of space do i want and for a website design that's not focused heavily on a grid like layout using rulers is much much simpler and that's what we'll be using for this project of course if you want you can use grids there's nothing wrong with that but if you're just starting out i recommend you start with the with the rulers all right let's see some key takeaways from this short lesson spacing and sizing are very important in ui design because they will dictate the amount of white space and also the visual hierarchy for spacing and sizing elements use the eight point system where every margin padding width etc is a multiple of eight grids are not always necessary and can sometimes add an unwanted degree of complexity to a project using guides is a perfectly fine replacement for grids now we don't have a practical exercise for spacing and sizing because i'm going to show you how to apply those principles once we start designing the various components of our website and we're actually very close to doing that but there is just one last thing i want to to talk about before moving on and that is the proper use of imagery and icons in web design that's coming up all right so before we start putting pixels on the screen i want to give you a few pointers for working with images and icons first of all an icon should be meaningful right because you usually put an icon next to a piece of text or inside a button so the icon should visually represent what the associated text is saying for example here we have a button that says send message but that check mark icon is not really appropriate right it doesn't exactly represent what the text is saying but if we replace it with this icon then it looks much better doesn't it the icon and text work together to tell a story of course there are standalone icons like the ones for social media and these work just fine by themselves because they're basically the logos of well-known brands so a user seeing those icons know exactly what they do another thing to be careful about when working with icons is the style now you need to be consistent and use icons with the same style they don't have to be from the same icon set as long as they share the same style whether that is outline solid duotone etc in this example i have two outline icons and a solid one see how weird it looks that mismatch it will look a lot better when i replace the solid icon with an outline one now everything is nice and consistent so be careful about the icon style there are plenty of high quality icon sets out there and most of them are free a simple google search will give you a bunch of results uh and you'll be good to go however i have a couple of icon sets that i use regularly they're some of my favorites and i want to share those with you first one is bootstrap icons if you're not familiar bootstrap is one of the most popular front-end frameworks and they offer a nikon set called bootstrap icons that looks something like this it's very nice over 1600 icons it's free to use so i would highly highly recommend this another one is font awesome this is probably the most popular icon set there are 14 865 icons in the pro version which you know is is a paid version of the set but there's also a free set and they come in multiple styles like thin regular and so on and they also provide a web font that you can use for the icons which is awesome but uh yeah fun awesome another great option uh hero icons this is a smaller icon set with just 230 and it's licensed mit so it's free to use even for commercial projects these come in two varieties outline and solid and overall this is a really really good icon set ion icons again is another set that i recommend you have some different options for the style and you can go ahead and download the free designer pack forge icons really cool icon sets this is actually the set that i'm using for this project i really like them and they're also free and then i recommend you also go to envato elements for icons because if you go under uh graphics icons you'll find tons and tons of icon sets and if you have a element subscription you can download as many of these as you want and they're really really high quality sets and finally it's not really an icon set but instead it's an app that allows you to organize icon sets it's available for both mac os and windows it's free and it looks pretty awesome let me show you right here i've been using this for uh for a while now this is what it looks like these are all the icon sets that i saved on my computer and whenever i need an icon i can simply search for one let's say arrow that's going to give me all the icons that match that search criteria and i can search you know the various icon sets i can search for all icons and whenever i find one i can simply copy it from here as svg or simply as an icon i can paste it in my project and i'm good to go so i highly recommend this it's a free software cross platform and if you're constantly working with icons i think it's a no-brainer just go ahead and get it now images uh this is a pretty broad subject because the images you'll be using are directly tied to the text content right but as a general rule try and stay away from stock photos as much as possible instead talk to your client and try and get real pictures so instead of for example showing some just random stock photos of fancy offices and you know the people working in them get pictures of the real office of the business and the real people working there you want to be genuine right of course stock photos have their place when you want to display an image that's representing a broad picture of your business type like say landscaping you can get away with grabbing a stock photo or two the point is try and keep it as real as possible it's very jarring at least for me to see for example a business website that shows you know stock businessmen you know with fake smiles shaking hands or pretending to explain something on their laptop screen just don't get me started on that keep it real all right so let's see what we have learned from this lesson icons should be meaningful and use a consistent style throughout some icons work just fine by themselves for example social icons but usually you want to pair them with text use stock photos sparingly and avoid the cheesy overused cliche ones whenever possible use photos that are provided by the client keep it real and with that we conclude the initial theory part of this course now it's time to roll our sleeves and get to work and we'll start by looking at common patterns um if you're confused by the term common patterns well it's actually very simple so a pattern is something that's repeating itself right and in web design a pattern is a solution to a common problem example let's say you want to display multiple blocks of similar content in a very small area how do you do that well the answer would be tabs right so tabs because they're very effective the solution to this very common problem they became a common pattern okay so for the next 18 or so lessons we'll uh look at some of these common patterns we'll try to define them we'll take a look at some real world examples so what other people are using these patterns for and then we'll apply that pattern to our project ready let's start with headers [Music] before we design a header let's look at what it is a website header is usually the top section of a web page that contains the logo navigation menu a call to action and optionally a search form now this is a generic definition and it depicts a typical header because of that you can distort this structure and adapt it to your needs so for example maybe you don't have a search form in the header that's totally fine maybe the call to action and the navigation is hidden or are hidden under a menu button also headers are typically horizontal but they can also be vertical and i think that as long as uh that top area of a web page contains a logo or some kind of brand identifier and a navigation it can be considered a header now let's take a look at some real world examples and see the commonalities but more importantly the differences we're going to start with one of my favorite websites that's stripe and here we see a very simple header we have the logo the navigation which looks fantastic by the way and also the call to action now some people say that this area here is also part of the header personally i call this the hero area so it's something separate but there are those who say that the entire area that's above the fold or in this case you know from here to the top uh that's part of the header they might be right um i don't think there's an exact definition of where a header should start and where it should end personally i i just consider a header the the very top area of the website uh let's go to the next website for adidas now this has a slightly more complex header we of course see the logo the navigation here we have a search bar and we also have some distinct controls for the shop because this also has a web shop so we can see a link to probably the user account or the profile the list of favorites and the cart this header also features some extra links here for various sections of the website and also um kind of an information or promotional bar right here at the top with uh you know offers and then some information about shipping and returns and also another promotional bit here so yeah very similar to the one that we saw on stripe but also very different because it features a lot more elements next we have the header from dribbble and here again we have the logo and navigation but also a search bar a call to action and also controls or links to access various sections of the website so as you can see the headers kind of change their structure depending on the type of website they're being displayed on but at their core they feature roughly the same elements here's another example from kbd fans search logo shop links and then main navigation and then also an announcement bar right here on the top just like we saw on adidas next up let's take a look at the amazon header so again a lot of stuff crammed into here but with some of these headers you can really see the main focus or the main purpose of that and in the case of amazon it's this big search bar here so they want people to to use this header to search for stuff on their website and again roughly similar structure logo navigation search cart so web shop elements and here we also have a language switcher pretty interesting next we have the header for envato elements again we can see where the focus is on the navigation and also on the search right so it's much more beneficial to have a big search form on a website like this where you go and where you go to find certain elements certain assets and stuff rather than using a very small search field like we do in dribble next we have the website of simon getz pardon me if i mispronounce your name simon so here we don't really have a header but instead we have this bit here which kind of acts like a header but it also acts like a hero area so it's kind of a mix between the two we don't really have a navigation here we just have the brand identifier which is the name and then we have a description of who that person is and what they do so this is actually a really really cool websites so as you can see not all websites need that header with logo navigation and call to action you can again you can distort that structure and adapt it to your needs as i was saying here's another website now this features a vertical header and you know it's part vertical actually part horizontal because we have the logo here horizontal but the rest is here vertical and we have some some links here for contact and projects and then a link to the menu and then some social media icons so this is a pretty unusual uh use for a header and finally we have this website for irene studio it's probably pronounced differently in french but this is a very simple header we have the logo and then a menu button which if we press it's going to show us the menu and technically this kind of modal window that's being presented to us here is also part of the header because it shows us the uh the navigation some links here we have a language switcher so even though you know it's not your typical header that's displayed horizontally like this i believe that it's still part of the header because it contains the navigation so there you go a few examples of headers how they're being implemented in some real websites and hopefully that gave you some inspiration for creating your own all right let's see some key takeaways a website header is usually the top section of a web page that contains the logo navigation menu a call to action and optionally a search form a header is highly customizable and can hold other types of content headers can also be vertical all right so now that we have a general idea of what a header is and what we can do with it let's go ahead and create one for our project that's coming up to design the header i'll use the wireframe as a starting point and because i'm working in figma i'll be using the auto layout feature pretty heavily but don't worry i'll explain how it works as we're building stuff with it so let's go so i created a new page in figma where i placed all the wireframes and this should be your starting point as well and what i'm going to do is simply copy the index page go to my design page and paste it in so now i can work directly on the wireframe right i think this is much easier because you make the wireframe in figma and then you copy it into your final design page and you start working directly on it you don't have to recreate any element it's all there all you have to do is play around with colors typography spacing and sizing which is pretty awesome so let's start with the logo i'm gonna delete this one and i'm just gonna paste in the logo i'm gonna choose 32 pixels as its height remember the eight point system yeah and then i need to know where i'm gonna position this logo from the edges right so i'm gonna bring up my rulers shift r and i'm gonna drag a ruler to 64 pixels 64 like that and then i'll just align the logo to that ruler next what do we have we have the menu about me and contact now i already created um a frame with auto layout for this menu as you can see here but let me show you exactly what that does so let's say that i have two elements right this and this two text elements and i want to position them in the same group so they're perfectly aligned and they also have a consistent spacing between them now if i were to create a simple group with these with command g whenever i would change one of them nothing would happen really the first link would just overlap the other one and i can also you know move these around and nothing really would change the group would just resize along with them but with auto layout things are very different so let's select these two again let's ungroup them and with them selected i'm going to click on the plus under auto layout you can also go to object add auto layout or shift a and that's going to create a separate frame for these two elements and then i can go in here and i can say okay i want 16 pixels or maybe you know 32 pixels between elements and i can also make sure they are aligned properly by using these controls here so now if i change one of them figma will automatically keep the same distance of 32 pixels between these items and by the way i'm holding down the option key and hovering on this element to learn the distance between these two it's a very handy feature now for this particular project i would like the menu to be positioned right next to my logo so in the wireframe it's positioned in the middle but i think it would work much better if it was positioned right here so what i can do is i can grab the logo and i can simply drop it into frame 19 and that positioned it right at the very end but i can use my arrow keys left to bring it into the position i want and because this auto layout frame is set to align items vertically everything is aligned automatically for me and of course i can change it like this like this and so on but i prefer vertical and i'm also going to change the spacing to 64 pixels again a multiple of eight so then let me just bring this and align it with the grid or with the with the guides and now let's start working on these two links let's go back to our assets and check out our typography we can see that the lowest element here is heading 6 which has a font size of 21 pixels so let's use that select these two we'll use proxima nova bold 21 and 30 for line height now just looking at this i find that these links are a bit too big so i'm going to reduce their size now if you remember from the typography example we used a type scale right of 1.414 and 21 pixels was the base font size so if we're missing one of the sizes here we can just do it ourselves we can say 21 divided by 1.414 and it's actually like this and it gives us 14.85 and we'll just round that off to 15. so let's do that and i'm also going to lower the line height to 24 pixels again a multiple of 8 and that will give us the final properties for the menu items now what about color let's select both of these and i'm going to set the color to black and i'm going to show this as a list so select black from this list awesome what's next we have the social media icons now for the social media icons i'm actually going to use icons from a different icon set called forge icons which are these right here so i'm going to search for twitter click and drag here and i'm going to resize this to be 32 pixels now by resizing it like this we actually encountered a small problem because the icon uses um kind of a stroke for for the lines so whenever i resize it using that method the stroke just keeps getting thicker and thicker so if you run into this problem and you have issues resizing an element in in figma you can scale it like so or pressing the k keyboard shortcut and then holding shift click and drag until you get it to the desired size which in my case is 32 pixels okay what else we had instagram and dribble so let's grab those again k and resize this to 32 like that and finally dribble and this is actually a bad rendering of that icon see how the lines are kind of messed up here figma does that sometimes unfortunately it's one of its drawbacks it doesn't render correctly some some svgs so in that case we're gonna have to look for our icon elsewhere so i'm gonna search for dribble here and as you can see we can find roughly the same icon in in font awesome so this was the one that we're planning to use and this is the one from font awesome so let's grab that it has the same style which is outline and this is a much bigger icon by default so let's just resize it like so to 32 pixels like that and we might need to tweak it a little bit because these icons here they have kind of this padding twitter does as well but this is uh oops this is a bit different so we're just gonna have to gently resize it until they're roughly the same uh the same size here so let's also grab a guide and align them like that and one here and let's resize the twitter icon as well to something like that okay so now we can go ahead and delete these two guides and we can grab these icons shift a to create an auto layout align them properly in the middle and we're going to set 32 pixels of distance between them like so and then let's move them to the left a little bit and let's go ahead and i'll leave a 64 pixel gap like that between this and the edge and then we can even drag a guide right there okay so those are the social icons so our header is starting to take shape uh let's see about this line here this is a separator and i'm gonna keep it but i'm going to change its stroke color and i'm going to use black probably black 10. i think that looks pretty good so it's just it's barely visible but it's still there and just so we don't forget let's select uh these icons and figma has this awesome feature when you select more than one element it gives you all the colors that are present in that selection so i can change the color of multiple elements at the same time so i'm going to use black for these as well so our defined black color now let's take a look at our header see what else it needs so it looks pretty good but one thing that's bothering me is that this contact information is here in the hero area and i think it would work better if it was placed here next to the social media icons because they're both ways to contact robert fox so it would make more sense to have the contact information here in the header where it's more visible rather than here so what i'm going to do is grab these two command x and i'm going to paste them here for fill i'm going to use black but for the email because i want this to be a link i'm going to use the primary like so i'm going to select them shift a to create an auto layout frame and i'm going to select 32 pixels align them vertically like so and then i'm going to select this and this shift a again to create another auto layout frame using all of these elements and i'm going to select 64 pixels distance between these and i'm also going to align them in the middle like so and i'm just going to make sure that the alignment there is correct on top of that i want to add a small separator between this section and this section so i'm going to select this frame press l for line tool click and drag while holding down shift i'm going to create a small line that's 1 pixel wide and 16 pixels in width and for the stroke color i'm gonna select black 25 and because i used auto layout simply by inserting that element into the parent frame all the other elements were pushed aside to make room for it so now we have this bit which sits nicely at 64 pixels between the left side and the right side now i also want to add some top padding and bottom padding for this section so i'm going to select this and then this and i'm going to group them up shift a to add an auto layout on all of these sections and i want to make sure they are properly aligned at all times and here's a cool thing in figma right now figma automatically set a 486 pixel spacing between these items what i can do is i can select the parent element and i can set the item distribution to space between instead of packed and that will basically push one element to the left so the this left side will be pushed to the left and this right side will always be pushed to the right regardless of the size of the parent which is fantastic now what i can also do is i can set a padding on the top of 32 pixels and a padding on the bottom of 32 pixels and i can grab this element and align it at the top of the page so now i can take this i can move it down so i now have my 32 pixel padding on all elements that's pretty cool isn't it and now i can grab this element and this element and i can group them up as header and that's it and now for for instance if i want to change the size of this header all the elements stay exactly where they need to this is one of the uh awesome things about figma auto layout and that's our header okay now it's your turn so go ahead and design the header for your version of the website and you can use my design that's totally fine or you can create your own maybe you want the navigation to be centered maybe you don't want the contact information to be there maybe you don't want the social icons to be there you know play around with it create your own version put your own spin on on the project now after the header we can usually find a hero area so let's see about that coming up hero sections were once considered to be a passing trend but they actually stuck very well in in web design and nowadays pretty much every website uses one a hero is the area immediately below or next to the header because this is positioned above the fold it's considered prime real estate so it displays critical information like the brand offering benefits for working with the brand and a call to action a lot of websites use sliders in the hero area to display for example articles if we're talking about an online magazine or maybe offers and products if it's an online store but generally speaking a hero area usually contains a strong message along with a call to action and then some supporting media like images and videos so let's see some real world examples the first one is from stripe again one of my favorite websites and here the hero area is this one above the fold and on this website the hero contains you know the strong message in our case payments infrastructure for the internet a small description call to action and then supporting media in the form of these images and of course we have this amazing shifting uh gradient background that really adds to uh to the whole experience let's look at another one this is from siteground again we have the message description call to action we have also some pricing information here and a supporting image envato elements has a slightly different hero area here uh they showcase free courses they have a counter for you know how many items were added this week and also provide links to illustrations to fonts so it's very much tailored to what the website has to offer you know if it was like an online store it would probably present some products or special offers well here it's displaying links to categories to certain items and so on uh monday.com has a slightly different hero area again we have the strong message but the call to action here is a bit different than the rest because you basically can select a bunch of these elements and it's a really cool technique here the gradient actually changes as i'm selecting or deselecting multiple categories pretty cool um so you're basically selecting a bunch of these and then you get started and that's going to take you you know to a sign up page and moving forward to to an experience that's tailored to you based on what you selected earlier very interesting craft has a very simplistic minimalistic hero area strong message call to action and then a small announcement here and then timely has something similar so again the message the call to action which in this case asks for an email address we have the supporting media and then also some benefits for signing up which is really really good so that's a sample of a couple of hero areas from real websites just to show you kind of an overall structure and what you can expect from this kind of common pattern now let's see some key takeaways a hero is the area immediately below or next to the header because it's positioned above the fold a hero is considered prime real estate so it displays critical information a lot of hero areas show sliders but usually they display a strong message and a call to action alright so now that we have an idea of what hero areas are all about let's go ahead and design one for our website coming up okay so previously we designed the header for the website of robert fox and if we look at the wireframe right below that we can find a hero area so let's take that and work our magic the first thing i'll do is actually resize this index page to 1800 in width i forgot to do it last time and then i'll simply resize this bit and i'll reposition the guide like so and then i'll add some extra guides here and those guides will help me size up the content for this hero area so i'm gonna add the first guide at 256 which is a multiple of eight like so and then another one on the other side and that's going to be placed at 1544 just like that so now we have 256 pixels of distance between or on the right side and on the left side of the page so now for this element we're going to use an h3 h3 that we defined here in the typography stage and we created a text style for it so let's go back and choose h3 from here and as for the fill color i'm going to use the brand gradient then this is the main message so i'm going to choose an h1 and for color i'll choose black and let's resize this a little bit and also let's make a bit of room i'm going to select some of these elements i'm going to make this a lot bigger and i'm going to select this and i'm just going to push it down like so and i'm using the arrow keys while holding down shift and also i don't think i'll be needing this line here so we'll just delete it next up i'll grab the text and i'll choose the paragraph style for it and for fill color we'll go with black 75 and that's what i like to usually do headings i usually leave them on the black color that we defined but for regular text i go with a bit of opacity in this case 75 percent just so there is a bit of contrast between the lighter text or the smaller text and the bigger text then i'll select this text and i'll resize it to fit within my guides like so and this is actually a group so let's ungroup this for now and ungroup this and let's properly resize it like that and now what i can do is select all of this shift a to add auto layout and i'm going to select 32 pixels of spacing between these items and i'm going to align everything to the middle like that then i can also play around with the with the width of this text element maybe make it something like that a little bit bigger so it the text fits into lines so with that done the only thing left to do here is work on this button well we'll do that in a future lesson but for now i want to add a bit more spacing between the button and this text so because that differ that distance is higher than 32 pixels which i have set right here in my auto layout we can do the following we can select the text and the button shift a to create its own group with auto layout align everything to the middle and then we'll set this distance to 96 pixels 96 is also a multiple of eight so i'm using the eight point system in all aspects of this design and finally we need a bit of a breathing room a bit of distance between the contents of this hero area and the element above which is the header currently this distance is 1 141 but i'm gonna move this to 256 and i'm going to remember this number because that's the distance i'll be using between all major sections of the website so 256 and with that my hero area is almost done we just need to make this button but that's for the next lesson cool beans so now it's your turn to design the hero area and you can do it in any way you want so that it fits whatever style you've been using so far if it's exactly the same as mine great otherwise i'll be more adventurous with it and also you can use the examples of hero areas that i showed you previously for some added inspiration now let's see about that uh that button that was left unfinished so let's give it the final coat of paint that's coming up i think everybody knows by now what a button is but just in case let's do a quick recap in ui design a button is a fundamental interactive element that serves as a middleman between the user and the product or service that's because buttons are gateways right you click a button and it takes you to a different page for example you land or you open a landing page and by clicking the button in the hero area it takes you to the sign up form for that service or the um the product page for that product and buttons can also perform certain actions like for example toggling the visibility of an element uh doing something in the back end or you know opening the window in that page so they're really versatile they're not used only for navigation uh with that said let's take a look at some real world examples here we have the website of avocode and we have a couple different buttons let's take it from the top this one will basically take us somewhere else as do these two so these two are actually part of the call to action uh we also have two other buttons here for cookies and by clicking these they perform an action right they close that ui element we also have a button here that says start free trial this is also part of the main call to action from the hero area here's another button that's not used for navigation this opens up a pop-up for this support module and this closes it what about this website for notion so on the login page we have three buttons here that will basically take us somewhere else or perform a certain action but if we go to the main website again we have a button that closes that pop-up and the rest are used for the call to action they will take us somewhere else same goes for the adidas website we have three buttons here for call to action but if we look here we also have two buttons that don't really take us anywhere else but instead they perform a specific action in the ui in which case they cycle through a bunch of slides and if we scroll further down we can see some other buttons that will take us to other pages here we have a button that opens up filtering and stuff and as you can see we have several visual styles for buttons so these that you saw up here they have a certain style these here they have a certain style these have a certain style and also these have another different style these are with text and icon so within the same website you can have two three four different styles of buttons let's see another example the timely website right off the bat we can see two buttons for the call to action right so they share roughly the same style but they have small tweaks to them depending on where they are so the button in the header is white and it turns green on hover the button in the hero is a darker color and then turns green on hover so you know they're different but they also share some common features like for example the hover color they're both rounded they use the same font and so on and so forth what about youtube youtube has a lot of buttons in its interface all you got to do is hover on a specific video and you have two buttons here for watch later and add to cue if you open a specific video there are a couple more buttons here on the video player play next one make full screen theater mode this default view and so on so as you can see buttons are really versatile elements and they can be used for both navigation and also for performing certain actions in the back end for example if i click the save button here that's going to save it to my watch later list and that's performing an action in the back end so a few key takeaways in ui design a button is a fundamental interactive element that serves as a middleman between the user and the product or service buttons are not used solely for navigation they can perform various actions like toggling an element's visibility performing a task in the back end etc alright so now that we saw some use cases for buttons let's turn our attention to the buttons in our project that's coming up [Music] my hero area is incomplete at the moment because i still need to design that button so while i do that i'll also give you some tips and tricks for designing good looking buttons and also usable buttons let's begin so let's zoom in here the first thing i'll do is set the typography properly so i'm going to be using proxima nova 21 and 30 i believe it was let's double check in our typography stuff so the h6 is 2130 yes 21 representing the font size 30 representing the line height and i'm also going to make it bold and then i'm going to change this arrow because it's just hideous so let's go ahead and delete that and i'll open my icon set app and we're going to pick a nice icon i'm going to be using the forge icon set so let's search for an arrow let's see what we can find here maybe down there we go so i'm going to be using downward click drag paste it in and as you can see this is already inside a frame that has auto layout i'm just gonna use a 16 pixel gap between these two elements and i'm going to resize the icon using k and i'm going to make it 32 pixels like that then i'm going to select my parent frame and i'm going to give it a fill of brand gradient i'm gonna round off its corners let's say like a hundred that's gonna create a pill button and i'm gonna add some padding because i'm using auto layout this is super super simple so i'm going to be using 24 pixels top and bottom 48 pixels left and right and this is how i like to make my buttons basically whatever padding i set on the top and bottom i double it on the left and right and this creates a nice visual balance then with the button selected as you can see i'm using the brand gradient as the background but the other color is black so i'm going to actually swap this to white just like that finally i want to give this button a bit more emphasis you know i want it to stand out so one way i can do that is by adding a shadow a drop shadow so i can select the button and i can go to effects and use the drop shadow from here i can also click this button and the changes properties but actually i have a very nice figma plugin that's called smooth shadow and that basically adds layered shadows to elements and you can you know play around with the different layers here you can play with the offset the blur the alpha right and this creates a very very nice shadow personally i just leave it at default so let's run that again smooth shadow and i'm going to apply it and if we zoom out you can see that we have a very nice very subtle shadow applied to that element so our button is almost complete but here's a quick tip whenever you're designing a button there are a few things you need to keep in mind to make it usable and to make it look good first of all you need to make it look clickable and easy to find and i do that by using this bright color or colors because i'm using a gradient so it does look like a button with the rounded edges and stuff and it's also really easy to find because if we get a bird's eye view of what we've done so far this button immediately stands out right because it's so colored and because it has a nice size to it and size is also important you need to make this button easy to click but also more importantly is it a tap on a mobile device because the human finger is a lot bigger than a cursor so you need to make it large enough to be able to be easily tapped with the finger on a mobile device screen and finally you need to tell the user what the button is doing in my case i want this button to scroll the page to the portfolio section so that's why i used this downward arrow and also the text see my work and because my work is further down the page looking at this the user can you know automatically to do is that hey if i'm gonna click on this button it's gonna take me somewhere down because of the because of the icon but the wording is also very important so whenever you're creating buttons uh be explicit tell the user what that button is doing now before we wrap up this lesson there are a few more steps we need to take to make sure that our design is ready to be sent to the developer and when it comes to interactive elements we must also consider the different states that element can be in so for example what happens when i mouse over this button it needs to change somehow right what about when i click it what about when it's a disabled button so let's go ahead and cover those things right now so what i'll do is i'll copy my button i'll go back to my assets and i'll create a new frame here and i'll paste in that button so this will be my default state then i'm going to duplicate it and i'm going to create my hover state and i think it would be interesting on hover to kind of increase the distance between these two elements between the text and the icon so instead of 16 i'll use 24 an 8 pixel increase now this also increases the size of my button and maybe i don't want that so i need to take that difference and subtract half of it from each side so because i'm using 48 pixels of padding i'm gonna say 44 and 44. so now i'll have the exact same size for the button on hover of course we have different sizes here because the text is different but if i change this to default you'll see that the width is 267 267. so i hope that made sense on hover we just increase the distance between text and icon and we deduce that increase from the left and right padding so the button stays exactly the same size what about the active when you click on the button right so we have the hover state here we're going to use that as a template we're going to call it active state and when i click it i want a more visual change right so i'm going to select the background and one thing i can do is decrease the opacity to like 80 percent all right so that's an immediate visual differentiation between uh when it's hovered and when it's clicked and finally when it's disabled because we might have instances when we need a button to be disabled i'm going to bring back the opacity to 100 but instead of this brand gradient i'm gonna choose my primary color i'm gonna give it a solid color and then i'm gonna create a tone for that color something like that so something that's more towards gray maybe even like this and i think that would work just fine on top of this we can also create a secondary style for the button right so one that's not as emphasized as the default one so for that i'm just gonna duplicate this again i'm gonna get rid of the shadows remember we want this to be a bit more subdued and instead of using a gradient at as its background we're actually gonna use a solid white color and use a stroke instead and we can actually make the stroke the gradient like that or we can simply use a primary or a secondary color or we can use the black and that's exactly what i'm going to do so use the black make this a little bit thicker and also the text inside should also use black but i'm going to select black 75 oops and that also colored the button so we don't want that i just want the text and the icon to have that color so that's the default state let's create a hover state for the hover how about we switch things around how about we uh add a fill that's using the black color and for the text we'll use white let's also give this an opacity of about 85 percent so i don't want like pure white on a dark background just tone it down a little bit active state is for when you press it down in which case let's swap the black for black 75 and disabled how about we do the border black 50 the text black 25 or the the fill and the text let's make this black 75 or even less than that black 50 something like that so that should should be a hover state pretty easy right i think it's an important part of the process of designing a button you need to consider okay this is my button but i also need to add these various states but what if i need to add another button in the future that may be not as important as my primary that's why you create a secondary style but the secondary style should be more subdued it shouldn't be as emphasized as the main button all right so now it's your turn to design the buttons for your version of the project just remember as i kept saying uh take care of those secondary styles for the button and also the different states hover active disabled and so on with that said let's move on to the next pattern on our list and that is image galleries i'll see you soon all right let's talk about image galleries and i think the name is pretty self-explanatory an image gallery is a way of displaying a collection of images while allowing users to see several items at once it's great for photography websites but also for online stores for example because you can view variations of a product or multiple angles of the same product and image galleries are also can be linked with a slideshow that allows you to view bigger versions of the same image and you know usually control that slideshow with your mouse or with your keyboard so um let's see some examples of image galleries here we are back on the adidas website and if we open up one of these categories and we open a product we can see an image gallery right here so we can use the controls to view you know the same product from various angles i can also use the arrows here i can click and kind of move around see a kind of a blown up version of the product i can also click this bit and it's going to show me an even bigger picture right so that's one use of an image slideshow uh what about this website for grovemate well this also has an image gallery right here but it's a little bit different you simply drag with your mouse and it's going to show you the images from the slideshow pretty cool you can also click and that's going to cycle through them here's another example this is for like a real real estate website and if you scroll all the way down here is a nice gallery with some interesting hover effects and i can also cycle through these like so so very nicely done this is a very very smooth gallery here is another one right you have a bunch of pictures here and you simply click on one of them and then you can move on very cool see how many uses there are for image galleries essentially you know they do the same thing they present you know several images but there are so many ways that you can implement an image gallery we have another one from this website here you simply hover on a picture and it's going to show you a bigger version of it pretty cool and also we have gallery on the apple website for airpods max so if we scroll all the way down to the colors you'll see that when i change the color using this picker the images also change so this is another use or another implementation for an image gallery so then key takeaways an image gallery is a way of displaying a collection of images while allowing users to see several images at once image galleries are heavily used in online stores to show product variations or angles galleries can also be linked to a slideshow that will display larger versions of the images okay so now that we've seen some examples of image galleries let's see how we can implement one for our website coming up [Music] based on the wireframe our website also has an image gallery although hours is a bit more like a portfolio showcase but because we're only going to display images there i think we can safely categorize it as an image gallery so let's get to work this is what we have in the wireframe we have a title small description and then a list of you know the portfolio entries where we'll display a single image and these are also cut off by um a testimonial although we're not gonna deal with this right now that's for a future lesson but yeah that's that's basically it so let's go ahead and start with this section right here first of all it has an auto layout applied to it with 32 pixels of spacing between items and it's aligned in the middle let's also align it in the middle of the page like so and let's position it at 256 pixels from the element above it and remember 256 is the distance we set as default between the major sections of our layout so we're going to use the same here now let's apply some typography to this uh this should be an h3 based on the positioning in the in the layout so let's choose h3 from here but the thing is i want this to be bold right now the h3s that i have or the h3 style that i set is light but i want it to be bold so i can have both a light version and a bold version uh to do that simply you can unlink or detach the style and choose bold and then you if you want you can create another style called h3 bolt so now you have two options basically you can use the h3 bolt or the regular h3 this should be a paragraph so let's set that see how easy it is with text styles you don't have to worry about remembering the exact text properties you just create a font style or a text style and you use it when you need to awesome next let's see about these images and i've prepared a couple of images now normally for a real project i would use uh images from like real client work but because this is a demo project i'm just going to use some placeholder images that i got from envato elements they're a collection from various ui kits that i found on elements and you can find links to that down below now what i'm going to do is simply delete these because i'm not going to use this exact structure so in fact i i might just leave one of them like so because i want to use it as a background so let me reposition it like that and then i also want to leave a fixed amount of space between this element and the title and i'm going to use half the distance i used from here to here so 256 divided by 2 is 128 also a multiple of 8 of course so just move this down 128 just like that now let's see about those images i have a couple prepared and i'm just going to copy and paste them for convenience all right this is one of them and it's actually the the exact size that we need and that size i calculated like so uh the first guide that we created was at 64 pixels so i'm going to add another one at 128 on both sides okay so basically we have 128 pixels of space now on the left and on the right and this image fits within exactly that amount now here's the thing this is not like an image that you would drag and drop and it would be standalone it's actually a shape with an image background and using it like this allows me to use various fill modes like fit crop tile and so on i have it set to fill so i can easily resize this image container basically and it's only going to display parts of that image which fit in the container as you can see the image is much bigger but i can choose how much of it i want to display so for height i'm actually just going to go with 800 pixels because that's divisible by eight the eight point system and between the image and this background i'm also going to use 128 pixels however i want this background to also have 128 pixel distance between this edge and this edge you know what i mean so i'm just gonna make it slightly bigger until this distance right here this is 128 pixels and i think it just creates a nice visual balance because i'm essentially moving this element down 128 pixels and finally i'm not going to leave that gray background instead what we can do is we can sample a color from the actual image like so or maybe we want something from this side you can press i on the keyboard to sample it it really depends on you know how you want to combine the colors but i find that picking the primary or the accent color from an image works really well so i'm going to stick with this purple cool so that's the first portfolio entry we can now duplicate this and create the other entries let me just move this down so holding down option or alt and shift i can just drag and drop to create a copy and i want to make sure that i have 128 pixels of distance between these two elements and let's get the other images and again just for convenience i'm simply going to paste these in like so same deal these are basically shapes that have an image background set to fill and i just went ahead and arranged them in this fashion just to give them a scattered look and now i can simply do 1 2 3 4 5 6 7 8 9 10 11 12 13 that's 130 pixels from the edge it's actually a bit more and then one two to create that 128 pixel gap make sure everything is right here 128 these are nicely aligned to my guides and then finally i'm gonna take this sample color let's go with this uh with this green like so or maybe this one i think it's actually the same color so that's the second entry and finally for the third entry let me move this content a little bit further down again holding down shift and alt holding down shift and command to select the items in this group delete those and let's paste in the final portfolio entry let's make sure this is sized accordingly so holding down command shift arrow up we go 10 20 30 40 50 60 70 80 90 100 110 120 and then i'm letting go of shift so i go in increments of one so we go one two three four five six seven eight to reduce the height so now we are at 128 pixels and finally let's sample the color let's go with this one nice and let's not forget we also must include this testimonial part in the portfolio area but we'll do that in in the future lesson for now this is our image gallery and we chose to present it like this as usual now it's your turn to create the image gallery for the website or the portfolio section and while it's totally okay to copy exactly what i did i encourage you to explore a different layout maybe one that uses columns or maybe you can draw some inspiration from the examples i showed you previously so make it your own get inspired and try and create something unique with that said let's move on to the next pattern on our list which is the footer [Music] all right time to work with footers but first of all let's try and define them a website's footer is an area positioned at the bottom of every page in a website right below the main content now footers usually contain information that help with the usability of the website for example a navigation menu placed in the footer allow allows users to navigate the website without having to scroll all the way back up a call to action placed in the footer will actually help a user make a decision much easier because it's you know right there so he doesn't have to go back up plus it's a very strategic uh place to position a call to action because you read the website from top to bottom so on a landing page for example you read from the top you see the main message you see the benefits of using maybe some user testimonials and once you get to the bottom maybe you've already made up your mind and you're ready to go you see that call to action and you're more inclined to uh to make a decision right then and there and the examples can go on and on uh the footer is also a perfect place for content that doesn't really belong anywhere else in the page things like copyright text links to external resources uh social media icons right all of these have a really good place in the footer so let's go ahead and see some examples let's start with the adidas website and the footer here if we scroll all the way down contains a call to action displayed in a very bright yellow and also it contains a site map and a site map is basically a list of your website's pages this is really really important for seo and then at the very bottom we have a location selector we have the copyright text and some links that don't really belong anywhere else like cookie settings privacy policy terms and conditions and so on let's go to grove made where we also have a very simple footer this one has a scroll to top button or go up as it's called here and then we have a navigation menu a newsletter sign up right this is another type of call to action and then the usual links copyright text and social media icons next up let's see the stripe website here we also have a pretty interesting footer we have the call to action uh some additional content that sends the user to various parts of the website and then a big site map information about the location and also probably a language switcher yep there it is and then a very simple copyright copyright text right here if we go to the avacode website we can also see links to very important pages and the website we can see logo this is also [Music] practiced a lot site map another call to action here very interesting and the usual copyright social and links and finally let's take a look at the timely websites footer here we also have a big call to action with you know benefits for signing up and then we have the company logo we have some awards here next to this uh this call to action button uh some links for downloading and then sitemap and then finally copyright social and the usual links so a lot of similarities between the footers of all of these websites but also some pretty big differences all in all this should give you a really good idea of um what a footer should contain and how other designers would implement this common pattern in a website all right now time for some key takeaways a website's footer is an area positioned at the bottom of every page on a website right below the main content footers usually contain information that improve the usability of the website footers also display content that doesn't belong anywhere else like copyright text external links and sitemaps alright so now that we know what footers are all about let's go ahead and design our own that's coming up [Music] all right time to get busy again and use our massive knowledge of footers to create our own ready let's go so let's take a look at our footer it's made up of two sections basically so we have the call to action here and then the other one with the copyright info some links and the social media icons so then let's start by deleting this line here and i'm going to change things up a little bit here from the original wireframe so instead of this being a subtitle i'm going to make it a title and i'm going to make this be a regular paragraph like a description so let's start with that i'm going to use an h4 for this and a paragraph for this and let's not forget to make this black and this black 75 and i just remembered i think i forgot to apply the proper colors here yeah let's go ahead and do that right now black 75 perfect and i'm going to align the contents of the cta area with the contents of the cta area on the top so we're going to use the outermost guide the one at 256 pixels so let's scroll back down let's do a proper alignment here like so and i think this text is a bit too long so i'm going to make it just a tiny bit smaller i'm going to use 640 pixels for width why 640 you might ask well that's divisible by 8. so i really like that number this one also 640 pixels and the frame they're inside also has auto layout applied 32 pixels spacing between items that's perfect but one thing that i don't like is the way these are positioned right here i don't want them there so instead i'll delete them i'll go back up to my header and i'll just drag them from here because these are already styled they're already inside an auto layout frame so i don't have to do that again so i'm just gonna select one of the elements inside my auto layout frame and i'm gonna hit command v and that's gonna paste it immediately after now what about this this should be a button right so then let's go to our assets and i'll grab a button from here i also want this to be or to use the primary button style because i want it to stand out so going back here i'm just going to paste it in i'm going to change the text and i'm going to get rid of the icon and then i'm going to get rid of this and i'm going to select both of these shift a to add auto layout and i'm going to use the same distance between the button and the rest of the cta that i used previously on the top that's 96 pixels and if you scroll back up just to show you what i mean the distance between this button and this text is also 96. it's all about consistency right and that translates to paddings margins distances and so on so with that the cta section is pretty much complete let's just bring that up a little bit and now we can get started on this section here and actually this section is very much alike or very much like our header so to make things easier for me copy that i'm going to paste it down here make sure it's properly aligned like so and now all i have to do is replace the content so for this content i'm gonna use the paragraph style with black 75 percent and i'm gonna take this command x and i'm gonna paste it inside my header which will now be called footer so paste that in and actually the frame with auto layout is this one frame 23 so let's move it there and that's actually going to place it correctly within this auto layout and then i can just change its position like so i'm also going to delete this logo the two links will be privacy policy and terms and conditions we don't actually need these two separators here so we'll delete that and what else let's see delete these delete this one instead we'll place that line on the top of the element like so and i think actually for this piece of text i'm not going to use the paragraph style i'm going to use a smaller font size like 15 like the one i used here so we'll go 15 24 regular color black 75 let's make sure these have the proper color as well let's delete this and now what i'm going to do is position this a little bit further up so that we have the proper spacing of 256 pixels and while doing that i actually realized that i have a typo here in the header it says about me link instead of about me so let's fix that and that's pretty much done this is now our footer we have the cta and we have this section that has the copyright the external links and the social media icons so as you can see we made some slight changes compared to the original wireframe which had you know the contact info here this was a more of a subtitle instead of a title but as i said a wireframe is not final it doesn't dictate how elements are displayed or laid out in a page a wireframe simply provides you with the content and then as a ui designer it's your job to take that content and dress it up and make it look nice so we went from this to this let me actually zoom in here a little bit so you can see it better cool and that's how you can design a footer or one of the ways you can design a footer and of course now it's your task to design the footer for your version of the website so make it exactly like mine or do your own thing it doesn't really matter as long as you practice practice practice so let's move on now to the next pattern on our list which is testimonials and with that will actually wrap up the home page that's coming up all right testimonials what are they well basically they're nice things or hopefully nice things that your customers have to say about you you the business the brand and you would use testimonials to establish credibility so when someone sees that other people are saying good things about you they're much more likely to to become a client because you established credibility with them now before we look at some examples i want to give you probably the most important piece of advice and that is to not use fake testimonials ever it doesn't even matter if you're just getting started and you don't have clients don't use fake testimonials no testimonials is much better than fake testimonials so if you're a new business wait until you get some real feedback from your clients and then publish those testimonials trust me you'll thank me later oh and if you're wondering why you shouldn't use fake testimonials well first of all it's unethical it's manipulative and second of all it's also illegal so there you go now let's see some examples the first example comes from the asana website which is a project management tool so if we scroll down and i mean all the way down we can find a nice section for testimonials and as you can see they have a video testimonial here from ashley george we have the actual quote here the logo of the client's company and also here we can see the testimonial author and its position right and then you can use this to view the rest of the testimonials which is pretty cool it's like a slider very nice see how they're using real people real testimonials that's exactly what you should do as well let's go to convertkit which is another great website and we can find their testimonials here we have pictures of the testimonial author some other pictures for context you know the testimonial itself and here we can you know cycle between the different testimonials very nicely done so here they don't have a slider like a sauna but they have kind of a tabbed interface that you can use to cycle between these pretty cool uh next we are seeing the website of your next agency and if we scroll down we can find the section for testimonials right here and this is yet another type of slider you can use these controls you can just click on them you can you know use the heart bullet points here to switch between them and again picture name position and the testimonial itself next one is from lattice ludus and their testimonials look something like this and instead of displaying like what you've been seeing so far they actually display tweets about this product or service and finally let's look at the envision app website and this presents testimonials a little bit differently they're using a much more minimalistic approach they just have one area here between the product features and they just display the quote the author the logo that's associated with the author and the picture very simple no slider no nothing so if you just want to display one great testimonial you can do that absolutely no problem if you want to display multiple testimonials you can also do that no problem it really depends on the the layout of your website so now let's take a look at some key takeaways testimonials are what clients have to say about your business use testimonials to build credibility with your audience never ever use fake testimonials it's unethical and illegal all right so now that we saw some real world implementations for testimonials let's go ahead and create our own that's coming up [Music] all right so our website has two places for the testimonials the home page and the about page and we'll use a slightly different style between these two pages let's begin we'll start with the home page where we have this one this is actually the very last element that we need to style so let's start with the text first i'm going to use the proper color here i'll use black and for the text properties i'm going to be using the h4 style but in this particular instance i want it to be light instead of bold for the font weight so i'm gonna detach uh the style and i'm just gonna change from bold to light and if we want we can create another text style we're gonna call it h4 light cool next let's see about this text we're going to use black and actually i want to use a different style for the second piece of text and we'll be using black 75 as for the text style let's go proxima nova let's see what styles we have selected here we have saved here we don't have any that would match what we need uh the thing is i want it to be a bit uh smaller than a typical paragraph so we're going to use the same style that we used for some of these links here in the footer which is a bold 15 font size and 24 line height so let's do that so proxima nova bold 15 24 and this will keep it regular 15 24. let's uh group these two into an auto layout frame and i'm going to use 32 pixel spacing between items and i'm going to align them in the center like so and actually 32 pixels is way too much let's go with like eight or maybe actually let's do no spacing because they have their own line heights and i think this would actually work out pretty well i'm actually going to keep the exact same style for the avatar and the company logo here i think they look really good but i'm just going to change the fill here to maybe a black 10 and this is actually supposed to overlay but because we have a transparency we don't get that cut off effect here so what i'm going to do is i'm going to sample the exact color and i'm going to use that one instead 100 opacity just like that making sure the logo has the proper black color and let's see the distance here is 32 pixels that's spot on and the distance here between the text and the other elements is 64 pixels and that should work out just fine and then finally i think i'm going to make this just a little bit bigger something like 800 pixels and then take this align it in in the middle and i'm actually gonna move this up the second and the third portfolio entry making sure of course the dimensions or the margins here are exactly the same so 128. so let's move this down let's bring this up oops i didn't click it making sure that it's 128 from that portfolio entry bring this up until it matches and we're done that's the first style for our testimonial now i'm going to copy this and i'm going to move on to the about page and we're still using the wireframe here and what i can do is i can delete this bit i can paste in my testimonial and we also need to make this bigger 1800 pixels don't worry about the rest of the elements some of them will be designing in this course while others will be up to you to uh to design for your assignment but you know i'll also provide the finished design so you can you can see exactly what i did so for this particular style i want to make this text a little bit smaller so we'll go with probably an h5 like so and i'm going to take the entire frame i'm going to give it a fill color of white and before we do anything else let's get rid of this bit we don't need it i want to add like a solid faded background behind these so that the containers that have the testimonials look like cards okay so let's grab the rectangle tool draw a rectangle something like that i'm going to use command and left square bracket to bring it or to send it to the back of this element you can also right click and you can say bring to front send to back so you know bringing to the front sending to the back just alters the order of the layers here in figma so if you want an element to be on top of another you just change its order okay and for the fill color let's go with black 10 that should work out pretty well maybe black five that's a bit it's a bit too low in terms of transparency so let's go with black 10. okay so i'm gonna just do this and i'm gonna give it the proper width and then i'm gonna add some padding to this element so i'm going to go here under auto layout and i'm going to say 128 top 64 right 128 again on the bottom and again 64 for the left let's also give this a nice border radius maybe like eight pixels and then let's um give it a drop shadow now for the drop shadow you can use a similar process like we did on the buttons we used the smooth shadow plugin and this creates layered shadows which look much much better than a single shadow or you can do a single shadow it really depends on how you want it to look uh for me personally i like the appearance of this one i'm not going to tamper with this i'm just going to apply the shadow directly now we actually need to fit uh two of these in this page so we need to make the text here a little bit smaller i'm thinking something around 640 pixels something like that and we also need to opposition correctly from the edges so for that shift r to bring up the rulers and we're going to create some guides so the first one is going to be at 128 pixels and the other one is going to be at 16.72 and i just use the home page as a as a reference so 1672 just like that and we can actually work out exactly how wide these elements can be uh let's move this out of the way for now and let's do a simple calculation right so first of all let's figure out how wide this container needs to be and for that we can do a simple calculation we can say the following our page here is 1800 pixels from that we subtract 128 pixels from each side so that's 256. and we also subtract the gap that we want between the two testimonials let's say 96 pixels and that gives us 14 48. so 1448 divided by 2 gives us 724 pixels so we're actually very close right now this element is 726 pixels that means we just need to resize this to 596 and now we have the correct width for our element so now we can duplicate it we can position it align it with the guides like so and now we should have exactly 96 pixels in between let's um change the text here i'm just going to copy and paste and let's also change the author like so and we also need to change these two elements so i'm just gonna copy those i'm gonna paste them in remove the old one and make sure the fill here is set to the correct color black or sorry we actually need to to get a solid color from here and the logo should be set to black like so and finally let's go ahead and group these two command g and i want to position these in such a way that they have 128 pixels on the top as padding and let's resize this bit let's move this down and i'm going to resize this bit like so so that we have 128 pixels on the bottom as well shift r to hide the rulers and the guides and there you have it this is the second testimonial section and with that we've covered one more pattern the testimonials and now of course it's your turn to design the testimonials for your version of the website and as always i encourage you to explore different layouts from or compared to what i'm doing in uh in my version of the website uh once you do that you'll be ready to move on to the next pattern which is tabs more about that coming up [Music] all right let's talk about tabs and i'm sure most of you know by now what a tab control is but uh just in case you don't let's uh take a look at a quick definition a tab control is a ui element where content is separated into different panels with only one panel visible at a time the hidden panels can then be accessed through user interaction tabs are used for displaying large amounts of content in a relatively small area and while they can be styled in a variety of ways the basic operating principle remains the same so let's have a look at some examples first one is from avocode and if we scroll down to the testimonial section we can see tabs being used here instead of a traditional slider so you basically click on tab link to change the content of the tab control basically pretty cool implementation uh moving on to timely uh here we have some tabs uh right here also for testimonials right and clicking these will basically change this area right here next let's go to omnitype and if we scroll down this is an ecommerce website by the way and we can change this area right here we can view information like specifications shipping info reviews where to buy and so on this is actually used a lot in certain themes for e-commerce where these informations are presented under various tab controls next let's go to drop and they also use tabs to separate the various types of content for each product like so then we have a nice website here canal street market and they are using tabs as navigation basically so if you want to see the various uh sections of the website you would use this kind of tabbed control which is pretty cool use and then you can go back to the home page and then finally we have the imagineers website which also uses tabs for navigation so as you can see there are a bunch of uses for tabs they're not just for dividing blocks of content in in the main areas of the website but you can also use them for the entire website content as navigation you can also use them for testimonials like we've seen in these two examples so tab controls are pretty versatile now for some key takeaways a tab control is a ui element where content is separated into different panels with only one panel visible at a time tabs are used for displaying large amounts of content in a relatively small area while tabs can be styled differently the operating principle is the same okay so now it's time to design some tabs for our project see you in a bit based on the wireframes the tab control that we need to design is in the about page and its purpose is to present the tools that robert fox is using for both design and development so let's get started we are back in figma so let's go ahead and zoom in here i'm just going to move these out of the way and i'm going to focus solely on the tab controls so the idea here is pretty simple we have two tab links that say tools are used for design tools are used for development and whenever we click on one of these this content here will change and to represent this type of content which is basically a list we can do a lot of things we can use a simple like text list but that would be too boring and uninteresting so instead i'm thinking we'll use we'll keep the same principle that we have here so boxes or cards or whatever you want to call them but i also want to add some imagery and i'm thinking the logos of the actual tools so the sketch logo figma adobe xd logo and so on and so forth but first of all let's start with the tab links and i'm thinking of using a similar design that i use for the buttons so something rounded like this like a pill shape but without the shadow the button or the text should keep the exact same style but in terms of color they'll be much more muted so i'm thinking you know just something two shades of the black color that we're using to represent the active tab and the inactive tab so let's go ahead and do that let's see we are using 24 pixel and 48 pixel for padding so let's keep that in mind and let's go back to our design let's see do we have an auto layout frame we do so let's remove the distance here between items let's set 24 48 for the padding like so make sure the item distribution is set to packed and also this shouldn't be a fixed width just set hug contents here and that means the the parent frame will just resize to fit whatever text i have inside here so now if i change the text for example you see the the parent element just resizes along with it which is exactly what we want then i'm gonna remove the stroke and for fill i'm going to use black let's also give this like a 100 border radius to make it round the text inside let's select both of these that's going to be proxima nova bold 15 font size 24 line height and let's make this white and let's make this black 50. and actually you know what let's uh remove this one and let's duplicate this frame because it's much easier like that and now all i have to do is change the text black 50 and the background color to black 10 just like that now let's select the parent container for these two elements and this has auto layout applied that's good but i also want to give this a fill color so let's go with black 10 let's also make this round let's give it an 8 pixel padding and let's remove that spacing between items like so so then i can go to this element and i'm going to remove the background okay so now it looks like we have an active tab and then when this is clicked they're gonna swap styles right this will have the dark background this will have no background does that make sense so those are the tab links now let's focus on the tab content here and i'm going to start with with this one with sketch let me bring in a sketch logo and this is pretty easy to come by just search google for you know sketch logo svg or vector and then i'm going to select the parent frame which has auto layout applied and i'm going to switch this direction from horizontal to vertical i'm going to set a spacing between items at 16 32 for padding i'm going to move the text below the image i'm also going to make sure that all the items inside are centered like so and then the text should use the h6 style just like that and then the background should be black 10 so that it matches what we have here and i can also round off the corners by using 8 pixel as a border radius now for the rest it's really simple i can actually select all of them apply the correct fill apply the correct border radius 16 32 make sure everything is aligned in the middle then i can select the texts text elements and i can make sure they all use the h6 style we defined and then we can simply copy and paste the rest of the logos so here is the one for figma and also yes i forgot to change the auto layout direction from horizontal to vertical like so here's the adobe xd one and oh let's also change this back to where it's supposed to be uh we actually did this once but we had the direction set to horizontal but then when we switched it to vertical it was still aligning everything in the middle but it was doing that based on the original direction so now that we change the direction to vertical we need to also reapply the alignment here let's grab the photoshop logo like so and by the way all of these are 48 by 48 again multiple of eight and finally the one for illustrator cool now you can see these are not sized equally and i don't want that i want every single one of these cards to have equal size regardless of the content inside so how do we do that well it's actually pretty simple i have a frame with auto layout correct well i can resize this the parent frame so that it's full width but also it has the correct spacing from the edges like so so 128 128 we can even bring in the guides and resize it like that so with that done we can select each one of these elements and under resizing instead of hug contents which will resize it to fit the exact contents of each element we're going to set it to fill container and fill container basically tells each box to be as wide as the container as the parent container which in our case is 1544 pixels but because we have several items that distance is divided between each one and each gets a fixed equal width of 296 pixels you'll see that when we resize the parent container these elements are resizing along with it which is really cool this is such a cool functionality in and it actually gets us really close to real world behavior so when you're developing this website and you're writing the css for it you can use something called fluxbox which behaves in exactly the same way and then finally let's grab this and position it at i would say 96 pixels from the tab control and 96 pixels is a measurement that we've used in other places for example here right the distance between this button and the text is 96 pixels so we're using it the same here but obviously you know you can position it in any way that you see fit if this looks better to you then go ahead use this measurement but since we're using the eight point system make sure the distance you're using is a multiple of eight uh in my case i think 96 pixels actually looks just fine for this application so i'm gonna stick with it so there you have it that is our finished tab control and if you want to design the other part the development well all you have to do is move the active state to this link and just change the content here to whatever you want right then the tab control is done we've crossed it off our list and now we can move on as usual now it's your turn to design the tab control and once you do that we are ready to move on to the next pattern which is the accordion so that's coming up [Music] okay let's talk about accordions uh these are box shaped musical instruments of the bellows driven free read aerophone type hold on i think i searched the wrong wikipedia page here how about we try that again okay let's talk about accordions now in ui design uh these are very similar to tab controls in the sense that the content is split up in multiple panels which can be opened by the user however unlike tabs accordions can display multiple panels at once and they're used for simpler content like text this is a very popular ui pattern for an faq section that stands for frequently asked questions so let me show you some examples we are on tesco's website we're looking at the frequently asked questions uh section and here they have a very simple design with an accordion that allows us to open multiple panels at once and this accordion is also nested right so we have an accordion within an accordion the next example is from heineken and let me actually confirm my age here so on their faq page they can also or they also display an accordion which looks like this uh the difference here is that they kind of organize uh their questions into various categories but at the end of the day it's still an accordion next we have the website from material kitchen and again this uses a slightly different approach in the sense that we can only display one accordion panel at a time and this is not animated so it's kind of choppy but it's an accordion nonetheless next we have the urban jungle beauty website which again uses some nice animated accordions to display frequent questions and answers and again this has the accordion items kind of organized into various categories and finally we have another faq page but this time the layout is very different from what we've seen so far the functionality is of course the same but the questions themselves are like this play in in this big section here and we have one for each question very interesting but in the end yes it is an accordion pretty cool so now let's take a look at some key takeaways accordions are similar to tabs in the sense that content is split up in multiple panels which can be opened by the user however unlike tabs accordions can display multiple panels at once and they're used for simpler content like text accordions are used heavily in faq pages or frequently asked questions okay so now that we saw what an accordion is and we also saw how other people are designing accordions let's have a go at it that's coming up [Music] based on the wireframes our accordion is for a q a section inside the contact page so uh let's get to it so i brought in the wireframe into my design page and i'm just gonna zoom in here because this section is in between these two and it's kind of in the middle of the page i think a darker background would work just like we did here for the testimonials so i'm going to copy that and i'm going to paste it in here like so making sure it's in the correct frame and because we are using the darker background approach we don't actually need these separators let's move that to the to the back and then we'll start as usual with the typography let's move this let's align it with the 256 guide and for the title here let's set the color to black and for the text let's use an h3 like this let's make it a little bit bigger something like 640 pixels and then let's start with each individual item in this list in the wireframe i just used a plus sign here but we're going to delete that we're going to use an uh an icon for uh plus or we can use an arrow down it really depends on how we want it to look but i think i'll use the you know the plus i think it looks good so first let's see about the typography i'm going to be using proxima nova bold 21 for font size 30 for line height i want to make it the same size as a regular paragraph basically but for the color because this is not the active item i'm going to make it black 50 i think would work well let's actually check the contrast so i'm going to use the background as this gray and this one as the text and we do get a good contrast so that what that's what we'll use next let's see about that icon and to draw it it's actually very simple let's grab the line tool and let's draw a line that's about 12 pixels in width and let's make the stroke 3 pixels and for the color i'm going to be using secondary okay so now we can just duplicate this command d and then holding down shift will rotate it and actually we'll make it 13 pixels just so we we can properly align these two something like this and then we can just group it up and that's going to be our plus sign now let's take this and i'm going to paste it here inside this this frame which has by the way auto layout applied as you can see here but i'm going to take this and the text shift a to create my own auto layout and i'm going to make it horizontal i'm going to align everything in the middle like so the text should actually be to the right of the plus sign and then i'll use 16 pixels as a distance between the icon and the text okay and let's also make this parent element 640 pixels and i'll have each question or each question frame set to fill container so that it matches the width of the parent next up let's create a separating line and let's set this to fill container and i'm going to set the stroke to black 25 maybe black 10 no black 25 should should work just fine and then select the parent frame and set the distance between items to 32 just like that now it's simply a matter of duplicating this element for the rest of the questions and also setting the proper style for the answer so let's go ahead and do that we need 1 two three four more items so let's duplicate that along with the separator so that's one two three four and then we can grab each separator and just move it whenever wherever we need like so let's make some more room here for for our content let's move this down like so maybe make this a little bit bigger we'll resize it later on now it's simply a matter of putting the right questions in and let's go ahead and delete this this on this and then for the answer or the expanded version of the accordion here's what we'll do we'll grab this that says i do not charge by the hour and i'm actually gonna place it inside my parent element let's go ahead and move that up to right here and then i'll grab these two shift a to add another auto layout frame i'm going to set the distance to 16 pixels i'm going to set the text style to paragraph for this one i'm going to make sure that this is set to fill container i also need to offset the distance here right so the distance from this text to the edge is what 29 pixels so let's do that let's add a auto layout to it as well set this value to zero and then the left padding set it to 29 like so the rest can be set to zero and finally grab this because it's the active link set it to black and also make a quick change to the icon let's turn it into a minus instead of a plus and if you feel that this isn't aligned properly well you can't really move it down because it's using the parent element is using auto layout so it doesn't work but you can apply auto layout to it in fact we already have a group set up for it so let's apply auto layout and we can apply a margin or sorry a padding manually let's say three pixels and that's going to push it down slightly and by doing that we created the expanded version and let's actually set this to fill and also its parent element we're gonna set it to fill and finally let's get this whole thing move it up so that we have the proper padding like so and then let's hide the rulers and that is our accordion which we used to create a frequently asked questions section in our design okay so my version of the accordion is done now it's your turn once you finish that and you're happy with the result we can move on to the final pattern on our list and that is the contact form coming up i'm sure we don't really need the definition for this pattern right it's pretty self-explanatory a contact form is a web form that people use to contact you now my only advice here would be to keep it simple you need to make it as easy as possible for people to get in touch with you to send you a message therefore keep your contact form simple in the end you don't really need to know the shoe size of the person who's contacted right or what they had for breakfast all you need is their name email address and their message that's the bare minimum so let's have a look now at a few real world examples of contact forms and see how other people are designing them let's look at the avocade website they're using a pretty simple form so they they ask for name email phone number and message but also a few additional fields that they consider to be required like what's the company name and what's the company size and also the purpose of the inquiry this is okay when you're you know you're a big organization you have maybe multiple uh support channels so for example selecting the purpose of your inquiry will uh direct that message to the proper team let's look at another example from made by chroma and we have a contact form here that's to be honest a little bit too large in my opinion a lot of fields they're asking for name email business name website what services you're interested in and the budget and how long you've been in business some business backgrounds additional details how did you hear about us and granted these two fields are not mandatory so you can skip them but even so it feels maybe a little bit too stuffy for for a contact form uh let's go to sketch.com they have a much simpler contact form so email they're not even asking for a name uh which topic or what's the purpose of the of the contact email subject and full description and that's it next we have a contact form from gradient or gradient very simple name email message send and that's it and finally let's take a look at monday.com they also have a relatively simple contact form first and last name email phone company name on company size and of course the message so that's it in terms of structure also i want you to pay attention to how these fields are laid out right so in a typical form you would find everything kind of in one column like chroma is doing here sketch is also doing that gradienta is also doing that but you also have cases where you can display form fields side by side like this and also notice the label of each field is positioned on top of the field on top of the input that's also a detail that you need to pay attention to and also on monday they they're using a similar layout they have two columns here a full column here just in case the phone number is larger and then two columns again one column for the message also notice the the position of the label above the field and of course the examples can go on and on pretty much every website nowadays has a contact form so if you want more examples just check out your favorite websites but for now with these examples all taken care of let's take a look at some key takeaways keep your contact form simple so that your potential clients can easily get in touch as a minimum a contact form should require a name an email address and the message okay so now that we've seen what's out there and how other people are designing their contact forms let's take care of our own that's coming up [Music] okay so based on the wireframe the contact form is placed in the contact page imagine that so uh let's get started so let's uh zoom in to our contact page and this is the wireframe of course so now it's our job to take this raw form and polish it give it a good coat of paint and make it look awesome so then let's start by actually ungrouping it i'm thinking because i have this horizontal space available to me on the larger versions or on the versions for larger screens i'm going to have a side-by-side layout so text on this side form on that side and also having all this text in like a big heading seems a bit excessive so instead i'll split it up in two and i'm gonna have this as a paragraph and i'm gonna have this as maybe an h3 like this and maybe we'll use the bold version do we have a bold version h3 bold we do so let's use that so now this as for color should be black 75 this should be black let's shift a to add an order layout set the distance between them to 32 and i think that's going to be just fine so now let's turn our attention to the contact form i think i'm going to make both of these sections equal in size and have a nice generous gap between them right so let's see how we can make actually a simple calculation here this is the amount of available space we have let's say i want to subtract 128 pixels as the gap between so the size would be 1544 minus 128 and then we'll divide this by 2 and that gives us 708 pixels and actually keep that because i want to get a guide in here just like this so now you know i can make this 708 pixels and now my form will span from here to here basically so then let's take every single one of these fields and we'll have it fill the container and let's get to styling these fields first of all let's set their background color to black 10. let's make rounded corners using 8 pixels as value and for padding let's use 24 pixels on all of them like that let's target the text inside i'm going to be using proxmonova regular and you know what actually i'm going to use the same style as the paragraph but for color i'm going to use black okay so this should be the the style of the text that's inside the input uh now we need to add the labels right so for that let's actually copy a piece of text from here let's move it up and let's call this your name it's also going to be 2130 for font size and line height but i'm going to switch to bold and then i'm going to group up these two elements and i'm going to set a distance between them of 8 pixels and let's move on duplicate this this is for email this is for project details budget range and timeline so let's change the text here like so and then finally we need to do the same shift a change the distance to 8 pixels between the input and the label shift a eight and finally we have these two shift a eight pixels there we're almost done but the one thing that i don't like is that this form is pretty tall right and we have certain fields like name and email address that don't need to be this long budget range timeline also they can be a lot smaller so what i can do here is i can take these i can shift a to add all the layout and then i can change the orientation to horizontal and then i can make sure that both of these items are set to fill container and then i'm going to take the parent and i'm going to resize it to fit my layout and let's see what happened here so this is set to fill container fill container oh we must also set these to fill container like so so now no matter how much i resize my parent those two fields will automatically resize with it which is awesome let's do the exact same thing for these two elements so select shift a change this to horizontal and then resize it while making sure that everything inside is set to fill container and we also have some other frames inside this which we need to set as fill container just like that and this as well and of course project details this can span the entire width so let's make sure fill container is applied everywhere and now you'll see that everything resizes accordingly awesome now let's see about the button for that i'll go to my assets i'll grab a button from here and then just paste it in let's delete the old one also let's delete this icon because we're gonna replace it so let's open our icon set up and let's search for uh an icon that's meaningful to to this button so the button basically sends a message so let's look for a paper plane let's look at all the icons and let's see what icon we can find that has the style that we're looking for which is kind of an outline style so this could probably work from font awesome maybe this one which is very very similar maybe this one from iron icons but i think i'll go with the one from from font awesome v5 so let's resize this to 32 maybe a bit less 24 something like that let's make it white and maybe for this uh for this button we could do with a more clear message so let's just say send message and now i want to make this button fill in all the available space in the form so make it full width basically so instead of hug contents i'm going to set it as fill container and i'm going to align the text to the middle and that's it now let's take these two elements shift a to add auto layout and i'm going to align them vertically like so so then i can take my form make sure the distance from it to the section above it is 256 pixels and we're almost done this is the contact form that we designed but there's also one last thing we need to do here and that is to create alternate states for these inputs like what happens when user focuses the input how does it look like or when an input is disabled okay so let's go ahead and take this element and let's go back to our assets page let's create a frame inside here you can name the this form controls let's paste that in right so this would be the default let's do one for focus slash hover so when we hover with our mouse over it or when we focus it with you know our mouse or our keyboard it's going to look exactly the same and when that happens let's uh do the following let's maybe add a small stroke so stroke one pixel on the inside uh for color let's add black 25 and let's also reduce the opacity of the background color to black to black five excuse me just like that and maybe increase the uh the stroke to black 10 like so or i guess we can go one higher black 25 yeah that should work just fine and then let's do another state for disabled this time we'll take the text color and we'll drop it to like black 50. and also the stroke color will set it to black 10. so it's kind of very very muted and then finally let's create one alternative for the error state now for the error how about we do the following we also add a stroke that's going to be the color of error but let's make the background color white something like that and we can even go one step further and make the color of the text red and that should give us a clear indication that hey there is an error in this field so with that done and with our form complete we actually finished all the common patterns that we set out to explore we started with the header and then we moved on to the hero to the buttons um the image gallery we covered tabs and accordions and we ended up with the contact form so now it's your turn to complete or to design the contact form for your version of of the website and as always be adventurous try out new things new layouts and see what you come up with on top of that you should now make an effort to finish designing the rest of the elements in the website if you haven't already you saw that i didn't cover everything because that would make this course way too long but i did fill in the gaps off-camera so now my design is complete and once you've done that once you've completed the entire design you're ready to move on and we are actually moving on to responsive web design now this is a it's a pretty big topic but i'll try and make it as simple as possible while also trying to show you how to apply the principles of responsive web design to certain elements in uh in our project and that's coming up [Music] all right let's talk about responsive websites and i want to start by telling you a short story in the early days of the internet meaning late 90s early 2000s all websites were non-responsive meaning you would create a design code it and that would be the final version for everyone and that was okay because the majority of computers back then were using uh screens of similar size usually 800 by 600 or 1024 by 768. fast forward to when smartphones started to become popular and people were using them to browse the internet but those small devices had problems displaying websites properly because websites were designed for much bigger screens then came the idea to create a separate version of the website that would only open on mobile devices while the original version would open on computers with larger screens that mobile version would be hosted on a subdomain called m these were also referred to as m dots so m.domain.com that would serve a user the mobile version of that website facebook even today in 2022 still has that functionality if you go to m.facebook.com you'll get a mobile version of facebook and that worked for a while but it soon started to become problematic first of all you had two versions of a website that you needed to manage and that was time consuming any change that you would make to one version of the website you'd have to make to the other version uh second of all smartphones started to become more and more popular and more and more companies were making them in different sizes and that was the biggest problem of them all because suddenly your mobile device or your mobile version excuse me wasn't guaranteed to work on every single smartphone size out there and creating a separate version for every single smartphone size was just preposterous so what to do well thankfully we have an amazing human being in our community and his name is ethan marcotte in 2010 he wrote this article for a list apart where he outlined a new way of thinking about flexible web design he named it responsive web design and this term stuck ever since and ethan is actually credited for coining this term based on that article and the widespread adoption of media queries in 2012 responsive web design became a standard so no more mobile subdomains but instead one website which will adapt its layout or respond to various screen sizes that's the essence of responsive web design so then what have we learned from this lesson well first of all in the early days of the internet all websites were non-responsive after mobile devices came out developers were using a sub-domain to serve a mobile version of the website in 2010 ethan marcotte wrote about responsive web design and that became the standard that we all use today okay so with this short introduction out of the way let's see how we can apply some of the principles of responsive web design to our project that's coming up okay so first let's see what kind of problems our layouts might face when displayed on a smaller screen and after that we'll think about some solutions what you see here is the finished design as i was saying previously i kind of filled in the gaps as we were going along and i completed the entire design for this project off-camera and i also did it in a way that allows me to select this main container for all my elements and resize it and all the other elements inside the container will resize as well and this way i can easily mimic you know resizing a browser window and try and see the potential issues that my layouts can have on different screen sizes and this is done of course in figma it's using the auto layout feature and all the resizing options like uh hug contents and fill container that's a bit more advanced and maybe i'll do a separate course on that in the future let us know down in the comments if you would like to see that but for now let's have a look at some of these pages and see the problems that we might have on smaller screens so i'm going to start by resizing the contents of the home page and as you can see even on smaller sizes things are still looking pretty good let's uh scroll down here the images because i'm using them as backgrounds are doing okay but they are slowly becoming too tall right so this is one of the areas that we can improve on also because i offset this section for example by quite a lot when i'm getting to smaller screen sizes i have an imbalance right i i have more uh space here on the left compared to the right side so on a smaller screen this section would be moved to the left let's take a look at the about screen or the about me page i'm going to do the same thing another issue that we're facing on smaller screens this text should be a bit wider and also this entire section could be offset by a smaller margin so maybe align it with the menu items like this the images have the same issue they kind of resize width-wise but they also need to resize like this they need to be less tall so these columns are starting to become way too crowded for this screen size same goes for the um the testimonials and let's take a look at the contact page right so if we start to resize this one is actually doing pretty well but we will start to see some problems here in the contact form you see the email address is now cut off so in this instance instead of using two columns for some of these fields i might need to use a single column so these are the types of problems that you need to keep an eye out for responsive design is not just about you know how the navigation menu will look like on smaller screens and how you can you know hide that and swap it for like a menu button it's also about the contents the entire content of the page how is that being displayed in smaller screen sizes and the way you can go about that well there's more than one way actually and most people will do the following they would think okay let me design this page at 1800 pixels right at the size i have here and maybe they read online you know stuff about responsive web design and break points and they say okay i'm gonna follow the traditional break points 10 24 768 480. so what does that mean it means that on those breakpoints you're going to apply some changes to your layout okay but there's a problem with this approach let's say that your layout looks good on what did we have here 1800 pixels right and you wanna start making changes at a set breakpoint let's say 10 24 which is about let's say about this much but what if you're having problems with some elements before that 10 24 break point right so let's say i'm around i don't know 1200 something like this and 1200 is an area that you're still having problems with well that's the downside of using like these common breakpoints because they might work for some layouts but they might not work for others so my layout could do very well in the in the range of 1800 to let's say 1000 but other layouts might not other layouts might need the change around 1500 pixels right so relying on those fixed break points is not ideal instead what i do and i started doing recently is use ranges and i have three ranges defined in my project 1800 to 1200 and i call this a laptop range or a big screen range then i have a tablet range of 1200 to 600 and then i have a phone range with screen sizes of less than 600 pixels so what i usually do is i use this process in figma with auto layout and resizing and stuff to create my layouts in such a way that i can you know grab this container and resize it as i see fit and i just go slowly until i spot a problem and when i spot a problem that's when i add a breakpoint so in my case i started noticing that around 1200 pixels some elements were starting to be problematic right so it's around here so when my layout is 1200 pixels you know the images are getting a little bit too big here uh this section on the bottom will how will start to have more space on the left compared to on the right and the same goes for the other pages as well for example if i resize this bit to 1200 pixels if i look at the layout then it's still acceptable right apart from the email address being a bit too long but that's not such a big deal the rest of the elements still look good but as soon as i go under 1200 pixels some of the problems are starting to become more and more obvious so then i set up a breakpoint at 1200 pixels so that means that this is the time i start making changes and what exactly did i change well let me show you and i'm actually going to open the figma desktop app for this because it seems that some of the elements are not displayed correctly in the in the browser version so at 1200 pixels i did the following i moved the menu items in a hidden menu that can be accessed by clicking this button so the header is now different it looks like this let me actually hide the interface here i also started tweaking the font sizes for my type scale so if we look at the typography section here i have three different type scales i have one for laptop and above which is using 21 pixel font size as a base and 1 4 1 4 ratio so this is the scale that i've been using in this whole design process but then for tablet or that 1200 to 600 range i lowered the base font size from 21 to 18 pixels using the same ratio but lower font size lower base font size and that gave me another type scale than i that i can use so for the laptop range i replaced or i updated the font sizes on all the elements and then for the phone version i have yet another type scale this time 18 pixel base but i changed the ratio and i did that so that there wouldn't be so much contrast between the smaller font sizes and the bigger font sizes because if you think about it on a mobile phone you don't want to see super big font sizes it's just going to take up too much space so you need to work on the typography scale a little bit to you know have a difference between the headings and the base font size but it doesn't have to be that much of a difference if you know what i mean so then i of course went and got this type scale and i applied it to the phone range as you can see the font sizes for the headings are lower here than they are on the tablets and of course much lower than what i have here on the on the main design the one for larger screens so that's one part taking care of the typography i also started shrinking the distances the margins the paddings as we're going lower and lower in terms of screen size those distances need to get lower and lower as well because on smaller screens you don't have a lot of real estate to work with so you got to make sure that you're not wasting it by using you know too much white space so to give you an actual example the distance between each major section on large screens is 256. on the tablet that distance is reduced to 168 and on smaller screens the phone range that distance is only 96 and i did the same for the rest for example if you remember on the large screens the distance between this text and this button was 96 pixels but on the phone it's 64 pixels so we're doing you know incremental smaller changes that will basically allow our content to display properly on these smaller screens but at the same time without you know compromising uh readability and without making the layout look too cramped so then once i did that it was time to work on other areas that needed fixing for example the height of these images remember if we look here in the home page this image was 906 pixels in height here it's 640 pixels in height and that means that i can now resize it and still get a good enough ratio on the on the image i also moved this section a bit more to the left so now when i resize i still get good spacing to the left and to the right of the section without that imbalance that i told you earlier what else in the contact page i also did a couple of things here first of all instead of the two column layout i was using on the contact form section i now have one column with the text on the top and then the contact form at the bottom and also notice the contact form now uses full width for the first two form fields on the large screens these were sharing one column each also the footer is different here is the footer on a larger screen right so it's displayed like this contact copyright info menu social icons display displayed on one row but if we look here everything is now stacked one on top of the other so that means that i can now resize this and it's still gonna look great so those were the changes that i made for this range 1200 to 600 now how did i get to this 600 number well i repeated the exact process i started resizing my content until i could see some problems emerging and that's when i added another breakpoint in my case it was around 600 pixels so on 600 pixels when we have a very very small screen to work with i have yet another version of the header without the social icons this time the logos here are starting to become stacked i made these images even smaller in height 320 pixels and then i also checked uh what was happening on the other pages uh in uh in the about me page this gallery is now stacked and on the contact page also a few changes on the contact form to be more specific all the form fields are now full with in tablet mode these last two were actually being displayed on one column each so these are you know the the changes that you need to make you need to see okay typography wise on smaller screens is the text too big in certain areas if it is go ahead and change it use a different type scale you know and you can reduce either the base font size or the ratio like we did for the smaller range here and then you gotta check each section of your website how does it look when i make it this small maybe there are some sections that need to be displayed stacked like for example in the footer or maybe there are some things that i need to hide completely like we did for the navigation menu right here starting with the tablet range and also these social media icons that are completely hidden on mobile devices and that's all there is to it right it's kind of a recursive process you just got to go back and forth see what works what doesn't work on a specific range and then make the necessary adjustments now i only showed you a few changes here and you can see the full um website design including the responsive versions if you check out the link in the video description and you'll see exactly how i approach this problem now it's your turn so if you've been um you know doing things differently than me then awesome but it also means that you have to do the responsive changes yourself you cannot just a copy everything i did because the layouts will probably be different but yeah now it's up to you go ahead and make the responsive changes and do exactly as i said just go through each section resize it see how it works on smaller screens you might need to reposition some of the items manually if you're not using auto layout like i was but you know it's a learning process so i'm sure that at some point you'll get the hang of it but yeah once you do that you'll also come across a few components that will probably get you wondering like let's say tabs how do you make that into a responsive component well let me show you uh in the next lesson [Music] making a website responsive is not a very difficult task but every now and then you're gonna stumble upon a certain ui component that's gonna give you a hard time uh for example tables now we don't have any tables in our design but we do have tabs and this can prove or these can prove to be problematic at times so in this lesson i'm going to show you how to make a tab component responsive let's go so we are back here in figma and this is our starting point right we have this tab control that allow us to see the tools that our client uses for both design and development and the version we've designed right here works really well on larger screens but what about smaller screens so let's go ahead and copy this and i'm just gonna create a blank frame here we'll just make it eighteen hundred and let's make it a bit smaller this will serve as uh as our playing ground like so let's paste that in and now we'll do the following and let me actually make this bigger again and i'm going to duplicate this and i'll try and make it fit inside a 1200 pixel container for that let's draw a rectangle that's 1200 and let's go ahead and add some guides here just so we can see what the boundaries are so now we can delete that so then we'll resize this bit to 1200 i'm also going to resize this like so and as you can see when it's 1200 pixels it still looks pretty good but as soon as i start making it even smaller then we're getting to a point where we see changes that are not exactly right the text here goes on two rows maybe these are getting a little bit too cramped for you so let's try and find an alternative for that and remember the version that we're designing now should work very well between 1200 and 600 pixels which is the uh the limit or the range that we defined for our project so when i make the 600 pixels you can see that we have a lot of problems on both these elements here as well as on the tab links so let's actually start with the tab links this is a pretty easy fix all you have to do is re remove the parts that are repeating themselves and in our case it's the text tools i use for i use it here i use it here so if i remove that and i also remove that suddenly we have fixed the tab links right now they fit nicely in the range of 1200 to 600 which is about here now let's see what to do about these items and the easiest thing to do is make them smaller obviously but also stack them when you don't have enough space horizontally you can start stacking items and here's what we'll do let's make this oops let's resize this back up and we'll do the following we'll select each one of these items and we'll switch the auto layout from vertical to horizontal we'll then select all of the icons and we'll make them a little bit smaller 32 pixels instead of 48 and then again we'll select everything and we'll switch the padding around items from 32 to 24 and also the text elements select them and instead of fixed with just set them to hug contents and also we have a fixed height defined here just select hug contents so now we have to stack them and probably the easiest would be to just stack two of them on one row so you would do the following we have a big parent element here called tool list that lists these elements horizontally like this and then each item is represented by what i called here column so i'm going to select two of them shift a to group them up then the next two shift a and this one i can just leave by itself so now i can go to the parent container which is tool list i can change the direction to vertical and also the height i'm going to set it to hug contents now we seem to have a small issue with some of the elements here let's just change hug contents hog contents figma does that weird thing sometimes so now we can select the parent and make sure everything is aligned to the middle and then you can see that some of the elements don't quite resize or according to their contents so we can select that hug contents and let's do it for all of them just like that so now even if we resize this to 600 pixels and even lower than that it's still gonna look great but we can go too low like for example 355 because then we'll start getting into problems so for that we need to do yet another version so the one that we have now the second one works very well in the range of 1200 to 600. now we're gonna duplicate this and let's use a side of 600 pixels here to drag some guides and let's resize this to 600 pixels so then for this third version which should work on screens that are less than 600 pixels let's see what happens if we start resizing we get into the issue of not having enough space on the top possible solutions well we could probably decrease the amount of padding that we have on some of these uh buttons like for example 24 instead of 48 and that would partially solve the problem but it would also compromise on how this looks and i don't want to do that instead a pretty good solution for this is to replace the text with some icons so i went ahead i searched for some icons that could you know in theory replace the word design or are related in some way to the word design and i found this a 32 by 32 pixel icon of this roller and then what i can do is simply get rid of the word design and i'm also going to set a 16 pixel padding on the entire button and also i'm going to set its width to fill container and then i'm going to target its parent and i'm going to set it to fill container like this and then let's center that icon and the first button is ready for development i did exactly the same thing and i got this icon so let's remove the text as well let's set a 16 pixel padding here and let's set the resizing to fill container and this to the middle so now because we have icons instead of the text and we also reduced the padding on those items i can now resize my elements and they're still gonna look great even on extreme or extremely low widths like 200 pixels so by making this i ensure that it's gonna look great no matter what now let's see about these elements here because it's about a small screen we're going to stack absolutely everything and we're going to make it full width so first things first we need to ungroup the items that we grouped earlier and then select each one and set its width to fill container just like that and we're done now i can resize this and it's going to look good even on very small screen sizes and of course if you want to go like even smaller you know you find these problems with the text not being exactly as it should it's way too big in our case you can simply go and change the font size to something smaller maybe 18 pixels or something like that but in my case i seriously doubt there are any screens that are 200 pixels wide so the solution will work just fine another solution would be to simply get rid of the icons you know when screens are getting really really really small and just keep the text and then finally one last touch here would be to reduce the distance between these elements from 96 to 64. just like that and this is how you make a component responsive we started with the big version or the version that we use for bigger screens then for the 1200 to 600 range we're using this version which works well between those two breakpoints and then anything that's under 600 we'll be using this version all right and with that it's almost lights out we successfully designed a three-page website based on a project brief and a wireframe and we also made sure that our design looks good on smaller screens by applying some responsive design principles now where do we go from here well technically it's job done for the web designer you can take the design ship it to a developer and they'll take it from there but there's actually one extra step that you could do and that is called prototyping and before we end the course i want to briefly talk about this because i feel uh it is pretty important so that's coming up [Music] so what is a prototype well it's basically an interactive mock-up of your design it doesn't necessarily mean the final version of your design but instead a version that allows you to better see the functionality and the user's journey throughout the the website or the web app whatever it is that you're building a prototype allows you to link between screens and demonstrate how the website will function before the actual development has started so for example you can set the links or the menu items to take you to the corresponding pages when you click on them and prototyping is very useful for identifying areas of improvement in your design before it gets to the development stage uh you can create prototypes in pretty much any major ui design software nowadays but there are also dedicated apps just for prototyping but you can do that really easily in figma adobe xd and so on and right now i want to give you a quick demo of how to create a prototype in figma so this is my finished website and let's say that before i send it off to development i want to show the client how it functions how would a user get from point a to point b so to do that notice that in figma we have three tabs here design prototype and inspect we need to switch to the prototype tab and what you do is you select an element let's say about me and then i want to i want this link to take me to the about me page when i click on it so i hover until i get the blue plus sign here and then i just click and drag to the about me page and that's going to open up this modal telling me hey interaction details how do you want the the interaction to be and i'm going to select on click navigate to the about me page and i can also select an animation is it instant smart animate move in move out there are a bunch of options here let's um choose instant and also i'm gonna select the contact link and i'm gonna have this take me to the contact page so now once i made these connections i can simply click the play button that's going to open a new window for prototyping and inside prototyping i can basically just see the entire design but then when i click about me well that's going to take me to the about me page then if i go to the about me page and i select the contact link i'm going to tell it to take me to the contact page so now if i open up the prototype again so now i can click about me that's going to take me to the about me page and then clicking contact will take me to the contact page and you can do this for every single element out there maybe you want this button here that says see my work let's go ahead and create an interaction for that and i want to tell it to take me to this section here right so on click i wanted to scroll to my work and let's add also an animation and let's see how that goes right so i'm going to scroll down and when i click this button it's going to take me to my work now obviously there are options here you know you can fit the width and that's going to work much better so that's what prototyping is about really of course you can get really creative with it uh it's not just about moving from page to page you can scroll to various elements and you have a bunch of other interactions here for example on drag while hovering while pressed you can also press a key you can also tap into the mouse events here so you can certainly do a lot but at its core prototyping is used for simulating how the the user will navigate through the website and it can turn out to be very [Music] beneficial because you can spot certain problems before the actual development starts and with that said let's have a look at some key takeaways a prototype is an interactive mock-up of your design that allows you to see the functionality and the user's journey a prototype allows you to link between screens and demonstrate how the website will function before the actual development has started prototyping allows you to identify areas of improvement long before the project goes into development all major ui design apps offer prototyping features and there you have it that's a very short introduction to prototyping uh we're at the end of this course so for the conclusion we'll have a look at next steps and some key takeaways that's coming up [Music] well that was a big course uh 36 lessons over three hours long and a lot of hopefully useful information so congrats for finishing it i hope you learned something new and if you have any questions or comments please leave a comment down below now what should you do next well i strongly encourage you to do the assignment that's a very practical exercise and it's going to help you lock in uh those theory bits that you learned during the course and you can do it side by side as you're watching the course or you can do it after that it's really up to you but i recommend you do it side by side i think it's much easier like that and that's actually how i designed this course i would give you a bit of theory and then a bit of practice and then it would be your turn to um to do that part of the of the assignments as for the key takeaways well there's a lot to say in of course the size but i don't want to drag this for too long so i'm just going to say this always start a project on the ux side of things that includes a project brief and wireframes pick the right design tool stay away from photoshop or illustrator and work with something that's made for ui and ux design study the fundamentals as much as you can color typography spacing sizing and imagery get to know the most common web design patterns and see how other people are using them and finally when designing website make sure it looks good on smaller or larger screens responsive web design is critical and that's it from me thank you very much for watching and don't forget to check out the envato tuts plus youtube channel to learn more about wordpress figma adobe xd and much more i'm adi and until next time take care uh this is this refer first a project brief comment uh okay okay okay that goes by doing this we're mexically or mexically jesus what am i what what about that what's the word don't blame