Software UI/UX Design
Design intuitive, accessible, user-centered interfaces.
Baselines (Mar 2026):
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
Pattern Inspiration
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.
