Web Design for Beginners | FREE COURSE

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 type faces? 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 whitespace? Uh 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 Portilla 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 uh 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 uh structured in 14 chapters and uh 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 uh 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, uh 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 uh project briefs and wireframes. I believe that every good website should start with these two elements because even before considering colors or type faces, you need to know about the content of the website. Finally, we'll uh 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 crossplatform. 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 uh 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 uh most of these are downloaded from Envado Elements. Nowadays, this is my go-to place for these kinds of resources because on Invato Elements, you can get unlimited downloads of web templates, fonts, icons, and UI kits. That's millions of creative assets already 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, uh in this course, we'll be working on a demo project and uh there will also be an assignment for you. Uh don't think about it as homework because nobody likes doing that but instead as an opportunity to um take what you learned during the course and putting it to good use to practice. Right? So uh 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 chap called Robert Fox, who is a freelance UI designer and web developer. Now, obviously, this is a fictional character. Um, 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 uh as I said three pages a homepage 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. UX web designer. What's their deal? Uh 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. Uh this refers to a person that is in charge of designing the front end of a website or web application. Front end meaning uh everything a visitor sees and interacts with. So for example, if I look at a website like Invato 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 back end is called a web developer or as it's called in some places, an engineer. So uh 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 uh 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. Um 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 uh 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 signup 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 signup? 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 always get the credit they deserve. Uh, 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 um 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 uh 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. Uh 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. Uh you can be a UI and a UX designer at the same time, which is great news for you because that uh just gets uh or increases your value as a professional. Uh, 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.

All right, 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. UI 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.

All right, 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 UX 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. Uh even before considering colors or type faces, we need to know uh 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 uh 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 a 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 um 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 homepage, about, and contact. Next up, we can see u a short description of what the homepage 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, uh we can see their structure here. So we need the logo, nav menu, and some social media lo 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 uh 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 uh the brief yourself and uh 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, uh who he is, who are his clients, and then put all of that information into a PDF like this one, so that you can uh move forward with your project much more easily.

All right, now let's take a look at some key takeaways from this lesson. Uh, 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. Uh, 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. Uh, 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 uh type faces, 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 users 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 going to walk you through and explain uh my reasoning for or how I made uh those wireframes based on the project brief. Let's go.

Uh 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. Uh there are specialized uh apps for creating wireframes. You can do a Google search if you want. But I think that uh 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 uh the project brief and I started with each section and each page. So on the homepage, 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 uh 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 homepage, 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 uh sub um the description and then under that because the hero area should also display the contact email and phone number and a button. I uh put those uh 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 type faces. I just used whatever uh type face I had selected at the time which was robboto and the color is just pure black. And I did the rest of the sections. So here we have uh the portfolio section and this is um where we should put the portfolio images. Uh this is a testimonial and this is the footer call to action right with its title, subtitle. Uh 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 this structure again based on the project brief. We have a introduction section here, some images, then some uh benefits for working with Robert, some testimonials, some services. Uh 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, uh, 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 uh 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, uh just like a sketch basically because again its purpose is to present the content and the structure of the content.

Now if you want you can uh 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, uh check out the video description, uh 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 lowfidelity 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, uh we can now move on to the UI design side of things. Uh, so far we covered the user experience, but now we can move on to the user interface and start uh dressing it up as I've been uh saying. Uh before we do that though, we need to uh 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, uh it's time to figure out which uh 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 uh relatively easy to learn uh how to use a design software, but it's always helpful to know about certain pros and cons uh of um all the all the software that's available nowadays so you can make the best uh decision.

When I started designing websites um 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. Um, 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. Uh Photoshop wasn't and uh 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 three or something like that. But just so you understand um 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 uh 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 uh Sketch, we have Adobe XD, Figma, Invision Studio and a few others. Uh 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 um be used on those things that are good at but for UI, UX design, things like this. Use uh 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. Um, 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. Uh, 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, my young Padawan, have we learned anything from this lesson? Well, for UI design, uh, 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. Uh, and my recommendation is Figma because it's free, crossplatform, and works in the browser.

All right, so hopefully at this point, uh, 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 uh 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 uh 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 and I'm going to create a white background over it and set its opacity to let's say 10%. Or let's say 40%, so you can uh 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. Uh 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 mixing 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 um the kind of gray I'm looking for. Right? So, as you can see, as I'm moving it 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 um 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 100%. 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 uh 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 uh 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, CMK, um 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 255 0. 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 02550 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, 150 for 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, 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 um 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°. So, for example, red is both 0 and 360°. But then, as I move the slider to the left, you can see that the hue number changes. For example, blue is around 200° 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%. It's going to be fully saturated. I can set it at 50% 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%. 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° 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 hexadimal or in short hex. Uh this is made up of uh 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 uh the color format right here. it's without the hash sign in front but um usually in in CSS you would use a hash sign. So for now this is comprised of A7 for red 22 for green E5 for blue. Uh these are written in hexadimal format 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 um the colors in hex format and then you can copy those you can paste them in your uh 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 CMK 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 hexadesimal or hex color format is a more friendlier way of representing RGB colors.

All right, so now that you hopefully understand more about um 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. Uh, 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. Uh, this is a 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 complimentary 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.

All right. 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 uh 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. Uh, 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 bass. 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.

Uh monochromatic will basically give you tints and shades for your base color.

Triad looks something like this, right? So you get kind of a threepoint star with the base color being on one end of the star and it just creates a color scheme like so.

Uh complimentary 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 uh I got from sketch uh 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 complimentary is pretty similar. Instead of one color on the opposite end of the spectrum, it kind of picks two. So it gives you uh more variation in your color palette.

Double split complimentary 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 uh 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 uh monochromatic and complimentary 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 complimentary.

Now, since I showed you Adobe Color, which by the way is an awesome tool and I recommend it to everyone, um I'm also going to 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 myolor.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 uh color space.

Next is color hunt. You can search for pallets based on uh the color that you want. You can also uh use some of these filters here like 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 Musli Colors by Invision. 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, uh, 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, uh, 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 Musli Colors by Envision.

Uh, then we have, uh, Web Gradients. Uh, this is a website that I use frequently whenever I want to 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, uh, source for getting color inspiration is Dribbble. So, for example, I can open a Dribbble 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, uh, one last suggestion here. If you're using Mac OS, uh, 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, a 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 going to 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 going to jump back to my project brief and I'm going to 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, uh, currently our primary color.

So, uh, 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, uh, 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, uh, 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 analogous harmony rule because I feel that using, uh, colors that are closer to our primary on the color wheel is going to be a good thing. First of all, because the logo's colors are pretty much like that. They're all using kind of an analogous, um, color harmony. But also, if you remember the color theory or the meaning of color, right? Uh, these that we see here are, you know, oriented towards, uh, red-orange. So, they represent energy and, um, you can use them to draw attention. And this works really well with the kind of website that, uh, 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, uh, between these two colors. So, under "Fill," I'm going to choose, uh, "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, uh, 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, uh, 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. You know, 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, uh, something else you can do is you can, uh, duplicate this on top of itself, fill it with pure black, and then reduce the opacity to, you know, 80% 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: 261F22. 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 going to again create a color style. I'm going to call this "Black." And then I'm going to duplicate this to create some variations. And the first variation is going to be 75%. And I'm going to call this "Black 75." The next one is going to be at 50%, and I'm going to call this "Black 50." And we'll do the same: 25% "Black 25," 10% "Black 10," and then finally 5% "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. Uh, 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, uh, a piece of text to be more muted, well, you can just simply choose, uh, 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, uh, 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, uh, 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, uh, the, the grays, as that column, starting with the base color and then a couple of tints. And by the way, uh, maybe you're a bit confused about the whole transparency thing. Uh, this is another way to create tints. 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 get a, 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, uh, down below, and I'll try to, uh, to explain this again. But, you know, when creating 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 we have this color, and we want to mix in some more white. Well, you can simply, uh, you know, drag, uh, the cursor up until you get to the, uh, to the desired hex value. In our case, that value would be something like this. So, a little bit higher up than, um, than what I showed you. But I find this approach with the, uh, 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, uh, primary, secondary, gradient, the grays, and then a contextual color for the error messages. Now, before we end this lesson, a 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." Uh, 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+ with a, 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. Uh, if you're using Mac OS, then I highly recommend this app. It's called Contrast. Uh, let me see if I have an about. There we go. Uh, this is a paid app, by the way. But there are a couple more. Uh, there are, uh, 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, uh, before, uh, signing off on, uh, on a color palette like this.

All right. 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, uh, now that we have the color part taken care of, let's move on to another fundamental aspect of, uh, 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 going to 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, uh, 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, uh, fonts on marketplaces like GraphicRiver. 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. Uh, you can find a bunch of fonts here. Once you access it, uh, you can, um, browse this entire list. Uh, you can type your own sentence. "Hello." And you're going to see a preview of that sentence using every single font. Uh, 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, uh, for a monospace 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, um, an Adobe, uh, 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, uh, 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, uh, you can find more of them right here on Adobe. And this is like exactly the same. You can go to "All Fonts," and you do have some extra options here. You can, um, 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-serif, 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, uh, 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. Uh, you can modify the text size. And what I really like about Adobe Fonts is that once you're signed in, and you're also signed into the desktop app, the Creative Cloud desktop app, uh, once you find a font that you like, uh, 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 Fonts, 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, uh, 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, uh, 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, uh, 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, uh, after you've chosen a couple of fonts that you think would work well with your project, uh, 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, uh, the bigger the impact on the performance. And yes, I know that website performance is, um, is on the web development side of things. So, technically not our job, but if you're sending a developer, um, a design that, um, 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, uh, there's an overlap between two different specializations, uh, 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, uh, for your project. Next, you need to decide on the, uh, font roles and their attributes. And role 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, uh, buttons, menus, captions, and that sort of thing. And, uh, 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, uh, thankfully, we have something called type scales. I made a separate course on TutsPlus on this topic. So, if you want to learn more about type scales, go ahead and check that out. Naturally, I will be using type scales in this course, and I'll show you how to create them because, uh, 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, uh, 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.

All right. So, now that you got this introduction to typography, uh, 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, uh, 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 am 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 fonts 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," uh, it says that 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, uh, the differences between serif and sans-serif, well, let me show you. This one right here is a serif. See these embellishments on the letters? Well, 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 sans-serifs in Google Fonts. Well, Robert is what? A UI designer, right? So, let's think about what keywords come to 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, uh, some use cases here on the top. And I think for this type of website, for a designer's portfolio, basically, this, um, font 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, uh, pairs very well with Proxima Nova. This is another, um, sans-serif typeface, which looks something like this. It's relatively similar to Brandon Grotesque, but also has a distinct characteristic. And, um, 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, uh, Brandon 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, um, 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, uh, 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. All 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, uh, 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, uh, 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, uh, font family to Brandon 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 Type Scale. 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, 16 pixels multiplied by 1.25 will equal 20 pixels. 20 pixels multiplied by 1.25 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, uh, Robert wanted, uh, an airy website with lots of white space, uh, I think a larger than usual typography will serve us 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, uh, a crazy amount of contrast between this and this. Uh, for this type of project, I will choose an augmented fourth scale, or 1.414. And this gives me, uh, 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 one, is 118.70, and we're going to 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, uh, 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 two, I will use 84 pixels of line height of font size, excuse me. And for the line height, I'm going to set it to 112. 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, uh, 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, uh, 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.

Uh, there is another tool I wanted to show you that's called Archetype. And with this tool, you can, uh, pick your fonts here. You can define the various sizes for the base paragraph, for the scale ratio, and you can see a nice, uh, a nice preview here. Personally, I prefer working with Type Scale. I find it much, uh, faster to use. It's much more fluid. Uh, but as an alternative, um, 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.

All right. So, now it's your turn. So, go ahead and create the typography for your version of, uh, 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, uh, to your eye. Uh, 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, uh, 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, uh, widths or heights for images or other fixed dimension elements. Um, 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, uh, simplicity and consistency. Simplicity because it's very easy to remember the multiples of eight, and, uh, 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, it becomes much easier for them to, uh, deduce certain measurements without 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, uh, take my recommendation and use this system, at least for this project, and, you know, give it a go. Uh, 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, uh, 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 going to 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, uh, guidelines for you to align and size your content. And it's also, um, beneficial later on when you're, uh, developing the project, right? When you're writing the HTML and CSS, because there are grid systems in place that you can just, uh, 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, um, than, you know, grids or how your content is, um, 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, um, of UI design.

So, the technique that I'm going to use is with guides. So, I'm going to 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, uh, display these rulers at 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, uh, 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 1145. 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, uh, to toggle the visibility, basically. And of course, you can create, um, horizontal rulers, just like this. And if at any point you want to delete one, simply click on it, select, and then, uh, 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, "Oh, 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, uh, 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, uh, you start with the, uh, 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, uh, 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 talk about, uh, before moving on. And that is, uh, 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, uh, 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 checkmark 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, uh, social media, and these work just fine by themselves because, uh, they're basically the logos of well-known brands. So, a user seeing those icons knows exactly what they do.

Another thing to be careful about when working with icons is the style. Uh, 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, duo-tone, 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. Uh, there are plenty of, uh, high-quality icon sets out there, and most of them are free. Uh, a simple Google search will give you a bunch of results. Uh, and you'll be good to go. Uh, however, uh, 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. Um, if you're not familiar, Bootstrap is one of the most popular front-end frameworks, and they offer a, an icon set called Bootstrap Icons that looks something like this. It's very nice. Over 1,600 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 a paid, uh, version of the set, but there's also a free set. And they come in multiple styles, like, um, thin, regular, and so on. And they also provide a web font that you can use for the icons, which is awesome. But, yeah, Font Awesome, another great option.

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, uh, some different, uh, options for the style, and you can go ahead and download the free designer pack for Ion Icons. Really cool icon set. This is actually, uh, 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 an Elements subscription, you can download as many of these as you want. And, uh, they're really, really high-quality sets.

And finally, uh, 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 um try and get real pictures. So, instead of, for example, showing some just random stock photos of fancy offices and uh, 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, uh, stock photos have their place. So, 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, uh, to see, for example, a business website that shows, you know, stock businessmen, you know, with fake smiles, uh, 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. Uh, 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, cliché 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, uh, 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 became 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 uh um 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. Uh, 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, uh, 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 uh, but more importantly the differences. We're going to start with one of my favorite websites uh, 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. Uh, 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. Uh, personally, I I just consider a header the uh, 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 uh, the logo, the navigation. Uh, 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 uh, the list of favorites and the cart. Uh, this header also features some extra links here for various sections of the website and also um, kind of an information or a 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. Uh, next we have the header from Dribble. 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, uh, cart, so web shop, um, elements. And here we also have a language switcher. Pretty interesting. Next, uh, we have the header for Invato 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 uh, the website of Simon Gets. Pardon me if I mispronounced 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. Uh, 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 website. So as you can see, not all websites need that header with logo, navigation, and call to action. You can you can distort that structure and adapt it to your needs. As I was saying, uh, 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 um, 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 um, use for a header. And finally, we have um, this website for Irene Studio. It's probably pronounced differently in French. Uh, 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 um, modal window that's being presented to us here is also part of the header because it shows us the uh, the navigation uh, 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 uh, 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 uh, 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 uh, 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 going to delete this one, and I'm just going to paste in the logo. I'm going to choose 32 pixels as its height. Remember the eight-point system. Yeah. And then I need to know where I'm going to position this logo from the edges, right? So, I'm going to bring up my rulers. Shift R and I'm going to 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 um, 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 in to 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 uh, 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 Proximanova 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 eight, 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 uh, the icon uses um, kind of a stroke for uh, 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 uh, 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. Uh, what else? We had uh, Instagram and Dribbble. So, let's grab those again. K. And resize this to 32. Like that. And finally, Dribbble. And this is actually a bad rendering of that icon. See how the lines are kind of messed up here? Uh, Figma does that sometimes, unfortunately. It's one of its drawbacks. It doesn't render correctly some uh, some SVGs. So, in that case, we're going to have to look for our icon elsewhere. So, I'm going to search for Dribbble here. And as you can see, we can find roughly the same icon in uh, 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 going to 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 leave a 64 pixel gap like that. Be uh, 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 going to 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 these 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 one pixel wide and 16 pixels in width. And for the stroke color, I'm going to 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. But 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 uh, 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 uh, 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 uh, it's an online store. But generally speaking, a hero area usually contains uh, a strong message along with a call to action uh, 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 uh, amazing shifting uh, gradient background that uh, 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. Uh, Invato Elements has a slightly different hero area here. Uh, they showcase free courses. uh, 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 uh, can select a bunch of these uh, 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 signup page and moving forward to uh, to an experience that's tailored uh, to you based on what you selected. um, earlier. Very interesting. Uh, Craft has a very simplistic, minimalistic uh, hero area, strong message, call to action, and then a small announcement here. And then uh, Timely has um, something similar. So again, the message, the call to action, which in this case asks for any email address. we have the supporting uh, 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.

All right, 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 1,800 in width. I forgot to do it uh, 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 going to add the first guide at 256, which is a multiple of 8, 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%. Just so there is a bit of contrast between the lighter text or the smaller text and the bigger text. Then I'll uh, 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 uh, with the width of this text element. Maybe make it something like that. A little bit bigger so it the text fits in two lines.

So with that done, the only thing left to do here is work on this button. Uh, 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 diff 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 uh, breathing room, a bit of distance between the contents of uh, this hero area and the element above, which is the header. Currently, this distance is 141, but I'm going to 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, uh, be more adventurous with it. And also you can use the examples uh, of hero areas that I showed you previously for uh, some added inspiration.

Now let's see about that uh, that button that was left unfinished. Uh, 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 signup 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 um, you know, opening a 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 Avacode and we have a couple of 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 popup for this support module and this closes it.

What about this website for Notion? So on the login page, we have uh, 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 popup 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 the 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. Uh, 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. Uh, 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 queue. If you open a specific um, video, there are a couple more buttons here on the video player. Play, next one, make full screen, theater mode, uh, this uh, 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.

All right. 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 uh, give you some tips and tricks for designing good-looking buttons and also usable buttons. Let's begin.

So let's uh, zoom in here. The first thing I'll do is set the typography properly. So, I'm going to be using Proximanova uh, 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 uh, 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 going to use a 16 pixel gap between these two elements. And I'm going to resize the icon uh, 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 going to round off its corners. Let's say like 100. That's going to create a pill button. And I'm going to 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 change its properties. But actually, I have a 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. Uh, 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. Uh, 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 uh, this button easy to click but also more importantly easy to tap on a mobile device because uh, 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 the because my work is further down the page. Looking at this, the user can, you know, automatically deduce that, hey, if I'm going to click on this button, it's going to 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 going to 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. Uh, 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%. 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 going to choose my primary color. I'm going to give it a solid color. And then I'm going to 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 going to duplicate this again. I'm going to 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 going to 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. And let's also give this an opacity of about 85%. 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 uh, the fill and the text uh, let's make this black 75 or even less than that, black 50, something like that. So that should um, 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 um, 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 uh, secondary styles for the button and also the different states, hover, active, disabled, and so on. Uh, 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 uh, image galleries are also can be linked with a slideshow that allows you to view bigger versions of the same image. And you know, you usually control that slideshow with your mouse or with your keyboard. So, um, let's see some examples of image uh, 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 that'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 Groveade? Well, this also has an image gallery right here, but it's uh, a little bit different. Uh, 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 uh, interesting uh, hover effects. And I can also cycle through these like so. So very nicely done. This is a very very smooth gallery. Uh, 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 uh 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 uh 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 um 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 ours is a bit more like a portfolio showcase, but because we're only going to display images there, I think um we can uh safely categorize it as an image gallery. So, uh, 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. Uh and these are also cut off by um a testimonial although we're not going to uh deal with this right now. That's for a future lesson. But uh 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. Uh 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 uh of our layout. So we're going to use the same here.

Now let's apply some uh typography to this. Uh this uh should be an H3 based on the positioning in the uh 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 uh 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 bold. So now you have two options basically you can use the H3 bold 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 uh 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 uh for a real project, I would use uh images from like real client work, but because this is a demo project, uh I'm just going to use some placeholder images uh that I got from Invato Elements. They're uh like a collection from various UI kits that I found on Elements, and you can find links uh to that down below. Now, what I'm going to do is simply delete these because I'm not going to use uh 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 / 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 uh convenience. 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 8, the 8 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 going to make it slightly bigger until this distance right here, this is 128 pixels. And I think it just creates uh 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 uh picking the primary or the accent color uh 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 um 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 um 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 going to 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 1 2 3 4 5 6 7 8 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 um 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. um get inspired and try and create something unique. Uh 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 uh 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 uh allows users to navigate the website without having to scroll all the way back up. a call to action placed in the footer will u actually help a user make a decision much easier because it's, you know, right there uh 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 a website from top to bottom. So, uh, on a landing page, for example, you read from the top, you see the main message, uh, 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, u social media icons, right? All of these have um 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 Groveade where uh we also have um 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 signup, 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 uh 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 um copyright text right here.

If we go to the Avocode website, uh we can also see links to very important pages in the website. We can see a logo. This is also uh practiced a lot. Site map. Another call to action here. Very interesting. And the usual copyright, social, and uh 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. Uh 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. Uh, 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 site maps.

All right, 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. Uh, 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 uh 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 uh 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. Uh, this one also 640 pixels. And the frame they're inside also has auto layout applied. 32 pixel 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 going to hit commandV and that's going to 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 uh previously on the top. And 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 going to use the paragraph style with black 75%. And I'm going to take this command X and I'm going to 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 uh 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. Uh, we don't actually need these two separators here. So, we'll delete that. And what else? Let's see. Delete these. Uh, 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 uh the original wireframe which uh had, you know, the contact info here. Uh this was 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, um, let's move on now to the next pattern on our list, which is testimonials. And with that, we'll actually wrap up the homepage 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 um other people are saying good things about you, uh 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. Um, 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 um second of all, it's also illegal. So, there you go.

Now, let's see some examples. The first uh 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, uh, 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.

Uh, let's go to ConvertKit, which is uh another great website, and we can find their testimonials. Here we have pictures of the testimonial author. Uh 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.

Uh, next one is from Lus 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 Invision app website. And um this presents testimonials a little bit differently. They're using a much more minimalistic approach. They just have uh one area here uh between the product features and they just display the quote, the author, uh the logo that's associated with the author and a 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 uh 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 realworld 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 homepage and the about page. And we'll use a slightly different style uh between these two pages. Let's begin. We'll start with the homepage where we have this one. This is actually the very last uh element that we need to style. So let's start with the text first. Uh I'm going to use the uh 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 uh light instead of um bold for the font weight. So, I'm going to detach uh the style. And I'm just going to change from bold to light. And if we want, we can create another text style. We're going to call it H4 light. Cool.

Next, let's see about this text. We're going to use uh 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 uh style, let's go. Uh, 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 uh a typical paragraph. So we're going to use the same style that um we used for uh some of these links here in the footer, which is bold uh 15 font size and 24 line height. So let's do that. So proximova bold 15 24 and this will keep it uh regular 15 24. Let's uh group these two into an auto layout frame. And I'm going to use 32 pixels 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 uh style for the avatar and the company logo here. I think they look really good. Uh 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 spoton. And the distance here between the text and the other elements is 64 pixels. And that should work out just fine. And then finally, uh 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 going to move this up between the second and the third uh portfolio entry. Uh making sure of course the dimensions or the margins here are uh 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 uh 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 1,800 pixels. Don't worry about the rest of the elements. Uh some of them will be designing in this course while uh others will be uh up to you to uh to design for your assignment. But you know, I'll also provide the finished design so you can uh you can see exactly what I did. So for this uh 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. Uh I want to add like a solid uh 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 um left square bracket to bring it or to send it to the back of this element. You can also rightclick and you can say bring to front, send to back. Uh, 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 going to just do this and I'm going to give it the proper width. And then I'm going to 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 uh a nice border radius, maybe like 8 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 um 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 uh this one. I'm not going to tamper with this. I'm just going to apply the shadow uh 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 uh position it 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 1672. And I just use the homepage uh as um 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 1,800 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 1448. So 1448 / 2 gives us 724 pixels. So we're actually very close. Right now this element is 726 pixels. That means we just need to um 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 going to copy those. I'm going to 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 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 uh 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 um or compare 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 uh 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, uh 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, uh, let's have a look at some examples. First one is from Avaode. And if we scroll down to the testimonial section, uh, we can see tabs being used here instead of a traditional slider. So you basically click on a tab link to change the content of the tab control. Basically pretty cool implementation.

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 e-commerce 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 uh 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 homepage.

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 um divining blocks of content in uh 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 uh links uh that say tools I use for design, tools I use for development. And whenever we click on one of these uh this content here will change. And to represent this type of content which is basically a list we can do a lot of things. Uh we can use a simple like text list but that would be too boring and uninteresting. So instead uh I'm thinking we'll use we'll keep the same um principle that we have here. So boxes or cards or whatever you want to call them. But I also want to add some imagery. Uh, 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. uh 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 so I'm thinking 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. Uh, 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 uh item distribution is set to packed. And also this shouldn't be a fixed width. Just set hug contents here. And that means the uh 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 going to 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 Proximanova 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 uh 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 going to 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 uh with this one with sketch. Uh, let me bring in a sketch logo. And this is pretty easy to come by. just uh search uh 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 it 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. 1632. Make sure everything is aligned in the middle. Then I can select the texts, the text elements, and I can make sure they all use the H6 style we defined. And then we can simply uh 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 is 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 uh we changed the direction to vertical, we need to also reapply uh the alignment here. Let's grab the Photoshop logo like so. And by the way, all of these are 48x 48. Again, multiple of 8. 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 Figma and it actually gets us really close to realworld behavior. So when you're uh developing this website and you're writing the CSS for it, you can use something called flexbox which behaves in exactly the same way. And then finally, let's um 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 uh you know, you can position it in any way that you see fit. If this looks better to you, then go ahead uh use this measurement. But since we're using the 8 point system, make sure the distance you're using is a multiple of eight. Uh in my case, I think 96 uh pixels actually looks just fine for this application. So I'm going to 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 accordians. Uh these are box shaped musical instruments of the bellows driven free read a phone type. Hold on. I think I searched the wrong Wikipedia page here. How about we try that again? H. Okay, let's talk about accordians. Now in UI design uh these are very similar to tab controls in the sense that uh the content is split up in multiple panels which can be opened by the user. However, unlike tabs, accordians can display multiple panels at once and they're used for simpler content like text. This is a very popular uh UI pattern for an FAQ section that stands for frequently asked questions. Uh so let me show you some examples.

We are on Tesco's website. Uh 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 uh 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 uh kind of organize uh their questions into various categories, but at the end of the day, it's still an accordion.

Next, uh we have uh the website from material kitchen. And again, this uses a slightly different approach. in the sense that we can only display one accordium panel at a time and this is not animated. So, it's kind of choppy, but it's an accordion nonetheless.

Next, uh we have the urban jungle beauty website which again uses some nice animated accordians uh to display frequent questions and answers. And again, this uh has the accordion items kind of organized into various categories.

And finally, we have another FAQ page. Uh 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 display 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. Accordians 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, accordians can display multiple panels at once, and they're used for simpler content like text. Accordians 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 accordians, 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, uh, design page, and I'm just going to zoom in here. Uh, because this section is in between these two and it's kind of in the middle of the page. I think uh a darker background uh 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 uh frame. And because we are using the uh darker background approach, we don't actually need these uh separators. Let's move that to the uh to the back. And then we'll start as

usual with the uh typography. Let's move this. Let's align it with the 256 guide. And for the title here, let's uh 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 a 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 uh you know the plus. I think it looks good. So first let's see about the typography. I'm going to be using Prox Manova bold. Uh 21 for font size, 30 for um line height. I want to make it uh the same size as a regular paragraph basically. Uh, 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, we'll rotate it. And actually we'll make it uh 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 uh 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, uh 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 uh should work just fine. And then select the parent frame and set the uh 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 uh the answer. So let's go ahead and do that. We need 1 2 3 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. And 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 um later on.

Now, it's simply a matter of putting the right questions in. And let's go ahead and delete this, this, and 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 going to 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 3 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 going to set it to fill. And finally, let's uh 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 a definition for this pattern, right? It's pretty self-explanatory. A contact form is a web form that people use to contact you. Uh 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 you, right? Or what they had for breakfast. All you need is their name, email address, and their message. That's the bare minimum. Um, 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 Avocode website. uh 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. Uh 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 u made by Chroma. And we have a a contact form here that's uh to be honest a little bit too large in my opinion. a lot of fields. They're asking for name, email, business name, uh 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, uh these two fields are not uh mandatory, so you can skip them. But even so, it feels maybe a little bit too stuffy for a for a contact form.

Uh let's go to sketch.com. Uh they have um 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 um of the contact email, subject, and full description. And that's it.

Next, uh we have uh a contact form from uh Gradienta or Gradienta. Um very simple name, email, message, send, and that's it.

And finally, let's take a look at monday.com. Uh 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. Uh sketch is also doing that. Gradient 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 uh 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 uh check out your favorite websites. Uh 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, uh 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. Uh 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 byside uh 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 going to have this as a paragraph. And I'm going to 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 auto 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 uh equal in size and have a a nice generous gap between them. Right. So let's see uh 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 two and that gives us 708 pixels. And so 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 uh 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 Proximanova 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 uh the style of the text that's inside the input.

Uh now, we need to add the labels, right? So, for that, let's uh 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 um 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 auto layout and then I can change the uh 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 uh 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 going to replace it. So, let's open our icon set app 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 uh the style that we're looking for, which is kind of an outline style. So, uh, this could probably work, uh, from Font Awesome. Uh, maybe this one, which is, um, very, very similar. Maybe this one from Iron Icons, but I think I'll go with the one from uh, from Font Awesome V5. So, let's resize this to 32 m. Maybe a bit less. 24. Something like that. Let's make it white. And maybe for this uh for this button, we could do it 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 uh 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 a 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 uh focus slh. So when we hover with our mouse over it or when we focus it with, you know, our mouse or our keyboard, uh it's going to look exactly the same. And when that happens, let's uh do the following. Let's maybe add a small uh 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 10 uh 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 uh text color and we'll drop it to like black 50. And also the stroke color we'll set it to black 10. So it's kind of very very muted. And then finally let's uh 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 uh 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 uh 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 accordians 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 uh of the website. And as always be adventurous, try out new things, new layouts and u see what you come up with. On top of that, you should uh now make an effort to finish designing the rest of the elements in the website if you haven't already. Uh 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 uh show you how to apply the principles of responsive web design to certain elements in uh in our project and uh that's coming up. [Music]

All right, let's talk about responsive websites. And I want to start by telling you a short story. Uh in the early days of the internet, meaning late '9s, early 2000s, all websites were nonresponsive, meaning you would create a design, code it, and that would be the final version for everyone. And that was okay because uh the majority of computers back then were using uh screens of similar size, usually 800x 600 or 1024x 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. Uh that mobile version would um be hosted on a subdomain called M. These were also referred to as m dots. So m dodomain.com that would uh serve a user the mobile version of that website. Facebook uh even today in 2022 still has that functionality. If you go to m.fas.com, you'll get a mobile version of Facebook. And uh 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 Marott. In 2010, he wrote this article for List a Part 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, uh 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 nonresponsive. After mobile devices came out, developers were using a subdomain to serve a mobile version of the website. In 2010, Ethan Marott 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, um 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 uh think about some solutions. What you see here is the finished design. And as I was saying previously, I kind of filled in the gaps as we were going along and I completed the um 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 um elements inside the container will resize as well. And this way I can easily mimic, you know, resizing a browser window and um 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 homepage. And as you can see, even on uh 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.

Uh let's uh take a look at the about screen or the about me page. I'm going to do the same thing. Here's another issue that we're facing. On smaller screens, this text should um be a bit wider. And also uh this entire section could be offset by a smaller margin. So maybe align it with the menu items like this. Uh the images have the same issue. They kind of resize widthwise, but they also need to resize like this. They need to be less tall. Some of these uh 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, this 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 uh 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 content 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 1,800 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 going to follow the traditional break points, um, 1024, uh, 768, 480." So, what does that mean? It means that on those break points, you're going to apply some changes to your layout. Okay? Uh, but there's a problem with this approach. Let's say that your layout looks good on what did we have here? 1,800 pixels, right? And you want to start making changes at a set break point. Let's say 1024, which is about let's say about this much. But what if you're having problems with some elements before that 1024 break point, right? So let's say I'm around, I don't know, 1,200, something like this. And 1,200 is an area that you're still having problems with. Well, that's the downside of using like these common break points 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 1,800 to let's say 1,000. But other layouts might not. Other layouts might need a change around 1,500 pixels. Right? So relying on those fixed break points is not ideal.

Instead what I do and I started doing uh recently is use ranges. And I have three ranges defined in my project 1 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 um 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 break point. So in my case, I started noticing that around 1,200 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 have 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 1,200 pixels, uh, some of the problems are starting to become more and more obvious. So then I set up a break point 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 uh some of the elements are not displayed uh correctly in the um 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 uh typography section here, I have three different type scales. I have one for laptop and above which is using um 21 pixel font size as a base and 1414 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 uh 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 um 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 homepage, this image was 96 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. Uh 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 uh 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 uh sharing one column each. Also the footer is different. Here is the footer on uh a larger screen. All right. So it's displayed like this. contact uh 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 going to look great.

So those were the changes that I made for this range 1,200 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 break point. 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 uh specific. All the form fields are now full width. 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 got to check each section of your website. How does it look when I make it this small? Maybe there are some sections that need to uh 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 uh 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 uh you can see the full um website design, including the uh responsive versions uh if you uh check out the link in the video description, and you'll see exactly how I approached this problem.

Now, it's your turn. So, if you've been um you know, doing things differently than me, then awesome. Uh but it also means that you have to do the responsive changes yourself. You cannot just copy uh 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 uh go through each section, resize it, uh see how it works on smaller screens. Uh 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, uh 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 going to stumble upon a certain UI component that's going to 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 uh or these can prove to be problematic at times. So in this uh 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 uh 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 going to create a blank frame here. We'll just make it 1,800. 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 1,200 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 um 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 1,200 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 um 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 width, 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 and 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 uh a small issue with some of the elements here. Let's just change hug contents. Hug contents. Figma does that weird uh 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 according to 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 going to look great. But we can't 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 going to 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 32x 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 uh 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 uh padding on those items, I can now resize my elements and they're still going to look great even on extreme or extremely low widths like 200 pixels. So by making this I ensure that it's going to 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 um 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, this 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 uh 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 1,200 to 600 range, we're using this version, which works well between those two break points. 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 uh 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's uh it's pretty important. So that's coming up. [Music]

So what is a prototype? Well, it's basically an interactive mockup 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 uh UI design software

Nowadays. Uh, but there are also dedicated apps just for prototyping. But uh, you can do that really easily in Figma, Adobe XD, and so on. And uh, 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 uh, 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 model 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 uh, select an animation. Is it instant, smart animate, move in, move out? Uh, there are a bunch of options here. Let's um, choose instant. And also, I'm going to select the contact link and I'm going to have this take me to the contact page.

So now, once I've made these connections, I can simply click the play button. That's going to open a new window for uh, 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 um, 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 want it to scroll to "My Work." And let's add also an animation. And let's see how that goes. All 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. uh, 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 uh, interactions here. For example, on drag, while hovering, while pressed. You can also press a key. Uh, 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 beneficial because you can spot certain problems before uh, the actual development starts.

And with that said, let's have a look at some key takeaways. A prototype is an interactive mockup 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 3 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 uh, 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 uh, of the assignment.

As for the key takeaways, well, there's a lot to say in a course this 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 a 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 Invato Tuts Plus YouTube channel to learn more about WordPress, Figma, Adobe XD, and much more. I'm AI and until next time, take care. Uh, this is this refer first project brief coming. Okay. Okay. Okay. The that goes by doing this we're mixically we're mixally Jesus what what the word don't blame.