Landing Page Course Home

Part Seven

Landing Page Design Principles - Overlapping

The design principle of overlapping is about using landing page elements that break the boundaries of shapes and sections to create emphasis and direct attention. In this video, you'll see how to use visual design to focus your visitor's attention of certain areas of an image. You'll learn how to create the classic magnifying glass technique to amplify an area of importance.

©2018 - The Conversion Platform for Marketers

Try the Unbounce Landing Page Builder

No signup required. Give it a whirl to see what you think.


Landing Page Design Principles - Overlapping - 4:19

Skip IntroMore Design Videos

I'm Oli Gardner from Unbounce, and in this video series I'll show you how to use fundamental design principles to increase the conversions of your landing pages. Whether you're a marketer, designer, copywriter, just a business person, it doesn't matter, because when you understand how design works, you can get more clicks, more leads, more conversions and more sales from the traffic you're sending to your landing pages and I'll show you exactly how to do it.

The design principle of overlapping. Take a look at these squares. Each one has a circle inside it. Which one draws your attention? Good chance none of them, right, because they're all the same, apart from the location of the circle within the square. But if I redraw it so that the circle is breaking the plane of the square, overlapping it, now it draws your attention because it's created a completely different shape and it's different from the rest of them. This also goes hand in hand with the principle of anomaly.

We can make it stand out even more by adding another design principle, contrast. Now your attention goes directly to this element because of the two design principles. Overlapping and contrast. You can see this in action on a phone. This is an iPhone and when you get notifications, there's a red overlapping dot with a number of how many notifications you have. It's the exact same use that we see here. I can undo this completely by changing a setting and putting it on grayscale. This is actually quite a nice way of having your phone. It's more calming to look at than all these crazy colors, but you'll see now it's not as obvious where the notifications are. You still see the overlapping, but without the color it's not as noticeable so it's important when you understand design principles you can put them together to be more persuasive and drive attention to where you want people to be looking.

Now I'm going to jump inside the Unbound's landing page builder and I'll show you how to use the principle of overlapping to draw attention to an image on your page.

Alright, let's use the principle of overlapping. Now here's a shot, it's a screenshot, like a dashboard of some software. What I want to do is get the classic magnifying glass look where I take a portion of the image and I blow it up inside a circle that looks like a magnifying glass, and I'll stick that outside the boundaries of this rectangular image to draw attention to that section of the image.

In order to do this, I just search for a free magnifying glass Photoshop tutorial and I actually found a free Photoshop file. The link is here. Basically it looks like this. It's pretty cool. All you need to do is copy a section of your image, you paste it above the magnifying glass, and then you apply it as a clipping mask. As you can see there, now it's encapsulated within that circle and it sticks out of the side nicely. Now what I want to do is basically just take that part there and import that into Unbound.

Back in here, I can simply drag an image over here. Here's the one I want. And there we go. We've used overlapping to draw attention to that part of the image. It's highlighting something special. In this case it's just part of a graph, but if you have something really important in your hero image that you want to draw attention to, this is a great way of doing it because the overlapping principle breaks the plane of the shape below it and it looks pretty cool.

That's another landing page design principle you have in your toolkit, so please try them out on your landing pages. You'll improve the clarity, you'll improve the impact of the design, and ultimately increase conversions.

I recommend you check out You can follow me on Twitter, OliGardner. Click that link up there. It will take you to a preview of the Unbound's landing page builder. You can play around with it, see how easy it is to use, apply some of the design principles I've been teaching you, and you'll have higher converting landing pages in no time.

You can check out more landing page design videos down below. If you're watching on YouTube, go to where I'll teach you a whole bunch more about high impact, high converting landing pages.

Video Transcription - The Landing Page Design Principle of Overlapping