Would you like to inspect the original subtitles? These are the user uploaded subtitles that are being translated:
1
1
00:00:01,500 --> 00:00:03,564
Color is probably the most complicated
2
2
00:00:03,564 --> 00:00:06,725
area of user interface design.
3
3
00:00:06,725 --> 00:00:09,508
This is because we have a tendency to use colors
4
4
00:00:09,508 --> 00:00:13,348
that distract and feel completely unnatural.
5
5
00:00:13,348 --> 00:00:16,076
That can make our design look very messy.
6
6
00:00:16,076 --> 00:00:18,604
Do you want an example of this?
7
7
00:00:18,604 --> 00:00:19,943
Here you go.
8
8
00:00:19,943 --> 00:00:21,428
What do you say now?
9
9
00:00:21,428 --> 00:00:23,298
This is probably the worst website
10
10
00:00:23,298 --> 00:00:25,916
I have ever seen in my entire life.
11
11
00:00:25,916 --> 00:00:29,908
But this is obviously a joke, but you get the point right?
12
12
00:00:29,908 --> 00:00:33,436
So let's try to avoid messy websites like this one
13
13
00:00:33,436 --> 00:00:37,482
with the guidelines I will show you in this lecture.
14
14
00:00:37,482 --> 00:00:39,604
The first thing I want to recommend
15
15
00:00:39,604 --> 00:00:43,538
is to use a single base color for your design.
16
16
00:00:43,538 --> 00:00:46,683
And with base color I mean any different color than
17
17
00:00:46,683 --> 00:00:49,600
black, white or some shade of grey.
18
18
00:00:50,599 --> 00:00:53,218
If we want to build a clean and simple website
19
19
00:00:53,218 --> 00:00:57,815
having too many colors in too many places all over a website
20
20
00:00:57,815 --> 00:01:01,751
is an easy way to completely screw up that goal.
21
21
00:01:01,751 --> 00:01:06,207
So sticking to one main color is definitely a good idea.
22
22
00:01:06,207 --> 00:01:09,622
Especially if you are just starting out with design.
23
23
00:01:09,622 --> 00:01:11,987
The colors you see hear on this slide
24
24
00:01:11,987 --> 00:01:15,303
are from a tool called Flat UI Colors.
25
25
00:01:15,303 --> 00:01:18,447
Flat UI Colors is a very cool resource
26
26
00:01:18,447 --> 00:01:20,808
to choose your base color.
27
27
00:01:20,808 --> 00:01:22,104
To start out,
28
28
00:01:22,104 --> 00:01:26,271
I think you can't go wrong by choosing any of these colors.
29
29
00:01:27,168 --> 00:01:31,273
And beside fixing a base color you can also create a darker
30
30
00:01:31,273 --> 00:01:34,182
or a lighter version of that color.
31
31
00:01:34,182 --> 00:01:37,638
Doing so you can create a nice color palette
32
32
00:01:37,638 --> 00:01:39,818
like this one here.
33
33
00:01:39,818 --> 00:01:42,165
A color palette shows all the colors
34
34
00:01:42,165 --> 00:01:44,880
to be used in a certain design.
35
35
00:01:44,880 --> 00:01:48,713
I use a tool call 0To255 to create that darker
36
36
00:01:49,922 --> 00:01:52,089
and that light blue tones.
37
37
00:01:53,813 --> 00:01:56,915
I strongly recommend to create color palette like this one
38
38
00:01:56,915 --> 00:01:59,002
for your design.
39
39
00:01:59,002 --> 00:02:00,998
As I said before the grey tones
40
40
00:02:00,998 --> 00:02:03,716
are not considered base colors here,
41
41
00:02:03,716 --> 00:02:06,270
and we many times need some of them actually.
42
42
00:02:06,270 --> 00:02:09,895
For instance for text and for background colors.
43
43
00:02:09,895 --> 00:02:13,248
Find the link to these two tools that I mentioned
44
44
00:02:13,248 --> 00:02:14,915
in the course Ebook.
45
45
00:02:16,697 --> 00:02:19,715
Now if you really want to mix up multiple colors
46
46
00:02:19,715 --> 00:02:22,934
I recommend you use a color wheel tool
47
47
00:02:22,934 --> 00:02:26,296
Like Adobe Color CC or Paletton.
48
48
00:02:26,296 --> 00:02:29,175
These tools make use of color theory
49
49
00:02:29,175 --> 00:02:32,571
to choose the best color combinations for you.
50
50
00:02:32,571 --> 00:02:35,704
So for example here with Adobe CC Color
51
51
00:02:35,704 --> 00:02:39,600
you can create your color palettes using color combinations
52
52
00:02:39,600 --> 00:02:41,758
that actually make sense.
53
53
00:02:41,758 --> 00:02:45,591
Just play around with it and see what you get.
54
54
00:02:46,460 --> 00:02:49,275
You can then use a main color to draw attention
55
55
00:02:49,275 --> 00:02:52,526
to the most important elements on your web page.
56
56
00:02:52,526 --> 00:02:54,733
Like a call to action button
57
57
00:02:54,733 --> 00:02:59,477
and a second or third colors can complement the main color.
58
58
00:02:59,477 --> 00:03:02,330
That is just what this website is doing.
59
59
00:03:02,330 --> 00:03:05,255
Their main color is clearly green
60
60
00:03:05,255 --> 00:03:08,301
but they have this nice orange to draw the attention
61
61
00:03:08,301 --> 00:03:09,468
to the button.
62
62
00:03:11,209 --> 00:03:13,316
And that brings us to the next guideline
63
63
00:03:13,316 --> 00:03:15,735
which is about attention.
64
64
00:03:15,735 --> 00:03:17,531
When you're in doubt about using colors
65
65
00:03:17,531 --> 00:03:20,683
and don't know where to use colors and how often,
66
66
00:03:20,683 --> 00:03:22,502
I have a solution for you.
67
67
00:03:22,502 --> 00:03:25,114
Just pick a color that stands out and use it
68
68
00:03:25,114 --> 00:03:28,048
mostly to draw attention to a button
69
69
00:03:28,048 --> 00:03:32,428
or any other element of importance on your website
70
70
00:03:32,428 --> 00:03:35,105
Uber's website here does a terrific job
71
71
00:03:35,105 --> 00:03:36,938
in doing exactly that.
72
72
00:03:38,576 --> 00:03:40,949
At number four, and this is very simple,
73
73
00:03:40,949 --> 00:03:45,036
never choose the black color for any part of your design.
74
74
00:03:45,036 --> 00:03:47,776
This is because black actually almost never appears
75
75
00:03:47,776 --> 00:03:49,462
in the real world.
76
76
00:03:49,462 --> 00:03:53,629
So using complete black just doesn't feel natural.
77
77
00:03:54,835 --> 00:03:58,105
And last but not least I want to say a few words
78
78
00:03:58,105 --> 00:04:02,616
on which colors you should actually choose for your design.
79
79
00:04:02,616 --> 00:04:05,738
That's because picking a color for a website means
80
80
00:04:05,738 --> 00:04:08,391
much more than picking your favorite color
81
81
00:04:08,391 --> 00:04:10,857
and turning it into a design.
82
82
00:04:10,857 --> 00:04:12,706
It means picking the right color
83
83
00:04:12,706 --> 00:04:16,791
in order to get the desired response from your audience.
84
84
00:04:16,791 --> 00:04:19,255
Color really makes a difference.
85
85
00:04:19,255 --> 00:04:22,375
This happens because there are psychological effects
86
86
00:04:22,375 --> 00:04:24,510
behind each color.
87
87
00:04:24,510 --> 00:04:27,693
So let's see what feelings each color can evoke
88
88
00:04:27,693 --> 00:04:30,193
and how to use this knowledge.
89
89
00:04:31,442 --> 00:04:34,760
Red is a great color to use when power, passion,
90
90
00:04:34,760 --> 00:04:39,048
strength and excitement want to be transmitted.
91
91
00:04:39,048 --> 00:04:41,679
Brighter tones are more energetic
92
92
00:04:41,679 --> 00:04:45,967
and darker shades are more powerful and elegant.
93
93
00:04:45,967 --> 00:04:50,816
Orange draws attention without being as overpowering as red.
94
94
00:04:50,816 --> 00:04:54,305
It means cheerfulness and creativity.
95
95
00:04:54,305 --> 00:04:56,633
Orange can be associated with friendliness,
96
96
00:04:56,633 --> 00:04:58,550
confidence and courage.
97
97
00:05:00,328 --> 00:05:01,420
Now Yellow.
98
98
00:05:01,420 --> 00:05:04,235
Yellow is energetic and gives the feeling of happiness
99
99
00:05:04,235 --> 00:05:06,080
and liveliness.
100
100
00:05:06,080 --> 00:05:09,958
Also it associates with curiosity, intelligence,
101
101
00:05:09,958 --> 00:05:11,791
brightness, et cetera.
102
102
00:05:13,662 --> 00:05:17,829
Green is the color of harmony, nature, life and health.
103
103
00:05:19,145 --> 00:05:22,558
Also it is often associated with money.
104
104
00:05:22,558 --> 00:05:26,725
In design green can have a balancing and harmonizing effect.
105
105
00:05:28,143 --> 00:05:32,457
Next, Blue means patience, peace, trustworthiness
106
106
00:05:32,457 --> 00:05:34,170
and stability.
107
107
00:05:34,170 --> 00:05:38,650
It is one of the most beloved colors, especially by men.
108
108
00:05:38,650 --> 00:05:42,716
It is associated with professionalism, trust and honor.
109
109
00:05:42,716 --> 00:05:45,088
And that's actually why the biggest Social Networks
110
110
00:05:45,088 --> 00:05:47,505
out there use the color blue.
111
111
00:05:49,248 --> 00:05:52,126
Purple is traditionally associated with power,
112
112
00:05:52,126 --> 00:05:54,473
nobility and wealth.
113
113
00:05:54,473 --> 00:05:58,088
In your design purple can give a sense of wisdom,
114
114
00:05:58,088 --> 00:06:01,255
royalty, nobility, luxury and mystery.
115
115
00:06:03,429 --> 00:06:06,989
Pink expresses romance, passivity, care,
116
116
00:06:06,989 --> 00:06:09,322
peace, affection, et cetera.
117
117
00:06:11,019 --> 00:06:14,578
And finally the color brown is the color of
118
118
00:06:14,578 --> 00:06:17,303
relaxation and confidence.
119
119
00:06:17,303 --> 00:06:20,964
Brown itself means earthiness, nature, durability,
120
120
00:06:20,964 --> 00:06:22,964
comfort and reliability.
121
121
00:06:25,435 --> 00:06:28,507
And that's it for colors in this lecture.
122
122
00:06:28,507 --> 00:06:30,835
If you want to learn more on this subject,
123
123
00:06:30,835 --> 00:06:34,009
I included a couple of links in the course Ebook,
124
124
00:06:34,009 --> 00:06:36,988
where you can read all about color theory,
125
125
00:06:36,988 --> 00:06:39,405
make sure you check them out.
10891
Can't find what you're looking for?
Get subtitles in any language from opensubtitles.com, and translate them here.