UI/UX: design the states missing from the mockup
A complete interface accounts for loading, errors, empty states, keyboard access and reduced motion.
Mockups rarely show the whole product
A polished screen usually displays perfect data. In real use, a list can be empty, a request can fail and a form can contain mistakes. Define those states during design rather than improvising them at the end.
For each interactive component, specify its normal, hover, focus, disabled, pending and error states. A filter button should communicate whether it is selected, both visually and semantically. Form fields need visible labels and error messages associated with the correct input.
Test beyond the mouse
Move through the page with a keyboard and check tab order and visible focus. Review contrast, touch target size and reduced-motion preferences. Animation can clarify a state change, but content must remain understandable when motion is disabled.
A design system makes these decisions consistent: color, type, spacing and states become reusable rules instead of page-by-page exceptions.
Further reading: W3C WCAG 2.2.