0
1
00:00:00,150 --> 00:00:01,740
Photos always come in a box.
1

2
00:00:01,950 --> 00:00:06,920
That's the original format, when you export it from your camera, or even if you download it from 
2

3
00:00:06,920 --> 00:00:07,550
a website.
3

4
00:00:07,560 --> 00:00:11,250
When you take a boxed image and place it right on the canvas.
4

5
00:00:11,250 --> 00:00:13,120
It's often not very impressive.
5

6
00:00:13,140 --> 00:00:17,900
It's a separate object, not merging with the space, and it creates extra boxes around it.
6

7
00:00:17,910 --> 00:00:23,850
You don't notice this consciously, but our eyes do and they need to process those extra boxes, that have
7

8
00:00:23,850 --> 00:00:27,930
been created between the image and the edges of the canvas.
8

9
00:00:27,930 --> 00:00:33,120
Let's use a real example from one of my landing page projects, that I've done for a dental clinic.
9

10
00:00:33,120 --> 00:00:37,560
I've used this exact image for that project and this is sort of where I started.
10

11
00:00:37,650 --> 00:00:41,160
So, how can we improve a section with an image like this?
11

12
00:00:41,160 --> 00:00:47,400
We need to think outside of the box. Literally. Unbox the image by completely removing the background,
12

13
00:00:47,550 --> 00:00:49,480
put her on the bottom right edge.
13

14
00:00:49,500 --> 00:00:52,650
And now instead of it being a boring photo slapped on the page,
14

15
00:00:52,650 --> 00:00:55,670
the model is sort of coming out of the page.
15

16
00:00:55,740 --> 00:00:57,720
The white background isn't really working with this image.
16

17
00:00:57,720 --> 00:00:58,900
Can you guess why?
17

18
00:00:59,040 --> 00:01:01,090
Because the model is wearing a white top.
18

19
00:01:01,230 --> 00:01:07,020
It makes a terrible contrast and if not for her red hair, she would be fading away. Since the image doesn't
19

20
00:01:07,020 --> 00:01:12,360
have a background anymore, we have more freedom to put our own background color on the entire canvas.
20

21
00:01:12,360 --> 00:01:17,670
This gives us more freedom to experiment, and choose interesting color combinations, and make the design
21

22
00:01:17,670 --> 00:01:18,630
look more exciting.
22

23
00:01:18,630 --> 00:01:20,600
This color complements her red hair.
23

24
00:01:20,620 --> 00:01:23,190
They contrast well and make a very good combo.
24

25
00:01:23,190 --> 00:01:26,900
Also, this blue-ish color is a right pick for the dentistry theme.
25

26
00:01:27,030 --> 00:01:30,100
Blue colors feel more clean and sanitary.
26

27
00:01:30,150 --> 00:01:35,880
Good feeling to create for dentistry. And many other colors would be a red flag for a dental clinic. Like
27

28
00:01:35,880 --> 00:01:39,870
red and pink, that would remind us of blood.
28

29
00:01:39,900 --> 00:01:40,780
Not a good feel.
29

30
00:01:40,800 --> 00:01:43,170
Often I like to add a shadow behind the model.
30

31
00:01:43,170 --> 00:01:45,880
This makes her look like she's standing in front of a wall.
31

32
00:01:45,930 --> 00:01:47,880
It adds more dimension to the space.
32

33
00:01:47,880 --> 00:01:53,110
There are now two separate layers, there is a wall and then there is a model standing in front of it.
33

34
00:01:53,130 --> 00:01:55,030
You don't necessarily need to apply a shadow.
34

35
00:01:55,030 --> 00:01:58,550
You can still get good results without it. Sometimes it won't even work.
35

36
00:01:58,680 --> 00:02:04,260
This time it works and renders a very good result because it's a direct shot of the model. And she can
36

37
00:02:04,260 --> 00:02:06,090
easily be standing in front of the wall.
37

38
00:02:06,150 --> 00:02:07,250
Add the headline.
38

39
00:02:07,260 --> 00:02:09,050
See what I did with the type?
39

40
00:02:09,120 --> 00:02:11,360
It's heavy, white and upper case.
40

41
00:02:11,460 --> 00:02:13,680
That's to match the context of this page –
41

42
00:02:13,680 --> 00:02:19,110
white straight teeth. Black, skinny font wouldn't be as effective here, would it?
42

43
00:02:19,110 --> 00:02:24,030
We should always keep the topic in mind, when designing. Everything we do on the page creates associations
43

44
00:02:24,030 --> 00:02:27,180
for people. The colors we use. The shapes that we choose.
44

45
00:02:27,180 --> 00:02:29,770
All that is going to create certain feelings in people.
45

46
00:02:29,790 --> 00:02:33,680
Just like what we discussed in the typography lesson. About the typeface personalities.
46

47
00:02:33,690 --> 00:02:38,820
This is design thinking and it's one very important skill in the designer skill set.
47

48
00:02:38,820 --> 00:02:45,240
Okay, now add the rest of the copy. Add the navigation bar. And we have a beautiful hero section for a dental
48

49
00:02:45,240 --> 00:02:45,860
clinic.
49

50
00:02:45,870 --> 00:02:50,020
Do you notice why I made the button orange? Because I sampled it from the girl's hair.
50

51
00:02:50,160 --> 00:02:56,250
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

52
00:02:56,250 --> 00:03:02,580
for a modern website. Unboxing the image has given us more freedom and control over our composition.
52

53
00:03:02,610 --> 00:03:08,340
It has added the depth. Every object seems to exist in one shared space, but on different layers, just
53

54
00:03:08,340 --> 00:03:09,670
like the real world is.
54

55
00:03:09,760 --> 00:03:13,610
And this has given us a very good looking and interesting hero section.
55

56
00:03:13,620 --> 00:03:16,340
You don't necessarily need to unbox an entire image.
56

57
00:03:16,560 --> 00:03:22,590
You can achieve an exciting result by taking a small part of the object out of its frame. For example,
57

58
00:03:22,590 --> 00:03:26,700
that's what I've done for this website, on another project for a roofing company.
58

59
00:03:26,760 --> 00:03:31,890
I wanted to emphasize the roof somehow, but this layout isn't really cutting the mustard.
59

60
00:03:32,040 --> 00:03:38,830
The roof is lost in the design. So I took the tip off the roof and let it poke outside of the frame.
60

61
00:03:38,850 --> 00:03:41,050
Now the roof has gained a spotlight.
61

62
00:03:41,070 --> 00:03:47,040
It's a point of interest. Plus the image isn't a separate thing anymore, it's interacting with the canvas
62

63
00:03:47,070 --> 00:03:48,410
and other elements on it.
63

64
00:03:48,450 --> 00:03:52,580
That's all it takes to free an image from its frame and bring it to life.
64

65
00:03:52,590 --> 00:03:54,680
We can't really create this effect in Figma,
65

66
00:03:55,140 --> 00:03:59,160
we will definitely need a Photoshop for this. In the advanced part of this course,
66

67
00:03:59,160 --> 00:04:05,310
I have put a photoshop tutorial and an assignment on how to achieve this effect. And how to cut out a
67

68
00:04:05,310 --> 00:04:10,380
subject or a model from the image and remove the background out of it.
68

69
00:04:10,380 --> 00:04:16,170
It's not an essential effect, but knowing how to make this effect work, really opens up your options in
69

70
00:04:16,170 --> 00:04:17,010
design.
70

71
00:04:17,070 --> 00:04:24,180
And once you remove the background from the subject, it opens up a lot of different design options.
71

72
00:04:24,180 --> 00:04:27,570
Just like what happened with here, because now we can change the background,
72

73
00:04:27,570 --> 00:04:36,390
we can move let's say headlines and texts behind objects. And we can create a bit more three dimensional
73

74
00:04:36,410 --> 00:04:38,040
layers in our designs.
74

75
00:04:38,130 --> 00:04:44,350
So when you reach the advanced part of this course, definitely don't miss this tutorial and practice
75

76
00:04:44,380 --> 00:04:47,340
it. Because it's really going to come in handy when you start designing.