UI design

Definition

The visual and interactive layer of a digital product that users see and engage with.

Advanced

Defines components, states, spacing, and motion patterns, and documents them with tokens and guidelines that align with development. Ensures clarity, feedback, and accessibility across devices.

Why it matters

Improves comprehension, reduces errors, and speeds production.

Use cases

• Component library creation
• Landing page or app screen design
• Design system alignment

Metrics

• Design to development cycle time
• Reuse rate of approved components
• UI defect rate after release

Issues

• Inconsistent component states and spacing
• Low contrast and unclear affordances

Example

Primary and secondary buttons with defined states, focus styles, and loading behavior across web and mobile.