0
1
00:00:00,190 --> 00:00:02,550
A great photo can do wonders for a design.
1

2
00:00:02,760 --> 00:00:03,480
I love this photo.
2

3
00:00:03,480 --> 00:00:04,530
It's beautiful.
3

4
00:00:04,530 --> 00:00:06,240
The colors are amazing.
4

5
00:00:06,270 --> 00:00:07,320
It's simple, yet
5

6
00:00:07,320 --> 00:00:11,160
looks like a fairytale. But we do have an issue in this composition.
6

7
00:00:11,190 --> 00:00:16,170
There is not enough contrast between the background and all these objects on top of them.
7

8
00:00:16,170 --> 00:00:20,600
The contrast is so low, that most text is completely unreadable.
8

9
00:00:20,610 --> 00:00:26,070
Producing a design like this as a final result, is a terrible job. Even though everything else is spot on
9

10
00:00:26,070 --> 00:00:27,990
and image is so gorgeous.
10

11
00:00:27,990 --> 00:00:31,290
How do we fix this? By using overlays.
11

12
00:00:31,290 --> 00:00:34,610
Basically putting color fills on top of the image.
12

13
00:00:34,620 --> 00:00:38,490
The most common one, is to put a dark overlay on it. In Figma
13

14
00:00:38,490 --> 00:00:44,640
this means adding a black color fill on top of the image. And adding transparency to that fill, until
14

15
00:00:44,640 --> 00:00:47,740
you get good contrast, but before it gets too dark.
15

16
00:00:47,760 --> 00:00:49,790
Another method is called tinting.
16

17
00:00:49,920 --> 00:00:54,720
It's taking the photo and giving it a different color tint. To do this,
17

18
00:00:54,720 --> 00:01:01,350
you take the image and desaturate it, to turn it into a black and white photo. And then again we add
18

19
00:01:01,350 --> 00:01:05,480
a color fill, but this time instead of black you pick a different color.
19

20
00:01:05,490 --> 00:01:08,330
This will give the image a tint of that color.
20

21
00:01:08,350 --> 00:01:12,510
This is especially useful, if you want to use brand colours in the design.
21

22
00:01:12,570 --> 00:01:13,770
It's a very handy trick.
22

23
00:01:13,770 --> 00:01:18,270
You can also apply the fix to specific places, instead of the whole page.
23

24
00:01:18,270 --> 00:01:25,500
For instance, in here I've put a dark transparent box behind the content, and I've also added a dark
24

25
00:01:25,500 --> 00:01:28,410
transparent gradient behind the navigation bar.
25

26
00:01:28,410 --> 00:01:32,230
Do you notice? On... and off... and on again, there.
26

27
00:01:32,460 --> 00:01:38,460
Although just as a side note, I'm not a big fan of those black rectangles just randomly behind the content,
27

28
00:01:38,520 --> 00:01:41,670
so I avoid using them if I really don't have to.
28

29
00:01:41,760 --> 00:01:44,640
Using big background images is a very easy designing.
29

30
00:01:44,640 --> 00:01:49,400
There is not a lot of "designing" actually involved. Like Airbnb's homepage.
30

31
00:01:49,440 --> 00:01:55,080
You find an impressive photo and put your content over it in white color, creates a very attractive looking
31

32
00:01:55,080 --> 00:01:56,930
design without a lot of effort.
32

33
00:01:57,000 --> 00:01:58,980
And in my experience, clients love it.