Why do some designs immediately catch your attention, seeming to have a life of their own?
Another site might have similar colors, layout and style, but it falls flat. It’s hard to find your way around it, or it’s just plain unappealing.
The reason might have nothing to do with what’s on the page, but rather what isn’t on the page.
Negative space (or white space, as it’s sometimes called) is one of the most important aspects of visual composition. Too often, amateur designers neglect it, and then wonder why there’s “just something off” that they can’t put their finger on.
Learn how to use negative space effectively, and you can make any composition jump off the page.
Why is blank space so important?
It’s empty, but negative space is anything but passive. In a well-crafted design, negative space is an extremely active element.
It allows images to breathe, showing them to their best potential. It makes texts easier to read and the page easier to navigate.
Most importantly, it creates rhythm and movement within the composition. By directing the viewer’s eye and highlighting the most important elements, it shapes a narrative across the page. This is what both makes it easier for viewers to use the page and makes it engaging, attractive and highly memorable.
Too little negative space and the composition feels cramped and busy. Throw too much at the eye and nothing sticks. Viewers will have trouble telling what’s important or finding what they need on the page. It will lack style, no matter how elegant the colors or typography.
Too much negative space can also be too much of a good thing. It can make objects seem small and distant, or leave the page looking incomplete. Extreme negative space also naturally limits the amount of information on the page.
However, it is less problematic than not having enough. When in doubt, err on the spacey side.
How great artists use negative space
Negative space is an essential consideration in any art form. If you don’t believe me, take a close look at any great work of art, like Michelangelo’s Creation of Adam or The Great Wave by Katsushika Hokusai. See how the empty space in these paintings is just as creative and interesting as the main figures, and, in fact, gives life to the whole composition.
In Michelangelo’s painting, the hands of Adam and God are almost but not quite meeting across a void. This blank area is charged with energy and anticipation.
The negative space in The Great Wave adds intense drama to what would otherwise be just a picture of the ocean. On one side of the print, there’s that infamous wave. On the other, an open space draws the eye towards a small boat, barely visible above the moving water, and perhaps about to be swallowed by the sea.
At the center of the composition, framed between the wave and the negative space, we see Mt. Fuji in the distance: the tallest mountain in Japan, dwarfed by the towering water and vast space of sky.
You might also notice that the wave and negative space together create the shape of a yin-yang.
Many artists and designers make deliberate, playful use of the interaction between negative and positive space. Tang Yau Hoong is one brilliant contemporary example: check out his gallery of negative space images for inspiration.
Positive and negative space can tell two stories at the same time, or rather a story with two distinct sides depending on which aspect you focus on. By using a part of the composition that’s usually absorbed subconsciously, artists can create clever, surprising twists for the viewer.
While we’re at it, negative space isn’t just important in visual art. As Mozart said, “The music is not in the notes but in the silence between.”
Silence in music creates structure and resonance, allowing the notes to expand and drawing the listener into the music.
For a classical example, listen to the opening bars of the Sanctus from Beethoven’s Mass in C Major. Between each “sanctus” from the chorus, there is a beat of silence that is absolutely enthralling.
For something more contemporary, check out the vibrating, minimalistic first moments of “Daily Routine” by Animal Collective.
Maybe this all seems very far from your website, but web design is also a sort of art form. A really good website isn’t just a collection of elements: it has to tell a story and engage the viewer in that narrative. Aesthetics speak louder than information, and so by taking some hints from artists, you can create a website that appeals deeply to your visitors before they even start reading your text.
Creating visual drama with negative space: tips for better use of negative space on your website
Clever use of negative space can create excitement and direction on your webpage, and you don’t need a degree in art theory to do it. While it has to come with an understanding of basic design principles, as I’ve discussed in this blog post, following these simple guidelines will help you add space, life and structure to your page.
- Use it to highlight your central message. If you have an image, headline or call to action that you want to funnel attention towards, frame it well with space to make it pop out.
- Create a visual flow with layered elements. Starting with the most important messages at the top of the page, use negative spaces to direct the viewer’s eyes from one content area to the next.
- Avoid monotony and excessive symmetry. Use elements of different sizes arranged in balanced asymmetry to create the most visual interest. This will prevent a page with a lot of negative space from looking empty.
- Play with minimalism. Take an honest look at your site and see how much you can remove. If an element isn’t really essential, your design might be better off without it.
- Pay attention to micro negative spaces within elements, like line spacing and letter spacing. Allowing enough space within text is especially important, so it’s easy and relaxing to read.
- Choose a clean, elegant WordPress theme. “Less is more” is trendy, so it’s not hard to find a well-designed theme that will get you off on the right foot. Ocean Web Themes is a good source for these. Most of their themes, especially Flatter and Train, are sleek and ultra-modern in style.
If you want to improve your eye for negative space, try taking a photography class or two. You can also learn a lot by paying more attention to negative space around you. Notice the spaces created in logos or just by the objects around you.
For inspiration, check out these websites that make beautiful, creative use of negative space:
- Femme Fatale (creative studio)
- Monsieur Caillou (freelance designer)
- iPad Mini 4
- Velvet Hammer (music management firm)
- Why We Explore (blog about space, as in outer space)
- We Ain’t Plastic (UX engineer)
Negative space isn’t an extra feature that you should tack on at the end. It should be part of your initial concept, built into the fundamental layout of your page.
That said, you shouldn’t go overboard with it. Extreme negative space can make a big impact in specific contexts, but it has to fit your message and style.
Space is a tool in your toolkit. It’s not a one-size-fits-all solution, and it has to be incorporated smoothly with positive elements to make a balanced composition. But when used effectively, it can be one of the most powerful and dramatic tools you have to work with.