Pin Me

Lessons on Positive & Negative Space on the Page

written by: KennethSleight•edited by: Wendy Finn•updated: 8/1/2011

Negative space (or white space), is the background area of a document. Positive space is any area that the creator of the document intends for the audience to focus on. This is true whether it be in advertising, a corporate memo or the traditional school term paper.

  • slide 1 of 5

    Understanding how to use positive and negative space can be the difference between getting your message across and losing it in the murk of a cluttered page. This concept was first suggested in the works of Dada and Constructivist designs of the 1910’s and has been recently scientifically tested by major studies by the Nielsen Corporation, as well as independent researchers funded by companies including Google and Microsoft: they have all come to the same conclusion. A less cluttered page means that readers will spend less time struggling with content and will comprehend more of the information provided, making them more likely to return to a similar format in the future.

    Findings like these have ushered in a new set of design templates for web-based documents. Print-based publications are still trying to fit as much information on a page as possible and, unfortunately for them, losing readers to the more easily accessible web based information. The use of negative space works in all mediums from traditional text to 3D graphics and sculpture. The human eye focuses on the areas of most interest, those that are not fields of unbroken color. Therefore, a large background of a solid color with a small patch of text in a color that stands out on that background, will garner the most attention. Now that we know this, how can it be applied in everyday situations?

  • slide 2 of 5

    Creating Structure

    The first lesson in using negative space (often referred to as white space), is to give structure to a page. Page structure is one of the most basic elements of writing, although it is often treated as an afterthought. In high school, students are taught how to write five paragraph papers, essays, and book reports etc., all of which are required to have one inch margins on each side and be double spaced so that the teacher can easily read and mark them up. This is the use of whitespace at its most basic, and there are set standard margins for business use for this reason too.

    Looking at advertisements, or even at the Google Homepage, can give you a vast education in the use of negative space. Let’s look at the Google Homepage for a moment.Google Homepage Snip 

    Notice how the search bar is centered in a completely white background field. The company name is prominently displayed above the search bar as well as a two interactive buttons. All other options are relegated to a top bar that is off set in the complimentary black color. The first place your eye goes is to the center of the screen – right where Google wants it. Contrast this with the Yahoo landing page:

    Yahoo Homepage 

    Here we have several boxes that use whitespace in a different way. The search bar is centered at the top of the screen (the first place people look), and then directly below is a graphic that links to a news story. These are the sections that will be seen immediately. Whitespace and text boxes are used to define other areas of interest and group them into categories. This type of visual segregation makes it easier for a person to navigate the site and find exactly what he or she is looking for. But, what if you want a reader to look at a specific part of a publication or read it in a particular order?

  • slide 3 of 5

    Directing a Reader

    Directing a reader’s eye from point to point can be a very powerful way to influence a reader without them realizing it. A reader’s eye will move from left to right, so using a format where the text moves in blocks from left to right can cause a reader to follow. A zigzag pattern can also be made using white space to cause the reader to focus on individual blocks of text without referring back to previous blocks. This is very effective when you want the reader to focus on your new thought as opposed to the previous one – argumentative pieces formatted in this way can often place more weight on the final two or three text blocks and relegate all of the others to merely a supporting role.

    Another use of positive and negative space is to set up two blocks of text directly across from each other as a way to make point-by-point comparisons. This is often seen on product and review sites. It is very effective at directing the reader’s attention to the features that are being compared and relegating any other features to a short list afterwards. The features in the list are often either the same as the comparison product or inferior in some way. The text formatting is designed specifically to accentuate the places in which the featured product is superior to the competitor.

    Directing the reader’s eye is important in several types of everyday documents, none more important than the résumé. Although you may be tempted to cram a document full of information, this strategy often makes a document look very dense and intimidating to a potential reader. On the other hand, a well formatted document with ample white space and easy to follow headings is much more likely to be read. The headers will direct the reader where he or she needs to go and help him or her decide which areas to focus on.

  • slide 4 of 5

    Making a Page Less Intimidating

    In business communications, it isn’t always what you say, but how you say it that is important. This makes it extremely important to know how to make technical and thick language less intimidating through the use of empty space. This means that paragraphs and page breaks need to be thoroughly thought out to help give the voice of your work the correct exposure.

    Although there are several templates for business documents, what happens when you don’t have a template to work from, or how do you use white space in the body of an existing template? The spacing between lines can be adjusted, Microsoft has a setting in Word for a 1.15 spacing that works quite well to enhance readability. (This number wasn’t chosen by accident, Microsoft spent a large amount of time in research and development and this was the optimal spacing for a 10 to 12 point document written in the Times New Roman font).

    A cramped document tries to inform the reader too quickly in too dense a form. There simply isn’t enough time between thoughts for the reader to decipher what the exact meaning is. Leaving a bit of space between lines gives the eyes a chance to focus, slows the reader down and increases comprehension levels (Chaparro, Baker, Shaikh, Hull, & Brady). This can mean creating bulleted lists, using subheadings, and tightening up writing -- each method can lead to more satisfied readers. In business that can be the difference between a sale and a miss or a promotion and five more years at the same pay rate. Effective communication is one of the keys to success, and positive and negative space is one of the most often overlooked elements on that keychain.

  • slide 5 of 5

    References

    Boulton, By Mark. "Articles: Whitespace." A List Apart. Web. 25 July 2011. http://www.alistapart.com/articles/whitespace

    Chaparro, Barbara, J. R. Baker, A. D. Shaikh, Spring Hull, and Laurie Brady. "Reading Online Text: A Comparison of Four White Space Layouts." Web. 25 July 2011. http://psychology.wichita.edu/surl/usabilitynews/62/whitespace.htm

    Lee, Doug H. "Effective Use of Negative Space in Graphic Design." 11 July 2011. Web. 25 July 2011. https://ritdml.rit.edu/bitstream/handle/1850/4625/DLeeThesis06-2007.pdf?sequence=1

    Ruel, Laura, and Nora Paul. "Eyetracking Points the Way to Effective News Article Design." Online Journalism Review | Knight Digital Media Center. Web. 25 July 2011. http://www.ojr.org/ojr/stories/070312ruel/

    "Using White Space (or Negative Space) in Your Designs | Webdesigntuts." In-depth Tutorials and Articles on Web Design | Webdesigntuts. Web. 25 July 2011. http://webdesign.tutsplus.com/articles/design-theory/using-white-space-or-negative-space-in-your-designs/

    All screenshots by Ken Sleight.