Everyone says, “think outside the box,” or, “get out of the box,” as a way of encouraging people to think differently and create something new. When it comes to website design, thinking outside the box does more than activate your creative flow – it makes your visitors happy.
Lines and boxes are traditionally used to separate content that would otherwise blend together and confuse visitors. However, you may have noticed that some of the best landing pages don’t box in their content – at least not noticeably.
Instead of thick borders and boxes, designers are using other elements to separate content. The most popular element used for this purpose is a series of borderless horizontal blocks of color.
Slight color change: the borderless border
Anyone surfing the net for five minutes will come across multiple websites that utilize horizontal blocks of color to separate content. Sometimes the color change is slight (like gray to white), and sometimes it’s not (like black to white). The music demo for the U-Design theme offered by Theme Forest is the perfect example of this borderless border in action.
This borderless design element became popular when people started putting multiple sections of content on their home page that would have otherwise been published on separate pages. This design element was born as a solution for the one-page website.
What’s wonderful about this design approach is that each colored section has the potential to be its own complete design. It allows the designer to create multiple layouts on the same main page. When content requires a unique type of layout to convey its message, that design flexibility is important.
A different color block and a different layout are both signals that the visitor is viewing a new section of content. This creates a smooth transition and isn’t possible by using thick borders.
Thick borders don’t guide a visitor’s eyes to your content
When you want your visitors to look at something specific on your page – like a newsletter signup form – that content needs to stand out. If everything on your page is boxed in with thick borders, nothing will stand out. The only way a thick border will guide your visitors’ eyes to specific content is if that content is the only element with a thick border.
When a visitor’s eyes land on a webpage, they’re naturally going to scan the page until their eyes rest somewhere. When a website is cluttered, their eyes will keep bouncing around. Clutter isn’t just a bunch of disorganized content. Excessively thick borders can also be a form of clutter when they’re prevalent to the point that your visitors skip your content.
Here’s a live example of different types of border styles, along with the CSS to create them. When you look at the nine styles represented on this page, you’ll notice your eyes naturally rest on the samples with thin borders, allowing you to read the text inside. When you look at the samples with thick borders, your eyes will want to bounce around even more, rather than rest on the content.
Thin borders between products are better
When ecommerce websites first gained popularity, businesses were obligated to use designs that had thick borders separating each product. It took years for designers to understand visitor psychology well enough to change this.
The Three Graces website uses thin borders to their advantage throughout their whole website. Barely visible, their borders have just enough presence to separate their products while maintaining the elegance of their theme. Although they’re using thin borders, they didn’t box everything in. They’ve left the top, sides, and bottom complete open, giving a feeling of freedom to the visitor.
Personal websites without borders
If you’re not building an ecommerce site with a bunch of products, there’s still good reason to go borderless. You may not be trying to sell products, but you want your visitors’ attention.
Look at Seth Godin’s website for a great example of borderless design. There’s a scrolling carousel at the bottom of the page, advertising his books. However, the whole page is clean, clear, and borderless.
Notice how easy this design is on your eyes. You’re not frantically searching for something to look at, and there’s no pressure to figure out a complex design. You’ve got the freedom to explore the site at your own pace, yet you’re being guided to click on Seth’s head.
This ease is what’s possible for your visitors when you go borderless.