Negative Space in Webpage Layouts: A Guide

May 18 2010 by Joshua Johnson | 83 Comments

screenshot

Negative space is often misunderstood as a tool to implement in certain designs that call for a simple aesthetic.

However, it is in fact something you should pay attention to and carefully structure in every design you create.

This guide discusses what negative space is and how to effectively use it to analyze and improve your designs.

What is Negative Space?

Negative space, also known as whitespace, can be loosely defined as the area of a page not occupied by content. More appropriately, it is the space between specific items on the page.

Negative space does not have to be white, or even solid in color. It can contain gradients, patterns or background objects.

In the example below, you’ll see that it contains complex graphical content, yet it still employs negative space between the headline and the search bar.

screenshot

Negative Space is Not Minimalism

Contrary to popular misconceptions, proper use of negative space has nothing to do with minimalism.

It is true that minimalist designs are characterized by lots of negative space, but even the busiest of designs implement negative space either effectively or ineffectively.

Why Does Negative Space in Web Layouts Matter?

There are no absolute rules that separate good designs from bad ones. However, there are plenty of rough guidelines and general principles to follow in the quest for a strong layout.

Designing a webpage layout involves taking diverse objects and arranging them in an attractive, logical, and functional manner.

The key concept to remember is that designing a webpage layout goes well beyond the attractiveness of the design elements you use. You can feature beautiful artwork made by the most talented artists in the world and still have an poorly-designed and unattractive web design.

Just as important as the aesthetic of the elements is the physical space being occupied by each element in relation to other items on the page.

If you’ve never properly studied design theory, then you probably intuitively position objects without really knowing why you’re doing what you’re doing.

However, as with many skills, if you want to improve, you should work on turning your intuitive ability into explicit knowledge. This will help you power through design ruts and identify what is and isn’t working in a particular layout. It will help you rationalize why things are they way they are.

You must learn to logically analyze both complex and simple arrangements of items, and identifying and using negative space is the key to this discipline.

Learning to See Negative Space

To use negative space effectively, you have to retrain your brain to look not only at the content on a webpage, but also the inverse of the content.

The old cliche example is the wine goblet/faces illustration below.

You can trick your brain into making two distinctly different interpretations of the image. You will either see a wine glass or the faces of two people looking at each other.

screenshot

Negative Space in Logo Designs

Many logo designers have mastered the use of negative space and have utilized the concept for decades to create some excellent visual double entendres.

Perhaps the most famous of these is the FedEx logo with its hidden arrow between the “e” and “x”.

screenshot

One of my favorite examples of this kind of logo design is the superb logo below that features a mix of both positive and negative shapes to create a golfer and the head of a Spartan.

screenshot

The examples above are merely meant to get your brain ready to begin thinking about negative space instead of focusing on the content.

In webpage layouts, the negative space is rarely used so cleverly and pertains more to the simple spacing between objects.

Simplifying a Design to Basic Shapes to See Negative Space

The easiest way to master the art of seeing and using negative space in webpage layouts is to simplify your layouts to basic shapes and examine the spatial relationships of the objects.

For example, let’s take the design below and apply this method to it.

screenshot

To eliminate all unnecessary distractions, we’ll convert it to black and white and reduce all of the objects to simple rectangles.

screenshot

Now we can quickly and easily make clear mental distinctions between content and negative space.

Remember to focus on the shapes that the white areas are making in addition to the black areas. A strong layout is subtle and it’s all in the gaps.

As you can see, this design actually uses very little negative space. Never let anyone tell you that this is a bad thing. Good layouts are not defined by the amount of negative space, but by the distribution of it.

For example, notice how the complex design above has a carefully structured volume of negative space between objects. Unique objects have been given similar spacing, while groups of objects have been placed closer together. This is the concept of proximity.

Simply put, if two items on the page belong together conceptually, place them closer to each other than to other objects.

Visually speaking, if the objects on the page are equally spaced, it’s the items that break this trend that will stand out.

screenshot

Again, this may seem a bit obvious, but the key here is to really start paying attention to these concepts in your own designs.

Analyzing and Improving Negative Space

Now that we’ve outlined a method for simplifying a design, let’s apply this technique to see if we can improve a layout.

I was recently asked to critique a design that would be a perfect example. When I told the designer that I liked his design in general, but thought that his use of whitespace needed work, he was quite confused as to what I meant.

To illustrate, I’ve recreated the basic layout below.

screenshot

This is a perfect example of why filling your designs with lots of whitespace isn’t always a good idea. The layout above utilizes tons of whitespace — so much so that the designer didn’t know what to do with it all.

Let’s break this down using simple shapes like we did with the previous design.

screenshot

As you can see, this makes it really easy to spot troublesome areas. Nearly everything on the page is distributed oddly. There are large, unequal gaps that distract your attention rather than refocus it. Additionally, many elements are crammed too far to one side of an area, creating an asymmetric design.

The designer was no doubt attempting to replicate a layout that he’d seen before, but failed to apply any sort of logic to the spacing of the elements.

What’s Wrong with It?

Let’s take a look at some of the problems with the negative space in this design.

screenshot

The diagram above points out just a few of the problems with this layout. As you can see, the objects in the header are misaligned.

Also, the negative space between the top of the page and the bottom of the header is too large for the sparse elements that it contains.

Furthermore, the screenshot (on the right of the layout) seems oddly small in its space.

There are strong arguments for surrounding an object with whitespace to better draw your attention to it, but this technique just isn’t working in this case as the page is too complex for this to work effectively.

Finally, the headline and sub copy aren’t aligned with the logo at the top left and could use some size adjustments to make better use of the space they’re in.

Fixing the Problems

Keeping your design in a basic wireframe, adjust the size and positioning of the elements to address the issue outlined above.

Try to pay close attention to gaps all across the page that should be similar in volume, and break this trend when you’re using proximity to visually connect distinct elements.

Here we see a much more logical distribution of negative space. The header area has been reduced and the elements within centered vertically in the space.

screenshot

The screenshot and headline have been enlarged to eliminate awkward gaps and give the page clear areas of focus.

The area under the sub-copy was looking a little empty, so an element has been added here to help eat up the space (notice in the screenshot below that this creates functional benefits with the addition of a button).

Here’s what the example looks like when we apply our changes to the actual layout.

screenshot

More is Not Necessarily Better Than Less

Notice that the negative space on the page has actually been decreased overall.

Don’t misinterpret this as an argument that less negative space is always a good thing, there are many cases where the opposite is true.

Effective use of negative space is not a matter of quantity (e.g. "more is better than less"), it’s a matter of proper utilization.

Many discussions of negative space often wrongfully focus only on situations that call for an increase in negative space and tend to pitch minimal layouts as a miracle cure-all for bad design.

In reality, improving your layouts means analyzing the current amount and appropriateness of the empty space in your design, and then deciding which areas have too much and which areas have too little.

Negative Space in the Wild

To conclude our discussion of negative space in webpage layouts, let’s take a look at a few sites that use negative space in completely different ways to accomplish a particular aesthetic.

Wide, Open Spaces

Designs that properly use lots of solid negative space typically appear classy and upscale. Simple, uncluttered layouts make the content easy to sort through visually and are ideal for highlighting a specific area of the page such as a product shot or JavaScript slider.

screenshot

screenshot

screenshot

100% Organic

Not all whitespace is strictly structured to conform to the guidelines above. Organic designs specifically break these rules to provide a sense of natural randomness to the design. Remember to look at the gaps and not the content. The designs below are characterized by irregular spacing and sizing of the objects on the page.

This method tends to come across as informal or even fun and is particularly well suited for sites with lots of illustrations.

screenshot

screenshot

Busy Space as Negative Space

Some designers fill every nook and cranny of space with swirls, text, complex artwork and other random elements. If you look closely, you can see that the page still contains an underlying structure with primary content and plenty of negative space.

The difference is that the negative space has been disguised with intricate details to add visual interest to the page.

screenshot

screenshot

screenshot

Negative Space in Grid Layouts

The last type of layout we’ll look at uses strict whitespace distribution. Grid-based layouts eliminate most variations in the sizes of gaps between elements.

This is ideal for organizing lots of content in a fairly small space in a regular and systematic manner.

screenshot

screenshot

screenshot

screenshot

Closing Thoughts on Negative Space

To sum up, negative space isn’t something to pull out of your bag of tricks. It’s a major feature of every design that largely determines how a page is read and what type of impact it has on the viewer.

Learning to see and use negative space is the key to creating strong, consistent layouts with clear visual hierarchies.

Related Content

About the Author

Joshua Johnson is a Graphic Designer/Web Designer with over six years of experience working with a major international marketing agency. He is also the Editor of Design Shack, a web design and development blog. Check out his recent work and follow him on Twitter: @secondfret.

83 Comments

Heather Villa

May 18th, 2010

What a great article! It is so true. A lot of people out there really try to cram so much stuff onto a page that it just ends up taking away from the point of the page – to highlight a specific product, image, label, and so on.
Your reference images and sites are perfect pieces to convey your message!

jeprie

May 18th, 2010

Very nice article. Thank you for using that sample in black and white, that really help me understanding your words.

Young

May 18th, 2010

great post! not to sound biased, but us asians have always been more conscious about the blank, white, or negative space in our art – to the point where it’s almost more important than the filled-in areas. must be a daoist thing, or maybe it’s cuz we didn’t have as versatile color paint…

but what a tasteful way to think about the user subconscious in terms of alignment and distribution! thanks for the fun read.

Scott Corgan

May 18th, 2010

Negative = positive. Doesn’t have to make sense, just has to look beautiful!

Taylor

May 18th, 2010

Great Post Joshua!! This is something that is not talked about much on the design websites…Most clients want to put as much branding and copy onto their sites thinking how every inch is valuable real estate.
But in actuality if you control the placement of key elements via negative space it will draw the viewers curiosity and have them dig deeper into the core of the site…which is what we all want. Exploration through the use of negative space…

saad irfan

May 18th, 2010

very nicely briefed, thx… :)

Bruno Henrique

May 18th, 2010

THIS is a interesting read.

Jacob Gube

May 18th, 2010

@Young: That’s especially true for Japanese art and design. I wish I could remember what I was watching, but there was a segment about Ikebana (Japanese art of flower arrangement) and the artist says something along the lines of “The space in between the flowers is as important as the flowers you choose.”

esranull

May 18th, 2010

very very nice article thanks a lot

Keri

May 18th, 2010

Thank you so much for this article! I learned a lot =)

Tom Castle

May 18th, 2010

Very interesting article, and well written. The black and white simplifications really make the point clear.

Cesar

May 18th, 2010

Very nice, very nice article!

mtrang

May 18th, 2010

thanks for explaining what was wrong opposed to just saying it was wrong.

zoe4ever

May 18th, 2010

great articles.

thank you very much.

Alex Yamaguti

May 18th, 2010

Very interesting article.

klp

May 18th, 2010

this is great, thaks! I really have problem with whitespace in my works.

Erik

May 18th, 2010

Yeah, excellent article. I wonder if all designers are agitated by clutter. The Swiss insist on at least a third of the overall being negative.

Keith

May 18th, 2010

Fantastic Article! Extremely thought provoking, especially for those with no formal design training. Can’t wait to apply.

Wicked Sunny

May 18th, 2010

This is awesome stuff, will help me to learn web designing in the right manner.

Eko Setiawan

May 18th, 2010

very useful for us, to improve our skills when creating a theme.
Thanks…

mrfidalgo

May 18th, 2010

Great article!

Rakesh Menon

May 18th, 2010

This is one important area most designers don’t pay much attention to. Great Article, well-illustrated.

Oscar Dias

May 19th, 2010

Great article! I think this is something intuitive, so we don’t think about it as we should. But when we rationalize it, like you did, the problems appear. Thanks!

Sahan

May 19th, 2010

Great article !

@Scott Corgan,

Yea,,, kinda true… :)

tareq samman

May 19th, 2010

Speechless! One of the best articles, very inspirational. Keep it up.

Dashaft

May 19th, 2010

Really interesting article! but i think many times it’s not fault from designers, it’s fault from clients, who many times want things absolutely terrible

Oles

May 19th, 2010

nice article, thanks

Geoffrey Gordon

May 19th, 2010

Great Article, I have been looking for an article about negative space for a while. Great examples and explanation.

Luis Clark

May 19th, 2010

Nice article ,.Thanks for posting !

Jordan Walker

May 19th, 2010

Nice article, it made me think of Helvetica and how great it looks in the negative.

silay

May 19th, 2010

great article. I wısh the clıents also had a concept of grid
while asking for pulling objects from left to right

astho - web designer

May 19th, 2010

it is clear now..
great article, thanks..

Chad

May 19th, 2010

Nice examples. I tried hard to make sure my site used appropriate white space (can’t say I totally succeeded, but I did my best!!).

Scott Corgan

May 19th, 2010

You know what happens when you don’t respect negative space? You become yahoo, and fail…

Seba

May 19th, 2010

Great article. Grids are a very good starting point to use negative spaces in a good way.

superpao

May 19th, 2010

nice article! love the breakdown in black & white, and the examples.

“Designing a webpage layout involves taking diverse objects and arranging them in an attractive, logical, and functional manner.”

so true!!

Brad

May 19th, 2010

This is a great article. Except my boss doesn’t understand negative space so when I finish a design and save the .psd to the server he goes in and pushes elements close together at random (usually no more than 10px apart) saves and sends to the client.

Sarah K

May 19th, 2010

Excellent article. Well written and has some great points.

Although I was already aware that spacing between objects in a layout have a fair amount of meaning when it comes to how well a design presents it’s contents, I hadn’t quite thought of it in this way. I’ll be applying some of the tips mentioned in my future (and current) designs. :)

Hans Kuijpers

May 19th, 2010

Very interesting article to read.
Will going to project it towards our own website
Thank you.

Adish

May 20th, 2010

great article! It is so true.

Ralf

May 20th, 2010

Great article, good insights.
The best day this year (www-wise) was the day I decided to follow you on Twitter. I really like reading your articles. Keep it up.

Jacob Gube

May 20th, 2010

@Brad: Um, why? Does your boss alter your design without consulting with the original designer (you)?

TheNutz

May 20th, 2010

One of the best articles I ever read about webdesign. Congrats

webton webdesign

May 20th, 2010

Nice examples. I tried hard to make sure my site used appropriate white space (can’t say I totally succeeded, but I did my best!!).

Brad

May 20th, 2010

@Jacob Gube: Yes he does. I honestly don’t know why. I was hired out of school a few months ago but he never listens to anything I say and modifies all of my projects after I am done.

He will do anything from pushing headlines right to body text to adding full-white 1px separators between everything (no matter the color scheme) to recoloring the whole design. I usually never find out until after the client comes back wanting changes to all of that and I have to re-edit the file.

Needless to say…I am looking for another job. lol

Jacob Gube

May 20th, 2010

@Brad: Have you talked to him about it? Design is purposeful. You laid it out that way for a reason.

In a nice way, you should ask your boss why he chose to alter your designs.

If you approach it in a positive way, two things can happen: (1) You’ll find out his reasoning. If he can’t defend his design choices, then he’ll be more likely to trust you in the future, (2) you might find out something about your own design techniques that could be improved on. He’s the boss for a reason (I hope), and maybe you can both reconcile your differences in terms of design style.

Here are things that your boss and/or clients should know:

1) You design things with purpose. You use space, design elements, certain fonts for a reason. These micro-decisions come from your education and experience. That’s why you were hired in the first place.

2) Your designs represent you and your style. If someone alters it, any negative (or positive) things that result from those changes is attributed to you, not your boss. Ownership, accountability, and reputation are things affected by changes being done without your knowledge.

3) If things need to be changed: you need to be the one doing them. That way you’re aware there’s an issue and that you’re notified about changes.

The main thing I see that needs to be happening in your situation is more communication between you and your boss. If you haven’t brought it up with him, then he could be under the impression that you’re cool with it. If any junior designer or developer comes up to me with an issue, I shut up and listen while they talk. A good boss is willing to learn and be open about things like this. And likewise, when I see things that are wrong, I won’t be doing the changes for them – they need to do it in order for them to see what’s wrong and learn through mistakes. It might take longer for them to re-do their work and me explaining/debating why they need to re-do it, but in the long run, they become more valuable because they will have learned something new (or I would’ve learned something new) that they can apply to future tasks.

My $0.02 on this subject.

Brad

May 20th, 2010

Wow, thanks so much for the advice! I really do appreciate and agree with you 100%. Unfortunately, I have talked to him about it and he told me I was wrong about negative space and that things need to have less space so that it “flows better”. I have spent the last 5 months just trying to solve this and gotten nowhere. I am at the point where I just accept it and save a final copy for portfolio and let him change another.

Additionally, he isn’t a designer. Just a guy who started a marketing/design agency because it looked like good money. (the things you don’t find out until you sign the contract!) this is an example I just threw together of the changes and extremity of what he does http://drp.ly/12sZbA with no exaggeration.

I just need to find a place that I feel like I am a designer and not just a cursor in Photoshop. I need to find a boss, not unlike yourself, who respects my knowledge and help/encourages my to grow as a designer…not just looking for the next buck with me as just a tool.

So many articles out about how to cope freelance…so few for us stuck in a job with a situation like this. So again, thank you so much for the advice. I may not be able to use it now but I will when I am somewhere better.

Jacob Gube

May 20th, 2010

@Brad: It’s a little tight. And it’s not just the spacing that went wrong, it’s the other elements as well. For example, the drop shadow on those jagged edges in the “after” pic – ouch! His lorem ipsum text needs a bit more line-height too. The inset line below the “Hello, welcome…” heading was nice too, should’ve kept that.

I want you to know you’re not doing anything wrong – your design was amazing until it was altered.

If I were to provide one critique though (sorry, I have to mention this), the contrast of your lorem ipsum text and the background needs to be higher – it’s going to be hard to read for people who have low-vision. Aesthetic-wise, it looks great as-is, but functionally, just for our low-vision users, a bit more contrast would help them out. Unsolicited advice, I know – but people reading my comment might think I didn’t see that.

“So many articles out about how to cope freelance… so few for us stuck in a job with a situation like this” >> I’ll try to do something about that.

Brad

May 20th, 2010

@Jacob: Thank you for the encouragement. It is hard to feel like I am good when everyday my work is ransacked.

Thanks for catching that contrast issue, I totally agree. I get 1-2 hours on average to design sites so I don’t have the time sometimes to come back to the project after a day or even a few hours and catch that stuff.

“‘So many articles out about how to cope freelance… so few for us stuck in a job with a situation like this’ >> I’ll try to do something about that.” That would be great!

Magento

May 20th, 2010

Thank you for this article. I was just having a discussion with a colleague of mine about this same subject. I can see why negative space is so essential. I guess ironically in the end that same negative is really positive space. Thank you for this article.

David

May 22nd, 2010

Great article! This was a very helpful read. I especially liked the break downs of the design. Removing all the content, and using black/white boxes really does help to see the use of negative space. Thanks!

Joshua Johnson

May 22nd, 2010

Thanks for all the positive feedback guys! I’m not sure I’ve ever had such a good positive to negative comment ratio before :) You Six Revisions readers rock!

paul

May 23rd, 2010

well done Joshua, I like the case study. Always a very effective way to make a point.

Langston Richardson

May 23rd, 2010

Love it. I use it in my site.

Bryce

May 23rd, 2010

Absolutely amazing article!

Thank you so much for publishing this. I was just the other day in a discussion with a client in regards to this and now I’ve some new material I can present him.

Also a new follower on Twitter as well!

Andy

May 25th, 2010

Nothing to add. Expect “Thank you” and *thumbs up*

17dnorth

May 25th, 2010

Amazing stuff! great gyan!

Andy L.

May 25th, 2010

Great article! I’ve been trying to say the same thing to some of the people I’ve been working with. You explained it better, so I’m just gonna make them read this. Thanks!

Ethan

May 27th, 2010

Thanks for this, very interesting and informative.

kilinkis

May 28th, 2010

nice, helpful and interesting read.

Avangelist

May 29th, 2010

Negative space as it is being described here is vital for legible pages.

In application development it is crucial, in websites even more so, particularly when there is a lot of content on display of differing data types.

Adam Hermsdorfer

May 31st, 2010

Josh, really appreciate this article. I think we all agree that usable websites make the most out of their negative/whitespace and follow the principles that you described.

Xcellence IT

June 4th, 2010

hey, this is great article… We find a great tips to use negative or whitespace to make designs performs better.

Jeff

June 17th, 2010

And just when I thought I was learning something on my own. Just wanted to say thanks for explaining alot about my own mistakes. I have taught myself photoshop over the course of the last year by reading and following tutorials. Since proper schooling is out of question do to raising a family and working long hours in current field. So I guess my next question would be. Do you have tutorials on web designs that follow this very same principle or know of some good sites that I may visit to help further my learning.
Thanks ahead of time…..

Joe

June 28th, 2010

It’s always nice to have things explained well like this. Thanks for the great article.

Thiago Menezes

July 7th, 2010

I never had a exact notion of white/negative space, well, that ended now. Thanks for the heads up!

Anto

August 17th, 2010

Stunning article, excellent guidelines on how to analyse negative spaces during design conception… Thanks !

Craig

September 10th, 2010

Great article, enjoyed the additional examples, really helped to show the relevance of negative space in design.

Otto

October 18th, 2010

Great article, I really like it!
Nothing to add .. except “Thanks a lot”!

Marc LeVine

January 11th, 2011

Rare case where the presentation of the information is as good as the advice, itself. Great job helping us visualize what you were sharing. As for the message: it reminds me of what my old high school art teacher used to tell us – “Don’t overwork the canvas.” Thank you.

Auke Veenstra

January 30th, 2011

Great read on how to use negative spaces in webdesign, so fundamental and true!

Igor

February 14th, 2011

Great article and nice examples. Inspiring. Thank you very much for sharing.

Jamland

March 1st, 2011

Very helpful article. Thanks!)

Joe Malleck

March 23rd, 2011

Very nice article. Good insights on space and balance. Something we all could pay more attention to!

Adam

April 7th, 2011

Great article, very insightful and helpful.

Vesa

April 13th, 2011

Thanks a LOT! This really opened my eyes and I will here on definitely focus more on the spacing between elements. *Clicks follow on twitter*

Harry

June 11th, 2011

If Negative Space is basically just whitespace or space, why not just call it “space”?!

Mahijeet Singh

September 27th, 2011

Thanks for this case study Joshua. Very helpful. I always wonder for how negative space and white space are differ from each other. But you have elaborated it so beautifully.


Mahijeet Singh

Anatol

October 18th, 2011

This thought me something, thank you! :)

nchwebdesign

November 7th, 2011

Great article, you see this allot and it’s nice someone wrote about it :)

enquetes maken

September 2nd, 2012

Very good article, the negative spaces in these logo’s are very clever made.

In Your Face Media

December 2nd, 2013

Good article, in most designs I think there’s too much margin and padding involved. A lot of good content vanishes underneath the fold. Webdesigners should keep an eye on that!

Leave a Comment

Subscribe to the comments on this article.