3 Little Buckets

1st edition — by Patrick McNeil — May 7, 2007

Editions:

1 2

The Design Element

It seems there is an endless supply of things that come in threes. The number holds some magic that just plain works. On the web we often find manifestations of threes on home pages. Three steps to do something, three key selling points, three main products, three main options. We love threes. I believe it is because it is an easy to consume amount of information. Three options isn't so bad. Put 10 options on the page (of equal weight) and we become lost. I can't say how many web sites I have worked on that had 3 nice little buckets on the home page. Sometimes it creeps up to four, and it still works, but it can be very near to much. Three is most certainly the sweet spot.

Notice how many of them are action items, and quiet frequently they contain a button to inspire the user to do something. Consider the fact that these sets of buckets present themselves as a single visual entity. The user then scans through it. The point is that it is a massive visual draw and is the perfect spot to put a call to action. What do you want your users to do? Sign up for an eval? Request more information? Register with the site? What ever it is this is a perfect spot to encourage it.

divider

Sample Usage

divider

Comments

Michael Terry

5/7/2007 11:39:55 AM

That http://everaldo.com/ site: Those look like panic.com images. I thought Panic did all their own web design, though. Whatīs weird is that everaldo has a little blurb saying īDonīt Panicī, too.

Brownspank

5/8/2007 7:28:35 AM

The three-part thing works best with step-by-step information, like fancy registration forms, or how-tos.

Jacob Cain

5/8/2007 9:11:55 AM

Thank you for this insight, Iīve designed several sites using this approach and feel justified for doing so now. The "3-bucket" approach designs well and communicates equally as easily. thanks!

Francis Wu

5/9/2007 3:28:07 PM

Thanks for this excellent collection! Iīve been struggling with what to call these things for the longest time, calling them "box", "feature", or "featurette" in my style sheet. Is "bucket" the actual term for these things?

Patrick

5/9/2007 3:33:25 PM

I guess "buckets" is the official name if we say it is :) everyone at my work refers to them as buckets...so why not.

Chris

5/11/2007 9:00:36 PM

Iīm pretty sure that Panic does their own webdesign, especially since theyīve released Coda.

I do know, however, that everaldo.comīs "Donīt Panic" is a reference to The Hitchhikerīs Guide to the Galaxy, hence the icon of Marvin the manically depressed robot.

Have to say though that the truck/lorry icon is awfully similar to Panicīs Transmit icon.

Stephen Jackson

6/18/2007 8:47:55 AM

3 buckets kind of results form using a grid. a large box divided into 3 smaller boxes looks better than if its divided into 9 smaller boxes. its all proportional.

Lee Wilson

6/19/2007 7:31:33 AM

Three is good, when building a grid system for a site, I usually use a system that is divisible by 3, something like 12 units, then you have loads of options, 3 big units of 4, 2, bigger units of 6, 4 smaller units of 3 etc. etc.

Three is the magic number.

Mattias

7/5/2007 8:42:01 AM

Regarding the Panic website and their artwork. Iconfactory.com are the ones responsible for designing Panics icons. Panic most certainly do their own coding.

Other than the lorry, thereīs not much of a similarity between panic.com and everaldo.com

Make a Comment:

All fields are required & all posts are hand moderated.



(not displayed publicly)



Captcha