A great photo can do wonders for a design. 1
I love this photo. 2
It's beautiful. 3
The colors are amazing. 4
It's simple, yet 5
looks like a fairytale. But we do have an issue in this composition. 6
There is not enough contrast between the background and all these objects on top of them. 7
The contrast is so low, that most text is completely unreadable. 8
Producing a design like this as a final result, is a terrible job. Even though everything else is spot on 9
and image is so gorgeous. 10
How do we fix this? By using overlays. 11
Basically putting color fills on top of the image. 12
The most common one, is to put a dark overlay on it. In Figma 13
this means adding a black color fill on top of the image. And adding transparency to that fill, until 14
you get good contrast, but before it gets too dark. 15
Another method is called tinting. 16
It's taking the photo and giving it a different color tint. To do this, 17
you take the image and desaturate it, to turn it into a black and white photo. And then again we add 18
a color fill, but this time instead of black you pick a different color. 19
This will give the image a tint of that color. 20
This is especially useful, if you want to use brand colours in the design. 21
It's a very handy trick. 22
You can also apply the fix to specific places, instead of the whole page. 23
For instance, in here I've put a dark transparent box behind the content, and I've also added a dark 24
transparent gradient behind the navigation bar. 25
Do you notice? On... and off... and on again, there. 26
Although just as a side note, I'm not a big fan of those black rectangles just randomly behind the content, 27
so I avoid using them if I really don't have to. 28
Using big background images is a very easy designing. 29
There is not a lot of "designing" actually involved. Like Airbnb's homepage. 30
You find an impressive photo and put your content over it in white color, creates a very attractive looking 31
design without a lot of effort. 32
And in my experience, clients love it.