Website Design Checklist

No-scroll test

  • Name of the company?
  • Understanding of what they do?
  • Understanding of who they do it for?
  • Why should we care?
  • Proper <h1>
  • Is there a strong visual?
  • If local: Can I see a phone umber and city/address/location info?
  • Clear and simple navigation?

UX Design

  • Proper content flow?
    • Hero
    • Strong opening content
    • Products / Services
    • Features / Benefits
    • Social Proof?
    • Clear process?
    • Brand statement
    • Strong primary offer?
    • Top of the funnel secondary offer / lead capture?
    • FAQs?
    • Demonstrations if needed?
  • Multiple calls to action per page?
  • No more than two desired actions?
  • Proper horizontal line length for all text?
  • Content is broken up and scannable?
  • Key pages can be accessed in less than two clicks?

Copywriting

  • Problem-Agitate-Solution?
  • Unique Selling Proposition (USP)?
  • You-focused copy?
  • Clear communication of the real problems visitors have?
  • Clear, impactful, scannable sub-headings?
  • Communicates features AND benefits?
  • Addresses objections?
  • Speaks to top, middle, and bottom funnel visitors?

UI Design

  • Clean design that puts the focus on the content?
  • Strong visuals?
  • Cohesive brand feel?
  • Consistent spacing?
  • Consistent use of colours?
  • Proper visual rhythm?
  • Good use of colour contrast?
  • CTAs grab attention?

Offer

  • Clear and compelling?

Dev

  • General
    • Re-usable elements are styled with custom classes?
    • BEM class organisation?
    • Class names are decipherable and maintainable?
    • DRY methodology?
    • Utility class use is minimal?
    • Styles rarely added to IDs?
    • Strong use of variables?
    • Text uses paragraph tags and not divs?
  • Links
    • Good use of internal linking?
    • Links use descriptive anchor text?

Images

  • Real images instead of background images (except when the image is purely for decoration)?
  • Images wrapped in <figure> tag?
  • Images use SRCSET?
  • Images are properly optimized for web?
  • Transparent PNGs are served in WebP?
  • JPGs or WebP instead of PNGs for non-transparent images?

Cards

  • Only one link per destination?
  • Card heading is the first readable element in the DOM?
  • Cards are list items in a proper list format and/or use <article> tags?

SEO

  • Proper site architecture / sitemap?

Accessibility

  • All colours pass contrast check?
  • Site can be navigated with a keyboard?
  • Header has at least one skip link?
  • Page headings follow logical order with only one H1 per page?
  • All links use descriptive anchor text?
  • Non-described items contain hidden accessibility text or aria labels?