Ever look at your website and see that “stripe-y” effect — one section white, next section dark, back and forth down the page?
It’s a design layout I’m always trying to avoid, but it’s not always easy.
Here are some ways to break it up.
1. Overlap elements
One of the best methods for avoiding the dreaded stripes is to overlap elements.
Take cards from the adjoining section and move them either up or down, depending on your layout, so they overlap the darker section.
It helps break up that harsh line by simply covering it up.
2. Use gradients
One method I use often is really soft gradients, at about a 135-degree angle. I start with white at the top left, then a very light color hue in the middle, and back to white on the bottom right.
This creates a super soft transition between your sections, while still allowing some color variation.
3. Use contained sections instead of full-width
Another good method for avoiding the dreaded stripes is to add cards or a section that doesn’t span full-width, and instead stays at the container width.
This gives you a visual divider to break up your content without adding a full-color background.
Design to Dollars Takeaway
Sometimes stripes happen and are hard to avoid, depending on your website copy. But these techniques can help you mix up your layouts and keep them more interesting and engaging. The less redundant your layouts are, the better your design will be received.
