Stay Within the Lines

I wasn’t there, but read the slides from Dan Benjamin’s Railsconf 2007 presentation. In his slides he takes some time to talk about The Fold. This is a really important element in designing interfaces, it’s been a part of newspaper layout forever and often web designers don’t include this aspect in their designs.

The lines are our friends

As an interaction designer I worry about people finding the right things and being able to progress from one area to the next. The Fold is important in your layout because it allows you to lead people into more content which helps them find what they are looking for.

Either your site is going to fit within the fold and look like a flyer or postcard, this is most often the cast with a flash only site where it sits in the center of the page and the flash animation controls all the navigation. Or your site is going to have scrolling and you’ll need to be aware of your fold and how it’s going to be presented.

A Generic Site Layout	An Example Site with Layout Applied

So I create this generic site layout that’s variable to how the site it’s self should be defined. But what I keep consistent in the layout is the use of the The Fold and the classic Z Read Order.

But Z Dagger?

Of course the read order could be F shaped, it could be in a random blob shape, it doesn’t really matter the exact shape. What really matters is that you plan for how you want them to scan your site and know they aren’t going to read your content. White space, headlines and clear, concise sections are what you need to create your scan layout, the Z and the Fold are just guides.

What Space?

               White  Space

Check out the Away with Applications: The Death of the Desktop video. The first slide shows the simple and yet mighty power of white space and text.