Reducing design clutter can make your blog or website more attractive and more engaging
 

Editor’s Note: Design matters, even for blogs. It’s an important part of optimizing your home page. Clean, crisp design appeals to your visitors’ aesthetic sensibilities, helping ensure that they come back. In this, the 4th installment in our ongoing series on good design, Yahoo! user experience design manager Eric Thomason tells you how to tidy things up.  

You notice it, even if you never really think about why you do: Some blogs are easy to scan and read. Some have an almost calming effect and seem to encourage you to spend time on them…and some just don’t.

Your content is what keeps readers coming back, for sure, but the extra polish that some blogs and websites have gives them an air of respectability, maybe even credibility. Here are a few simple guidelines that can help your own blog shine.

1. Color and Contrast
The best advice for the novice designer is to keep it simple. Contrast and legibility is arguably more important than the flare and flavor that color provides, so it is a good idea for the background that your copy sits on has a light color. The copy itself should be a well contrasting black, dark gray or other dark color.

It is also possible to go the other way and use a dark background with light copy, but it isn’t as easy to read, plus it may be a little over-used. One thing to try to avoid is a middle value (not light enough nor dark enough). This will probably not provide enough contrast for your copy, and may make your site appear muddy and difficult to read.

Color is subjective and can be a very complicated aspect of design. A failsafe method is to choose only one color and use it with grays and white and maybe a little bit of black. If you use this approach, your colors will never clash.

A slightly more advanced method is to choose one main color with one or two accent colors for your design. Most blog templates take this approach. When in doubt, remember that simple is generally better.

2. Type
As with color, the best practice when choosing type styles is to use the fewest number of variations possible. It is also a good idea to create rules for when you will use them. By type style, I mean the font face (Helvetica, Times, etc.), weight (bold, normal), treatment (italic, underline etc.) and size (12pt or “medium” etc.)

Generally you will need at least two styles and maybe as many as five (excluding link styles), but you will seldom need more than that. For example, the two styles you will almost always need are Headline and Body copy.

Here is an example of rules for usage of five type styles:

Headline: Always use as the title of an article or post.
Subhead: Use for sub-headers and for section titles within an article or post.
Body copy: Use for all main articles.
Small Head: Use for side rail titles and comment titles.
Small Body: Use for side rail content, time and date stamps.

3. Alignment
When placing new content on your page, whether it is a headline, photo or body copy, try to imagine an invisible line running up and down the length of the page. Line up as much as possible to that line. If you want to place something off of the imaginary line, make sure that it is far enough off the first line to make the placement appear intentional. Going forward, you should try to line up everything to one of the two lines.

Designers call these imaginary lines grid lines. You should try to maintain the fewest grid lines necessary on your page. One thing that will make this easier is to avoid centered or right-aligned text when possible. Centered and right-aligned text, when not implemented by a skilled designer, usually leads to a cluttered page.

By keeping your site’s colors, fonts and alignments as simple as possible, your site will appear crisp and “clean,” which will always reflect better on your content.

View the other articles in this series:

The Web 2.0 Style

Publishing with the User in Mind

Chips off the ‘Ol Block

—Eric Thomason, Manager, User Experience Design