The power of white space online

Posted by & filed under List Posts.

It may be surprising to think that a gap, an absence, can be just a powerful as an entity or a presence. The rests in music are critical in creating space and breaking up what would otherwise become noise. Like taking breaks between musical notes, it is key to provide white space for the viewer’s eyes so that they are not inundated with too much information from every corner of your site or application.

White space is an aspect of building the layout and structure within an interactive design setting that is frequently not given enough attention, according to International Design Foundation co-founder Mads Soegaard. White space, also called negative space, is the space that is around other features of the design. Put another way, white space is a section of the page that does not contain any graphic or printed content.

There are many different components of the layout of an app or web page. Elements of design that are not white space include images, icons, lines, and typography. While those aspects are similar to the painted elements of a painting, the white space resembles the canvas, noted Soegaard.

Clearly white space deserves significant attention since designers take it so seriously (even though one could start to think that white space is far down the list of priorities for your site – since it is necessarily in the background). This article looks at white space in relationship to negative space; how it is implemented within user interfaces; and examples of white space done right, done insufficiently, and done in excess.

White space vs. negative space

White space and negative space are synonyms, as noted above. The term negative space is from the art world, in which negative space is leveraged as a technique to depict an image as realistically as possible. It is worth noting that white space, or whitespace, does not have to be white in color, as pointed out by UX Planet Editor-in-chief Nick Babich. White space is whitespace is negative space; and in the sense that the color is nonessential, you could make a case that negative space is a clearer term.

White space for better usability within UIs

When someone uses an application or website, they will need white space just as they do in physical contexts (when reading a magazine, etc.). You will want space around the logos, buttons, and words in the digital settings you create so that people do not feel overwhelmed.

Specific to the UI, the design for it should include white space values throughout. Key components of white space for a graphical user interface (GUI) include:

  • space between columns of text, along with uncrowded line-spacing and letter-spacing
  • sufficient gutters, paddings, and margins
  • space surrounding images and graphics.

White space done right

HubSpot recently put together a list of several websites that they felt were using white space in powerful ways. Two examples were Everlane and Welikesmall.

You can have pictures and color while still leaving room for white space. You simply want to space the items on the page in a manner that will keep your customers from becoming confused or frustrated.

The fashion retail site for Everlane recently offered the GoWeave Blazer, for example. There was a shot of a woman in the blazer to the right side, “GoWeave Blazer” text at center, and a small, well-positioned call-to-action (CTA) button. Other than some links and icons at the top of the page, everything else was white space.

It is not necessary for negative space to feel empty or boring. In fact, it can even be dynamic. Welikesmall promotes its digital agency services with a fullscreen demo reel, allowing visitors to see snippets of work that the agency has performed.

The white space allows the full-screen video to work without coming across as too pushy. The text is very sparse, and the video is offered as the centerpiece. In one of the corners is the firm’s logo; in the other is a hamburger-style menu. In the center of the screen is, “Belief in the Making,” which is the slogan of the company. Directly below the slogan is a CTA button to play the demo reel. Again, everything else is negative space until you’ve entered the video.

Dangers of not having enough white space

It is a tricky balance to figure out the right amount of white space. It is all a matter of perspective, but white space could be said to be underdone and overdone. Jerry Cao discussed the notions of not giving enough white space and supplying too much of it in WebDesignLedger. (Note: Although this article is from 2015, the examples it cites are mostly still live and seem not to have been redesigned.)

It starts to feel crowded on a page when there is insufficient negative space, noted Cao, which is particularly problematic when the content is words rather than images.

Readability is essential for anything online, especially given people’s short attention spans and lack of patience for confusion; and it improves your readability simply to have space between the characters within your text, as well as between lines of text, paragraphs, and columns.

Note that the examples that are given are Cao’s perspective, as noted (important since he is opinionated on the topic); but this commentary has value regardless whether he is correct or not, since the examples put the concepts into real situations.

As an example of negative space, Cao gave a New York Magazine article and discusses it critically. He noted that the paragraphs were tight and that there was not much room in terms of either the height of lines or the margins between paragraphs. Cao suggested that the magazine’s approach was a little overwhelming and would discourage engagement in some readers. There is some truth to what he said: the content on the referenced page is a bit dense and could be off-putting to some.

Cao also advised that it was problematic to have sections of text come into contact with one another (without negative space as padding between them). Negative space is needed for all digital elements, said Cao, ranging from the text to the graphical user interface (GUI) icons.

We can simply think of negative space as “breathing room” or “elbow room.” There is another role of the white space: it helps to establish visual hierarchy, to organize how people view the site or app. If there is too little negative space, the reader will have difficulty figuring out which paragraphs go with each section of the content. It can even be challenging at times to determine the point at which there is a break between paragraphs. The experience of the reader should be easy and fast – so even if your vocabulary is sophisticated, the reader should be able to rapidly scan the page and zero in on areas of discussion.

Another example was Bloomberg. The homepage of the site, said Cao, felt very tight. The design had insufficient organization and balance between its different elements, he said. The positioning of the text comes across as awkward, per Cao, with the layout of the visuals on the site similar to a locked-together, jam-packed Tetris puzzle.

Dangers of having too much white space

It makes sense, if you think about it, that news sites might sometimes focus too much on the text, since they have so much to say and since there is real value they are offering. In turn, it makes sense that sites that tend to be on the opposite end, excessive with their negative space, are not in the news field.

We have been discussing the issue of not having enough white space. When there is too much of it, depending on the purpose of your site, you can frustrate your viewers with the low informational density of your pages. A customer or viewer does not necessarily want to have to scroll to read every sentence, for example.

Cao noted that people accessing the site on mobile, an increasingly important segment, would be frustrated since their screen is small and does not hold as much of a page on the screen.

One example of excessive white space that Cao mentioned (and that is still live) is Henry Brown.

Again, decide for yourself if you think he is right or not. Regardless your perspective on the above examples of white space, it is certainly an important element to consider given the considerable value it is typically assigned by designers.

Your high-performance infrastructure

White space is an important aspect of a visual environment that you are presenting to any type of user. Regardless something as specific as your balance of negative space, you will always need high-performance infrastructure to deliver the speed and reliability that underpins strong user experience. At Total Server Solutions, our infrastructure is so comprehensive and robust that many other top tier providers rely on our network to keep them up and running. See our solutions.