“Whitespace,” or “negative space” is the space between elements in a composition. Most people tend to disregard the negative space because they are fixated on the objects. However, a good designer MUST take ‘whitespace’ in account. Readability, clarity, and cleanliness can be enhanced by properly considering the whitespace. I constantly reference Mark Boulton’s article Whitespace in ‘A List Apart: For People Who Make Websites’ as a resource on this subject.

Modern web design focuses heavily on functionality, especially with the advent of Google and its hyper minimalist design. So today web design embraces white backgrounds and use of open ‘whitespace.’ Print design has stressed for decades the importance of negative space. The proper use of negative space should allow text and images to ‘breath’ and enhance legibility.

Consider these two text examples:

Whitespace on the web involves space between text, images, widgets, navigation, links, buttons, videos, slideshows, and countless other things found on contemporary websites. The proper use of whitespace can transform a cluttered and busy site to one that is clean and readable.

Managing a lot of textual content

Magazines and newspapers manage a lot of textual content. Look inside a recent magazine and notice how much space is between the lines of text. Erik Spiekermann, while working for The Economist newspaper, pioneered this format for magazine text. The idea came to him after a client pointed out that the text was too heavy and the content too difficult to read. So Spiekermann reduced the size of the text and added more space between the lines.

The same method can be applied to text in web design. Mark Boulton’s article on A List Apart provides a great example of using small text with a line height almost double the size. The example shown uses a 0.88 em font size and 1.8 em line height. The result is a large body of text that is easy to read right off the screen.

The Color of White Space

The term ‘whitespace’ is deceiving because it implies that the color of the ‘empty’ space is ‘white.’ Whitespace, in fact, can be used to enhance the color on your site. Consider what actually goes IN the ‘empty’ space. It might be your background with a texture, a solid color, or just plain white. Make sure that whatever texture or color used for this space doesn’t distract the visitor from the content. The most important factors in web design are ease of use (usability), cleanliness, and the organization of content. Color, imagery, fonts, and creative design are secondary (though important).

Conclusion

In design, less is more. The same goes for organizing content on your website. If the content takes over your website, without allowing for whitespace, then it will seem cluttered and busy. A busy site will drive away traffic because it is hard to navigate and intimidating to look at. But what if the content has to be there? There are endless ways of organizing content. Make sure that you leave SPACE around each element.

Works Cited

Brian. “Using White Space Effectively In Web Design | Web Design Tuts.” Web Design Tuts | Web Design Tutorials. N.p., n.d. Web. 31 May 2011. <http://webdesigntuts.com/web-design/using-white-space-effectively-in-web-design/>.

Boulton, Mark. “A List Apart: Articles: Whitespace.” A List Apart. N.p., n.d. Web. 31 May 2011. <http://www.alistapart.com/articles/whitespace/>.