Whitespace in web and mobile design

August 4, 2020
Alex Tingiris

Photo by Austin Walker on Unsplash

Sometimes saying nothing is a message in itself. I haven't met a designer who ignores negative space, but from my own experience, I think there's more to discuss than meets the eye. Specifically, I want to talk about whitespace. I recently read MUJI art director Kenya Hara's 2003 book Designing Design, in which he outlines his theory about the role of whitespace in design. To paraphrase, Hara believes the color white has inherent symbolism and that it cannot blindly be considered neutral.

Pure white is so widespread in user interfaces that it can be easy to forget how infrequently the color appears in the natural world. The three most common natural occurrences of white I can think of are clouds, snow, and sand. All of these examples, however, are rarely pure white. Clouds turn dark and gray. Snow quickly becomes dirty slush. And sand often has other minerals mixed with it, making it appear beige or even black.

White is easy to dirty, which, as Hara points out, can be interpreted differently depending on the context. If kept clean, white can signal quality, care, and stability. This message derives from the fact that someone must be tending to the surface to keep it pure white, at least in the physical world. The reverse of this quality is character. While white is easy to dirty, the "dirt" could be intentional, like paint on a blank canvas. From this interpretation, we can see white as a starting point for creativity and inspiration.

In web and mobile design, designers can strategically employ white to achieve the best of both effects. By leaving whitespace, you avoid making your apps look "dirtied" while leaving room for creativity to shine. The pure white sends a message of stability, while the spaces where whitespace is interrupted are analogous to artistic works on the wall of a museum. The creative and valuable marks receive emphasis. It is essential to recognize that anything you put against a white background gets a higher level of attention than the same content on another color, even gray and black.

It is also important to remember that pure white is always unnatural. In some applications, the stability of human ingenuity is reassuring. However, in some instances, pure white's detachment from nature is an obstacle to overcome. Assuming the designer's aim is to make the user feel safe, I find that paper is a helpful analogy.

Specifically, when I'm trying to make a whitespace-heavy design more natural, I tend to incorporate shadows and animations that resemble paper. Google's Material Design bases its shadows on this analogy, but remember why the shadows are there. Yes, they convey hierarchy, but they also add a human element to an otherwise artificial experience.

With animations, I try to include micro-interactions that resemble how I would interact with papers at a desk. If I want to look at a piece of paper, I pick it up and its shadow cast over the rest of the documents. If I am moving papers around, I'll pick them up from the corners and drag them at angles to their new position. It would be strange if I moved papers around on perfect x and y axes along my desk, and this feeling carries into digital experiences.

In summary, whitespace is a powerful tool in web and mobile design. The color white conveys stability that raises the importance of the content displayed on it. However, pure white is always artificially maintained. As such, incorporating shadows and miro-interactions that mimic paper can bring friendliness, character, and comfort to your users.

Interested in working together?

Let’s talk.

get in touch