When you look through a telescope at the night sky, you can see the planets, the stars, and the empty space that serves as their canvas.

Space looks like dark, complete nothingness, but without it serving as the frame for the rest of the picture, could you make sense of the more visually interesting planets and stars?

In design, white space (or negative space) isn’t just an absence of something. It’s an active composition element that directs our attention to what is most important on the page. The Merriam-Webster Dictionary defines white space as “the areas of a page without print or pictures.” It’s an important design tool that can be used strategically to foster focus, readability, and attention.

On a webpage completely cluttered with text and visuals, it’s really easy to get overwhelmed. Similarly, if the night sky were full of overlapping planets and stars, the lack of visual differentiation would make it hard to appreciate. In our previous post about how people scan websites vs. reading them, we pointed to the fact that using strong headlines, objective writing, and clear, scannable interfaces allows for a 124% increase in content capture. If these elements are balanced against a strategic use of white space, the formula is even stronger.

The famous typographer Jan Tschichold once argued that white space “is to be regarded as an active element, not a passive background.” The quote reveals a crucial point about white space: it is not just an absence of content. As with professional photography or film, all of what is captured in the frame – and in the case of professional web design, what is captured on the page – must be intentional. If understood as an “active element,” white space can be employed strategically to accentuate certain sections in the layout of a web page, leading users to interact with the content in an intended way.

Benefit #1: Creating content that is easier to read and scan

We also know, based on the argument forwarded in the same blog post listed above, that having space between blocks of content enables the brain to scan. If you fail to intentionally provide space that promotes the ability to scan, thus forcing people to read every element to access the key information you intend for them to see, their brain says “no,” leading to a higher bounce rate, a lack of conversions, and a missed opportunity to articulate the value of your brand to the user.

In The Smashing Book #2, the authors speak to another specific benefit of utilizing white space; that is, increasing the legibility of copy. They state:

“Empty space makes it possible for the body copy to breathe and helps the reader absorb the information being conveyed [. . . ] In practice, many legibility issues and usability problems can be resolved or at least mitigated by a judicious, balanced use of white space. Just a couple of extra pixels of gutter, padding, margin, measure or leading can have a huge impact on the overall legibility of content” (76-77).

If the information is judged worthy to be transcribed into copy, and if the copy is valuable enough to be included on the web page, then presenting it in the best layout and format possible is vital. White space can satisfy this, both by requiring the designer to narrow the content down to what is absolutely essential and think deeply about how to arrange the written word in relation to the other content on the page.

Benefit #2: Easing comprehension of your message

The concept of balancing white space and page content is further explored by the authors of The Smashing Book #2. They argue that “Without a good balance between the content and empty space surrounding it, text is more difficult to read and scan, leaving readers frustrated and unsure of your message [ . . . ] From the user’s perspective, white space provides the cues and anchors that contribute to an intuitive, pleasurable reading experience” (78).

Frustration and uncertainty should not be in the vocabulary of a UI / UX Designer, except as aspects of an experience to be avoided at all cost.

At Fresh, we’re all about being user friendly. We believe, in line with what the referenced authors in this post argue, that white space is absolutely not wasted space; in fact, it can be used as a highly-effective and interactive tool for directing a positive and meaningful user experience.

Your message is valuable and essential. In order for users to understand its value and necessity, they need to be able to easily comprehend it. White space, being the active design element that it is, is the perfect tool to articulate your message in a user-friendly fashion.

Benefit #3: Directing User Experience

It’s easy to fall into the trap of wanting to fill white space, but there is art in thinking about how and where to use it. Danger lies in falling into the misconception that leaving white space will look sloppy or unintentional – a wasted allocation of a limited commodity. There is truth in the fact that space is a limited commodity, but in design, white space is the perfect tool to guide users through a positive, meaningful experience. For this reason, it needs to be conserved and implemented intentionally.

In an article on white space,  Jason Santa Maria posits that white space can be used, intentionally, to direct the experience of the user. “When white space is used appropriately, it allows a page to create a general flow and balance, which in turn helps communicate the intent of the design by welcoming readers and inviting them to stay awhile,” he states. “[It] can highlight important elements and support the overall hierarchy, leading the viewer around the page by the designer’s intent. The empty space on a page can be every bit as important as the space occupied by imagery, because even empty space serves a purpose and supports the visual integrity of a layout [ . . . ] Little or no negative space is the reading equivalent of a skipping record; most people won’t sit around until the end.”

It is inherently difficult to direct a user’s attention to what we want them to see; similarly, it’s difficult, given contemporary attention spans, to get users to stick around for the entirety of a designed experience. Paying attention requires active thought and engagement, but by presenting information hierarchically, you allow users to logically deduce what details or sections are most important. Without doing so, designers risk losing their target user base.

White space is like breath of fresh air

Just like humans need air to breathe, a design needs air to breathe. This sense of breathability provides a copacetic balance that prevents your brain from becoming overwhelmed. White space enables visual and cognitive usability – in this instance, the ability of the eyes (and sequentially, the brain) to effortlessly focus on the most important content.

We’re able to scan, comprehend, and experience the night sky due to the fact that there is a massive backdrop of open space that gives us perspective on the planets and stars. Space is an active element; without it, none of the aforementioned benefits would be possible.
The same is true for white space in design. If you want to create content that can be scanned, comprehended, and experience by your users, consider the fact that white space is an active element and can be used as a tool to present your content in an interesting and strategically valuable way.