White space — no, not that stuff that NASA deals with, it’s the “blank” area often seen in web design layouts.
So what is it, exactly?
Well, white space is really just empty or blank areas around elements on your website — but it doesn’t always have to be white. It can be whatever color is used in the design at hand.
But why should you leave it alone? Let’s talk more about white space and why it’s important.
Why white space is important
I know, and I’ve been told many times over the years of my career — “There’s too much space between those sections.”
It can feel empty, and tempting to fill that white space with more content so it fills the gaps.
But what you need to understand is white space really serves an important purpose.
With any design, there are 3 elements to create harmony and balance: copy (or words), images, and white space.
If you have too much of any one of those elements, it can create an awkward layout that feels lopsided and not aesthetically pleasing to look at.
With a design that properly disperses these three elements, your white space can be just as powerful as words. Because with good usage of white space, you can lead someone to scroll or click a “Buy Now” button.
So where on your website should white space be used effectively? And how?
Let’s take a look.
5 Examples showing effective use of white space
Around sections
In a website page layout, you can utilize white space around a section that you want a reader to focus on.
Shown here on the MailerLite homepage, they added enough white space around this testimonial and statistic so that it removes all distractions elsewhere and you only focus on this section at once:
In a page hero
A page hero, or the first section on your page that contains the page title, is another area that’s great for implementing white space.
In The Oaks Lakeside Kitchen restaurant website, the homepage hero has a large amount of “white” space (or blank space) to let the images shine in the background:
Around images
When referring to white space, it doesn’t always have to be large amounts. When looking at The North Face website, they created a nice balance of white space with their product images here:
With this balance and placement of white space, you’re able to let the products be the highlight — which is the sole purpose of their business.
With graphics and CTAs
When you’re laying out a website page, and you want to create a focus on graphics with the intention of having the user click a button, utilizing white space is always important.
Charity:Water has an excellent layout and design, and shown here is an example of how the white space around the text, graphics and lead-in to the button are perfectly placed so you know they all correlate with each other, and lead your eye to that final button:
In boxes with borders
If the layout calls for a border around a particular set of words and/or an image, you want to utilize white space around these elements to give them breathing room. It’s not uncommon for a design to feel “cramped” because of the lack of white space between words and a border, not allowing you to comfortably read.
On Firefly LED‘s website, this particular callout on their homepage has a boxed card design, with text and a button on the left, and an image on the right. The left section containing text has proper white space around it to allow you to read it and digest comfortably, allowing a harmonious balance in the overall feel:
White space is your friend
I hope by now you can see how important white space can play a part in the design of your website. I am a strong believer that it is JUST as important as the copy and images on your site — too much of any, and you’ll have a site that’s just clunky and difficult to follow.
Making your website as easy as possible to navigate is always a priority, and with the proper usage of white space, you can do just that.
