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

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/mobile-ux-patterns.md Mobile UX: thumb zone, navigation, gestures, platform patterns

references/form-design-patterns.md Form UX: layout, validation, multi-step, accessibility

references/dark-mode-theming.md Dark mode & multi-theme: tokens, CSS, platform implementation

references/ai-automation-ux.md AI/automation UX: chatbots, agents, progressive disclosure

references/cultural-design-patterns.md Cross-cultural design: RTL, CJK, color semiotics, locale UX

references/frontend-aesthetics-2025.md Visual design trends 2025: glassmorphism, variable fonts, 3D

references/simplification-patterns.md Interface simplification for non-technical users, digital literacy spectrum

references/modern-ux-patterns-2025.md Modern UX patterns: command palettes, skeleton states, dark mode, 2026 trends

references/data-visualization-ux.md Data viz: chart selection, dashboards, accessible charts

references/typography-systems.md Type scales, font pairing, variable fonts, design tokens

references/performance-ux-vitals.md Core Web Vitals UX, perceived performance, loading patterns

references/prototype-to-production.md Prototype-to-production alignment, dashboard QA, design-to-ship checks

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

assets/accessibility/template-wcag-testing.md WCAG testing

assets/audits/simplification-audit-template.md Simplification audit

assets/design-systems/template-design-system.md Design system setup

assets/component-libraries/template-shadcn-ui.md shadcn/ui integration

assets/component-libraries/template-mui-material-ui.md MUI / Material UI

assets/interaction-patterns/template-micro-interactions.md Micro-interactions

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

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.