In design arenas, one can often hear the mantra “less is more.” If we look around us, we experience it every day in design. The best example of the less-is-more philosophy is whitespace, the planned and balanced negative or empty space in a design. In some cases, it is not planned for and the end result is a hole that does not harmonize with the rest of a design. When it is used effectively, the work as a whole feels cohesive and complete.
Whitespace allows the viewer some breathing room when looking at a design that uses it effectively. In a overcrowded design where images and text are pushed up against each other closely, the human perception has a hard time focusing on one element of the page because they are all competing with each other. Spreading them out, organizing links in a way that trims their number down, and adding design elements that guide the eye to the information are all results of using whitespace. The space that contains little to no information becomes just as important as the filled spaces that do.
Whitespace is a concept as old as writing. The shapes used to form letters utilize whitespace, which helps us to comprehend the symbols more quickly and form words faster mentally. The pattern repeats itself for words, phrases, sentences, and even in some cases paragraphs. Considering how whitespace dominates the basic structure of text as a visual language, it does not take a great leap of imagination to see how whitespace would also apply to other visual elements in graphic design.
In the last few years, we have seen an increase in sophisticated Web designs that mimic print design. One of the major elements in sophisticated and elegant design is whitespace, and it is showing up more and more in Web design. The contributing factor to this shift is the advent of larger Web pages that allow more room to design. In the mid-1990s, Web pages were limited by monitor sizes, generally maximum resolutions of 640 by 480 pixels as opposed to today’s 1024 by 768 pixels (which is on its way out, now). The larger canvas has allowed Web designers to create a design that utilizes whitespace much as print design does.
Legacy of Problems
The larger space, though, has brought with it a share of problems. In the early days of the limited size Web pages, Web designers had to place as much information as possible into a design. Much of the field at that time was not being influenced by marketing or usability research, so many of the designs appeared cluttered, claustrophobic, and crammed. Many Web designers were not guiding their Web clients effectively through the brand marketing and user experience filters, resulting in bloated home pages, large numbers of navigational links, and the overuse of simple software techniques such as the drop shadow and the fading circular photo border. Little attention was rarely being given to readability, scanability, and emotional impact of design. Today, those problems have not disappeared entirely. Because some Web designers continue to ignore the principles of design or cannot effectively frame an elegantly designed Web site as part of a more effective strategy for a client, these claustrophobic designs are still being produced.
Branding and Whitespace Usage
With all that I have mentioned before, you may think that using whitespace is the only way to go in any design. This is not true. Mark Boulton touches on one contributing reason in his article “Whitespace” on A List Apart. In certain markets, the brand of a client may not need to be represented as elegant or luxurious, as he refers to whitespace usage. In some cases, the competition requires a cheaper alternative to brand marketing and design style. He uses two ads designed for a face mask to illustrate this example.
Reasons to Use Whitespace
Regardless of its usage, whitespace is a key element in any design. Whitespace is used in design because
- It creates balance and harmony with other design elements, thus leading to a sense that the design is elegant, sophisticated, and luxurious.
- It helps the audience visually navigate a design easier by providing focus to specific objects and separating others.
- “Whitespace” by Mark Boulton, A List Apart
- “Using Whitespace Effectively in Web Design” by Brian ?, Web Design Tuts
- “Why Whitespace Matters” by Paul Boag, Boagworld
- “White Space and Simplicity: An Overview” by Vitaly Friedman, Smashing Magazine
- “The Science of White Space in Design” by Josh ?, Inspired Magazine
- “On White Space in Graphic Design” by Keith Robertson, logoorange
- “Whitespace: The Underutilized Design Element” by Henry Jones, Web Design Ledger