slides

Let your text breathe

• text-box width: 400 - 800px or 60-100 characters/line
• line-height: 1.4
• padding between text-boxes: at least 15px in any direction

Words: make speech visual

• make your text legible
  • contrast: don't put yellow texxt on a white background
  • size: minimum 16px depending on font
  • webaim.org has recommendations for text/background colors
• make your text scannable
  • highlight key content
  • subheads with lowercase and uppercase letters
  • bulleted lists
• keep the decoration to a minimum
  • limit number of typefaces/fonts (2 or 3)
  • limit colors (3-5, including grays)
  • use more complex fonts for headers, more basic sans-serif for text
    • proven san-serif easier to read (georgia is a serif that is easyish)
    • #424242 color used for text color (avoid pure black)
• make visitors learn one visual pattern and stick to it
• don't be afraid of whitespace. We won't run out of space

Images: use appropriately

• Icons
  • 99% of the time, should be accompanied by a label
  • Work best in navigation or menu (like a list of characteristics)
  • Avoid icons with conflicting meanings
• Photos and graphics
  • Banner blindness - the top rectangle gets skipped naturally because we expect it to be an ad
  • integrate with content (not on top/sides because people are skipping them)
  • be informative and/or relative
    • not just pure decoration - something that adds to content
    • not stock images

Design: think logically

• User Patterns
  • Alternate between small, medium and wide
  • Quality trumps originality (in most cases)
  • Find something that works and use it as a model
• Progressive disclosure
  • F-shape reading pattern
  • Top to bottom - important to less important
  • Above the fold
  • Avoid putting key content in traditional ad areas
  • Everything is available to get to somehow, but most important data is shown first.
  • Put everything there, just not on the same page.
• Be consistent
  • Links, buttons, tables, alert messages, header font/sizes, forms
  • links should be obvious
• Functionality is a part od esign
  • It doesn' tmatter if it looks good and is easy to use if it doesn't work
  • back end impacts front-end

"Design is where science and art break even" - Robin Mathew