Design and UI

Suggestions for design and UI:

  • Single column layout to focus and avoid distractions
  • Focus on benefits, not features
  • Loss aversion, urgency, scarcity, price anchoring
  • Merge similar functions (pages)
  • Use social proof (testimonials, logos, photos)
  • Recommend a particular choice

Text:

  • Be specific about who the product/service is for
  • Be direct instead of being indecisive
  • Don’t use large blocks of text
  • Use bulleted lists
  • Break it up with links, bold, colors, paragraphs, highlighted boxes

Forms:

  • Use fewer fields
  • Show choices when there are only a few

Call to action:

  • Aim to use just one call to action per page
  • Repeat the call to action
  • Make it bigger
  • Make it consistent
  • Use a high contrast color, unique to the site
  • “Join” instead of “sign up”

Visual hierarchy:

  • Use contrast in shape, size, and color for distinct elements
  • Use consistency in shape, size, and color for related elements
  • Group and align related elements
  • Use borders sparingly
  • Use proximity and spacing
  • Use conventions for usability, don’t make your visitors pause

Typography

  • Golden Ratio: 1.618
  • Don’t: center large blocks of text, stretch fonts
  • Contrast between Serif and Sans Serif, i.e. Sentinel and Gotham Medium
  • Weight contrast, i.e. Trade Gothic Bold Condensed and Gotham Light
  • Kerning: space between individual letters
  • Tracking: universal space between letters
  • Leading: space between lines of text
  • Serif
    • Oldstyle – Bembo, Sabon
    • Transitional – Times New Roman, Baskerville, Georgia
    • Slab Serif (best for headings) – Clarendon, Rockwell, Scala, Archer
    • Modern (best for headings) – Bodoni, Didot (for fashion)
  • Sans Serif
    • Grotesque – Brandon Grotesque, Akzidenz Grotesque, Franklin Gothic (all caps)
    • Humanist (calligraphy) – Gill Sans, Frutiger, Scala Sans
    • Transitional (anonymous) – Helvetica, Univers
    • Geometric (shape driven) – Futura (all caps), Gotham (modern)
  • Font size
    • 300px width | 36px H1 | 24px H2 | 18px H3 | 14px body | 10px small
    • 640px width | 42px H1 | 26px H2 | 20px H3 | 16px body | 12px small
    • 960px width | 48px H1 | 30px H2 | 22px H3 | 18px body | 14px small
    • 1140px width | 52px H1 | 32px H2 | 24px H3 | 20px body | 16px small

Design Resources: