Software UI/UX Design

Design intuitive, accessible, user-centered interfaces.

Baselines (Mar 2026):

• Accessibility: WCAG 2.2 Level AA — W3C
• Performance: Core Web Vitals (LCP ≤2.5s, INP ≤200ms, CLS ≤0.1) — web.dev
• Platforms: Apple HIG, Material 3

Quick Start

• Clarify platform(s), primary user journey, and constraints (accessibility level, performance, localization, auth).
• Choose track: audit an existing UI (heuristics + state matrix + WCAG) or design a new UI (IA + flows + UI spec).
• Produce artifacts: recommendations, acceptance criteria, and a handoff spec (components, states, copy, tokens).

Decision Tree

Design challenge:
    ├─ What to build? → Use software-ux-research first
    ├─ Improving existing UI?
    │   ├─ Usability issues → Heuristic review
    │   ├─ Accessibility gaps → WCAG 2.2 audit
    │   ├─ Inconsistency → Design system alignment
    │   └─ Conversion issues → CRO audit
    ├─ Building new UI?
    │   └─ references/ui-generation-workflows.md
    ├─ Non-technical users / simplification?
    │   └─ references/simplification-patterns.md
    ├─ Specific demographics?
    │   └─ references/demographic-inclusive-design.md
    └─ Platform constraints?
        ├─ Web → semantics + focus + reflow
        ├─ iOS → system nav + Dynamic Type
        └─ Android → Material + edge-to-edge

Interaction Checklist

State Matrix

Platform Constraints

Web

• Semantic HTML first (no "div soup")
• ARIA only when needed
• Manage focus on SPA navigation
• Reflow at 320 CSS px (WCAG 1.4.10)
• Target size ≥24px (WCAG 2.5.8)

iOS

• System navigation (tab bar, nav bar)
• Dynamic Type support
• Dark mode + system materials
• Handle Safe Areas

Android

• Material 3 components
• Dynamic Color (Material You)
• Edge-to-edge content
• Handle predictive back

WCAG 2.2 Key Changes

Reduced Motion

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
}

Design Tokens

{
  "color": {
    "primary": {
      "$value": "#0066cc",
      "$type": "color"
    }
  },
  "spacing": {
    "sm": {
      "$value": "8px",
      "$type": "dimension"
    }
  }
}

Resources

Templates

Pattern Inspiration

• Mobbin — 300k+ screenshots
• Page Flows — User flow recordings
• Refero Design — Web design references

Related Skills

Fact-Checking

• Use web search/web fetch to verify current external facts, versions, pricing, deadlines, regulations, or platform behavior before final answers.
• Prefer primary sources; report source links and dates for volatile information.
• If web access is unavailable, state the limitation and mark guidance as unverified.