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.
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.
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.
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.
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
Josh 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.
Latest posts by Catalin Zorzini (see all)
- Web design goodies of the week #12 – May 18, 2013
- Create a Playlist of Your Daily Experiences with the Compass.to iPhone App – March 14, 2013
- Inspired Talks: Alvin Diec – November 22, 2012
- HOW TO: Build your Brand Online [Infographic] – November 15, 2012
- How to Tell If Your Blog Is Making an Impression – November 15, 2012
Latest testking BH0-006 questions and testking JN0-522 practice test available for download. Just go through testking 642-611 dumps and pass real exam on first try.
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.
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!
[...] The Science of White Space in Design [...]
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.
[...] we forget about this, but white space is a very important component in design and user experience. Inspired Magazine has a great post about the usage of white space in design, even if it is [...]
…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.
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.
[...] The Science of White Space in Design – Link. [...]
[...] http://www.inspiredm.com/2009/12/27/white-space/ On the science of white space in web design. [...]
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
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.
[...] Graphic designers position color, text, and image, with uncluttered care, in white space. [...]
dsfgsdhft
jingruimyy
[...] “The Science of White Space in Design” by Josh ?, Inspired Magazine [...]
[...] The Science of White Space in Design [...]
The Science of White Space in #Design: http://bit.ly/5AtUVr via @FranFM @IncorrectMystic @arkarthick
[...] The Science Of White Space In Design by Inspired Mag [...]
[...] Josh puts it in his article The Science of White Space in Design, “The true functional beauty of white spaces lies in its rather paradoxical function; it [...]
Great example of whitespace in design is the fedex logo. Look for the arrow moving forward between “e” and “x” – brilliant
[...] Josh puts it in his article The Science of White Space in Design, “The true functional beauty of white spaces lies in its rather paradoxical function; it [...]
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!
[...] “The Science of White Space in Design” by Josh ?, Inspired Magazine [...]