Some thoughts and tips on readable (web) design

By Shawn Himmelberger on 23-Jul-08 20:55

I've been doing design and web design for longer than many, and along the way I've made mistakes, I continue to make mistakes.  However I try not to make them twice, below I have a list of things I've learned by doing things wrong.

1. Look at the design in black and white

   A design should no depend on color, but rather contrast. I always start logo design in black and white, color only complicates things. If you find it's difficult do read and understand in black and white consider turning lighter shades lighter and darker shades darker to bring more contrast to the design
   
   

2. Skimability, visual hierarchy and separation

   This means how well can some one easily skim a document. Each heading and sub heading should stick out as you skim down the page, no one reads word for word.
   
   

3. Let it blur

   For a quick test I'll sit back and let my eyes relax a bit, so the image starts to blur. Only the titles and sub titles should be standing out. I had a creative director once wiggle a page in front of me and ask me what it says, this accomplishes the same thing.
   
   

4. Typography

   Try making the body copy have a slightly translucent appearance, think as if it were set to 75% opacity.  You can also make the titles larger, I suggest at least 18 px or more for titles and a body copy size of 12 px , notice the 2:3 ratio.  I'll add in 18px line height as well for 1.5 line spacing, or leading.
   

Try these tips for a more readable document and design, add any of your tips in the comments.