Instructor: 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 your 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 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 they 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 typography.
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,
this 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'll 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 specially 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 and 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 Paletton is great,
or a tool like Coolors,
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 these 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 underlying text, or some highlighted text.
We have some color behind icons,
or we also have some colored 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 as 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 specially 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 or 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 a white background.
And this was really, really hard to read
for people who don't have perfect sight.
So to make your website 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 Coolors again.
So a tool like this will give you something called
a contrast ratio, which needs to be at least 4.5:1
for normal text and 3:1 for large text.
So for example, here on the right side
we have a contrast ratio of 2.9:1.
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:1,
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,
so the text is really quite 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.