The Importance of White Space: Take a Breath Already!

taba

One very important concept in any area of design, including interface design, is that of space. What is space?

Well, obviously we aren’t talking about needing any kind of extended astronomical knowledge; space is the area with which we choose to do things. Today we will talk about this area in many different ways.

White space

White space is the area within a design where there is no imagery or text; it is instead a solid color (more often than not it is actually white). White space is an essential part of any design. Our eyes naturally desire balance; but balance doesn’t mean a fifty-fifty draw of color space “A” versus color space “B”. Rather, it is a psychological interpretation of a physical visualization. (Don’t worry… it’s not as confusing as it sounds.) The use of white space allows for a place for your eyes to move in order to escape the text; this makes the text itself a much more effective means of communicating.

Huh?

Okay, so if you don’t understand, white space is essentially the “breathing room” in your design. If it looks crowded, well… it probably is. The way our minds perceive things is different from the way we might calculate them. Reason might tell us that as long as the letter isn’t misconstrued by another color object, too small, or too large, then it is readable. But as we have learned in the past, design itself is not a science; rather, it is an art that observes science and rationality within the process of execution.

What does this mean for me?

Essentially, it means think about your design and the amount of resting space you have. Since we are talking about interfaces, obviously you should go through the process of using the interface multiple times; if anything stands in your way of using the interface, it’s probably time to shift some things around. Don’t be afraid to space out your body copy and headers. Use this breathing room to section different portions off from other portions (for instance, navigation from content, and content from sidebar, or whatever is applicable).

On the other side of the coin, if the white space you are incorporating detracts from usability, it is probably time to reconsider; for instance, body copy line spacing shouldn’t be so large that you aren’t able to differentiate between a new paragraph and a new line. Use white space, as we have already said, to your advantage, not for your to-do checklist.

Rule of Thirds

One easy way to ensure a good use of white space is by employing the design principles of composition; allow your design to follow the rule of thirds or the golden ratio, both of which are very common and effective design practices that apply a little bit of science to the art. The rule of thirds splits the composition into nine equal parts (separated by two horizontal and two vertical lines). The golden ratio is based on many historically congruent sources, including the human body; it has been used for the design of sculpture and the progression of many types of art.

Read the White Space

Of course we have talked about visual white space; but what about textual white space? When people read, they look for resting points in the dialogue. This, in a way, can be considered white space. Be sure to allow your creative vocabulary its time to shimmer AND its time to stay sheathed. Not everyone necessarily appreciates your large vocabulary, much less do they care to take the time to read your seventeen-syllable words and overly-complex sentences. Take a breath! Haven’t we already said this?

If all else fails…

Sometimes in design, we realize that every tip we heard about “best practices” doesn’t apply to a particular job. As much as it pains me to say it, there are times when white space just simply doesn’t have its place in the design (newspapers are a perfect example for those of you print and page layout designers). Consider the psychological implications of the design, always. Understanding your audience is the first step to success, and ultimately is the most important concept in interface design.

 

If you liked this article, please help spread the news on the following sites:

  • Bump It
  • Blend It
  • Bookmark on Delicious
  • Stumble It
  • Float This
  • Reddit This
  • Share on FriendFeed
  • Clip to Evernote