Negative space in web design – How to implement it

Quick mockup of a website showing a lot of negative space in web design

You’ve seen websites that seem sparse yet they’re engaging and still convey the message that’s intended (sometimes more effectively). How does the designer achieve it? More importantly, how can you implement negative space in web design if you’ve not got any experience with it? I’ll share some actionable tips to implement negative space in your own designs.

To clear something up quickly, negative space is also called white space. They’re interchangeable and mean the same thing.

(I recently went through this process when redesigning my homepage)

The first step for using negative space in web design: Stripping away the unnecessary to reveal the important

It’s important to realise that negative space in web design isn’t about having nothing on your page. Moreover, negative space is about having those things that are important to your visitors framed well so they can focus on the content you’re providing. To me, that’s where the power of negative space is.

Side-bars with reams of extra content, long lists of archived posts and navigation menus that are always there with a thousand links. Decide what’s actually important to the visitors who are on that page. Especially relevant is that anything that doesn’t add to the visitors’ experience, and the mission of the page, could detract from it.

Decide what your focus should be on the page you’re designing.

I’ve created the below mockup to show a basic layout without the extra stuff we see on a lot of websites. Essentially, I’ve stripped everything away that might distract the visitor from what I’ve put on the homepage.

Quick mockup of a website showing a lot of negative space in web design

This basic design might be missing some images (given it’s for a fictional interior design company) but the point it’s making is important. I aligned the elements to the centre. However, I haven’t done much else. I haven’t selected any fonts. Furthermore, I haven’t thought about my colour palette. Mostly, I’ve not paid attention to any details.

It’s those details that require the attention.

Step two: If it’s known as white space, does it have to be white?

Sure, some people use actual white negative space in web design. Google is perhaps one of the best examples for that. But it doesn’t have to be white. There’s no reason why you can’t have a complementing colour as a background.

Gradients work well too.

Actually, images can work well as negative space backgrounds when they’re used correctly. This example from S & P Real Estate shows how an image doesn’t have to be distracting to visitors.

This real estate website uses a subtle image in the background instead of plain negative space. It is still just as effective.

Follow these basic rules if you want to use background images as part of a negative space design:

  • The image is subtle (as it’s a background image, not part of the focus)
  • It doesn’t distract from the content
  • The context is appropriate

When using colours, consider the following:

  • Does the colour complement the others on the page?
  • Can you still read the text on the page easily without any strain?
  • Does it add to the design?

Step 3: Design the elements that are left

Typography is, in no uncertain terms, one of greatest tools you can use in designing your website. Spend some time on it. Think about who your audience is and what they would respond well too.

A general rule of thumb I follow is not to use more than two different fonts on a website. Three at a push, depending on what they’re being used for.

Try different font weights too because you’ve got more space on that web page now you’re just focusing on the important things. Lighter font weights are quite popular but don’t be afraid to experiment with bolder styles or mix them up a little. The right font and size/weight can have a fantastic impact. Take the example below from Mike McMillan is a good example of different font weights, sizes and colours coming together.

Mike McMillan's website homepage, showing a good use of type and colour without much else on the web page

You can also consider subtle animations/transitions for your navigation, or any clickable element to make it extra clear to a visitor when something is interactive. Something subtle and classic often works best, but don’t be afraid to experiment.

On Mike McMillan’s website the main text changes and re-types itself to explain more about him. It creates interest on the page for a visitor to focus on and saves having a large amount of text for you to read through.

Step 4: The space between matters

You can also experiment with line height. The space between words, lines and even individual letters can make a difference to not only the look and feel but the readability of your website.

Think about the bigger spaces. Having space is, after all, the aim of incorporating negative space into a design, right? Victoria Spicer’s website is a great example of this.

The different elements on Victoria Spicer's page get out of the way of the content. These elements are still very well thought out though.

She’s clearly paid attention to the space between the different elements and everything gets out of the way nicely. Thinking about the purpose of the page is important when designing the space that’s left.

How you arrange your navigation, your titles and any text can guide the visitor to do something. On Victoria Spicer’s site, the cursor is a large arrow that really invites you to click and scroll left or right to see more of her work. When used on a website with an overcrowding issue, a visitor might not notice the arrow right away. On Victoria’s site, it’s clear.

In summary

In conclusion, implementing negative space in web design doesn’t have to be difficult. It can be incredibly effective, even when used sparingly around certain elements on your page. Follow these general rules to make it easier:

  • What’s important to your target audience?
  • Consider colour; it’s a powerful tool. Don’t forget about subtle gradients or images.
  • Spend time designing the elements that remain.
  • Think about your layout. Designing the space between is just as important to ensure your visitors focus on what’s important on the page.
  • Your other choices (fonts, subtle animations, colour etc.) all play a part in helping focus your visitor’s attention.
  • Importantly, don’t be afraid of the negative space.

Here're some posts similar to what you've just read

Animating linear-gradient for button links

Animating linear-gradient in CSS? You can’t do it. You’re right, it can’t be done. However, there is a way to […]

Design | Development

Should you let your web developer register your domain name?

You’re starting a business, or you’re starting a personal website, and you need a website. You’re hiring someone to help […]

Development | For the Clients | Wordpress

Should your web developer host your website? I say no… Here’s why

I’ve read a few social media posts recently, and I’ve spoken to a few potential clients, about web developers (or […]

Development | For the Clients | Wordpress

Leave a Reply

Your email address will not be published. Required fields are marked *