Would you like to inspect the original subtitles? These are the user uploaded subtitles that are being translated:
1
00:00:01,470 --> 00:00:04,430
The next very important web design ingredient,
2
00:00:04,430 --> 00:00:09,150
which needs a lot of thought and consideration, is color.
3
00:00:09,150 --> 00:00:11,510
Now, working with color can be hard,
4
00:00:11,510 --> 00:00:14,370
because there is something called color theory,
5
00:00:14,370 --> 00:00:17,200
which is actually quite complex.
6
00:00:17,200 --> 00:00:18,630
However, fortunately,
7
00:00:18,630 --> 00:00:20,940
you don't need to learn color theory
8
00:00:20,940 --> 00:00:23,370
in order to create awesome designs.
9
00:00:23,370 --> 00:00:25,633
All you need to know is in this lecture.
10
00:00:27,290 --> 00:00:29,720
And the first couple of guidelines here
11
00:00:29,720 --> 00:00:33,280
are about choosing the right color for your design.
12
00:00:33,280 --> 00:00:35,700
And so just like in typography,
13
00:00:35,700 --> 00:00:37,730
you need to make sure that the color
14
00:00:37,730 --> 00:00:42,000
of your website matches the website's personality.
15
00:00:42,000 --> 00:00:44,170
And that's extremely important,
16
00:00:44,170 --> 00:00:45,850
and I would even say one of
17
00:00:45,850 --> 00:00:48,110
the most important design choices,
18
00:00:48,110 --> 00:00:51,030
because colors actually convey meaning.
19
00:00:51,030 --> 00:00:54,540
And we all kind of know this intuitively already.
20
00:00:54,540 --> 00:00:55,870
So, for example,
21
00:00:55,870 --> 00:00:57,960
you wouldn't use a pink color
22
00:00:57,960 --> 00:01:01,460
on an elegant lawyer's website, right?
23
00:01:01,460 --> 00:01:06,320
Or you wouldn't use gold for a playful and fun startup.
24
00:01:06,320 --> 00:01:10,520
So those colors just don't really match the personality,
25
00:01:10,520 --> 00:01:13,570
and so they don't make a lot of sense.
26
00:01:13,570 --> 00:01:16,710
So to make it easier for you to choose the right color,
27
00:01:16,710 --> 00:01:20,380
let's quickly talk about the meaning about each of them.
28
00:01:20,380 --> 00:01:24,370
So red is the color that draws the most attention of all,
29
00:01:24,370 --> 00:01:28,660
and it also symbolizes power, passion, and excitement.
30
00:01:28,660 --> 00:01:31,500
So I'm not gonna talk a lot about each of these colors,
31
00:01:31,500 --> 00:01:35,220
I'm just mostly gonna read them here to make it fast.
32
00:01:35,220 --> 00:01:37,600
So orange is similar to red,
33
00:01:37,600 --> 00:01:40,130
but it's a little bit less aggressive
34
00:01:40,130 --> 00:01:42,980
and it symbolizes happiness, cheerfulness,
35
00:01:42,980 --> 00:01:44,523
and also creativity.
36
00:01:45,390 --> 00:01:47,940
Then, similar to these two is yellow,
37
00:01:47,940 --> 00:01:52,890
which basically means joy, brightness, and intelligence.
38
00:01:52,890 --> 00:01:57,000
Next up, we have green, which is my favorite one,
39
00:01:57,000 --> 00:02:01,510
and this one represents nature, growth, and health,
40
00:02:01,510 --> 00:02:03,440
and also harmony.
41
00:02:03,440 --> 00:02:04,670
Then we have blue,
42
00:02:04,670 --> 00:02:08,090
which is probably the most used color in web design,
43
00:02:08,090 --> 00:02:09,970
and there's a reason for that.
44
00:02:09,970 --> 00:02:13,250
And the reason is that we humans have a tendency
45
00:02:13,250 --> 00:02:16,040
of associating blue with peace,
46
00:02:16,040 --> 00:02:18,820
trustworthiness, and professionalism.
47
00:02:18,820 --> 00:02:20,630
And so these are attributes
48
00:02:20,630 --> 00:02:23,650
that websites many times want to convey,
49
00:02:23,650 --> 00:02:27,793
and so thy then use this color because, well, it works.
50
00:02:28,860 --> 00:02:30,820
But anyway, we then have purple,
51
00:02:30,820 --> 00:02:35,210
which conveys wealth, wisdom, and also magic,
52
00:02:35,210 --> 00:02:37,410
in case you're looking for that.
53
00:02:37,410 --> 00:02:42,110
Then, pink does represent romance, care, and affection,
54
00:02:42,110 --> 00:02:45,150
which comes to us I think quite naturally,
55
00:02:45,150 --> 00:02:46,970
the meaning of this color.
56
00:02:46,970 --> 00:02:48,840
Then we have brown,
57
00:02:48,840 --> 00:02:51,470
which usually represents nature,
58
00:02:51,470 --> 00:02:54,090
and comfort, and durability.
59
00:02:54,090 --> 00:02:57,380
And then finally, we also have pure black,
60
00:02:57,380 --> 00:03:01,510
which once again symbolizes power a little bit like red,
61
00:03:01,510 --> 00:03:06,180
but it also symbolizes elegance and minimalism on one hand,
62
00:03:06,180 --> 00:03:10,530
but on the other hand, it also shows grief and sorrow.
63
00:03:10,530 --> 00:03:13,180
So black is a difficult color to use.
64
00:03:13,180 --> 00:03:15,140
And many times, for beginners,
65
00:03:15,140 --> 00:03:18,420
it is probably not the best color to choose.
66
00:03:18,420 --> 00:03:22,310
Okay, and once you choose your base color basically,
67
00:03:22,310 --> 00:03:26,070
you need to make sure that you use a good color tone.
68
00:03:26,070 --> 00:03:27,820
So for example, don't just go
69
00:03:27,820 --> 00:03:30,170
into your VS Code Color Picker
70
00:03:30,170 --> 00:03:33,770
and choose a random tone there, or even worse,
71
00:03:33,770 --> 00:03:36,750
use one of the CSS named colors.
72
00:03:36,750 --> 00:03:40,620
So instead, we have multiple tools that we can use for that.
73
00:03:40,620 --> 00:03:43,520
One of them is basically a list of colors,
74
00:03:43,520 --> 00:03:45,490
which is called open color,
75
00:03:45,490 --> 00:03:48,900
and these are great colors that have been carefully designed
76
00:03:48,900 --> 00:03:52,470
to build beautiful user interfaces.
77
00:03:52,470 --> 00:03:56,900
And again, the link for this tool is on my resources page,
78
00:03:56,900 --> 00:04:00,240
and actually, we're going to use this in the next lecture
79
00:04:00,240 --> 00:04:02,567
for our project.
80
00:04:02,567 --> 00:04:07,330
There is also another tool which is called Tailwind CSS,
81
00:04:07,330 --> 00:04:10,980
and Tailwind is actually a huge CSS framework,
82
00:04:10,980 --> 00:04:13,650
but many people just pick the colors
83
00:04:13,650 --> 00:04:15,690
and don't use any of the framework,
84
00:04:15,690 --> 00:04:18,580
because these colors are actually beautifully picked
85
00:04:18,580 --> 00:04:20,493
and really nice and balanced.
86
00:04:21,470 --> 00:04:24,010
Then there is also Flat UI Colors,
87
00:04:24,010 --> 00:04:26,420
which has a little less shades,
88
00:04:26,420 --> 00:04:29,020
but this one is also quite popular to use
89
00:04:29,020 --> 00:04:32,640
as a starting point for your design.
90
00:04:32,640 --> 00:04:36,060
Okay, so now you chose your main color according
91
00:04:36,060 --> 00:04:38,130
to your site's personality,
92
00:04:38,130 --> 00:04:41,050
and you also chose the right tone, for example,
93
00:04:41,050 --> 00:04:42,770
using one of these tools,
94
00:04:42,770 --> 00:04:45,593
but now it's time to establish a color system.
95
00:04:47,150 --> 00:04:48,530
So in any design,
96
00:04:48,530 --> 00:04:52,910
you need at least two types of colors in a color palette.
97
00:04:52,910 --> 00:04:56,670
You need a main color and a gray color.
98
00:04:56,670 --> 00:04:58,550
So let's look again at this example
99
00:04:58,550 --> 00:05:01,680
that we studied before in topography, and here,
100
00:05:01,680 --> 00:05:06,620
the main color is clearly this kind of blue here.
101
00:05:06,620 --> 00:05:10,450
Then, for things like text, they use the gray color,
102
00:05:10,450 --> 00:05:13,920
which in this case, is actually this very dark blue.
103
00:05:13,920 --> 00:05:16,290
And this is very important to understand.
104
00:05:16,290 --> 00:05:19,240
So just because it's called a gray color,
105
00:05:19,240 --> 00:05:22,530
it doesn't actually have to be a true gray.
106
00:05:22,530 --> 00:05:27,460
It can also just be a very dark version of another color.
107
00:05:27,460 --> 00:05:28,920
So, in many designs,
108
00:05:28,920 --> 00:05:31,550
having a main color and a gray color
109
00:05:31,550 --> 00:05:33,780
is actually more than enough.
110
00:05:33,780 --> 00:05:36,550
However, if you want to take it a step further
111
00:05:36,550 --> 00:05:39,560
and add a bit more complexity to your designs,
112
00:05:39,560 --> 00:05:42,230
then when you have a bit more experience,
113
00:05:42,230 --> 00:05:44,930
you can of course add more colors.
114
00:05:44,930 --> 00:05:47,830
So besides the main or primary color,
115
00:05:47,830 --> 00:05:50,320
you can also add a secondary color,
116
00:05:50,320 --> 00:05:53,240
which we can also call an accent color.
117
00:05:53,240 --> 00:05:56,190
And in the case of this design example here,
118
00:05:56,190 --> 00:06:00,150
the accent color would be this nice red.
119
00:06:00,150 --> 00:06:04,080
Now, this accent color should not just be any random color.
120
00:06:04,080 --> 00:06:06,600
Instead, there needs to be some relationship
121
00:06:06,600 --> 00:06:09,240
between the main and the accent color.
122
00:06:09,240 --> 00:06:11,500
And so therefore, you are going to need to use
123
00:06:11,500 --> 00:06:15,443
some kind of tool in order to choose your accent color.
124
00:06:16,410 --> 00:06:19,710
Okay, so let's say you now have your main, accent,
125
00:06:19,710 --> 00:06:21,710
and gray colors.
126
00:06:21,710 --> 00:06:24,750
Now, when you design real-world interfaces,
127
00:06:24,750 --> 00:06:28,200
you will always need some lighter and some darker versions
128
00:06:28,200 --> 00:06:30,440
of these three colors.
129
00:06:30,440 --> 00:06:33,110
And the lighter versions, we call them tints,
130
00:06:33,110 --> 00:06:36,350
and the darker versions we call shades.
131
00:06:36,350 --> 00:06:39,450
And this is especially important for gray colors,
132
00:06:39,450 --> 00:06:42,650
as you will usually need many different gray tones
133
00:06:42,650 --> 00:06:46,470
for text in different places, or different states,
134
00:06:46,470 --> 00:06:49,380
for example, different button states.
135
00:06:49,380 --> 00:06:51,760
Now, when you choose the open color system,
136
00:06:51,760 --> 00:06:53,640
or the Tailwind colors,
137
00:06:53,640 --> 00:06:57,810
then they already come with these tints and shades included.
138
00:06:57,810 --> 00:06:59,660
Now, if you use some other tool,
139
00:06:59,660 --> 00:07:01,920
or came up with the color yourself,
140
00:07:01,920 --> 00:07:05,100
then you can also easily create tints and shades
141
00:07:05,100 --> 00:07:09,350
by using a tool called Tint & Shade Generator.
142
00:07:09,350 --> 00:07:13,370
And since we're talking about tools for rule number four,
143
00:07:13,370 --> 00:07:16,060
so for creating a nice accent color,
144
00:07:16,060 --> 00:07:18,530
you should actually also use a tool for that,
145
00:07:18,530 --> 00:07:20,230
as I mentioned before,
146
00:07:20,230 --> 00:07:23,380
and not just create a random second color.
147
00:07:23,380 --> 00:07:26,690
So for that, a tool like Palleton is great,
148
00:07:26,690 --> 00:07:28,730
or a tool like Coolers,
149
00:07:28,730 --> 00:07:32,530
which can actually generate entire color palettes.
150
00:07:32,530 --> 00:07:34,150
All right, so with that,
151
00:07:34,150 --> 00:07:36,100
you chose all your colors
152
00:07:36,100 --> 00:07:38,860
and established a nice color system.
153
00:07:38,860 --> 00:07:41,320
And so all we need to learn is when
154
00:07:41,320 --> 00:07:44,643
and how you should actually use colors in your design.
155
00:07:45,930 --> 00:07:48,790
So usually the main point of using colors
156
00:07:48,790 --> 00:07:51,900
is to draw attention to the most important element
157
00:07:51,900 --> 00:07:53,690
on a page.
158
00:07:53,690 --> 00:07:55,920
So in these design examples here,
159
00:07:55,920 --> 00:07:58,790
you can see that the main color is always used
160
00:07:58,790 --> 00:08:00,940
to draw attention to the button,
161
00:08:00,940 --> 00:08:04,380
which is many times the most important element of a page,
162
00:08:04,380 --> 00:08:05,710
because, well,
163
00:08:05,710 --> 00:08:09,940
that's where we actually want our users to click, right?
164
00:08:09,940 --> 00:08:12,590
Also, the main color can many times be found
165
00:08:12,590 --> 00:08:14,620
in the logo as well.
166
00:08:14,620 --> 00:08:15,770
And by the way,
167
00:08:15,770 --> 00:08:18,330
all these designs that I'm gonna show you here
168
00:08:18,330 --> 00:08:20,500
can also serve you as inspiration
169
00:08:20,500 --> 00:08:25,220
for the other design ingredients, for example, typography.
170
00:08:25,220 --> 00:08:27,710
So there's a lot to learn in all these designs
171
00:08:27,710 --> 00:08:31,840
that I selected, not just about colors in this case,
172
00:08:31,840 --> 00:08:33,570
but anyway, here again,
173
00:08:33,570 --> 00:08:37,620
we see that the primary color is used on buttons,
174
00:08:37,620 --> 00:08:41,350
and indeed the same thing also right here.
175
00:08:41,350 --> 00:08:42,183
Now, again,
176
00:08:42,183 --> 00:08:45,030
I'm passing quite fast here through these examples
177
00:08:45,030 --> 00:08:47,910
and these designs, but again,
178
00:08:47,910 --> 00:08:51,620
I actually want you to download the PDF of the slides
179
00:08:51,620 --> 00:08:53,200
and check them out by yourself
180
00:08:53,200 --> 00:08:55,660
with some more time, all right?
181
00:08:55,660 --> 00:09:00,340
I just don't want the video to take forever, but anyway,
182
00:09:00,340 --> 00:09:04,640
we can also use colors to add some interesting accent,
183
00:09:04,640 --> 00:09:09,540
or also to make entire components stand out from the page.
184
00:09:09,540 --> 00:09:12,080
So again, here we have some examples.
185
00:09:12,080 --> 00:09:15,650
For example, we have some borders going on,
186
00:09:15,650 --> 00:09:20,040
or we have some underlined text, or some highlighted text.
187
00:09:20,040 --> 00:09:22,190
We have some color behind icons,
188
00:09:22,190 --> 00:09:24,453
or we also have some color text.
189
00:09:25,600 --> 00:09:28,530
And the same here in the next examples,
190
00:09:28,530 --> 00:09:31,250
and here we see what I mentioned before,
191
00:09:31,250 --> 00:09:34,040
so where we have two entire sections standing out
192
00:09:34,040 --> 00:09:35,660
from the rest of the page,
193
00:09:35,660 --> 00:09:38,823
simply by giving them some nice background color.
194
00:09:40,300 --> 00:09:42,660
Then here are some more, and again,
195
00:09:42,660 --> 00:09:45,260
we have some sections that stand out
196
00:09:45,260 --> 00:09:47,710
and we also have some nicely colored text here
197
00:09:47,710 --> 00:09:48,850
in the middle.
198
00:09:48,850 --> 00:09:50,810
And this one even has a gradient,
199
00:09:50,810 --> 00:09:53,103
which is taking it one step further.
200
00:09:54,000 --> 00:09:57,220
Now, another cool trick that many designers use
201
00:09:57,220 --> 00:10:01,990
is to use color strategically in images and illustrations,
202
00:10:01,990 --> 00:10:03,033
just like here.
203
00:10:04,010 --> 00:10:05,430
So here on the left side,
204
00:10:05,430 --> 00:10:09,120
you see the main color yellow appearing in those photos
205
00:10:09,120 --> 00:10:11,260
at the top and in the middle.
206
00:10:11,260 --> 00:10:16,200
Also, the red color is right inside of the image somehow
207
00:10:16,200 --> 00:10:18,270
while on the very right side,
208
00:10:18,270 --> 00:10:21,950
the main color orange also kind of appears inside
209
00:10:21,950 --> 00:10:23,720
of the illustrations.
210
00:10:23,720 --> 00:10:27,770
So using colors like this will give the design a really,
211
00:10:27,770 --> 00:10:30,110
really consistent look and feel.
212
00:10:30,110 --> 00:10:32,710
So this is actually an amazing technique,
213
00:10:32,710 --> 00:10:34,093
if you can pull it off.
214
00:10:35,320 --> 00:10:37,710
Now, finally, we also need to talk about
215
00:10:37,710 --> 00:10:41,480
the relationship between colors and typography.
216
00:10:41,480 --> 00:10:43,860
And the first guideline I have for you here
217
00:10:43,860 --> 00:10:46,490
is that on dark colored backgrounds,
218
00:10:46,490 --> 00:10:49,780
you can try to use a tint of the background color
219
00:10:49,780 --> 00:10:51,320
for your text,
220
00:10:51,320 --> 00:10:55,370
so basically a lighter version of the background color.
221
00:10:55,370 --> 00:10:58,030
And so like in these two examples here,
222
00:10:58,030 --> 00:11:01,720
this can give your text a really nice touch.
223
00:11:01,720 --> 00:11:05,040
Now, this is not a hard rule that you need to follow,
224
00:11:05,040 --> 00:11:08,270
but it's something that many designers like to do,
225
00:11:08,270 --> 00:11:11,230
because it can actually look quite nice
226
00:11:11,230 --> 00:11:13,630
and also a lot more natural.
227
00:11:13,630 --> 00:11:17,003
And that is especially apparent here in this first example.
228
00:11:18,010 --> 00:11:20,000
Now, another one is that text
229
00:11:20,000 --> 00:11:23,300
should actually not be completely black.
230
00:11:23,300 --> 00:11:25,200
Like in this example here,
231
00:11:25,200 --> 00:11:28,250
the text on the right side looks quite heavy
232
00:11:28,250 --> 00:11:30,430
and uninviting to read,
233
00:11:30,430 --> 00:11:32,180
and so we should lighten it up
234
00:11:32,180 --> 00:11:36,100
and use some kind of gray color.
235
00:11:36,100 --> 00:11:37,490
And the same is true here
236
00:11:37,490 --> 00:11:40,060
in this second example once again,
237
00:11:40,060 --> 00:11:43,490
where I think that the one to the left looks a lot,
238
00:11:43,490 --> 00:11:46,300
lot nicer than the one on the right.
239
00:11:46,300 --> 00:11:47,910
And again, you might think
240
00:11:47,910 --> 00:11:50,610
that this is a very subtle difference,
241
00:11:50,610 --> 00:11:53,660
but it makes all the difference when you combine it
242
00:11:53,660 --> 00:11:55,780
with all the other design guidelines
243
00:11:55,780 --> 00:11:57,650
that I'm showing you here.
244
00:11:57,650 --> 00:11:58,680
Now finally,
245
00:11:58,680 --> 00:12:01,960
and this one is important for accessibility reasons,
246
00:12:01,960 --> 00:12:06,890
is that you should never make your text too light, okay?
247
00:12:06,890 --> 00:12:08,250
So a few years ago,
248
00:12:08,250 --> 00:12:10,060
it was a huge design trend
249
00:12:10,060 --> 00:12:12,980
to have this really light gray text,
250
00:12:12,980 --> 00:12:15,180
for example, on white background.
251
00:12:15,180 --> 00:12:16,380
And this was really,
252
00:12:16,380 --> 00:12:21,150
really hard to read for people who don't have perfect sight.
253
00:12:21,150 --> 00:12:24,240
So to make your websites accessible to everyone,
254
00:12:24,240 --> 00:12:27,090
even people who have difficulty seeing,
255
00:12:27,090 --> 00:12:30,680
always use a tool to check the contrast between text
256
00:12:30,680 --> 00:12:32,340
and background colors,
257
00:12:32,340 --> 00:12:36,060
using some tool such as Coolers again.
258
00:12:36,060 --> 00:12:38,580
So a tool like this will give you something called
259
00:12:38,580 --> 00:12:40,270
a contrast ratio,
260
00:12:40,270 --> 00:12:44,950
which needs to be at least 4.5 to one for normal text,
261
00:12:44,950 --> 00:12:48,290
and three to one for large text.
262
00:12:48,290 --> 00:12:50,990
So, for example, here on the right side,
263
00:12:50,990 --> 00:12:54,800
we have a contrast ratio of 2.9 to one,
264
00:12:54,800 --> 00:12:56,890
and so this can be hard to read
265
00:12:56,890 --> 00:13:00,140
for people who don't have perfect eyesight.
266
00:13:00,140 --> 00:13:01,990
On the other hand, on the left side,
267
00:13:01,990 --> 00:13:04,250
we have the right way of doing it.
268
00:13:04,250 --> 00:13:08,880
So we have a huge contrast ratio, so 13 to one,
269
00:13:08,880 --> 00:13:11,550
and this one will be a lot easier to read
270
00:13:11,550 --> 00:13:15,070
and not just for people who don't have perfect eyesight.
271
00:13:15,070 --> 00:13:17,230
And the same for this one.
272
00:13:17,230 --> 00:13:20,010
So 2.9 again on the right side,
273
00:13:20,010 --> 00:13:22,270
and this one looks really off.
274
00:13:22,270 --> 00:13:25,090
Sort the text is really quiet too dark,
275
00:13:25,090 --> 00:13:27,742
while on the left side, with 5.1,
276
00:13:27,742 --> 00:13:29,393
it's actually acceptable.
277
00:13:30,240 --> 00:13:33,800
Okay, and that's it for guidelines about colors.
278
00:13:33,800 --> 00:13:36,290
Let's now apply some of them to our project
279
00:13:36,290 --> 00:13:37,923
in the next video.
20939
Can't find what you're looking for?
Get subtitles in any language from opensubtitles.com, and translate them here.