Component design checklist

What does the component look like...

• on a portrait phone screen?
• on a desktop or laptop?
• Are there any other breakpoints that need to be considered?

Should the component go in a container and / or should the component’s content go in a container?

Consider maximum and minimum widths and heights.

If it is an important section of the page, does it have a Heading?

...or if it has content in it, does the content need a heading to describe what it is to the user? #dontmakemethink

Is the component telling the user what it needs to?

Within reason, is the component telling a search engine what it needs to? [headings, links, categories]

How do you interact with it if you...

• only have touch?
• are using a mouse?
• can’t hover?
• don’t have a mouse wheel?

Are the interactions obvious?

Do the clickable bits look clickable, the swipable look swipable etc

Does it have any other states?

• Does it look different while it is loading?
• Is there a menu that shows when a button is clicked?
  Have you done this checklist on that menu too?

If there are animations, have you collected references?

Preferably, another site that does a very similar thing.
If not, a reference could be anything from a YouTube video to a note "Like the intro credits to Boondock Saints"

Is it accessible?

Is it easy to see, use and understand?

Can the client edit the CMS?

• Which parts of this should be editable?
• Do text areas need a maximum character count?
• Should too much content be hidden, cut short with a "...", expand the size of the component, or be togglable?
• Do the images need to be a specific aspect ratio?