Negative Space is an Important Design Tool: Here’s Why

Seeing more white space in websites these days?

You’re not alone.

While white and negative spaces have always been a popular design tool (and topic among designers), the technique seems to be making more of a comeback. Clean design schemes are in, more sites are using breakpoints in responsive design frameworks and there is a newfound focus on readability and user experience. All of these things lead designers to the ultimate simple design tool – white space.

White vs. Negative Space

83creative

adhara

ithinkimight

Are you looking for WordPress Theme?

Get Startup Framework for WordPress now!

poppiesflowers

White and negative space are the very same thing (and the terms will be used interchangeably here). The jargon differences come from print publishing versus other types of design. Both terms refer to any unused, or open space in the design.

Print designers – those working with books, newspapers and magazines especially – most commonly use the term “white space” because any unused part of the page is often white, rather than another color. Many other designers just call this negative space.

The term negative space originated with photographers, who refer to positive (the subject of a photo) and negative (the background) in images. Simply, anything that is not drawing attention is considered part of the negative space – this can be part of an image itself (think the sky in the background of a portrait), a patterned background on a website or even just a block of color around text.

Though the terms are interchangeable some web designers especially will confuse white space with negative space that is colored white. So make sure your audience always understands the jargon you are using.

And remember, negative space does not have to be white. It can be a color, a pattern or even a background.

Why Space is Important

hanno

tonic

sabbatical

Space is the thread that holds your design together.

The right amount of space separates objects from each other. It cushions text to make it readable. And spatial relationships define what elements go together, and what elements do not. The right balance of space and elements is what really brings a complete design together and makes it beautiful.

Negative spaces are everywhere, from the halos around objects to the gaps between lines of text. These small spaces are immensely important even though you may not pay that much attention to them. Most designers abide by the “keep blank spaces around content” rule because it makes everything that much more readable.

White space is the one design element that is common among every project, printed piece and website. It is included in the style guide or style sheet for every design outline. When perfected, white space goes almost unnoticed, but when executed poorly it jumps off the screen (or page).

Too little space makes a design feel crammed, busy, cluttered and difficult to read. Even if the effect you are going for is one of chaos, space matters. Think of the space between lines of type, for example, without enough letters can touch and become unreadable.

Too much space does not present as many concerns as too little space but can be equally difficult as a design technique. Exorbitant amounts of white space can make objects feel small or distant and set apart from the rest of the design. At the same time, lots of space can create a great deal of contrast between an object and its setting.

Equal and consistent spacing is one of the best tools you can use to maintain a sense of space and relationships between objects in design projects. As a general rule, spacing should be treated just like every other element and there should be a defined style for it. What is the cushion between objects?

Going to Extremes

surveystates

anony

Designers sometimes use extreme amounts of white space as a way to bring focus to a certain part of the design.

While negative space does not always equate with minimalism, many do make, and design with that connection in mind. Extreme amounts of white space work when the designer uses the technique to create and draw attention to a specific thing. Having a single subject to look at in the middle of a sea of empty space is an effective way to make a user stop, look and read what is on the screen. This technique can work with images or text, as showcased in the examples above.

Be aware though, when overused, the technique can have a negative effect. Using vast amounts of space limits the amount of information you can provide. It is important to balance visuals with information to keep the attention of site users.

Dealing with Breakpoints

ribot

marylandcraftbeer

cognition

aids

disney

One of the newer places where negative space is showing up is in responsive design. More designers are developing negative spaces to deal with the difference between browser size and various breakpoints in the responsive grid and for oversized browser widths.

Often, these are fairly unnoticeable – just a sliver of space on the left and right sides of the screen — but more designers are getting creative with the space and what appears in it. This is a pretty new trend. Six months to a year ago, many designers were just leaving the space white (or black) but more commonly, sites are filling this space with something extra, most commonly a patterned background.

Is this necessary?

Many would argue no. But it all depends on the project. When it is part of the design, this really works. There are some fun, super-creative sites that are using this “breakpoint white space” to their advantage. The added detail can really impress users and when designed well can be representative of the site and overall design. They key Is for this designed space to be unobtrusive and feel like it really is part of the overall design scheme.

That being said, there’s nothing wrong with using something simple to account from breakpoints. Sometimes what we find is that the best white space is actually space that is white.

Conclusion

White space is one of those topics we, as designers, love to talk about. You either love it and can’t get enough, or consider it overrated.

Personally, I love white space. Nothing is better than giving your design room to breathe. Plus the extra space can help set your work out from the rest of the pack.

But you have to be comfortable with it. You don’t have to go to extremes to use negative space well in a design project. If you aren’t using a lot of white space now, challenge yourself to use more, even just for small detail parts of a project (such as the spacing around photos or other UI elements). You’ll thank me later.

Carrie Cousins has more than 10 years experience in the communications industry, including writing for print and online publications, and design and editing. You can connect with her on Twitter @carriecousins and Google+.

Newsletter

11 Comments
  1. Samson Tennela Mar 27, 9:57 pm

    I always love the white/negative space. I was in confusion about white vs. negative space. Now it all got cleared after reading this article. Thank you Carrie Cousins for this article.

    Reply
    +4
  2. Matthew Shields Mar 28, 12:43 am

    See I always though of white space as the ‘room to breathe’ and negative space being more like when you use the space to create an effect (such as in a logo design where the space between/around one or two objects might create the effect of another shape) what would that be termed as?

    Reply
    +4
  3. Andrew Mamo Mar 28, 1:03 am

    Negative space and white space are not interchangeable terms. Negative space is a term used by artists to define shapes created by intersecting or overlapping elements eg if I draw a person standing with their hand on their hip, a shape is created between the arm and the body where the hand joins the hip. This is negative space.

    White space is a term used by designers more in line with what’ is being described in this article ie “breathing space” around page elements. This is not the same as negative space.

    Reply
    +13
    • Carrie Mar 28, 3:10 pm

      You are correct as well. Negative space can refer to much more than what was discussed here, especially in the realms of art.
      This primer was designed to explain the jargon for designers and how to create and use great space in projects so that everyone is on track when talking about and planning design projects.
      Thanks for reading and joining the conversation!

      Reply
      +2
      • Stephane Potvin May 29, 9:37 pm

        Good day,

        I would like to quote a short sample of your post in a newsletter I publish Choirs Ontario: Dynamic). I will of course give you credit and link to your post.

        The text is:
        Carrie Cousins says The right amount of space separates objects from each other. It cushions text to make it readable. And spatial relationships define what elements go together, and what elements do not. The right balance of space and elements is what really brings a complete design together and makes it beautiful. (http://designmodo.com/negative-space/)

        I would like your permission to do so.

        Looking forward to hearing from you soon.

        Best,

        Stephane

        Reply
        0
  4. Sean LeRoy Mar 28, 4:47 am

    Great article! The principle is well founded in non-design oriented arenas such as music.

    Reply
    0
  5. Samson Tennela Mar 28, 9:15 am

    Andrew Mamo’s correct, I guess.

    Reply
    0
  6. Chris Adams Apr 8, 9:23 am

    +1 Andrew Mamo

    There’s very little written either in texts (or the web) that clearly differentiates neg space and white space from each other. Thanks for the factlet on Photographers and neg space Corrie.

    Even Wucius Wong doesn’t make the distinction:
    http://www.amazon.com/Principles-Two-Dimensional-Design-Wucius-Wong/dp/0471289604

    My understanding is white space is used to give items in a layout emphasis, it also allows the eye to “rest” between content.

    Neg space is used in stencils, silhouettes and especially logo design, sculpture and architecture to create another level of meaning.

    Chris.

    Reply
    0
  7. DB Jul 15, 9:08 pm

    Great article, but almost impossible to read around all the ads! Are they the negative space?

    Reply
    +1
  8. Yash Dec 8, 1:00 pm

    Great article….just curious about negative space issue….isn’t negative space is used to signify depth in art….i mean creating distinction….so how is it similar in terms of designing ?….thanks for article

    Reply
    0

Leave a Reply

*
* Minimum length: 20 characters