Erik Dana's List: design

• 1. Balance
• 2. Grid
• The Rule of Thirds and Golden Ratio account for why sidebars, for example, are usually about a third of the width of the page and why the main content area is roughly equal to the design’s width divided by 1.62 (equalling phi in mathematics). We won’t get into why this is, but it does seem to hold true in practice. It is also why the subject in professionally taken photographs is usually positioned not in the middle but at the intersection of an imaginary nine-square grid (three by three, with two horizontal and two vertical lines).
• Pick two or three base colors at most for your design, and then use tints (which are lighter, mixed with white) and shades (which are darker, mixed with black) of these base colors to expand the palette where necessary.
• Picking nice colors is as important as picking the right colors (that is, the right colors for the job). A Web design for a cozy little restaurant would do well with “earthy” tones: reds, browns, etc. Of course, there is no such thing as a surefire recipe. Every color sends out a message, and it is up to you to get the message right.
• 5. Typography

• Font Stacks

   

  There are several fairly easy ways to significantly improve your website’s typography, three of which we’ll cover here. One of them is font stacks.

   

  Font stacks are just basic CSS. They let you define the order in which fonts should be rendered. To be precise, we are speaking of typefaces here, not fonts. For a good summary on this, please refer to Jon Tan’s Typeface != Font.
• Measure and Leading
• Hanging Quotes and Bullets

• 6. White Space

   

  White space, or negative space, has to do with what is not there. Like measure and leading, white space gives text some breathing room and spatial peace. You can make elements stand out by adding white space around them. Copy, for example, shouldn’t look cramped. To ensure readability, make sure paragraphs have sufficient padding.

   

  Perfume ads — or any ad for a luxury product for that matter — are known for their use of white space… loads of it; and a serif typeface for good measure.

8 more annotations...

• A Must See for Graphic designers - Erik Dana on 2009-10-27