The Nietz » UI & IA

Designing for the fold: best practices

Stephen — Wed, 17 Nov 2010 03:22:04 +0000

We tend to get in some heated arguments around here about keeping things above the fold. Do you need to design a page with 600 pixels in mind, or do you ignore the fold? Jakob Nielsen’s research indicates people don’t like to scroll, but there are some great sites which use the fold to their advantage:

Paddy Donnelly thinks the fold is dead,

The newspaper’s goal is for you to actually read the newspaper, not just the front page. That should be your goal too. You want your visitors to explore your site/see your product or content. Don’t let the statistic scaremongers bully you into thinking the visitor will decide in 3 seconds whether to stay or leave your website. Trust me, having no space and information overload will most definitely make your visitors leave before the 3 seconds are up.

So, what’s the answer? Read onTake Mozilla’s Firefox page. On the initial load you get some basic primary and secondary navigation, but mostly, you get a giant ad.

Taking up almost the entire page, but giving you a hit of something more. So you scroll,

and learn more about Firefox. And again, you get a hint of something more,

and more, and more until you reach the footer. And if you have JavaScript turned off, it degrades gracefully, creating a staggered effect, encouraging you to scroll.

Each time you scroll, you learn a little bit more, and want to scroll a little more.

To fold or not to fold?

Just because these two pages are successful, does that mean we can start ignoring the fold? Absolutely not. These pages aren’t ignoring the fold, instead, they’ve focused on the fold and incorporated it into the design.

Something Cool: dummyimage.com

Stephen — Wed, 17 Mar 2010 04:53:30 +0000

I am amazed no one thought of this yet. I cannot tell you how much time I spend in PhotoShop or Fireworks creating placeholders for images. Invariably they all come out looking poor. On a wireframe they stick out like a sore thumb and clients just cant see past them. Well, those days are over. Need a FPO for 350×250 image? Easy. Just point your browser to:

http://dummyimage.com/350×200

and viola!:

Any combination of height and width’ll work. It’s simple and elegant. And it gets better…

In addition to height and width, you can do all the standard ad sizes, screen resolution, even video format. For a full-sized banner, just use:

http://dummyimage.com/fullbanner

Different colors? alt text? jpg or png? just as easy:

http://dummyimage.com/400×100/0099ff/CCCCCC&text=TheNietz

Too lazy to save your own images and don’t want to link to their site? They have that covered too, just download the source (MIT license) and run it on your own server.

If you do wireframes, this is a must-add to your toolchest.

[dummyimage] via [lifehacker]

Free social media icons

Stephen — Mon, 08 Feb 2010 20:33:02 +0000

From IconDock Via webdesigner wall. A pretty nice set, missing a couple of key ones I’m looking for (Picasa?), but they are high quality, vector based, and best of all, free.

check ‘em out:

[IconDock] via [WebDesignerWall]