One of the most heavily hit web example categories at CHP is the Very Clean category - and as those of you who are frequent CHP users know, it's one of my favorite types of design. So I thought it was high time to do a CHP Design Academy piece on it.

First, let's qualify what I mean by 'clean design'. I'm talking about sites like Apple, Rackspace, Critical Mass, or the C2SG sites. See some examples at right.

Cleanliness in design comes in many forms: clean, crisp typography, clean, uncluttered layout, clean, unified color choices, crisp imagery, visual hierarchy, and judicious use of white or open space.

This tutorial is meant as a general"How To" and not a be-all-end-all treatise. These tips and guidelines aren't the only way to create clean attractive designs, but if you master these general concepts, it will be easier for you branch out and explore other your own ways of creating clean design.

Start with an uncluttered layout.

Use as much white (or open) space as needed. Remember - lots of white space doesn't always mean 'clean design'. Look at 2advanced.com or sparkysgarage.com. These are clean designs, but don't use a lot of open or white space.

A tried and true formula that you can play with is a homepage with one large, crisp, prominent photographic image (usually of a person or a persons face), over white, with a fair amount of breathing room.

Try not to put too many things on a page. Again, Apple is good at this. Here are some other examples: http://www.unisa.com/ and http://www.cleverdesign.com/dev/.

Give each page a focus.

Each page in a site should have a clear focus - whether it's a picture, or a headline or a graphic that gives the user an immediate clue as to what this page is about, or sets the tone for the page.

The users should not be responsible for combing the page for tidbits of information to figure out what kind of page this is and how they might use it.

My favorite example of this is the Apple web site which normally uses one large photo of their hottest new product. The user understands immediately that this web site is about technology, sexy design, innovative looking products. Even if that's all they get - that's the right idea. That's Apple. Look at your home page and ask yourself "Is the idea clear to people who have never been here? Could I show the page to someone for 5 seconds and would they know kinda-sorta what kind of site I was running?

Some 'clean' looking sites:

Crisp clean lines.

Avoid fuzziness. Avoid overly compressed jpgs, glows, and drop shadows. This is not to say that a little shadow here and there isn't a good thing - it can be - but force yourself to try some designs without any fuzzy elements or shadows, at least once or twice, and slowly reintroduce shadows sparingly.

Type should be clean - no drop shadows, and make sure your setting on Photoshop or Fireworks are set to "Crisp" rather than "Smooth" anti-aliasing.

Some well placed single pixel highlights are nice for a little depth, that looks very crisp. See http://www.quantumart.com for some of this.

See Eddie Bauer.com for some clean lines

Use beautiful, well-balanced typefaces.

Use beautiful, classic typefaces whenever you can. There are plenty of newer beautiful typefaces out there (newer being anything less than 10 years old) - but try your hand at setting some classic Bodoni, Frutiger, Univers, Hoefler Text, or Franklin Gothic.

Learn to recognize and use beautiful, well proportioned and properly weighted type faces -- as opposed to most of the faces you'll find at the myriad free or low cost font sites. Many of these fonts don't render crisply, look a little fuzzy, have poor letter pair spacing (they need lots of hand kerning), and klunky, unbalanced letter forms. Spend some time learning about classic typography and train your eye to know good type from bad type. Also - if you have Comic Sans on your system - delete it! In my book, it's the typographic 'kiss of death' -- the most widely used ugly, awkward typeface in the world!

My favorite term: "Breathing Room"

'Breathing room' is just like it sounds -- it's the extra space between any two elements in a layout that keep the items from crashing into or pushing against one another. This is hands down the most frequent mistake among junior designers - not leaving enough breathing room around things.

Proper breathing room doesn't mean that everything needs lots of space around it -- but every thing on the page needs "enough" space around it.

In most cases this means that all your design elements should have gutters of space surrounding text in particular, and most other graphic elements.

See the Font Bureau for some very nice, classic looking typefaces (plenty to learn about type here too)

Color: Think Monochromatic for Starters

90% of the time, the best clean designs use one major colors a a couple of ancillary highlight or complimentary colors. Look at:

BlueFly.com

or

DeanandDeluca.com

Try working with one major colors and varying the tone of the color (using your lightness and saturation controls in Photoshop) to come up with every other color you need for the design. Do the ENTIRE design with one tone. Tweak it until you're fairly happy.

Then, try introducing one or maybe two other colors into the design -- choose the place(s) you introduce the other colors carefully -- they will draw attention. Maybe the logo, or the main headline can be in color #2, or the nav bar, since it's somewhat of a separate item from the main body area of the page.

Most important things get top billing.

The most important elements in any page design should be larger and more prominently placed on the page. Closer to the top or visible middle of page. The less important things, off to the sides, smaller and lower on the page. Give the user a clear sense of importance hierarchy.

http://www.EddieBauer.com does a very clear job of this -- and the elements literally get smaller as you traverse the page toward bottom. The page is blue and grey -- EXCEPT for the larger, color ad area near top third. Also note that it's the only photo on the page, which draws your attention. Note the crisp clean lines. Sure the page doesn't have a lot of empty space -- but it's not cluttered and not all sites can afford the empty space. These folks are here to sell clothes and they know it.

Practice makes perfect laddies!

Nothing left to do but work at it and try assimilating some of these ideas into your own design. Hope this tutorial and tips are helpful and if you have a great idea for an article, and are qualified to write it, drop me a line!