0
1
00:00:00,210 --> 00:00:01,660
Take a look at this page.
1

2
00:00:01,680 --> 00:00:04,030
This is a very simple design, yet quite effective.
2

3
00:00:04,020 --> 00:00:08,030
The design trick that is used strongly in this composition is called Contrast.
3

4
00:00:08,120 --> 00:00:13,270
It's this contrast between the gigantic headline and smaller paragraph text.
4

5
00:00:13,410 --> 00:00:18,100
Also contrast between the heaviness of the headline and the lightness of the paragraph.
5

6
00:00:18,180 --> 00:00:24,360
Contrast between black part of the headline with blue. And contrast between the light background and
6

7
00:00:24,360 --> 00:00:25,710
the big blue button.
7

8
00:00:25,740 --> 00:00:30,780
I've got to say, it's a little sloppy on that alignment though. The contrast is very widely used design
8

9
00:00:30,780 --> 00:00:31,710
trick.
9

10
00:00:31,710 --> 00:00:37,800
It also helps us create visual hierarchy between the elements. And it can be expressed mainly in 3
10

11
00:00:37,800 --> 00:00:38,240
ways.
11

12
00:00:38,250 --> 00:00:44,550
Contrast in color. Contrast in this size, big versus small.
12

13
00:00:44,550 --> 00:00:48,240
And then contrast in weight, like heavy versus light.
13

14
00:00:48,240 --> 00:00:50,140
Let's take a look at another website.
14

15
00:00:50,160 --> 00:00:52,310
Do you notice the contrast in the color?
15

16
00:00:52,310 --> 00:00:56,280
I bet you do. White font and book on a bright red background. Damn.
16

17
00:00:56,280 --> 00:00:57,680
That's one ballzy contrast.
17

18
00:00:57,720 --> 00:01:02,600
See the contrast in size and weight, between the headline and the text above and below it?
18

19
00:01:02,610 --> 00:01:05,340
Contrast in the design achieves two things usually.
19

20
00:01:05,340 --> 00:01:09,060
First, it helps us establish a visual hierarchy on the page.
20

21
00:01:09,060 --> 00:01:11,190
And second it creates interest.
21

22
00:01:11,190 --> 00:01:13,880
Put two identical squares together and it says nothing.
22

23
00:01:13,920 --> 00:01:17,880
It's boring. But blow one of them to extreme size in comparison.
23

24
00:01:17,910 --> 00:01:21,600
And this large contrast between them creates interest.
24

25
00:01:21,600 --> 00:01:27,570
Now it seems like there's a story behind it. Or create a contrast in color. And it becomes instantly more
25

26
00:01:27,570 --> 00:01:32,900
interesting. Contrast in color is created by using complementary colors. Purple and yellow
26

27
00:01:32,900 --> 00:01:38,730
here, are complementary colors. And last but not least you can create contrast using weight.
27

28
00:01:38,760 --> 00:01:42,140
So, how would you create weight contrast between these boxes?
28

29
00:01:42,150 --> 00:01:48,510
By removing the fill on one of them and leaving it with outline stroke. Full box feels heavier and
29

30
00:01:48,510 --> 00:01:52,530
the empty box looks lighter. Let's see how it works in practice.
30

31
00:01:52,670 --> 00:01:57,620
Say we are working on a website for bicycles. And we're designing one of the sections.
31

32
00:01:57,680 --> 00:02:02,590
The client gave us the headline, a paragraph of text and a photo for one of their bicycles.
32

33
00:02:02,630 --> 00:02:07,510
Say we don't know where to begin, but we remember that contrast trick.
33

34
00:02:07,520 --> 00:02:09,010
Let's see how we can use it.
34

35
00:02:09,020 --> 00:02:11,140
Let's start with a contrast of weight.
35

36
00:02:11,270 --> 00:02:14,450
What can we make heavy looking and what can we make light?
36

37
00:02:14,450 --> 00:02:16,450
Why not the headline versus paragraph?
37

38
00:02:16,490 --> 00:02:19,010
Let's create a nice contrast between them.
38

39
00:02:19,070 --> 00:02:23,040
We can make the headline Extra Bold, and all uppercase.
39

40
00:02:23,120 --> 00:02:24,530
We don't have to stop here.
40

41
00:02:24,530 --> 00:02:27,890
We can actually, add a weight contrast even within the headline.
41

42
00:02:28,490 --> 00:02:29,120
Excellent.
42

43
00:02:29,120 --> 00:02:33,420
This has made it even more interesting. As we apply contrast to the elements,
43

44
00:02:33,470 --> 00:02:36,800
you'll notice how visual hierarchy starts to take shape.
44

45
00:02:36,800 --> 00:02:37,040
OK.
45

46
00:02:37,040 --> 00:02:39,420
Up next, let's do the size contrast.
46

47
00:02:39,890 --> 00:02:43,850
Let's supersize the first part of the headline and see what happens.
47

48
00:02:43,850 --> 00:02:45,320
Go big or go home, right?
48

49
00:02:45,320 --> 00:02:46,930
Align the elements properly.
49

50
00:02:46,940 --> 00:02:47,360
All right.
50

51
00:02:47,360 --> 00:02:48,900
It's starting to take shape.
51

52
00:02:48,950 --> 00:02:54,290
We can use the extreme crop, that we have already learned, and crop out some parts of the bicycle.
52

53
00:02:54,350 --> 00:02:58,220
It's looking pretty good. Last but not least we have color contrast.
53

54
00:02:58,240 --> 00:03:04,550
There's already one color contrast, of course. Since background is white, dark text and dark bicycle
54

55
00:03:04,550 --> 00:03:06,210
contrasts very well with it.
55

56
00:03:06,260 --> 00:03:07,600
But we don't have to stop there.
56

57
00:03:07,610 --> 00:03:12,790
We can add an extra color in a part of the headline, something that will contrast well with a dark text.
57

58
00:03:12,860 --> 00:03:19,280
We can sample the orange from the bicycle seat. This way we'll kill two birds with one stone. One, great
58

59
00:03:19,280 --> 00:03:21,980
color contrast between orange and dark headline.
59

60
00:03:22,070 --> 00:03:27,320
And of course, you already know, this sampling the color from the bicycle, helps us tie the design together.
60

61
00:03:27,320 --> 00:03:29,560
That's all. By applying a simple contrast trick,
61

62
00:03:29,600 --> 00:03:34,570
plus one photo cropping technique, we went from this. To this.
62

63
00:03:34,640 --> 00:03:36,550
You don't even need a design software for this.
63

64
00:03:36,560 --> 00:03:37,940
You can do this in PowerPoint.
64

65
00:03:37,940 --> 00:03:44,150
This is my favorite go to tricks in design. If you are ever stcuk and struggling with making design look
65

66
00:03:44,270 --> 00:03:48,730
interesting. Add some contrast. Be it color, weight, size.
66

67
00:03:48,770 --> 00:03:52,930
And I guarantee you, it will instantly improve your designs.