9 Essential Principles for Good Web Design http://design.tutsplus.com/tutorials/9-essential-principles-for-good-web-design–psd-56

  1. Precedence (guiding the eye)
    • you control how much visual weight different parts of your design have
    • ex. logo/brand should be a focus point
    • tools: position, color, contrast, size, design elements
  2. Spacing
    • correct leading (pronounced ledding) increases readability
    • padding = space between elements and text
    • white space = elegant and upmarket feel
  3. Navigation
    • provide easy-to-find buttons and orient visitors with sub-headings if necessary
  4. Design to Build
    • ensure copy is in standard html font, sizing in photoshop will translate
    • plan for repeating backgrounds, left aligned or center aligned…avoid vertical alignment if possible
    • find a balance between what looks good and what will be simple to build
    • use CSS buttons
  5. Typography
    • choose the right font for your industry/theme
    • consistent text sizes and leading for readability
    • line lengths 9-12 words
    • avoid low contrast text
    • stick with left aligned text
  6. Usability
    • adhere to standards
    • prototype before launching
    • think about user tasks
  7. Alignement
    • consistency is key, use grid structure if possible
  8. Clarity (sharpness)
    • in photoshop keep shape lines snapped to pixels
    • use appropriate anti-aliasing setting for type
    • high contrast
    • over emphasis borders
  9. Consistency
    • be professional, make early decisions and stick with them
    • define core tags like <h1> and <p> in such a way as to make your defaults match properly and avoid having to remember specific class names all the time.
Advertisements