Proper Web Design: Turn a Negative Into a Positive
Posted: July 07, 2009
By Alan Smodic
Most web designers are first told about a blank, white web page being their respective canvas. Well, that’s true. The page is your canvas. But before you begin to throw any design you can on to the page, I’m sure that same teacher/professor reminded you that there’s no need to use the entire space.
It’s tempting, but it’s important to remember that.
In effective web (and print) design, empty space – often referred to as “white” or “negative” space – can easily be used for the common good. But to be able to make it work for you, you must understand what exactly it is and how it can be displayed.
Web Design Office defines negative space as “the empty space within the actual space. It is void of objects and elements.” Before its description continues, however, the next line reads that negative space’s “usage is vital to proper visual design.”
For some people, those in print or online, that idea is hard to grasp, believe it or not.
When I worked as an editor/designer of a few weekly newspapers, my publisher despised white space on the page. To best use the page, he always said, was to cram as much news (or ads) on to it as possible. Basically, he viewed white space as just empty space. I see it differently.
Creative design allows you to use that “empty” space to your advantage. Having it serve a purpose makes it no longer classify as “empty,” right? I believe so. For one, too much on the page hurts the eyes. Remember that people are visiting your site and you want to keep their eyes on your content and advertising. Anything causing strain will force them to leave. Make their visit enjoyable and pleasant.
John Reeve, of Team Pelago, is a graphic designer of 15 years. In an article written last year, Reeve noted “five ways that negative space is best used in web design. “Use negative space to direct the reader’s wayfaring eyes to a place they can rest,” Reeve wrote at myintervals.com. “The readers’ brain will thank you for it by staying on the page and retaining what it reads.”
To me, I fully believe this is the most important aspect of utilizing any negative space. You might feel the urge to fill the page and to paint your canvas, but you must remember your readers and casual visitors. The object is to please others and the best way to do this is pushing white space into the design that allows them occasional rest. Great designers can accomplish this without the visitor even noticing the act.
Another misconception that goes along with using negative space is that you are unable to include all the content you need to on the page. All of this, however, can be accomplished through a number of different avenues – most notably paying attention to detail in other areas, such as fonts and positioning.
For example, check out these sites. The sites profiled in the post all offer effective usage of white space, with proper breakdown by the author. The first site, MadyBySofa.com, is possibly the best I’ve seen using its page to work for them. Notice how smooth and effective a site can be using only minimal colors in a small space.
To put these ideas into simple statements, the best I’ve come across is from Grantastic Designs – a full-service search engine marketing and design firm. It said: “Treat white spice as more than just a background. Treat it as an integral part to your design. You’ll find it increases your layout’s appeal with less visual ‘noise,’ while augmenting the visual power of your message.”
So next time, before you start throwing everything on at once, step back from your computer and give the screen a look. If it’s too much, make a change and have the negative space work for you rather than spending your time trying to have it disappear. You might be surprised at the results.
For further reading on the topic, I’d suggest checking out Jacob Cass’s cover story from Layers Magazine, this list of links from Smashing Magazine or this rundown of articles from the All Web Design Blog.
Alan Smodic is a web administrator and journalist. Follow him at www.twitter.com/alansmodic.
Loading ...