How to Use Whitespace, the Punctuation Between Visual Elements
Applying basic design principles, Part 1: Using the space between items to make clearer design
This is the first in a series of articles that illustrate how basic design principles can improve information display. The next installment will apply some of these same principles to a visualization dashboard.
“How do you use whitespace?”
This is one of the most frequent questions that I get as a designer, especially from people who need to create information-dense displays like a dashboard or interactive display. Whitespace is the blank area between items on the page, and it is very important in helping information feel clear, organized, and accessible.
Whitespace is the punctuation between visual elements. In the same way that a pause between notes is sometimes most important part of a piece of music — allowing the listener to really hear, absorb, and respond to the notes — the space between visual elements can set the tone for how a user feels about an information display. Used well, white space gives readers the opportunity to pause and take a breath. It can help the information feel a lot less overwhelming.
