Ask any Web designer, and they’ll tell you about their personal views on white space. Scores of minimalism-loving designers have utilized it extensively in their Web design content. “Less is more,” they might insist, having been trained to eliminate everything that doesn’t immediately and purposefully add to the user experience.
Behind the scenes as well, white space dominates as a design philosophy, with clean, elegant code being the holy grail for a functional Web design. I’ve noticed, however, that there are some designers out there who don’t truly understand what white space actually is, much less how to interpret it in non-obvious ways to get the most out of the concept.
Recommended Reading: 5 Tips to Simplify Your Web Design
The What And Why of White Space
Early modernist painters were masters of white space, using the media of pencil and paint on canvas to elevate one essential idea, eliminating all else as unnecessary. If you look at the sketches of artists like Miró, Kandinsky, Mondrian, and especially Picasso, you will see that economy of form is often a key feature in their work.
White space as a desirable feature in Western design (as opposed to just empty space to fill up with ornament or type) came into its own in the early part of the 20th century, at the height of modernism. Artists and designers of the Bauhaus school in Germany united under the modernist idea of minimalism and had a profound effect on much of the art and design produced thereafter, continuing to influence creative professionals to this day.
The West has embraced this feature of minimalist art and design quite strongly in the last century or so, but it’s definitely worth noting that Eastern art and design – particularly the art and architecture of East Asia – has been exploring the concept for hundreds of years.
Late Apple mastermind Steve Jobs was heavily influenced by both the German Bauhaus aesthetic and the simplified forms and copious amounts of white space used by the Japanese.
Is White Space White?
White space is simply, in my opinion, the absence of active design elements. Many people, when they hear the words “white space,” assume that white space has to literally be a.) white and b.) a space.
In fundamentalist terms, that’s true; however, most of the time you can take a more figurative interpretation and still create a “white space” in the form of a non-active area.
For example, a blurred photo used as the background image on a Website would, in this looser definition, be considered “white space,” even though it’s neither white nor space. However, it’s not an active part of the site’s functionality – it doesn’t demand anything of the user.
You can rest your eyes while looking off to the side at this blurry image, and it will have a similar effect on your brain as a pure white box.
Reducing Back To White Space
Communication is the fundamental goal of any design. When you work through the design process, you determine how best to speak to your audience. Frivolous details that simply get in the way don’t help with this main goal of communication. There’s an inherent challenge in the design profession to always be thinking of how to do more with less.
Add Item, Reduce Space
But as humans, our natural inclination is to fill up empty space with clutter.
Think of a messy garage or a room in your home that’s been needing a good dose of spring cleaning for some years now. When you first moved into your house, that room was empty and pristine. You didn’t have to create space – it was already there. Through the process of everyday living, you actually reduced the amount of space you had in that room. The same thing can happen to a design if we aren’t careful.
White space, then, isn’t something you start out with within a design. It’s something that must be created or “reduced,” from what you’ve put up on your screen. It must be discovered, like a juicy clue in a detective novel, coaxed out of hiding to shine and fill your viewer’s heads with the majesty of zen-like peace.
Seeking White Space
In the culinary world, a reduction is a liquid (usually thick and syrupy) that’s left over after a chef puts a bunch of ingredients in a pot and lets it simmer for hours and hours. I find it helpful to think of design white space as following a similar process. It’s like discovering a delicious gravy or sauce on my computer screen after “simmering” many different design ingredients together – for hours and hours.
Okay, maybe I’m a tiny bit in love with the concept of white space, but the bottom line is that white space almost never just “happens.” As designers, we have to purposely decide to find it.
Drawing A Blank
One of the most helpful ways to develop your “white space muscle” is to keep a sketchbook. I know, I know, you don’t draw that well, and what if someone accidentally sees one of your horrific doodles? Relax; it’s okay. Sketching, in a design context, is simply a way to harness the full power of brainstorming.
Brainstorming by physically drawing out possible solutions is, in my opinion, the secret to reducing down your designs, just like a chef or an amateur sleuth. Personally, I like to answer questions in the form of sketches. Such as “what would happen if I took this color out?” Or “would I get a better result if I eliminated that type family altogether?” The answer, by the way, to most “should I remove this” questions is usually “yes.”
It’s interesting to see that, the more you draw, the more you can actually reduce clutter in your designs. How many times did Picasso have to put pencil to paper before he was able to achieve the perfect balance between representation and abstraction? I’m no Picasso biographer, but my mathematical estimate would have to be “a heck of a lot of times.”
Going Back To Functions
The students of the original Bauhaus embraced minimalist concepts like white space not only in their work but also as part of their mindset. Bauhaus founder, architect Walter Gropius, helped pioneer the now standard “form follows function” philosophy in modern architecture and design, mainly from the observation that there is beauty in the simple functionality of an object.
This is not to say that there is never a need for ornament. Sometimes you just have to break out the floral patterns or pretty navigation buttons. But learning to see and appreciate the basic function of something is as much a learnable skill as fancy illustrations or UI features.
White space is more of a concept than a hard and fast rule. To reiterate, it’s merely the non-active space in a design and the psychological calming effect that it has on the viewer. There are no set guidelines. Use your best judgment, experiment profusely, and develop your own relationship to white space.