<img src="https://d5nxst8fruw4z.cloudfront.net/atrk.gif?account=W66Dp1IW1d1070" style="display:none" height="1" width="1" alt="">

the best creative ideas ever

Create better strategies and tactics and build a better brand.

Give Your Website Oxygen and Room to Breathe with Whitespace

Posted by Brian Wilson on Mar 29, 2018 8:22:00 AM
Find me on:

Stellapop-whitespace-design-for-website

Whitespace. Loved by designers, and loved to be filled by website owners. Though you may not realize it, blank space can actually be a good thing for a website. Kind of like the best friend you didn’t realize you missed until you don’t have them anymore.

So What’s This Whitespace You Speak Of?

Great question. When designers talk about whitespace, what we really mean is negative space or the blank spaces in between the important bits. stellapop-click-to-tweet We love to increase it, and you want to fill it. Whitespace to non-designers seems like prime real estate to share everything it is you do, and as such, “mustn’t be wasted.”

Actually, whitespace is a good (heck, it's an awesome thing) thing, and it’s not wasteful to include more of it. It’s more like a breath of fresh air for your visitor. Or perhaps a visual “oxygen infusion” for the eyes. 

Think of whitespace as the breathing room not just between design elements in the page’s composition, but also as breathing room between columns and lines of text, and provides some visual oxygen for the visitors' eyes. 

Providing enough visual oxygen via whitespace helps guide the visitor’s eye and assists the user in navigating your site.

It allows you to visually influence them and gently guide them in the direction you want them to go. Your website has a purpose, and that purpose needs to be highly focused and intentional. Whitespace helps to achieve this focus and purpose.

For instance, if you want your visitor to click a certain button, it’s probably not a good idea to cram it in between eleventy-hundred other buttons or text. You want to attract their attention to one shiny button that entices them to take action, to click.  

Make Your Site More “Readable” and Less Daunting

Whitespace in between lines of copy also helps to break up large blocks of text so that your reader doesn’t get eye fatigue trying to decipher it all. It makes your text more easily readable and consumable. 

Better yet? Keep it simple. Avoid overwhelming for your visitors altogether by cutting down the copy a bit. Too much copy crammed together on a page can cause your visitor to bounce away from your site. No bueno. 

Use Whitespace for Visual Emphasis

Additionally, whitespace in between lines of text can mean just as much as the text itself sometimes. Whitespace helps to weight text and delineate what’s important in your website’s typography hierarchy. This helps your visitor understand how to digest your copy. 

For example, if you have a headline above the fold on your website, but it's smashed against the navigation menu or with a subhead, by default that diminishes the size and importance of your headline.

Or if you have a call-to-action (CTA) you want to catch your reader’s eye, but it’s buried in other text or images, whitespace can help draw attention to it. 

Whitespace Looks Elegant 

Another benefit to whitespace is when used well, it looks elegant and clean. In other words, it looks professional and it makes a great impression on first-time web visitors.

Keep in mind that too much of a good thing is still too much. If you go overboard with whitespace, it can make your website seem “unfinished.”

Whitespace isn’t Always “White”

Though it’s most common, sometimes whitespace isn’t always white. Whitespace can also be achieved using a solid color or a background image that has been blurred out in order to achieve the same effect. In cases like this, it’s more about providing space.

If you use a blurred image or a solid color, there can’t be any text or design elements that distract the user. It should still fade nicely into the background so that your visitor’s gaze still focuses on your content and the desired action you want them to take.

Fun Factoid About Whitespace

Some studies have shown that by using whitespace in the margins, you might actually help promote reading comprehension. Whereas a lack of margins has been shown to increase reading speed overall.

Since the goal of many websites is to engage your reader and prompt them to take action, not necessarily read faster, it seems like incorporating whitespace into your margins might be smarter!

Remember that sometimes less is more, especially when it comes to web design and layout. The goal is to provide a great user experience for your visitor, while unobtrusively encouraging them to take a certain action or actions.

You can do this most effectively by strategically using whitespace to guide the eye and giving your visitor room to “breathe.”

Stellapop-website-discovery

Topics: Design, Website

Yo!

This here is the home base for CEOs, founders, owners and C-Suite executives to discover useful and timely information on a variety of topics, including:

    • Business Management
    • Branding + Design
    • Social Media Marketing
    • Workplace Services
    • HR  

Check back weekly to catch any updates, or subscribe above for a little pop in your inbox. 

MgmtInsights_300x300.jpg
Visua lBrand Identity Checklist
HR Onboarding Checklist
SocialMediaAudit_300x300_a.jpg