Using Whitespace to Create Great Website Designs

Words like “clean,” “simple,” “luxurious,” and “effective” often get thrown around when talking about whitespace. But as easy as it is to qualify whitespace as a design element — and minimalism as the design technique that makes use of it — do you know how to properly use whitespace in web design?

How to Use Whitespace More Effectively

To start, there are a few things you need to know about whitespace before using it in your work.

• Whitespace is also known as negative space.
• While whitespace indicates a lack of content within a set area, it is by no means about emptiness. Whitespace in and of itself is a design element.
• The key to properly working with whitespace is the ability to take all space into consideration. If you understand the relationship between all the different elements on a web page, you can use whitespace to influence and enhance those relationships.

When it comes to web design, less really is more. Say it in fewer words. Simplify your color palette. Utilize the natural grid. In other words, take in the whole picture and plan out your web pages more strategically with whitespace. You may be surprised by the benefits you’ll reap in exchange for doing so:

• More effectively draw visitors’ attention to the Calls to Action (CTAs).
• Improve the organization and balance so that everything’s easier to find.
• Increase the readability of the content.
• Convey a sense of luxury that visitors will in turn associate with your brand.
• Draw associations to brands like Google and Apple that also effectively use clean, simple designs and whitespace.

Sounds great, doesn’t it? Well then, it’s time to check out the 12 ways you can properly use whitespace on your web pages.

1. Create a Focal Point

When you think about a website that’s so minimal and basic in design, and yet highly effective in its mission, you’ll most likely envision Google. It’s obvious what the most important part of this website is — and it’s not just because they have a colorful logo and search box on the page. With all that whitespace, you can’t help but direct your eyes to the center.

2. Break Up Text

Whitespace isn’t just about bringing focus to the important parts of a website. It can also be used effectively to make a lot of content in a single area more readable. The Mozilla home page has done this by using strong colors, open space, and balance to improve the readability of it.

3. Pad the Page Margins

Remember in school when you’d change your page margins to 1.25″ and hope the teacher didn’t notice the extra padding to make your report appear longer than it was? Well, you’re in luck, because wider margins are actually highly effective in drawing attention to the center of a page. iA offers a great example of this.

4. Consistently Organize Pages

Whitespace is often used to establish a rhythm and a set structure of a web page. Take Dropbox, for instance. You know that there is going to be a chunk of text on one side, an image on the other, and a big gap of space to introduce the next identically sized section.

5. Balance Asymmetrical Designs

When we think about symmetry in design it’s usually as simple as, “I’ve got an image over on this side, so I’ll add an image or text of equal weight on the other side.” Sometimes, however, asymmetry looks just as neat and logical as does symmetrical design, like on the Apple iPad page.

6. Establish Relationships

This particular whitespace technique is a little harder to pull off than others because you’ve got to find the right place to do it. One of the best examples of this is in pricing or service tables. Whereas some companies use checks and X’s to fill in all the space, WordPress does a great job in using negative space to demonstrate how much more you get with their pricier plans.

7. Chart a Course

You don’t need arrows or sliders to guide your visitors through a specific path on your website. In fact, if you make use of staggered images and just the right amount of whitespace, you can indirectly guide your visitors from top to bottom with ease like Apple does.

8. Give the Navigation Room to Breathe

The navigation bar is a great place to play around with wide open spaces. Use whitespace to give a logo emphasis like Philip House. Or use a pull-out menu that gives a mega menu room to breathe like Bulgari has done. The same rule should apply to footers.

9. Create Drama

CTAs are all about using emotion to drive visitors to click a button or fill out a form or make a purchase. But those CTAs don’t have as great of an impact if you don’t give them a moment to let the emotion set in. The Despreneur hero image does just that with “Are You Charging Enough?” giving visitors a moment to panic before offering the bright green solution.

10. Emphasize Typography

If you’re using larger font faces on your website, it’s because they deserve more attention. By building in additional space around that typography, you’re signaling to visitors that this is where they need to stop and pay attention before moving on, just like the superReal site does.

11. Use Photos with Whitespace

When it comes to using whitespace on a website, don’t feel like you have to create it all on your own. With a simple search of the term “negative space” on Flickr and Pixabay, you will get more than enough options for photos you could use that would help perpetuate this idea of a simple, clean, and strategic design.

12. Create Peekaboo Elements

While the idea of creating letters, shapes, and other well-known objects with only bold colors and whitespace is really cool, it’s a difficult one to execute because it requires at least an intermediate level of design experience. Two of the more well-known examples of “peekaboo” whitespace elements are the arrow in the FedEx logo and the peacock in the NBC logo. Logos aren’t the only part of your website where you can use this type of whitespace either.

Whitespace in Future Design

In some respects, web design is much easier today than it was ten years ago. We’ve got content management systems chock-full of tutorials, plugins, and themes to help even the most novice of developers and webmasters build websites. On the other hand, web design is much more difficult now than it was ten years ago. It is because we have all these tools and reference materials at our disposal that makes expectations much greater than they ever were before. This is why designers and developers who want to stand above the competition and take their websites to greater heights need to know how to use whitespace effectively.

Further Reading and Resources

We have more guides, tutorials, and infographics related to web design:

• Composing Good HTML: this is a solid introduction to writing well-formed HTML and using HTML validator software.
• CSS3 — Intro, Guides and Resources: this is a great place to start learning webpage layout.

Web Design Trends You’ll Never Forget

Every designer wants to create timeless documents — ones that will never look tacky. But we often fail at that. In our infographic Web Design Trends You’ll Never Forget we run through decades of designs that were once thought to be the height of coolness.

Web Design Trends You’ll Never Forget