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
- Other states should include considerations for:
- On hover: Mouse cursor type (pointer, disabled, etc. - all listed here.)
- On focus: Visual focus style (example here)
- Mobile design
- Touchscreen design
- What styles should be editable, and what shouldn't be editable
- What alternate visual states a component can have (ex. A Selectable List can be left-aligned or not)
This might need to be an Optional part of the list but... Transitional states such as animations