Frontend engineering is not just about producing high quality code but also attentive design. Whether you work on a design or transform a design to code, make sure the below checklist is done before you ship.
- Is relative spacing to UI elements as base unit of 4?
- Does your relative spacing match the relative spacing of similar UI elements?
- Does it look good on desktop, tablet, and mobile?
- Are you using existing elements / components where appropriate?
- Are you using the right colors from the design system?
- What happens to text when it gets too long? (e.g. truncation, wrapping, etc)
- Are all interactive states accounted for? (e.g. default, touch, hover, disabled, etc)
- Are empty states accounted for?
- Are error states accounted for?
- Are loading states accounted for?
- Are we using correct writing styles to communicate?
- Are existing patterns being used for similar actions/items?
(e.g. text link vs. secondary button, back arrow vs. back link, tooltip vs. exposed helper copy) - Does your icon choice communicate effectively?