11/15/2007 ↓

  • Lessons from Eye-Tracking Studies

    23 Actionable Lessons from Eye-Tracking Studies: A very nice summary of the eye tracking studies performed at Eyetrack III. The lessons are easy to follow and made a lot of sense to me. I have found most of them to be true in my experience but they can serve as a good guideline for new designs and for a remedial set of guidelines for existing designs. (7)

1/9/2007 ↓

Whitespace 1comment

Thanks for visiting! We would like to serve you better. Please subscribe to our RSS feed for daily updates. This blog posts regular Wordpress news, updates of themes, plugins, ideas, hacks, quick fixes and everything about blogging, especially about Wordpress. You can also receive updates from this blog via email if you want that method of notification.

I came across an article by Mark Boulton at A List Apart. He writes about the importance of micro and macro whitespace.

To put it simply, whitespace on a page is everything that isn’t the content. By content I mean text, images and other design elements.
Micro whitespace is the space between lines, characters and smaller elements on your page. Macro whitespace is between major elements, like blocks of content etc.
Micro whitespace plays the role in ensuring legibility and macro whitespace gives you the feeling of breathing room and cleanliness.

Before the popularity of CSS, most of the styling was with font, bold and italic tags. Most sites had standard font sizes (usually 12pt) and standard whitespacing.

Once CSS became popular, almost all design elements could be styled. Spacing between characters could be easily changed, as well as line spacing. Cross-browser and cross-platform incompatibility resulted in pages looking good in some browsers and extremely pathetic in others. Reduced line-height and font-spacing resulted in cramped text. Text became illegible and even good articles became a real pain to read.

Mark’s article brings to focus how whitespace can actually make a differnce. He cites two examples; one of Erik Spiekermann’s redesign of The Economist and the second of brand positioning while designing graphics.
He then goes on to explain the use of active and passive whitespace in a simple article with pictures and examples.

I think the article is a must read for both theme and graphic designers. I plan on implementing some of his suggestions in my designs as well as my websites.

Let me quote his closing paragraph:

Once you know how to design and manipulate the space outside, inside, and around your content, you’ll be able to give your readers a head start, position products more precisely, and perhaps even begin to see your own content in a new light.

The article »

Friends

Translate

Translate to German Translate to Spanish Translate to French Translate to Italian Translate to Portuguese Translate to Japanese Translate to Korean Translate to Russian Translate to Chinese

Latest Videos

S2