Software UI/UX Design

Design intuitive, accessible, user-centered interfaces.

Baselines (Jan 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
    ├─ 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

| Goal | Do | Avoid | |------|----|-------| | Clarity | One primary action per view | Competing CTAs | | Affordances | Native controls, strong signifiers | Clickable divs, hover-only | | Feedback | Immediate visual response | Silent taps | | Error prevention | Constrain inputs, show examples | Submit-then-fail | | Error recovery | Specific message + next step | "Something went wrong" | | Consistency | Reuse patterns and terms | Same term, different meanings |

State Matrix

| State | Treatment | When | |-------|-----------|------| | Loading | Placeholder matching layout | Data fetching | | Empty | Message + CTA | Zero items | | Error | Alert + retry action | Request fails | | Offline | Banner + cached indicator | No network | | Degraded | Warning + limited functionality | Partial failure |

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

| Requirement | Implementation | |-------------|----------------| | Focus not obscured | Keep focus visible with sticky UI | | Focus appearance | Clear visible indicator | | Dragging movements | Non-drag alternatives | | Target size | ≥24×24 CSS px | | Redundant entry | Don't re-request known info | | Accessible auth | Avoid cognitive tests |

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"
    }
  }
}

| Layer | Examples | Purpose | |-------|----------|---------| | Primitive | blue-500, 16px | Raw values | | Semantic | color-primary | Intent-based | | Component | button-bg | Component-specific |

Resources

| Resource | Purpose | |----------|---------| | references/implementation-research-workflow.md | Research before building | | references/design-systems.md | Design system patterns | | references/component-library-comparison.md | shadcn, MUI, Radix | | references/nielsen-heuristics.md | Heuristic evaluation | | references/wcag-accessibility.md | WCAG compliance | | references/demographic-inclusive-design.md | Age-specific UX | | references/neurodiversity-design.md | ADHD, autism, dyslexia | | references/ui-generation-workflows.md | UI from scratch | | references/ai-design-tools-2025.md | Figma AI, v0 | | references/cro-framework.md | Conversion optimization | | references/operational-playbook.md | Decision frameworks |

Templates

| Template | Purpose | |----------|---------| | assets/design-brief.md | Design brief | | assets/ux-review-checklist.md | UX review | | assets/ui-generation/full-ui-spec.md | UI spec | | assets/audits/cro-audit-template.md | CRO audit |

Pattern Inspiration

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

Related Skills

| Skill | Purpose | |-------|---------| | software-ux-research | Research (use first) | | software-frontend | Implementation | | software-mobile | Mobile patterns | | product-management | Product strategy |