Photos always come in a box. 1
That's the original format, when you export it from your camera, or even if you download it from 2
a website. 3
When you take a boxed image and place it right on the canvas. 4
It's often not very impressive. 5
It's a separate object, not merging with the space, and it creates extra boxes around it. 6
You don't notice this consciously, but our eyes do and they need to process those extra boxes, that have 7
been created between the image and the edges of the canvas. 8
Let's use a real example from one of my landing page projects, that I've done for a dental clinic. 9
I've used this exact image for that project and this is sort of where I started. 10
So, how can we improve a section with an image like this? 11
We need to think outside of the box. Literally. Unbox the image by completely removing the background, 12
put her on the bottom right edge. 13
And now instead of it being a boring photo slapped on the page, 14
the model is sort of coming out of the page. 15
The white background isn't really working with this image. 16
Can you guess why? 17
Because the model is wearing a white top. 18
It makes a terrible contrast and if not for her red hair, she would be fading away. Since the image doesn't 19
have a background anymore, we have more freedom to put our own background color on the entire canvas. 20
This gives us more freedom to experiment, and choose interesting color combinations, and make the design 21
look more exciting. 22
This color complements her red hair. 23
They contrast well and make a very good combo. 24
Also, this blue-ish color is a right pick for the dentistry theme. 25
Blue colors feel more clean and sanitary. 26
Good feeling to create for dentistry. And many other colors would be a red flag for a dental clinic. Like 27
red and pink, that would remind us of blood. 28
Not a good feel. 29
Often I like to add a shadow behind the model. 30
This makes her look like she's standing in front of a wall. 31
It adds more dimension to the space. 32
There are now two separate layers, there is a wall and then there is a model standing in front of it. 33
You don't necessarily need to apply a shadow. 34
You can still get good results without it. Sometimes it won't even work. 35
This time it works and renders a very good result because it's a direct shot of the model. And she can 36
easily be standing in front of the wall. 37
Add the headline. 38
See what I did with the type? 39
It's heavy, white and upper case. 40
That's to match the context of this page – 41
white straight teeth. Black, skinny font wouldn't be as effective here, would it? 42
We should always keep the topic in mind, when designing. Everything we do on the page creates associations 43
for people. The colors we use. The shapes that we choose. 44
All that is going to create certain feelings in people. 45
Just like what we discussed in the typography lesson. About the typeface personalities. 46
This is design thinking and it's one very important skill in the designer skill set. 47
Okay, now add the rest of the copy. Add the navigation bar. And we have a beautiful hero section for a dental 48
clinic. 49
Do you notice why I made the button orange? Because I sampled it from the girl's hair. 50
It's not the exact color, as you can see. I've done fine tuning on it. This way it's more vibrant and suitable 51
for a modern website. Unboxing the image has given us more freedom and control over our composition. 52
It has added the depth. Every object seems to exist in one shared space, but on different layers, just 53
like the real world is. 54
And this has given us a very good looking and interesting hero section. 55
You don't necessarily need to unbox an entire image. 56
You can achieve an exciting result by taking a small part of the object out of its frame. For example, 57
that's what I've done for this website, on another project for a roofing company. 58
I wanted to emphasize the roof somehow, but this layout isn't really cutting the mustard. 59
The roof is lost in the design. So I took the tip off the roof and let it poke outside of the frame. 60
Now the roof has gained a spotlight. 61
It's a point of interest. Plus the image isn't a separate thing anymore, it's interacting with the canvas 62
and other elements on it. 63
That's all it takes to free an image from its frame and bring it to life. 64
We can't really create this effect in Figma, 65
we will definitely need a Photoshop for this. In the advanced part of this course, 66
I have put a photoshop tutorial and an assignment on how to achieve this effect. And how to cut out a 67
subject or a model from the image and remove the background out of it. 68
It's not an essential effect, but knowing how to make this effect work, really opens up your options in 69
design. 70
And once you remove the background from the subject, it opens up a lot of different design options. 71
Just like what happened with here, because now we can change the background, 72
we can move let's say headlines and texts behind objects. And we can create a bit more three dimensional 73
layers in our designs. 74
So when you reach the advanced part of this course, definitely don't miss this tutorial and practice 75
it. Because it's really going to come in handy when you start designing.