Ready for development checklist:
Once design mocks include these cases and scenarios, the Development team will be ready to start writing a ticket and working on the code for it:
- UI States: The mock should include what the various UI states look like, including:
- Active
- Complete
- Incomplete (ex. Validating data)
- Blank/Empty data state (ex. No credit cards found)
- Disabled
- State when input has multiple lines of input (ex. Address book with a long address)
- Hover states: All hoverable, selectable, focusable elements (links, fields) should have a design for how that works, in each state:
- Hovered on Disabled state
- Hovered on Active state
- Hovered on Incomplete state
- Hovered on Blank state
- States should include considerations for:
- Mouse cursor type (pointer, disabled, etc. - all listed here.)
- Visual focus style (example here)
- Mobile design
- Touchscreen design