0
1
00:00:00,160 --> 00:00:03,270
Here is a little advance but very cool design trick.
1

2
00:00:03,270 --> 00:00:06,760
This trick will actually make your designs look very solid. Beginner
2

3
00:00:06,790 --> 00:00:11,700
designers are usually scared of it and very rarely you'll see amateur work using this trick.
3

4
00:00:12,060 --> 00:00:16,380
So if you use it, your work will certainly appear like a pro design.
4

5
00:00:16,380 --> 00:00:19,750
The trick is to take different elements and overlap them.
5

6
00:00:19,750 --> 00:00:22,920
Do you see how the hand of the statue is overlapping
6

7
00:00:22,920 --> 00:00:26,490
National Geographic title and also the yellow frame?
7

8
00:00:26,490 --> 00:00:31,270
It makes the design more interesting and adds an extra dimension to the composition.
8

9
00:00:31,290 --> 00:00:33,210
The execution of this trick is quite simple.
9

10
00:00:33,210 --> 00:00:36,120
You take two separate elements and overlap them.
10

11
00:00:36,120 --> 00:00:42,150
It ties two otherwise disconnected elements together. And it also creates drama in the design.
11

12
00:00:42,150 --> 00:00:48,450
Something interesting is going on and our eye is now interested to solve the puzzle. Making it all designed and
12

13
00:00:48,450 --> 00:00:51,930
tied together, rather than just placed on the page randomly.
13

14
00:00:51,930 --> 00:00:53,920
The trick is very common in print design.
14

15
00:00:54,210 --> 00:00:59,880
You'll see headlines overlapping with people, images with each other, text with text, you name it.
15

16
00:00:59,880 --> 00:01:04,560
In web design, it's a bit more measured and less extreme as you'd see it in print.
16

17
00:01:04,560 --> 00:01:07,740
As you can see overlaps in these examples are more subtle.
17

18
00:01:07,740 --> 00:01:14,310
On the right, you have images that are overlapping with each other, but they don't create any complex
18

19
00:01:14,370 --> 00:01:19,340
overlap with text blocks. And on the left text overlaps with the background image.
19

20
00:01:19,410 --> 00:01:20,270
Quite simple.
20

21
00:01:20,280 --> 00:01:26,070
One reason I love this technique is because you can add, to an otherwise bland design, a nice flair
21

22
00:01:26,070 --> 00:01:27,050
of excitement.
22

23
00:01:27,060 --> 00:01:29,070
I was recently working on this pricing section.
23

24
00:01:29,160 --> 00:01:35,970
Usually, products have several pricing plans, right? And that has some wiggle to play with and create an
24

25
00:01:35,970 --> 00:01:36,820
interesting design.
25

26
00:01:36,840 --> 00:01:38,290
But this one only had one.
26

27
00:01:38,370 --> 00:01:42,410
My initial design was something like this, which look very bland and boring.
27

28
00:01:42,450 --> 00:01:46,300
There was no excitement to this and felt like it was just randomly put on there.
28

29
00:01:46,320 --> 00:01:49,790
I've created a new shape and overlapped it behind the box.
29

30
00:01:49,950 --> 00:01:51,180
Instant improvement.
30

31
00:01:51,180 --> 00:01:52,850
Now, this is a non-traditional shape.
31

32
00:01:52,860 --> 00:01:56,710
If you introduce something like this on the page, you have to repeat it again.
32

33
00:01:56,730 --> 00:01:58,640
Remember the repetition technique?
33

34
00:01:58,740 --> 00:02:04,080
So I used the same shape and overlapping trick on the other places on the page, which made a pretty good
34

35
00:02:04,080 --> 00:02:05,400
result.
35

36
00:02:05,400 --> 00:02:07,480
Let's see how we can apply this into practice.
36

37
00:02:07,590 --> 00:02:10,770
So we have a section on the page, where we want to show some images.
37

38
00:02:11,010 --> 00:02:17,310
We could arrange these images to something like this, which is reasonable but a little boring. Or we can
38

39
00:02:17,310 --> 00:02:20,340
overlap them and create a more interesting visual.
39

40
00:02:20,340 --> 00:02:24,630
You've seen this technique millions of times with photo collages.
40

41
00:02:24,640 --> 00:02:30,140
Well okay, we do have something to overlap in here. But what to do when we want to use only one photo?
41

42
00:02:30,150 --> 00:02:30,570
Simple.
42

43
00:02:30,570 --> 00:02:33,720
Let's draw a box and overlap it with the image.
43

44
00:02:33,840 --> 00:02:38,640
And now we have an interesting design, plus photo doesn't look like it's just hanging in there randomly,
44

45
00:02:38,880 --> 00:02:41,190
but feels like it's laid where it belongs.
45

46
00:02:41,190 --> 00:02:42,630
The color of the box is important.
46

47
00:02:42,630 --> 00:02:47,370
In this case, I have just sampled the color from the image, but in other cases this is a good opportunity
47

48
00:02:47,370 --> 00:02:52,920
to use brand colors or repetition technique. To repeat the colors across the page.
48

49
00:02:53,010 --> 00:02:58,560
One thing to note, overlapping trick a lot of times breaks the grid. That background box isn't aligned
49

50
00:02:58,560 --> 00:03:04,530
to the grid. Overlapping and the grid are sort of opposite concepts. Overlapping trick is intentionally
50

51
00:03:04,530 --> 00:03:07,920
trying to break the alignment and bring some fun in the composition.
51

52
00:03:07,920 --> 00:03:10,050
Breaking the grid intentionally is not a crime.
52

53
00:03:10,050 --> 00:03:13,090
As I've already mentioned the "intentional" is the keyword.
53

54
00:03:13,320 --> 00:03:18,240
Every design decision has to be intentional. And if it is, then breaking and bending the rules a little
54

55
00:03:18,240 --> 00:03:18,960
is welcomed.
55

56
00:03:19,080 --> 00:03:23,510
In this case, we're actually not messing with a grid that much. The box is in the background,
56

57
00:03:23,520 --> 00:03:28,860
it's sort of part of the background canvas. The image, text and other elements sit on that canvas, which
57

58
00:03:28,860 --> 00:03:30,160
in itself doesn't have a grid.
58

59
00:03:30,180 --> 00:03:33,300
It's the elements that are on it that live on the grid.
59

60
00:03:33,300 --> 00:03:35,730
The same goes for full-width background images.
60

61
00:03:35,760 --> 00:03:40,080
They are part of the canvas and sit on the background layer. So they don't need to be aligned with the
61

62
00:03:40,080 --> 00:03:40,710
grid.
62

63
00:03:40,710 --> 00:03:43,890
Let's do an exercise so you can practice this overlapping technique.