Here is a little advance but very cool design trick. 1
This trick will actually make your designs look very solid. Beginner 2
designers are usually scared of it and very rarely you'll see amateur work using this trick. 3
So if you use it, your work will certainly appear like a pro design. 4
The trick is to take different elements and overlap them. 5
Do you see how the hand of the statue is overlapping 6
National Geographic title and also the yellow frame? 7
It makes the design more interesting and adds an extra dimension to the composition. 8
The execution of this trick is quite simple. 9
You take two separate elements and overlap them. 10
It ties two otherwise disconnected elements together. And it also creates drama in the design. 11
Something interesting is going on and our eye is now interested to solve the puzzle. Making it all designed and 12
tied together, rather than just placed on the page randomly. 13
The trick is very common in print design. 14
You'll see headlines overlapping with people, images with each other, text with text, you name it. 15
In web design, it's a bit more measured and less extreme as you'd see it in print. 16
As you can see overlaps in these examples are more subtle. 17
On the right, you have images that are overlapping with each other, but they don't create any complex 18
overlap with text blocks. And on the left text overlaps with the background image. 19
Quite simple. 20
One reason I love this technique is because you can add, to an otherwise bland design, a nice flair 21
of excitement. 22
I was recently working on this pricing section. 23
Usually, products have several pricing plans, right? And that has some wiggle to play with and create an 24
interesting design. 25
But this one only had one. 26
My initial design was something like this, which look very bland and boring. 27
There was no excitement to this and felt like it was just randomly put on there. 28
I've created a new shape and overlapped it behind the box. 29
Instant improvement. 30
Now, this is a non-traditional shape. 31
If you introduce something like this on the page, you have to repeat it again. 32
Remember the repetition technique? 33
So I used the same shape and overlapping trick on the other places on the page, which made a pretty good 34
result. 35
Let's see how we can apply this into practice. 36
So we have a section on the page, where we want to show some images. 37
We could arrange these images to something like this, which is reasonable but a little boring. Or we can 38
overlap them and create a more interesting visual. 39
You've seen this technique millions of times with photo collages. 40
Well okay, we do have something to overlap in here. But what to do when we want to use only one photo? 41
Simple. 42
Let's draw a box and overlap it with the image. 43
And now we have an interesting design, plus photo doesn't look like it's just hanging in there randomly, 44
but feels like it's laid where it belongs. 45
The color of the box is important. 46
In this case, I have just sampled the color from the image, but in other cases this is a good opportunity 47
to use brand colors or repetition technique. To repeat the colors across the page. 48
One thing to note, overlapping trick a lot of times breaks the grid. That background box isn't aligned 49
to the grid. Overlapping and the grid are sort of opposite concepts. Overlapping trick is intentionally 50
trying to break the alignment and bring some fun in the composition. 51
Breaking the grid intentionally is not a crime. 52
As I've already mentioned the "intentional" is the keyword. 53
Every design decision has to be intentional. And if it is, then breaking and bending the rules a little 54
is welcomed. 55
In this case, we're actually not messing with a grid that much. The box is in the background, 56
it's sort of part of the background canvas. The image, text and other elements sit on that canvas, which 57
in itself doesn't have a grid. 58
It's the elements that are on it that live on the grid. 59
The same goes for full-width background images. 60
They are part of the canvas and sit on the background layer. So they don't need to be aligned with the 61
grid. 62
Let's do an exercise so you can practice this overlapping technique.