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

years ago. And you'll probably have the same questions like how do I pick type faces? How do I pick colors? How many

faces? How do I pick colors? How many

colors? What about icons? How do I use them correctly? Where do I get them?

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

size them? Well, that's exactly the kind of information that you'll find in this course. But hey, if we're just meeting,

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

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,

page. Things like headers, hero areas, buttons, image galleries, contact forms, and more. Now, for each common pattern,

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

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

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

anytime. Check out the link in the description to subscribe.

[Music] All right. So, as I've been saying

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

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

web developer. Now, obviously, this is a fictional character. Um, this will be 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 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

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,

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

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

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

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

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

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

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

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

the project. UI stands for user interface. So, it's all about things

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

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

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'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

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

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

client. Based on that talk, we created a project brief. So let me quickly walk

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

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

right? Based on his name. Now, moving

forward, we land on the website structure. So, we need to create a

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,

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

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

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

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

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

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

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

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,

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

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

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

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

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

to do. All right. And remember, this is a sketch. So then besides the header in

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

and description. So I took those and I arranged them in a way that obviously is not final. I put the subtitle here, the

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.

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. And currently this is the content. It's then up to the UI designer

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

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

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

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

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

some services. Uh these are the tools that Robert uses for design and development. And then the footer again.

development. And then the footer again.

And finally, the contact page looks like this. Again, an intro section with much

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

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

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,

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.

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

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

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.

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

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

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

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,

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

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

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

like this. Use uh one of the apps that I mentioned previously. You'll thank me

mentioned previously. You'll thank me later. Now, for this course, I'll be

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

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

also free. So, five great reasons for using Figma. Sketch is also a great

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

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

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

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

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

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

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

yellow. They're called primary because you cannot mix any other colors to obtain them. They're the building blocks

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

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

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

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,

color. If I change this to a blue, you'll see that I have the original hue right here. And then by adding white,

right here. And then by adding white, I created a tint. That's all there is to it. Uh using a color picker,

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.

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

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

tone. It's the mix of a pure color with gray. Another term that you'll um hear a

gray. Another term that you'll um hear a lot when talking about color is saturation. And saturation basically

saturation. And saturation basically refers to how rich or how dull a color

is. So for example, if I set this 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

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

purple. So around this area and warm colors are considered these yellow, orange, red. That's what color

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,

black. And to create colors, this model uses what's called subtractive mixing. I won't go into

subtractive mixing. I won't go into details because this model is used for printing. So, it's not that important

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,

different colors. When overlapping red, green, and blue at full brightness, we get white. And this is how screens work.

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

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

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

with RGB. You just, you know, use the color picker. You define your hue and

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,

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

brightness. This uses a mix of these three attributes to create different colors. This also works in digital

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,

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

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

color? 100%. Okay, then it's totally towards white. But if I set this to 50%,

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

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

like this. And I want to find other colors. But I don't exactly like the way

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

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

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

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

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

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,

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

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

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.

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

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

equals purple. Blue plus yellow equals green. Tertiary colors are obtained by

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

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

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

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,

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

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,

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

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

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

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

project? Well, this is where color harmonies and a color wheel uh come in very handy. Let me show you. Let's say

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

primary. And what you need to do is copy its color code and you need to go to color.adobe.com.

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

harmonies. And we have a couple of them here. And if you switch between 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

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

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

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

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

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

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.

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

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

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

clipboard. Really cool. Next we have Musli color 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 pallet 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 dribble. So for example, I can open a

is dribble. So for example, I can open a dribble shot. And if I scroll down, I

dribble shot. And if I scroll down, I can find the color palette that's being used here. And I can download this as an

used here. And I can download this as an acco file. I believe this is for

acco file. I believe this is for Photoshop. And I can also click on an

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

app. You set a shortcut. Mine is

commandoption C. And it brings up a systemwide color picker, which I can then use to pick any color I want from

my screen. And that gives me by default

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

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

cultures. Color harmonies allow you to easily create a color palette. A

complimentary color palette will give you the most contrast, while a monochromatic one will give you the least contrast. Use Adobe Color to

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

All right. So now we're in the realm of UI design. We have a project brief, a

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

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

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

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

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

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

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

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

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, FC3A 79.

So, that's the primary. Based on the primary, we can now start building our color palette. And for that, I'm going

color palette. And for that, I'm going to use Adobe color. So, I'm going to jump in here, paste that in. And

I'm actually going to use an analog harmony rule because I feel that using uh colors that are closer to our primary

on the color wheel is going to be a good thing. First of all, because the logos

thing. First of all, because the logos 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

primary. And let's make sure this is 100%. And also uh let's make the

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

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, 261F

22. So, I'm basically mixing my

22. 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

color style. I'm going to call this black. And then I'm going to duplicate

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 50. And we'll do the same 25% black 25% black 10 and then finally 5%

black five. So what this allows you to

black five. 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 five 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 it hue from here.

it's going to keep its transparency and because it's a color style um that change is going to be reflected on all the elements that are using it. And

finally, I want to create a let's call it a contextual color for errors because uh you know we have forms and maybe in those forms at some point

we'll have to display an error message and to properly color the error message we usually use um some kind of red color. So if we go back to the color

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,

palette. We have the primary, secondary, we have a gradient if we decide to use it. Then we have uh the the grays as

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

thing. Uh this is another way to create tints. So instead of mixing the color

tints. So instead of mixing the color directly with white, right? If I have a

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

this again. But, you know, when creating tints for this type of color, you can also do it the oldfashioned 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

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

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

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, 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

background, right? so that people can read it properly, especially people with visual impairments. And there are online

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

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

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

secondary color. Okay, this passes as well. My primary black passes with an

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

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

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

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

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 type face, 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

other things. So, how do you get started with typography? How do you uh pick the

with typography? How do you uh pick the right type faces 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 foundaries or font libraries, but there are also individuals that uh or teams that sell

uh fonts on marketplaces like graphic river. Inado elements also has a huge

river. Inado 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 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

entire list. Uh you can type your own sentence. Hello.

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

like so. And you can also browse the various categories of fonts. serif son

serif display handwriting monospace and so on. So if I'm looking for example uh

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

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

this. And I believe you can also access it separately, although don't quote me on that. I'm not exactly sure. But uh

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

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

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

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, 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 Font 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

and there. So, that's a quick look at Adobe Fonts and Google Font. the two

places I recommend you get your fonts from as a beginner. Okay, so let's say you picked the place where you want to get your fonts from. What's next? Well,

it's time to pick the actual fonts. And

for that, uh you need to understand the brand that you're designing for and also its end users, right? So the people that are

users, right? So the people that are going to be using that that website basically. uh that part should mostly be

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

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 Saroski is doing here. However, you wouldn't use

doing here. However, you wouldn't use that serif in a tech website like Stripe. Here you would use sun serifs to

Stripe. Here you would use sun serifs to evoke a feeling of modern and trust. One

very important factor in font choice is readability. So, uh after you've chosen

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

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 um 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

your mind. Right? So yes, technically you're the designer, but uh 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?

Uh 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

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, type faces, then it gets a bit trickier.

Personally, I like to use the fonts with the greatest readability for smaller elements in my UI like uh you know body

text uh buttons, menus, captions and that sort of things and uh use the other type face 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,

that? Well, when it comes to font sizes, because that's probably the biggest deal. Uh, thankfully, we have something

deal. Uh, thankfully, we have something called type scales. I made a separate course on Tutts Plus 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

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

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

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,

our project. Let's begin. First step,

let's pick where we'll get our fonts from. Personally, I am a big fan of

from. Personally, I am a big fan of Adobe Fonts. I have access to the

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 son serif, right? And

if you don't know what um the differences between serif and sun serif, well let me show you. This one right here is a serif. See these

embellishments on the letters? Well, these are called seraps.

But a son serif or without serif is just a cleaner looking type face, right? You

can't see any of the seraps here because well there are none. And usually seraps

are considered to be more classic more old school type faces while son seraps are considered to be modern. So we

settled on sans seraps. Now which ones?

Because there are so many right if we click on this uh category we have uh almost 800 font families of son sun

serifs in Google fonts. Well, Robert is what? A UI designer, right? So, let's

what? A UI designer, right? So, let's

think about what keywords come into mind when we think UI designer. One of them could be geometry, right? So, maybe

geometric. Well, there is such a thing as a geometric type face. It's one of the classifications.

And there are a couple of geometric type faces out there. One of which is Brandon Grotesque. and Brandon grotesque looks

Grotesque. and Brandon grotesque looks something like this.

You can see all the different fonts here. This looks really good. Adobe

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 type faces in this design

and I'll be using Brandon for the larger elements like headings. So that means we need another type face 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

so on. And you know you can Google this stuff you'll find font pairings font combinations from different foundaries but uh from my experience I know that

Brandon Grotesque uh pairs very well with Proximanova.

This is another um sans serif type face which looks something like this. It's

relatively similar to Brandon grotesque but also has a distinct characteristic.

And um Proximanova 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 itallic.

It works very well. In contrast, if I were to use uh Brand and Grotesque in smaller font sizes, right, it's uh it's

readable, but it's not as readable in my opinion as Prox Manova. So, these are the two uh type faces that we're going

to use, Brandon Grotesque and Proximova.

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

size. And the line height is going to be 30. All right. So, that's going to give

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,

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, um the other way around. It's really up

to you. Let's start with heading one,

to you. Let's start with heading one, heading two, and let's duplicate this. 3

4 5 6. All right. Let's set their uh font family to brand and grotesque.

Let's make all of these bold. Now, let's

set their font sizes. For that, we're going to use a nice tool called typecale. So, we'll go to typescale.com.

typecale. So, we'll go to typescale.com.

And this is a tool that creates typographic scales, the thing I mentioned earlier in the course. So with

a typographic scale, it's very simple.

You start with a base font size and a scale or a ratio. And the algorithm basically creates font sizes based on

these two elements by multiplying the base font size with the scale and then just keep repeating that process until

you get this. Right? So for example, uh 16 pixels multiplied by 1.25 will equal 20 pixels. 20 pixels

multiplied by 1.250 is going to be equal to 25 and so on.

You take this, you multiply it with the scale, you get to the next value and the next and the next and the next and so

on. So for our project, we're going to

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 as well. And when it comes to the scale, it goes something like this.

The smaller the ratio, the smaller the contrast between lower font sizes and bigger font sizes.

And you'll see that as I'm increasing the scale, the contrast between small and big gets more and more

obvious.

And if I go like to a golden ratio, you can see that it's 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

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

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

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

should. In my case, 144 is um the correct line height that I'm looking for. There's not too much space between

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.

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

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

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

the headings. So after doing that, the type scale looks something like this. We

have the heading one, 2, 3, 4, 5, and six. Now let's see about font weights.

six. Now let's see about font weights.

because these are headings.

Uh most of them will be bold, but every now and then I think um kind of a a change in this rhythm can be beneficial.

So what I like to usually do is have the heading three use a different font weight. Usually something that's uh a

weight. Usually something that's uh a lot different than the others like light. So heading one and two will be

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

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

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

other three. And that's it. That's how

you get your typography started with Figma and this great tool called Typescale. Uh there is another tool I

Typescale. Uh there is another tool I wanted to show you that's called archetype. And with this tool you can uh

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 typescale. I find it much uh faster to use. It's much more fluid. Uh but as an alternative, um

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,

easier. If your design app allows it, create text styles for elements like headings and paragraphs. Okay. Uh now

it's your turn. So go ahead and create the typography for your version of uh of the website. And of course you can copy

the website. And of course you can copy everything I do, but I encourage you to try other things. Try other type faces,

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,

on. But speaking of foundation, u 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

sizing. So let's go ahead and do that next.

All right, spacing and sizing in web design. This refers to how much space

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

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

interior spacing. Like for example in a button, right? The bigger the padding

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

point system. And in this system, every dimension is basically a multiple of eight. So, for example, this button has

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

elements. Um I've been doing it for a while now. It's worked out great for me

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

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 eightoint system. Uh it

becomes much easier for them to u deduce certain measurements without having having to measure every single time.

There are also more technical reasons for using this system and you can read more about that in this article on medium. You can find the link in the

medium. You can find the link in the video description. But for now, uh

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. Uh those

are used for sizing and aligning content, right? Well, yes they are. But

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

project. And let me tell you why. So the

use of grids in web design is pretty straightforward. Basically a grid

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 um 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

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

element. You can align it like so. Maybe

another one, you know, you can align it like this. Maybe you have a piece of

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

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

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

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

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 11:45. And

minus 135. This gives you 11:45. And

then just grab this and using your arrow keys, just move it into place. So right

now you'll have the exact same distance from both sides. And you can create as many guides as you want

depending on the type of layout that you want to make. And if you want to hide the rulers and the guides, you can simply press shift R and that's

going to hide both. And you can use this shortcut to toggle uh to toggle the visibility basically. And of course you

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

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 gridlike 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

project. Of course, if you want, you can use grids. There's nothing wrong with

use grids. There's nothing wrong with that. But if you're just starting out, I

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

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

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

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 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 check mark icon is not really appropriate, right? It

doesn't exactly represent what the text is saying. But if we replace it with

is saying. But if we replace it with this icon, then it looks much better, doesn't it? The icon and text work

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

brands. So, a user seeing those icons know exactly what they do. Another thing

to be careful about when working with icons is the style. Uh you need to be consistent and use icons with the same style. They don't have to be from the

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 highquality icon sets out there and most of them are free. Uh a simple Google search will

free. Uh a simple Google search will give you a bunch of results. Uh and

you'll be good to go. Uh however, u I have a couple of icon sets that I use regularly. They're some of my favorites

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

recommend this. Another one is Font Awesome. This is probably the most

Awesome. This is probably the most popular icon set. There are

14,865 icons in the pro version, which you know is is a paid 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 uh yeah, font awesome another great option. Uh hero

icons. This is a smaller icon set with just 230 and it's licensed MIT so it's free to use even for commercial projects. Uh these come in two varieties

projects. Uh 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 forge

icons. Really cool icon set. This is

icons. Really cool icon set. This is

actually uh the set that I'm using for this project. I really like them and

this project. I really like them and they're also free. And then I recommend

you also go to Invato Elements for icons because if you go under uh graphics icons, you'll find tons and tons of icon

sets. And if you have a element

sets. And if you have a element 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

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

sets. It's available for both Mac OS and Windows. It's free and it looks pretty

Windows. It's free and it looks pretty awesome. Let me show you right here.

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

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

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.

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

icon. I can paste it in my project and I'm good to go. So, I highly recommend this. It's a free software,

this. It's a free software, crossplatform, and if you're constantly working with icons, I think it's a no-brainer. Just go ahead and get it.

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,

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

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

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, cliche ones. Whenever

possible, use photos that are provided by the client. Keep it real. And with

that, we conclude the initial theory part of this course. Now, it's time to roll our sleeves and get to work. And

we'll start by looking at common patterns. Um, if you're confused by the

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

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,

do that? Well, the answer would be tabs, right? So tabs because they're very

right? So tabs because they're very effective became the solution to this very common

problem. They became a common pattern.

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

patterns. We'll uh um try to define them. We'll take a look at some real

them. We'll take a look at some real world examples. So what other people are

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 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

button. Also, uh headers are typically horizontal, but they can also be vertical. And

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

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

the differences. We're going to start with one of my favorite websites uh that's Stripe. And here we see a very

that's Stripe. And here we see a very simple header. We have the logo, the

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 header. Uh personally I call this the hero area. So it's something separate. But there are those who say

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

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. 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

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

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

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

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

needs. As I was saying, uh here's another website. Now, this features a

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

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

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,

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

search form. A header is highly customizable and can hold other types of content. Headers can also be vertical.

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

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

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

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

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.

right? This and this. Two text elements.

And I want to position them in the same group. So they're perfectly aligned

group. So they're perfectly aligned and they also have a consistent spacing between them. Now, if I were to create a

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

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,

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.

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

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

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.

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

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

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 be the icon uses um kind of a stroke for uh for the

lines. So whenever I resize it using

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 dribble.

So, let's grab those again. K. And resize this to 32.

again. K. And resize this to 32.

Like that. And finally, dribble.

And this is actually a bad rendering of that icon. See how

the lines are kind of messed up here?

Uh, Figma does that sometimes, unfortunately. It's one of its

unfortunately. It's one of its drawbacks. It doesn't render correctly

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

elsewhere. So, I'm going to search for dribble here. And as you can see, we can

dribble 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

default. So let's just resize it like so to 32 pixels like that. And we might need to tweak it

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

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.

that. Be uh between this and the edge.

And then we can even drag a guide right there. Okay, so those are the social

there. Okay, so those are the social icons. So, our header is starting to

icons. So, our header is starting to take shape. Uh, let's see about this

take shape. Uh, let's see about this line here. This is a separator. And I'm

line here. This is a separator. And I'm

going to keep it, but I'm going to change it 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,

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

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

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

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

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

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

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

section. So I'm going to select this frame. Press L for line tool. Click and

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

side. Now I also want to add some top padding and bottom padding for this section. So, I'm going to select 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

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

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

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

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

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

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.

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

there. Maybe you don't want the social icons to be there. You know, play around with it. Create your own version. Put

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

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

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 realworld examples. The first one is from Stripe. Again, one of my

favorite websites. And here the hero

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.

experience. Let's look at another one.

This is from site ground. Again, we have the message, description, call to action. We have also some pricing

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

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

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

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 uh 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

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

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

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

fold. A hero is considered prime real estate, so it displays critical information. A lot of hero areas show

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

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

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

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

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

it. And for fill color, we'll go with black 75. And that's what I like to

black 75. And that's what I like to usually do. Headings, I usually leave

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%.

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 an 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

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

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.

website. So, 256.

And with that, my hero area is almost done. We just need to make this button,

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

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

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

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

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 realworld examples.

Here we have the website of Avacode and we have a couple different buttons.

Let's take it from the top. This one

will basically take us somewhere else as do these two. So these two are actually part of the call to action. Uh we also

have two other buttons here for cookies.

And by clicking these, they perform an action, right? They

close that UI element. We also have a button here that says start free trial.

This is also part of the main call to action from the hero area. Here's

another button that's not used for navigation. This opens up a popup 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

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,

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

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

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

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 cube. If you open a specific um

to cube. 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

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

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

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.

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

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

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

right? And this creates a very very nice shadow. Uh, personally, I just leave it

shadow. Uh, personally, I just leave it at default. So, let's run that again.

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

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

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

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 eyee 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

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

doing. In my case, I want this button to scroll the page to the portfolio

section. So that's why I used this

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

explicit. Tell the user what that button is doing. Now before we wrap up this

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

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

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

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.

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

again. I'm going to get rid of the shadows.

Remember, we want this to be a bit more subdued. And instead of using

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

that. I just want the text and the icon to have that color. So, that's the default state. Let's create a hover

default state. Let's create a hover state. For the hover, how about we

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

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

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

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

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

image. And you know, you usually control that slideshow with your mouse or with your keyboard. So, um, let's see some

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

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

picture. Right? So, that's one use of an image slideshow. Uh what about this

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

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

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

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

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

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

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. 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

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

background. So, let me reposition it like that. And then I also want to leave

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

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

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

space. now on the left and on the right and this image fits within exactly that amount. Now, here's the thing. This is

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

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

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

side. You can press I on the keyboard to sample it. It really depends on, you

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

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

elements. And let's get the other images. And again, just for convenience,

images. And again, just for convenience, I'm simply going to paste these in like so. Same deal. These are basically

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

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

pixel gap. Make sure everything is right here. 128. These are nicely aligned

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

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

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

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

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

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

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

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

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

called here. And then we have a navigation menu, a newsletter signup, right? This is another type of call to

right? This is another type of call to action. And then the usual links,

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

interesting footer. We have the call to action. Uh some additional content that

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

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

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

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

website. All right, now time for some key takeaways. Uh, a website's footer is

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

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

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

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.

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

smaller. I'm going to use 640 pixels for width. Why 640, you might ask? Well, that's divisible by 8. So, I

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

perfect. But one thing that I don't like is the way these are positioned right here. I don't want them there. So

here. I don't want them there. So

instead I'll delete them. I'll go back up to my

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

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.

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

consistency, right? And that translates to paddings, margins, distances, and so on. So with that, the CTA section is

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

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

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.

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

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

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

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

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

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

clients. Don't use fake testimonials. No

testimonials is much better than fake testimonials. So, if you're a new

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

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

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

testimonials. And as you can see, they have a video testimonial here from Ashley George. We have the actual quote

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

right? And then you can use this to view the rest of the testimonials, which is pretty cool. It's like a slider.

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

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

testimonial itself. Uh, next one is from Lus Ludus.

And their testimonials look something like this. And instead of displaying

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

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

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

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

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

weight. So, I'm going to detach uh the style. And I'm just going to change from

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

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

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

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

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

so. And actually 32 pixels is way too much. Let's go with like eight.

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

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

pixels. And that should work out just fine. And then finally, uh I think I'm

fine. And then finally, uh I think I'm going to make this just a little bit bigger. Something like 800 pixels. And

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

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

here. And what I can do is I can delete this bit. I can paste in

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

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

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,

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

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

cards. Okay. So let's grab the rectangle tool. Draw a rectangle. Something like

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

element. You can also rightclick and you can say bring to front, send to back. Uh, so you know, bringing to the

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

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

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

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

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

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.

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

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,

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

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

as well. Shift R to hide the rulers and the guides. And there you have it. This

the guides. And there you have it. This

is the second testimonial section. And with that,

testimonial section. And with that, we've covered one more pattern, the testimonials. And uh now, of course,

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

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

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

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

same. So, uh let's have a look at some examples. First one is from Avaode. And

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. Uh moving on to timely.

implementation. Uh moving on to timely.

Uh here we have some tabs uh right here also for testimonials right and clicking these will basically change this area right here.

Next let's go to Omnitype.

And if we scroll down, this is an 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.

Uh 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

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

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

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

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

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

them. But I also want to add some imagery. Uh, and I'm thinking the logos

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,

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.

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

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

the stroke. And for fill, I'm going to use black. Let's also give this like a

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.

line height. And let's make this white.

And let's make this black 50. And actually, you know what?

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

black 10. Just like that. Now let's

select the parent container for these two elements. And this has auto layout

two elements. And this has auto layout applied. That's good. But I also want to

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

active tab. And then when this is clicked, they're going to swap styles, right? This will have the dark

right? This will have the dark background. This will have no

background. This will have no background.

Does that make sense? So, those are the tab links. Now, let's focus on the tab

tab links. Now, let's focus on the tab content here. And I'm going to start

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

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. 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

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

control. And 96 pixels is a measurement that we've used in other places. For

example, here, right? The distance between this button

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

eight. Uh in my case, I think 96 uh pixels actually looks just fine for this application. So I'm going to stick with

application. So I'm going to stick with it. So there you have it. That is our

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

want. Right? Then the tab control is done. We've crossed it off our list and

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.

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.

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

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

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

at once. And uh this accordion is also nested, right? So we have an accordion

nested, right? So we have an accordion within an accordion. The next example is from Heineken. And let me actually

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

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

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

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

page. I think uh a darker background uh would work just like we did here for the testimonials. So, I'm going to copy

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

like so. Making sure it's in the correct uh frame. And because we are using the

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,

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

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

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

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

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.

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

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.

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

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

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

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.

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.

active link. Set it to black.

and also make a quick change to the icon. Let's turn it into a minus

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

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

expanded version. And let's actually set this to fill. And also its parent element. We're going to set it to fill.

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

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

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

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

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

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

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

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,

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

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,

form. So, if you want more examples, just uh check out your favorite websites. Uh but for now, with these

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

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

Okay. So, based on the wireframe, the contact form is placed in the contact page. Imagine that. So, uh let's get

page. Imagine that. So, uh let's get started. So, let's uh zoom in to our

started. So, let's uh zoom in to our contact page. And this is the wireframe,

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

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

uh layout. So text on this side, form on that side. And also having all this text

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

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

like this. And maybe we'll use the bold version. Do we have a bold version?

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

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

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,

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

input. Uh now, we need to add the labels, right? So, for that, let's uh

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

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

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

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

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

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

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

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

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

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

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

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

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

the default. Let's do one for uh focus slh. So when we hover with our mouse

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

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

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

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

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

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

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,

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

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,

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

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

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

solutions. What you see here is the finished design. And as I was saying

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

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

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

sizes. And this is done, of course, in Figma. It's using the auto layout

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

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

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

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

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

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

column. So these are the types of problems that you need to keep an eye out for. Responsive design is not just

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."

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

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

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

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

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

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

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,

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

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?

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

version. So at 1200 pixels, I did the following. I moved the menu items in a

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.

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

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

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

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

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

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

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

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,

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

600 number? Well, I repeated the exact process. I started resizing my content

process. I started resizing my content until I could see some problems emerging. And that's when I added

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

work with. I have yet another version of the header without the social icons. This time the logos here

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

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

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

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,

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.

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

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

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

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

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

links. So let's actually start with the tab links. This is a pretty easy fix.

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

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.

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

here column. So, I'm going to select two of them. Shift A to group them up.

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

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

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

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

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

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.

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,

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

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

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

principles. Now where do we go from here? Well, technically it's job done

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

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

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

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

inspect. We need to switch to the prototype tab. And what you do is you

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

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,

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 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

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

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

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,

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

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

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

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

design. Study the fundamentals as much as you can. Color, typography, spacing, sizing, and imagery. Get to know the most common web design patterns and see

how other people are using them. And

finally, when designing website, make sure it looks good on smaller or larger screens. Responsive web design is

screens. Responsive web design is critical. And that's it from me. Thank

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

more. I'm AI and until next time, take care. Uh this is this refer first

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