Would you like to inspect the original subtitles? These are the user uploaded subtitles that are being translated:
1
00:00:00,810 --> 00:00:08,520
Now one of the first things I want to talk about is Color Theory. And color theory is the art and science
2
00:00:08,610 --> 00:00:11,760
of creating the right palette for your website.
3
00:00:12,450 --> 00:00:15,040
So take a look at this example.
4
00:00:15,090 --> 00:00:21,690
Now let's say you had a logo where you have flowers which are brown, paintball which is pink.
5
00:00:21,810 --> 00:00:24,960
It looks all very weird and very inconsistent.
6
00:00:25,020 --> 00:00:30,960
And take a look at the actual logos. Like what are you thinking when you see these color palettes on
7
00:00:30,960 --> 00:00:37,560
the words. The color of the flowers looks a bit like dirt I guess but it also looks a bit like something
8
00:00:37,560 --> 00:00:40,460
else. And the paint ball being pink
9
00:00:40,530 --> 00:00:45,120
I'm not really sure who that target audience is. But take a look at this.
10
00:00:45,390 --> 00:00:50,630
If we flip the color palette, it suddenly all looks like it's meant to be like this.
11
00:00:50,730 --> 00:00:53,710
It suddenly all looks a lot better right?
12
00:00:53,730 --> 00:00:56,940
It looks consistent with the actual message.
13
00:00:57,000 --> 00:01:02,770
So when you're picking colors you have to be aware of the mood of your color palette.
14
00:01:02,940 --> 00:01:09,780
So the predominant color that is going to be in your design really tells a story and it conveys a message
15
00:01:09,840 --> 00:01:11,530
to the user.
16
00:01:11,700 --> 00:01:20,490
For example, Red conveys love, energy, intensity. Which is why you see a lot of car adverts which have a
17
00:01:20,520 --> 00:01:22,980
red car on a red background.
18
00:01:23,340 --> 00:01:25,250
It's because they're trying to tell you,
19
00:01:25,260 --> 00:01:28,560
"Hey buy this car and you'll feel energetic
20
00:01:28,620 --> 00:01:38,220
and the intensity of this car even if you're 89." Now yellow is more about joy, intellect, attention.
21
00:01:39,060 --> 00:01:46,290
And the most important thing about yellow though is how attention grabbing it is because it's almost
22
00:01:46,290 --> 00:01:50,550
impossible to not look at something that is very yellow.
23
00:01:50,580 --> 00:01:53,530
For example this ad. Now a few years back
24
00:01:53,550 --> 00:01:59,220
this ad caused an uproar because it has this lady in a yellow bikini
25
00:01:59,220 --> 00:02:01,500
and it says, "Are you
26
00:02:01,500 --> 00:02:03,560
beach body ready?"
27
00:02:03,570 --> 00:02:06,740
And a lot of people got really really upset about it.
28
00:02:06,750 --> 00:02:08,090
They took to the Internet,
29
00:02:08,100 --> 00:02:09,420
they raved about it.
30
00:02:09,570 --> 00:02:15,390
And I remember thinking to myself at the time, "You know, this is not so different from a lot of the other
31
00:02:15,390 --> 00:02:17,880
ads that are trying to tell women how to look."
32
00:02:18,500 --> 00:02:20,100
And it's not a great message.
33
00:02:20,160 --> 00:02:26,580
But why is it causing so much anger and causing so much attention drawn to it?
34
00:02:26,580 --> 00:02:30,270
And I think the reason is because it's actually bright yellow.
35
00:02:30,900 --> 00:02:35,450
It's impossible to ignore this advert when you come across it.
36
00:02:35,610 --> 00:02:42,420
So when you're creating a logo or when you're creating some sort of headline, then yeah yellow is a great
37
00:02:42,420 --> 00:02:48,090
choice. But when you're creating something that's designed to be looked at for a long period of time
38
00:02:48,540 --> 00:02:53,290
then yellow can be too attention grabbing. It might actually hurt your user's eyes
39
00:02:53,400 --> 00:02:58,000
if you tried to read a whole article that's backgrounded in yellow.
40
00:02:58,350 --> 00:03:05,670
Now the next color that we're going to talk about is green which is all about freshness, growth, safety.
41
00:03:05,880 --> 00:03:13,110
And that's why you see a lot of grocery companies like Hello Fresh or Amazon groceries use this color
42
00:03:13,230 --> 00:03:19,120
as their predominant color palette. Because it's trying to tell you, "Hey look! This thing is edible.
43
00:03:19,140 --> 00:03:21,620
This is what we're selling."
44
00:03:21,690 --> 00:03:28,870
And so if you have a company that has anything to do with food, this is usually a safe bet to go with.
45
00:03:28,890 --> 00:03:37,440
Now Blue is about stability, trust, serenity. And so you see a lot of companies which need to convey that
46
00:03:37,440 --> 00:03:39,980
"Hey, we're really trustworthy"
47
00:03:40,020 --> 00:03:41,930
use this color. For example,
48
00:03:41,940 --> 00:03:47,640
look at all the financial companies, look at companies like PayPal or the cryptocurrency companies like
49
00:03:47,640 --> 00:03:52,680
Coinbase. They all choose this color because they want you to know that they're not going to run away
50
00:03:52,680 --> 00:03:54,060
with your money.
51
00:03:54,090 --> 00:04:01,170
In fact, there was a really interesting psychology study where they compared interviewees wearing different
52
00:04:01,170 --> 00:04:02,550
colored shirts.
53
00:04:02,580 --> 00:04:05,700
So for example, a group of them would wear a green shirt,
54
00:04:05,700 --> 00:04:12,410
another group would wear a blue shirt and they compared how they were perceived by the interviewers.
55
00:04:12,510 --> 00:04:19,050
And it showed that just by changing the color of your shirt to a blue one you vastly increase the amount
56
00:04:19,050 --> 00:04:20,180
of trust in you
57
00:04:20,250 --> 00:04:21,970
that's given by other people.
58
00:04:21,990 --> 00:04:26,390
So have a think about that the next time you're going for an interview.
59
00:04:26,460 --> 00:04:34,950
Now the final color is purple and it's meant to signify royalty, wealth, femininity. And strangely enough
60
00:04:34,980 --> 00:04:41,160
I've come across a number of payday loan companies which use this color palette especially ones which
61
00:04:41,160 --> 00:04:42,900
are targeted at women.
62
00:04:42,990 --> 00:04:48,690
So, the important thing to think about is that you're making a conscious decision when you're choosing
63
00:04:48,690 --> 00:04:49,920
a color palette.
64
00:04:50,010 --> 00:04:56,040
It's not just whichever color you like or your favorite color. But it's actually 'what message am I trying
65
00:04:56,040 --> 00:05:03,930
to convey to the user' and then picking an appropriate color. Now, usually you're not just going to be
66
00:05:03,930 --> 00:05:09,180
using a single color for your design. You're probably going to be using two or three.
67
00:05:09,300 --> 00:05:14,850
So at some point you have to think about which different colors to combine.
68
00:05:14,850 --> 00:05:19,680
And this is probably the most scientific part of color theory.
69
00:05:19,740 --> 00:05:28,740
Now very often, designers will rely on scientific ways of combining colors. For example taking two colors
70
00:05:28,770 --> 00:05:31,560
that are right next to each other on the color wheel.
71
00:05:32,130 --> 00:05:36,170
And this way you create what's called an analogous color palette.
72
00:05:36,390 --> 00:05:42,600
And these designs look incredibly harmonious and they really work well together.
73
00:05:42,600 --> 00:05:48,450
So this color palette can be really good for things like navigation bars and the body of your website
74
00:05:48,930 --> 00:05:52,300
or things like a logo and it's background.
75
00:05:52,350 --> 00:05:59,160
Now, what it's not so good at though is standing out. If you really want your design to pop, you're better
76
00:05:59,160 --> 00:06:05,490
off taking two colors from opposite ends of the color wheel creating what's called a complementary color
77
00:06:05,490 --> 00:06:08,280
palette or a clashing palette.
78
00:06:08,280 --> 00:06:12,270
Now this complementary color palette really creates that pop.
79
00:06:12,600 --> 00:06:16,490
And it really brings out each of the colors.
80
00:06:16,620 --> 00:06:23,130
So the next time you go to a supermarket, I want you to take a look at the meat aisle and see if they've
81
00:06:23,130 --> 00:06:27,910
used this complementary color palette to make things pop.
82
00:06:27,930 --> 00:06:34,620
So, one of the things that you often see is they'll take these fake plastic bits of greenery like fake
83
00:06:34,620 --> 00:06:42,720
grass or fake bushes and they'll put it in between the meat. And because the green and the red are complementary
84
00:06:42,720 --> 00:06:50,160
colors it makes the red meat pop out a lot more and gives you this idea of freshness
85
00:06:50,310 --> 00:06:57,750
even if it's a little bit past the best dates. But what you shouldn't do with clashing colors or complementary
86
00:06:57,750 --> 00:07:04,710
colors is to try to style text and text background with it because it actually looks very very jarring
87
00:07:04,920 --> 00:07:08,440
and you can feel your eyes sort of getting a little bit fuzzy
88
00:07:08,550 --> 00:07:13,940
looking at this particular combination. So don't do this when it concerns text.
89
00:07:14,100 --> 00:07:20,670
Instead, keep it to things like logos or icons or things that you really really want to stand out from
90
00:07:20,670 --> 00:07:21,990
each other.
91
00:07:22,020 --> 00:07:28,350
Now, there's a lot of other ways that you can combine colors like drawing an equilateral triangle to
92
00:07:28,350 --> 00:07:34,170
create a triadic color palette or drawing a perfect square.
93
00:07:34,180 --> 00:07:40,200
Now if you want to, you can head over to a website called Adobe color which lets you mess around with
94
00:07:40,290 --> 00:07:47,430
all of these different color combinations. So select a triadic color palette or a square color palette
95
00:07:47,820 --> 00:07:52,990
and then drag it around the color wheel so that you get different combinations of colors.
96
00:07:53,100 --> 00:07:59,100
And once you come across a palette that fits the mood of your project, then you can pick the hex codes
97
00:07:59,220 --> 00:08:02,790
and just put them straight into your website.
98
00:08:02,790 --> 00:08:07,950
Now if all of that sounds like it was a little bit too much work ,then I got you covered.
99
00:08:07,980 --> 00:08:11,470
You can also use a website called colorhunt.co.
100
00:08:11,490 --> 00:08:17,550
This is a website where professional designers have curated some of their favorite color palettes
101
00:08:17,730 --> 00:08:21,130
and you can nab the hex codes straight off the website.
102
00:08:22,110 --> 00:08:28,530
So take a look at the hot and popular sections of this website and use it to guide the pilot scheme
103
00:08:28,540 --> 00:08:30,810
for your next project.
104
00:08:30,810 --> 00:08:37,350
Now when you create a website that has a beautiful consistent color scheme like the one for the LIEBE
105
00:08:37,350 --> 00:08:44,760
yogurt, you can see how much it makes the design stand out and it becomes really colorful and really
106
00:08:44,760 --> 00:08:51,000
playful and you can convey different messages using your choice of colors and your color scheme.
107
00:08:51,010 --> 00:08:54,060
So think about your color choice and your color palette
108
00:08:54,060 --> 00:08:59,760
the next time you design your website to make sure that it is consistent with what your brand is about
109
00:08:59,850 --> 00:09:04,140
and what your product is about and it conveys the message you want to convey.
11626
Can't find what you're looking for?
Get subtitles in any language from opensubtitles.com, and translate them here.