Original subtitles

The next very important web design ingredient,

which needs a lot of thought and consideration, is color.

Now, working with color can be hard,

because there is something called color theory,

which is actually quite complex.

However, fortunately,

you don't need to learn color theory

in order to create awesome designs.

All you need to know is in this lecture.

And the first couple of guidelines here

are about choosing the right color for your design.

And so just like in typography,

you need to make sure that the color

of your website matches the website's personality.

And that's extremely important,

and I would even say one of

the most important design choices,

because colors actually convey meaning.

And we all kind of know this intuitively already.

So, for example,

you wouldn't use a pink color

on an elegant lawyer's website, right?

Or you wouldn't use gold for a playful and fun startup.

So those colors just don't really match the personality,

and so they don't make a lot of sense.

So to make it easier for you to choose the right color,

let's quickly talk about the meaning about each of them.

So red is the color that draws the most attention of all,

and it also symbolizes power, passion, and excitement.

So I'm not gonna talk a lot about each of these colors,

I'm just mostly gonna read them here to make it fast.

So orange is similar to red,

but it's a little bit less aggressive

and it symbolizes happiness, cheerfulness,

and also creativity.

Then, similar to these two is yellow,

which basically means joy, brightness, and intelligence.

Next up, we have green, which is my favorite one,

and this one represents nature, growth, and health,

and also harmony.

Then we have blue,

which is probably the most used color in web design,

and there's a reason for that.

And the reason is that we humans have a tendency

of associating blue with peace,

trustworthiness, and professionalism.

And so these are attributes

that websites many times want to convey,

and so thy then use this color because, well, it works.

But anyway, we then have purple,

which conveys wealth, wisdom, and also magic,

in case you're looking for that.

Then, pink does represent romance, care, and affection,

which comes to us I think quite naturally,

the meaning of this color.

Then we have brown,

which usually represents nature,

and comfort, and durability.

And then finally, we also have pure black,

which once again symbolizes power a little bit like red,

but it also symbolizes elegance and minimalism on one hand,

but on the other hand, it also shows grief and sorrow.

So black is a difficult color to use.

And many times, for beginners,

it is probably not the best color to choose.

Okay, and once you choose your base color basically,

you need to make sure that you use a good color tone.

So for example, don't just go

into your VS Code Color Picker

and choose a random tone there, or even worse,

use one of the CSS named colors.

So instead, we have multiple tools that we can use for that.

One of them is basically a list of colors,

which is called open color,

and these are great colors that have been carefully designed

to build beautiful user interfaces.

And again, the link for this tool is on my resources page,

and actually, we're going to use this in the next lecture

for our project.

There is also another tool which is called Tailwind CSS,

and Tailwind is actually a huge CSS framework,

but many people just pick the colors

and don't use any of the framework,

because these colors are actually beautifully picked

and really nice and balanced.

Then there is also Flat UI Colors,

which has a little less shades,

but this one is also quite popular to use

as a starting point for your design.

Okay, so now you chose your main color according

to your site's personality,

and you also chose the right tone, for example,

using one of these tools,

but now it's time to establish a color system.

So in any design,

you need at least two types of colors in a color palette.

You need a main color and a gray color.

So let's look again at this example

that we studied before in topography, and here,

the main color is clearly this kind of blue here.

Then, for things like text, they use the gray color,

which in this case, is actually this very dark blue.

And this is very important to understand.

So just because it's called a gray color,

it doesn't actually have to be a true gray.

It can also just be a very dark version of another color.

So, in many designs,

having a main color and a gray color

is actually more than enough.

However, if you want to take it a step further

and add a bit more complexity to your designs,

then when you have a bit more experience,

you can of course add more colors.

So besides the main or primary color,

you can also add a secondary color,

which we can also call an accent color.

And in the case of this design example here,

the accent color would be this nice red.

Now, this accent color should not just be any random color.

Instead, there needs to be some relationship

between the main and the accent color.

And so therefore, you are going to need to use

some kind of tool in order to choose your accent color.

Okay, so let's say you now have your main, accent,

and gray colors.

Now, when you design real-world interfaces,

you will always need some lighter and some darker versions

of these three colors.

And the lighter versions, we call them tints,

and the darker versions we call shades.

And this is especially important for gray colors,

as you will usually need many different gray tones

for text in different places, or different states,

for example, different button states.

Now, when you choose the open color system,

or the Tailwind colors,

then they already come with these tints and shades included.

Now, if you use some other tool,

or came up with the color yourself,

then you can also easily create tints and shades

by using a tool called Tint & Shade Generator.

And since we're talking about tools for rule number four,

so for creating a nice accent color,

you should actually also use a tool for that,

as I mentioned before,

and not just create a random second color.

So for that, a tool like Palleton is great,

or a tool like Coolers,

which can actually generate entire color palettes.

All right, so with that,

you chose all your colors

and established a nice color system.

And so all we need to learn is when

and how you should actually use colors in your design.

So usually the main point of using colors

is to draw attention to the most important element

on a page.

So in these design examples here,

you can see that the main color is always used

to draw attention to the button,

which is many times the most important element of a page,

because, well,

that's where we actually want our users to click, right?

Also, the main color can many times be found

in the logo as well.

And by the way,

all these designs that I'm gonna show you here

can also serve you as inspiration

for the other design ingredients, for example, typography.

So there's a lot to learn in all these designs

that I selected, not just about colors in this case,

but anyway, here again,

we see that the primary color is used on buttons,

and indeed the same thing also right here.

Now, again,

I'm passing quite fast here through these examples

and these designs, but again,

I actually want you to download the PDF of the slides

and check them out by yourself

with some more time, all right?

I just don't want the video to take forever, but anyway,

we can also use colors to add some interesting accent,

or also to make entire components stand out from the page.

So again, here we have some examples.

For example, we have some borders going on,

or we have some underlined text, or some highlighted text.

We have some color behind icons,

or we also have some color text.

And the same here in the next examples,

and here we see what I mentioned before,

so where we have two entire sections standing out

from the rest of the page,

simply by giving them some nice background color.

Then here are some more, and again,

we have some sections that stand out

and we also have some nicely colored text here

in the middle.

And this one even has a gradient,

which is taking it one step further.

Now, another cool trick that many designers use

is to use color strategically in images and illustrations,

just like here.

So here on the left side,

you see the main color yellow appearing in those photos

at the top and in the middle.

Also, the red color is right inside of the image somehow

while on the very right side,

the main color orange also kind of appears inside

of the illustrations.

So using colors like this will give the design a really,

really consistent look and feel.

So this is actually an amazing technique,

if you can pull it off.

Now, finally, we also need to talk about

the relationship between colors and typography.

And the first guideline I have for you here

is that on dark colored backgrounds,

you can try to use a tint of the background color

for your text,

so basically a lighter version of the background color.

And so like in these two examples here,

this can give your text a really nice touch.

Now, this is not a hard rule that you need to follow,

but it's something that many designers like to do,

because it can actually look quite nice

and also a lot more natural.

And that is especially apparent here in this first example.

Now, another one is that text

should actually not be completely black.

Like in this example here,

the text on the right side looks quite heavy

and uninviting to read,

and so we should lighten it up

and use some kind of gray color.

And the same is true here

in this second example once again,

where I think that the one to the left looks a lot,

lot nicer than the one on the right.

And again, you might think

that this is a very subtle difference,

but it makes all the difference when you combine it

with all the other design guidelines

that I'm showing you here.

Now finally,

and this one is important for accessibility reasons,

is that you should never make your text too light, okay?

So a few years ago,

it was a huge design trend

to have this really light gray text,

for example, on white background.

And this was really,

really hard to read for people who don't have perfect sight.

So to make your websites accessible to everyone,

even people who have difficulty seeing,

always use a tool to check the contrast between text

and background colors,

using some tool such as Coolers again.

So a tool like this will give you something called

a contrast ratio,

which needs to be at least 4.5 to one for normal text,

and three to one for large text.

So, for example, here on the right side,

we have a contrast ratio of 2.9 to one,

and so this can be hard to read

for people who don't have perfect eyesight.

On the other hand, on the left side,

we have the right way of doing it.

So we have a huge contrast ratio, so 13 to one,

and this one will be a lot easier to read

and not just for people who don't have perfect eyesight.

And the same for this one.

So 2.9 again on the right side,

and this one looks really off.

Sort the text is really quiet too dark,

while on the left side, with 5.1,

it's actually acceptable.

Okay, and that's it for guidelines about colors.

Let's now apply some of them to our project

in the next video.