Pig Work

Pig Work skip to main content

Weblog of Freelance Designer Steven Clark


Understanding White Space

Filed under: — 1:24 pm

The visual layout of a web page (or anything for that matter) can be dramatically altered for better or worse by the use of simple white space. Feared by many this misunderstood design element has suffered at the hands of village witch hunts for too long! OK that’s melodramatic, but you should maybe start looking at white space in a more educated and appreciative way as a visual tool. I’m not talking minimalism but rather appreciation of the effect on balance and how the eye is drawn to portions of a design simply by shifting the spaces between elements.

There are two kinds of white space I’d particularly like to point out - passive and active. While passive white space involves areas such as the outside of the page or empty areas that aren’t aiding in the design there’s also active white space which are those areas without content that actually aid in the design. Active white space can be used to structure the page, make it more readable and place emphasis on some areas over others in the design. Its a powerful and sometimes underappreciated tool.

Its also an interesting perspective shift when you’re designing something just to stand back and look at what isn’t there. While too little active whitespace will create a claustrophobic effect and drive visitors away so will too much or disproportionate amounts of emptiness. So, just as ships are said to have good lines I think so do good designs of any variety including the web. Aesthetically pleasing and balanced pages are going to be far more successful than those that pay no heed to white space at all.

Comments »

The URI to TrackBack this entry is: http://pigwork.info/wp-trackback.php/77

No comments yet.

RSS feed for comments on this post.

Leave a comment

Line and paragraph breaks automatic, e-mail address never displayed, HTML allowed: <a href="" title="" rel=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <code> <em> <i> <strike> <strong>