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)
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.
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.
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.
Follow these basic rules if you want to use background images as part of a negative space design:
When using colours, consider the following:
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.
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.
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.
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 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: