I mentioned at the beginning of the year I mentioned I’m redesigning my agency site. Well, it’s been a work-in-progress, and it always seems when we work on our own business, we become the biggest critics.
Fast forward to today, and I’ve finally solidified my homepage design that I’m happy to move forward with.
When laying out a new website design, there’s so many different design tactics I utilize to help improve the overall flow and layout.
And in the process of working through the design, there’s one tactic I utilized in my layout I wanted to tell you about.
Specifically, overlapping elements.
Oftentimes, you’ll find that when you’re designing a webpage in Figma, and you’ll zoom out to view the page from a bird’s eye view, you’ll notice it feels “stripey” — meaning, the alternating sections of white then color, then white again make the page just feel like a bunch of stripes.
It’s not really pleasing to the eye, as it makes it feel like such abrupt start and stops as you scroll.
Let’s take a look at my new homepage mockup design for example (special sneak peek!):
In this layout, you can see how there are colored, striped sections — alternating light and dark.
Looking at it, sure it doesn’t look terrible — but it just feels so cut and dry and a little “stale”.
However, if we are to consider how we can overlap elements to break up the sections to not be so harsh, we’ll then realize how impactful it really is:
As you can see, the “Graphic Design” and “Website Care” card designs are now overlapping the next section below it — creating more depth and eliminating such a disruption in the flow of the page.
Additionally, you’ll notice the “About AWD” and “Our Process” cards are also overlapping the CTA bar below it — but the colored background of the CTA bar was increased to pull it up behind those cards.
This simple and easy tactic does several things for your layotus:
- Helps reduce the feel of a “stripey” layout
- Keeps the user engaged to continue scrolling to the next section
- Makes your design feel less flat and adds more depth
Try overlapping elements on your next project and see how it can help you elevate your page layouts — over time, you’ll find what a big difference it makes!
Thanks for reading,
