Take a look at this page. 1
This is a very simple design, yet quite effective. 2
The design trick that is used strongly in this composition is called Contrast. 3
It's this contrast between the gigantic headline and smaller paragraph text. 4
Also contrast between the heaviness of the headline and the lightness of the paragraph. 5
Contrast between black part of the headline with blue. And contrast between the light background and 6
the big blue button. 7
I've got to say, it's a little sloppy on that alignment though. The contrast is very widely used design 8
trick. 9
It also helps us create visual hierarchy between the elements. And it can be expressed mainly in 3 10
ways. 11
Contrast in color. Contrast in this size, big versus small. 12
And then contrast in weight, like heavy versus light. 13
Let's take a look at another website. 14
Do you notice the contrast in the color? 15
I bet you do. White font and book on a bright red background. Damn. 16
That's one ballzy contrast. 17
See the contrast in size and weight, between the headline and the text above and below it? 18
Contrast in the design achieves two things usually. 19
First, it helps us establish a visual hierarchy on the page. 20
And second it creates interest. 21
Put two identical squares together and it says nothing. 22
It's boring. But blow one of them to extreme size in comparison. 23
And this large contrast between them creates interest. 24
Now it seems like there's a story behind it. Or create a contrast in color. And it becomes instantly more 25
interesting. Contrast in color is created by using complementary colors. Purple and yellow 26
here, are complementary colors. And last but not least you can create contrast using weight. 27
So, how would you create weight contrast between these boxes? 28
By removing the fill on one of them and leaving it with outline stroke. Full box feels heavier and 29
the empty box looks lighter. Let's see how it works in practice. 30
Say we are working on a website for bicycles. And we're designing one of the sections. 31
The client gave us the headline, a paragraph of text and a photo for one of their bicycles. 32
Say we don't know where to begin, but we remember that contrast trick. 33
Let's see how we can use it. 34
Let's start with a contrast of weight. 35
What can we make heavy looking and what can we make light? 36
Why not the headline versus paragraph? 37
Let's create a nice contrast between them. 38
We can make the headline Extra Bold, and all uppercase. 39
We don't have to stop here. 40
We can actually, add a weight contrast even within the headline. 41
Excellent. 42
This has made it even more interesting. As we apply contrast to the elements, 43
you'll notice how visual hierarchy starts to take shape. 44
OK. 45
Up next, let's do the size contrast. 46
Let's supersize the first part of the headline and see what happens. 47
Go big or go home, right? 48
Align the elements properly. 49
All right. 50
It's starting to take shape. 51
We can use the extreme crop, that we have already learned, and crop out some parts of the bicycle. 52
It's looking pretty good. Last but not least we have color contrast. 53
There's already one color contrast, of course. Since background is white, dark text and dark bicycle 54
contrasts very well with it. 55
But we don't have to stop there. 56
We can add an extra color in a part of the headline, something that will contrast well with a dark text. 57
We can sample the orange from the bicycle seat. This way we'll kill two birds with one stone. One, great 58
color contrast between orange and dark headline. 59
And of course, you already know, this sampling the color from the bicycle, helps us tie the design together. 60
That's all. By applying a simple contrast trick, 61
plus one photo cropping technique, we went from this. To this. 62
You don't even need a design software for this. 63
You can do this in PowerPoint. 64
This is my favorite go to tricks in design. If you are ever stcuk and struggling with making design look 65
interesting. Add some contrast. Be it color, weight, size. 66
And I guarantee you, it will instantly improve your designs.