WEB DESIGN & BRANDING

How to use white space in web design

Using white space in web design can help to ensure your content grabs attention, is easy to read and encourages the desired call to action.

What is white space?

White space, or “negative space”, is the empty area of space around a design element that isn’t filled up with other stuff that could cause a distraction. It’s essentially the Marie Kondo of design techniques. For example if I were to include white space in this blog post, it might look a little something like this…





This is
white space






Notice how the type is given lots of room to breathe with empty space above, beside and below the headline. You might find that your eyes are often drawn back to this headline due to its dominance on the page. In fact, white space helps elements stand out and make a statement, as opposed to being overpowered and lost amongst other design elements.

White space is a powerful technique that can bring a contemporary, fresh vibe into any design. So how can you use it effectively in web design?

  1. Use white space to draw attention
  2. Use white space to create balance
  3. Use white space to make reading content easier
  4. Use white space to organise and structure your content
  5. Use white space to look good!
Example of Apple’s website design using white space to grab attention
  1. Use white space to draw attention

Effective use of white space can draw attention to, or bring focus to certain elements on a page. So, if you have an important hero headline at the top of your homepage, a key call to action further down or maybe you have a video that you want people to watch without getting distracted by text or other elements on the page; adding white space around it will emphasise the content and deliver the intended message to the user.

Like in the example I showed above, white space is also a great way to highlight the importance of particular pieces of information, or quotes, that may otherwise be hidden in a block of text. Breaking the pattern of reading in this way grabs attention and helps users to navigate towards that section.

  1. Use white space to create visual balance and harmony

Do you remember those really old geocities sites? You know, the ones that looked like a word doc, with clipart and crazy fonts like Comic Sans dotted throughout the page? They were kinda ugly and had a pretty horrible user experience, it was just “let’s throw as much on the page as we possibly can!” 

At the time, it was pretty groundbreaking stuff but they lacked visual balance and harmony. The pages felt chaotic and busy.

GeoCities website in 1995. Source: https://www.webdesignmuseum.org/web-design-history/geocities-1994

But unlike the Geocities websites of the past, contemporary websites are taking advantage of white space to create balance and harmony. This ultimately helps users feel more relaxed and at ease while navigating through your content. Interacting with your website becomes an enjoyable experience that they’ll want to come back to again and again.

  1. Use white space to make reading content easier

Got lots of content to fit onto a single page? Copy/pasting it all into one giant block of text can be very intimidating to readers and not very engaging. 

When designing a web page, make sure to break your text up with white space – position sections on different sides of the page complimented by an image. Introduce padding (space) around the text blocks. Use big headings and pull out quotes to create focus and draw interest. Even if you’re writing a blog post, try to break it up with images and subtitles.

Your readers will thank you!

  1. Use white space to encourage a specific action

Use white space to help guide visitors through a specific set of steps or actions on your web page so that you have a stronger chance of conversion. Overcrowding and congestion of content can hinder this process. 

As a rule of thumb, you only have a few seconds to grab someone’s attention when they land on your webpage.

As a rule of thumb, you only have a few seconds to grab someone’s attention when they land on your webpage. So make those seconds count and help them do what they came there to do. People don’t always read everything word for word. That’s why your content should be structured in a way that allows people to scan for important information quickly and easily. 

White space creates room for faster digestion of content and helps users begin the journey to self-qualify and identify themselves as needing your products or services. 

Google.com’s use of white space clearly emphasises the desired action: to search the internet.
  1. Use white space to look good!

If nothing else, adding white space to your site simply makes you look good. White space can bring a high-end or sophisticated feel to your website that can build trust with your website visitors through a sense of professionalism.

As they say, people no longer compare your website to other websites in your industry. Your website is being compared to every other website they browse online, including Apple…

Summary

Using white space in web design is a valuable technique that can help build trust with visitors through visual balance and harmony, better user experience and clear calls to action. It could be the difference between visitors bouncing off your website and sticking around to become a loyal customer, who regularly returns to your website and recommends it to others. 

And don’t forget, white space in web design doesn’t have to be white, it just has to provide breathing space.

I may use cookies on my website. This helps me provide the most relevant experience to you by remembering your preferences and repeat visits. By clicking “Accept”, you consent to the use of ALL the cookies.