The Science of White Space in Design

Categories Articles, Web Design

White space, also referred to as “negative space”, is an important aesthetic tactic utilised in a majority of graphical/design illustrations/publications. In its most generalised definition, white spaces are the strategic visual sections of a page/illustration that are left unmarked and thus uncluttered by any specific aesthetic detail. Characteristically, these ‘blank spaces’ are strategically located, between margins, leading text and sub-sections of a page layout. The true functional beauty of white spaces lies in its rather paradoxical function; it defines and enhances the visual prominence of various accompanying graphical/typographic elements, without containing meaning, context or content in itself. If used intelligently, white spaces aid in the effective transmission of images and text. In the following paragraphs, I summarize the central tenets in the science of white space.

The Game of Brand Identity

In the traditional era of the broadsheet printing press, the real-estate of a page layout was defined by two main elements – Content and Advertising. They were the primary revenue generators and more often than not, generous amounts of space were dedicated towards the latter, to justify the economic ambitions of the publication in question. Over the course of time however, a select group of firms realised the symbolic/semiotic meaning of ‘empty space’ – the logical use of white spaces indicated a publication’s emphasis on the quality of content over its economic concerns. White spaces thus, even in contemporary design, bear a direct symbolic connection with the values of sophistication, calculated elegance and “high” culture. Here are a few well-known corporate brand identities that have made extensive use of white spaces on their respective websites.

gucci

dior

burberry

The Game of Hierarchical Significance

White spaces play an absolute role in determining the hierarchical significance of various sections of content on a particular page. In many ways, white spaces direct how and upon what terms we “read” a particular design artefact. They dictate (and thus direct) the visual flow and coherency of a visual composition. Let’s take a look at an example from the Alain Berteau company website, a design agency based in Belgium. I’ve attached the original version of the website layout (which is really a marvelous example of well-implemented white spaces in web design) and a modified mock-up.

original

mock-up

It is apparent that the mock-up skews all the intend streams of communication between website and reader. There is little breathing room due to the clutter of text and images positioned at the top of the website (note: that are cases where ‘clutter’ can achieve a sense of visual harmony, but there is no space for that here). The reader also faces a “reading dilemma”; there are no visual cues/indicators to suggest the proper and intended sequence of reading; what block text should be decoded first. The reader is thus overwhelmed with several sub-sections, which in turns dissolves any thread of effective communication between the website and reader. White spaces are crucial in establishing for the reader a hierarchical narrative of readable components- it “instructs” the reader what to view first and thus influences the context of content.

The Game of Minimalism

Most of us are (I presume) well acquainted with advertisements of the 1950’s. Bright, bold colours and larger than life illustrations seem to dominate page layouts, replete with the most clichéd slogans you would ever come across.

coca-cola-ads-from-the-1950s1

credits

southwest from the 1950s

credits

Advertisements in the last ten years however have subscribed to a more minimalist philosophy. A look at the Coca-Cola and Southwest Airline adverts today will clearly tell you that white space and minimalism are (at least superficially) natural bedfellows.

coca-cola-new

credits

southwest-new

credits

However it must be stated that white space is an unavoidable part of design and it is implemented to varying extents under the guise of several design philosophies. The challenge for designers is however, making effective and intelligent use of these white spaces such that it accentuates website legibility and usability.

What are your views on white spaces?

Author

joshJosh is an academic researcher, specializing in online media and visual design culture. He is currently doing a PhD on youth engagement with new media. In addition to his academic pursuits, he runs Tripping Words a design blog housing an array of opinions on web design philosophy. You can also follow Josh on Twitter.

Catalin is the founder of Mostash - a social marketing boutique - and he's always happy to share his passion for graphic design & social media.
  • Great article!!! If there’s one thing a lot of people don’t appreciate on websites it’s whitespace. I see far too many websites that are crammed to the edges with content it’s unbearable.

    I know that my site (see name) isn’t the most spacious thing but I like to think that it’s readable because of the use of columns, clear headers, images and dividers.

  • Nice post Josh, so what does your site say about use of #FFFFFF? :P

  • I have to say that I try to include a balance of whitespace in nearly every design I start working on, but more than 50% of my clients have this notion that whitespace is “unused” space – what we end up with is a cluttered, unsophisticated design, IMHO. They tend to complain that the naked spaces in the design need content, and then reiterate with complaints that more content needs to be “above the fold” and we end up with something completely different than what they originally came to me for – My design skills and style.. which is usually closer to the open, web 2.0 style look without the clutter.

    When I try to explain ‘whitespace’ to a client, I assume they think it means actual white areas, so I tell them an uncluttered design is the way to go, but they just don’t get it. And that’s where I fall short – my inability to convey the importance of whitespace in terms that they will understand. Does anyone else have this issue, or is it just me? Any tips?

  • Really really interesting read… Very well written, Thanks for sharing…

    -Deepu

  • Very interesting way to design.

  • Excellent reference material. Thank you for sharing.

  • BPM

    Jane: Its not just you. That story is as old as Graphic Design itself!

    Eventually you get enough clients that you can start to choose the good ones and stop working for the ones that will simply never get it.

    “Above the fold…” Arrgh!

  • White space can be a great asset to your composition, when you ad a dot to your layout then ad another dot a relationship of these elements begins, as you ad more and more dots to the page it can get cluttered, understanding how to use negative space to group dots together makes a more pleasing layout,

    However be careful it can also make you look lazy.

    Thanks and Regards

    Noel for Nopun.com
    a graphic design studio

  • Appreciate the help, thanks for the info.

  • Cheers for the comments and big thanks to Inspired Mag for publishing this.

    @Luke

    Thanks for the response. I’ve looked at your site and it certainly has very intelligent use of white space! White spaces do enhance readability!

    @Anthony
    Haha…maybe I need to write another one on #00000 spaces. ;)

    @Jane
    You have brought up a very pertinent point. I guess there is a natural tendency for non-designers to prefer more “cluttered” pages – they often hold on to the mentality that every space needs to serve a textual or visual “purpose”. The best way I think in explaining the importance of whitespace is to provide a very basic mock-up of 2 versions, one with whitespace and the other without.

    Having said that, there are designs which employ whitespaces sparingly but still come across as visually neat and attractive. I guess it boils down to primary objectives behind a website design- what it hopes to achieve.

    Thanks for all the responses!

  • Okay, whoa. That Southwest ad there is NOT from the 50s, it’s a dig on Michael Jackson that can’t be more than ten years old.

    As long as everyone knows that, I’m cool.

  • …Like matting or framing a picture. sure we hang posters up like that but not ‘art.’ So it’s in the point/message you are trying to get across. Most would say that adding white space adds class since you can ‘afford’ it in a design.

  • A typography nut

    Sir, do you know that that Southwest poster isn’t anywhere near the 50s? Helvetica didn’t take off until the 60s, and Southwest didn’t take off until the 70s. And is that Tekton on the top part?

    If you drop a line saying that it’s typical of a bygone era, that’s one thing. But to put it next to a real Coke ad make it seem like it’s legit? Not cool, man, not cool.

  • I believe that white space is very important in any design. The reason is because the white space always calls for people’s attention to the content that is within it. This white space separates the unimportant objects to the focal point of the design. By the way, when a designer tries to fill up all the negative space, the design becomes too strong visually and it tends to push people away. Just like we don’t like to look at a page that is all text, most people also don’t like looking at designs where there are too many focal points and we can’t tell what to look at.

    I try my best to have a visual balance with just the right amount of white space in my designs.

    An example of ample white space can be seen in my personal portfolio. http://www.jadgraphics.net/

    Great article Josh. It’s a good thought and every designer needs to learn how to implement white space in his/her design.

  • @Brendan and @A typography nut

    Thanks so much for pointing that out. While some the ads may not be actual corporate productions nor reflect the actual time period (1950’s), the philosophical message I am trying to impart still stands; that designs of the past were less focused on white space.

    Thanks again for clarifying that.

    @Mark Sequeira
    Good point. The argument I made was that, traditionally, artistic projects with clear white spaces reflected a degree of sophistication.

    @Design Informer
    Thanks for the comment. Your portfolio is an excellent example! I guess if a website or design is visually overwhelming, then it is bound to negate interest. I must admit that I am still learning how and when to employ white space effectively. I guess it an “art” in itself that would be mastered over time. Thanks for the insightful response!

  • I think you should make a distinction between considered whitespace and abundant whitespace. A large amount of whitespace often connotes luxury. The second Southwest ad, is, in it’s own way, quite luxurious compared to say, a coupon flyer from your local grocery store. The Southwest ad only needs to reinforce the brand messaging for the airline. It’s ROI is not quite as direct as the grocery store mailer. But even though the direct mail piece is by no means a luxury item, it can certainly benefit from a considered use of whitespace.

  • you may want to add the following:

    BAYO Ladies Clothing
    http://www.bayo.com.ph

    Yellow Cab Pizza
    http://www.yellowcabpizza.com

    Erika Tapalla
    http://www.erika-tapalla.com

    Home & Lifestyle Furniture
    http://www.homelifestylefurniture.com

    ‘just lovin’ white! ;)

  • I used to think that clients didn’t understand white space until they saw it in action. But this funny video suggests otherwise:

    http://www.youtube.com/watch?v=qgcX0y1Nzhs

    It’s the “Make My Logo Bigger Cream” video.. definitely watch it if you deal with difficult clients.

    Do you think more contemporary clients will go for minimalist designs with more white space, while more traditional clients are stuck in the “Make My Logo Bigger Cream” era? I have definitely experienced this.

  • The judicious use of whitespace helps in highlighting the content. It sort of removes the clutter around it and puts it on centerstage. Know what, managing whitespace well is trickier than populating a page with lots of content.

  • Great write up with examples about the use of white space in design, particularly web design and print! Linked to here from my blog.

  • I’ve always been an advocate for minimalist designs. Something about negative space just attracts me. It creates emphasis, focus and hierarchy among many other things.

    Great article Josh. Could sense this was coming from you.

  • this is very impressive

  • tritisan

    I never understood “negative space” until an art teacher had me copy a drawing, upside-down. (The drawing, not me.) This technique’s from Betty Edward’s classic Drawing on the Right Side of the Brain, of course.

    Maybe this would be a good exercise to give the “make the logo bigger” clients? Unfortunately, most people are never taught how to “see” like an artist, so they literally cannot mentally distinguish between complete crap and great art/design.

  • White space epitomizes the “more with less” philosophy. Really nice post.

  • Great example of whitespace in design is the fedex logo. Look for the arrow moving forward between “e” and “x” – brilliant.

  • negative space and white space are not identical concepts as far as I know, although in practice they both refer to the blank areas.

  • STYLEFASHION.COM.PH an online store of fashion clothing in the Philippines. Need to shop quality affordable cheap ladies’ blouse or dress?

  • White space epitomizes the “more with less” philosophy.

  • dsfgsdhft

  • jingruimyy

  • Great example of whitespace in design is the fedex logo. Look for the arrow moving forward between “e” and “x” – brilliant

  • Why our snapback hats for sale are popular all over the world? All of them are new designs! And the absolutely cheap price!Welcome to buy our wholesale snapbacks online, and it is cheap snapbacks store!

  • David Beuten

    Thanks for this. I’m currently studying design and the lecturer didnt go into too much detail about White Space so this helps a lot. Two other resources that have helped me are http://www.netmagazine.com/features/importance-whitespace-web-design and a short 5 minute tutorial video http://www.webpayload.com/ue/use-white-space-to-its-full-potential-and-empower-your-designs-and-user-exp

    Thanks again.