Design under constraints~45 min

Design Under Constraints: Every State of One Component

Early preview draft — not yet practitioner or accessibility reviewed.
Goal
Practice the unglamorous majority of UI work: a component is not designed until every state it can be in is designed — including the ones that only appear when things go wrong.
Scenario
Design ONE form input component (a text field with validation) in every state it can occupy: empty, focused, filled, disabled, loading/validating, valid, and error — plus the error message itself.
Audience
The design-system maintainer who will reject the component if any state is missing or if two states are indistinguishable.
Constraints
One component only. Every state must be visually distinct AND distinguishable without color alone. The error state must include real, helpful error copy for one concrete validation failure — not "invalid input."
Deliverable
All seven states side by side (any tool), plus a state table: state name, what triggers it, how it differs visually, and what the user can do from it.
Counts on your evidence profile as
A completed Skill Lab with its rubric and your deliverable
Accessibility requirement
The focus state must be visible at WCAG-level contrast and never removed — a keyboard user finds this component with it.
AI policy
AI use is allowed for this lab. AI can enumerate states you might have missed; designing them distinct and specifying the triggers is the practiced work.
Rubric
  • No state missing: All seven named states exist and the trigger column explains when each appears — including how loading differs from disabled.
  • Distinct without color: Focus and error are each marked by something besides hue (outline, weight, icon, text) — checkable in grayscale.
  • The error helps: The error copy names what went wrong and what to do next, in the user's language — "invalid input" or "error" alone fails.

Skills: Interaction Design, Components, Accessibility

Relevant to: Product Designer, UI Designer, Design Systems Designer

Your work

Sign in to start this lab.