All language subtitles for 2. Understanding Colour Theory

Now one of the first things I want to talk about is Color Theory. And color theory is the art and science
1

of creating the right palette for your website.
2

So take a look at this example.
3

Now let's say you had a logo where you have flowers which are brown, paintball which is pink.
4

It looks all very weird and very inconsistent.
5

And take a look at the actual logos. Like what are you thinking when you see these color palettes on
6

the words. The color of the flowers looks a bit like dirt I guess but it also looks a bit like something
7

else. And the paint ball being pink
8

I'm not really sure who that target audience is. But take a look at this.
9

If we flip the color palette, it suddenly all looks like it's meant to be like this.
10

It suddenly all looks a lot better right?
11

It looks consistent with the actual message.
12

So when you're picking colors you have to be aware of the mood of your color palette.
13

So the predominant color that is going to be in your design really tells a story and it conveys a message
14

to the user.
15

For example, Red conveys love, energy, intensity. Which is why you see a lot of car adverts which have a
16

red car on a red background.
17

It's because they're trying to tell you,
18

"Hey buy this car and you'll feel energetic
19

and the intensity of this car even if you're 89." Now yellow is more about joy, intellect, attention.
20

And the most important thing about yellow though is how attention grabbing it is because it's almost
21

impossible to not look at something that is very yellow.
22

For example this ad. Now a few years back
23

this ad caused an uproar because it has this lady in a yellow bikini
24

and it says, "Are you
25

beach body ready?"
26

And a lot of people got really really upset about it.
27

They took to the Internet,
28

they raved about it.
29

And I remember thinking to myself at the time, "You know, this is not so different from a lot of the other
30

ads that are trying to tell women how to look."
31

And it's not a great message.
32

But why is it causing so much anger and causing so much attention drawn to it?
33

And I think the reason is because it's actually bright yellow.
34

It's impossible to ignore this advert when you come across it.
35

So when you're creating a logo or when you're creating some sort of headline, then yeah yellow is a great
36

choice. But when you're creating something that's designed to be looked at for a long period of time
37

then yellow can be too attention grabbing. It might actually hurt your user's eyes
38

if you tried to read a whole article that's backgrounded in yellow.
39

Now the next color that we're going to talk about is green which is all about freshness, growth, safety.
40

And that's why you see a lot of grocery companies like Hello Fresh or Amazon groceries use this color
41

as their predominant color palette. Because it's trying to tell you, "Hey look! This thing is edible.
42

This is what we're selling."
43

And so if you have a company that has anything to do with food, this is usually a safe bet to go with.
44

Now Blue is about stability, trust, serenity. And so you see a lot of companies which need to convey that
45

"Hey, we're really trustworthy"
46

use this color. For example,
47

look at all the financial companies, look at companies like PayPal or the cryptocurrency companies like
48

Coinbase. They all choose this color because they want you to know that they're not going to run away
49

with your money.
50

In fact, there was a really interesting psychology study where they compared interviewees wearing different
51

colored shirts.
52

So for example, a group of them would wear a green shirt,
53

another group would wear a blue shirt and they compared how they were perceived by the interviewers.
54

And it showed that just by changing the color of your shirt to a blue one you vastly increase the amount
55

of trust in you
56

that's given by other people.
57

So have a think about that the next time you're going for an interview.
58

Now the final color is purple and it's meant to signify royalty, wealth, femininity. And strangely enough
59

I've come across a number of payday loan companies which use this color palette especially ones which
60

are targeted at women.
61

So, the important thing to think about is that you're making a conscious decision when you're choosing
62

a color palette.
63

It's not just whichever color you like or your favorite color. But it's actually 'what message am I trying
64

to convey to the user' and then picking an appropriate color. Now, usually you're not just going to be
65

using a single color for your design. You're probably going to be using two or three.
66

So at some point you have to think about which different colors to combine.
67

And this is probably the most scientific part of color theory.
68

Now very often, designers will rely on scientific ways of combining colors. For example taking two colors
69

that are right next to each other on the color wheel.
70

And this way you create what's called an analogous color palette.
71

And these designs look incredibly harmonious and they really work well together.
72

So this color palette can be really good for things like navigation bars and the body of your website
73

or things like a logo and it's background.
74

Now, what it's not so good at though is standing out. If you really want your design to pop, you're better
75

off taking two colors from opposite ends of the color wheel creating what's called a complementary color
76

palette or a clashing palette.
77

Now this complementary color palette really creates that pop.
78

And it really brings out each of the colors.
79

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
80

used this complementary color palette to make things pop.
81

So, one of the things that you often see is they'll take these fake plastic bits of greenery like fake
82

grass or fake bushes and they'll put it in between the meat. And because the green and the red are complementary
83

colors it makes the red meat pop out a lot more and gives you this idea of freshness
84

even if it's a little bit past the best dates. But what you shouldn't do with clashing colors or complementary
85

colors is to try to style text and text background with it because it actually looks very very jarring
86

and you can feel your eyes sort of getting a little bit fuzzy
87

looking at this particular combination. So don't do this when it concerns text.
88

Instead, keep it to things like logos or icons or things that you really really want to stand out from
89

each other.
90

Now, there's a lot of other ways that you can combine colors like drawing an equilateral triangle to
91

create a triadic color palette or drawing a perfect square.
92

Now if you want to, you can head over to a website called Adobe color which lets you mess around with
93

all of these different color combinations. So select a triadic color palette or a square color palette
94

and then drag it around the color wheel so that you get different combinations of colors.
95

And once you come across a palette that fits the mood of your project, then you can pick the hex codes
96

and just put them straight into your website.
97

Now if all of that sounds like it was a little bit too much work ,then I got you covered.
98

You can also use a website called colorhunt.co.
99

This is a website where professional designers have curated some of their favorite color palettes
100

and you can nab the hex codes straight off the website.
101

So take a look at the hot and popular sections of this website and use it to guide the pilot scheme
102

for your next project.
103

Now when you create a website that has a beautiful consistent color scheme like the one for the LIEBE
104

yogurt, you can see how much it makes the design stand out and it becomes really colorful and really
105

playful and you can convey different messages using your choice of colors and your color scheme.
106

So think about your color choice and your color palette
107

the next time you design your website to make sure that it is consistent with what your brand is about
108

and what your product is about and it conveys the message you want to convey.