Negative space in web design – How to implement it

Negative space web design - How to implement it
Web Hosting

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.

You care about your website's speed, right?

Quick disclaimer: I'm a SiteGround affiliate, and below are some affiliate links. If you click a link and make a purchase with SiteGround, I will receive a small commission from SiteGround. This doesn't cost you any extra, but it helps me keep the lights on. I only recommend SIteGround because I use them myself, recommend them to my web design clients, and personally know the quality of their products and service.

No one wants a slow loading website. I'm sure you're probably aware, but the quality of your website host is one of the biggest factors in your website's loading speed.

I host my own website with SiteGround for a couple of reasons (other than them being one of the WordPress recommended hosts):

  • The quality of their hosting (the speed of their servers and their security). They're one of the best in the industry.
  • Their support team is outstanding. On the rare occasion I've had a problem, or just had a question, they've been on hand incredibly quickly. Plus, they really know their stuff.

Click on the banner below, or follow this link to get a website hosting company who are a cut above the rest.

Web Hosting

By: Scott Cole

September 6, 2017 |

Here're some other posts you might find helpful!

Supercharge your website contact info - a few thoughts and tips on how to make your website contact information accessible to your visitors

Website contact information. Sometimes, you’re trying to contact a company and their phone number is just hidden away, never to be found. Personally, I find it quite frustrating. Especially when I have to go through what feels like 5000 support FAQs before they’ll let me have a number or email address. So, with that in […]

Why having a mobile first website is crucial to business growth.

What is mobile first? Well, you probably have heard of mobile responsiveness when it comes to websites. It just means a website is built for desktop browsers but will transform gracefully for mobile devices. That’s great, and it has a wealth of benefits. Some of those benefits are the same as the ones I’ll talk […]

Minimalist Navigation on a mobile can help a great deal, but not just hiding menus away off the screen.

In general, what is minimalism? Well, that depends. Music, Art, the way you live – really, they each have different meanings when it comes to minimalism. I’m a fan of The Minimalists – Their podcasts are great and they have some great tips for most people to live more fulfilling lives, even if you don’t […]

Leave a Reply

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