Using Negative Space when Designing for the Web

John Reeve | August 6th, 2008 | ,

I once worked as a graphic designer for a small marketing group that would place ads for golf clubs in the backs of various magazines. These ads were typical of what you would see in the back of a magazine — volumes of text and photos crammed into the 8.5 x 11 confines of the printed page. Every one of my original designs, consisting of sharp photos elegantly contrasted with bold type, would be ‘art directed’ and morphed into an unrecognizable topography of condensed, crammed type. When I tried to protest I was rebuked with economics &mash; “this is expensive ad space,” the boss would say, “we have to fit in as much information as possible.”

This is a problem that plagues many a stalwart designer, and not just print designers. Here are five reasons why using negative space will make your message more successful when designing for the web.

1. Stop Shouting

With so many publishers and advertisers trying to get their message across, most web sites have become a cacophonous battleground. We can’t hear any one message over the din created by all of the others. When used intelligently, negative space will contrast your message into something like a whisper. When people shout at us we turn away. When they whisper, we lean in.

2. View Space from a Different Perspective

Like my previous boss, many advertisers see ad space as a waste unless it is filled with information. A contrasting, unconventional view is that the ad space is an opportunity to keep everyone else away from your message. Use negative space like a moat around your design, and protect it from those invasive neighbors. This can be especially effective when designing banners, which will be flanked by others in a side column of a web site.

3. Build Confidence

Another reason we over design for the web is that we worry our message won’t be understood. We dribble on with text and photos for fear that one reader may have missed the point. Using more negative space and saying less will establish confidence in your voice. People respect and listen more to those who choose to speak clearly and directly without saying too much.

4. Give the Eyes a Rest

When confronted with a web page too full of ads and content the eyes will have no place to rest, no place to focus on and start reading, and the reader will leave the page. Use negative space to direct the reader’s wayfaring eyes to a place they can rest. The readers’ brain will thank you for it by staying on the page and retaining what it reads.

5. Establish a Hierarchy of Information

Web designers are often faced with the challenge of putting a lot of information on one page and directing the reader through it. A hierarchy of information is more established when using negative space. And it can spare the designer from the clients’ demand to make everything bigger, bolder, and red.

Leave a Reply

Intervals Blog

A collection of useful tips, tales and opinions based on decades of collective experience designing and developing web sites and web-based applications.

What is Intervals?

Intervals is online time, task and project management software built by and for web designers, developers and creatives.
Learn more…

John Reeve
Author Profile
John Reeve

John is a co-founder, web designer and developer at Pelago. His blog posts are inspired by everyday encounters with designers, developers, creatives and small businesses in general. John is an avid reader and road cyclist.
» More about John
» Read posts by John

Jennifer Payne
Author Profile
Jennifer Payne

Jennifer is the Director of Quality and Efficiency at Pelago. Her blog posts are based largely on her experience working with teams to improve harmony and productivity. Jennifer is a cat person.
» More about Jennifer
» Read posts by Jennifer

Michael Payne
Author Profile
Michael Payne

Michael is a co-founder and product architect at Pelago. His contributions stem from experiences managing the development process behind web sites and web-based applications such as Intervals. Michael drives a 1990 Volkswagen Carat with a rebuilt 2.4 liter engine from GoWesty.
» More about Michael
» Read posts by Michael
Videos, tips & tricks