UX / UI design body of knowledge
This document maps the core concerns of UX / UI Design — user research, interaction design, visual design, information architecture, design systems, and accessibility — to the blueprint ecosystem.
Guide · Updated · Source
How UX design relates to PDLC and SDLC: UX Design is a cross-cutting discipline that drives discovery and validation in PDLC and shapes deliverables across SDLC. See UX / UI Design ↔ SDLC ↔ PDLC bridge for the full mapping.
Techniques: Research and design methods are cataloged in techniques/.
Accessibility: WCAG compliance, ARIA, and inclusive design guidance is in accessibility/.
1. Design thinking
Design thinking is a human-centered approach to innovation that integrates human needs, technological possibilities, and business viability.
Double diamond model
| Phase | Mode | Activities | Outputs |
|---|---|---|---|
| Discover | Divergent | User interviews, contextual inquiry, diary studies, competitive analysis, analytics review | Research synthesis, empathy maps, journey maps |
| Define | Convergent | Affinity mapping, insight statements, "how might we" framing, problem prioritization | Problem statements, design principles, opportunity areas |
| Develop | Divergent | Ideation workshops, sketching, concept generation, design sprints | Concepts, wireframes, low-fidelity prototypes |
| Deliver | Convergent | Prototyping, usability testing, iteration, specification, design-dev handoff | Validated designs, interaction specs, design tokens |
Design principles (universal)
| Principle | Description |
|---|---|
| User-centered | Ground every decision in evidence about real users — observed behavior, not assumptions |
| Inclusive | Design for the widest range of abilities, contexts, and devices from the start |
| Iterative | Ship, measure, learn, and refine — no design survives first contact unchanged |
| Systematic | Build and maintain design systems so that consistency scales beyond any single designer |
| Collaborative | Design is a team sport — involve engineering, product, and users throughout |
2. Interaction design
Core concepts
| Concept | Definition | Design implication |
|---|---|---|
| Affordance | A perceived property that suggests how an object can be used | Buttons should look clickable; draggable items should look grabbable |
| Signifier | A signal that communicates where and how to act | Labels, icons, placeholder text, cursor changes |
| Feedback | System response to user action | Loading states, success/error messages, animations, haptics |
| Mapping | Relationship between controls and their effects | Spatial layout matching conceptual model; slider direction matching value direction |
| Constraint | Limiting possible actions to prevent errors | Disabled states, input validation, confirmation dialogs for destructive actions |
| Consistency | Similar elements behave similarly across the system | Reusable components, shared interaction patterns, predictable navigation |
Navigation patterns
| Pattern | Best fit | Trade-off |
|---|---|---|
| Tab bar / bottom nav | Mobile apps with 3–5 top-level sections | Limited to few items; not suitable for deep hierarchies |
| Sidebar / drawer | Desktop apps, admin panels, deep navigation trees | Can hide important items; hamburger menus reduce discoverability |
| Breadcrumbs | Content-heavy sites with clear hierarchies | Not useful for flat structures or task-based flows |
| Wizard / stepper | Multi-step forms, onboarding flows | Forces linear progression; branching is hard to communicate |
| Search + browse | Large content catalogs, documentation, marketplaces | Requires good search infrastructure; cold-start problem for new users |
| Command palette | Power-user tools, IDEs, productivity apps | Invisible to novice users; requires keyboard fluency |
Responsive design tiers
| Tier | Breakpoint range | Layout strategy |
|---|---|---|
| Mobile | < 768 px | Single column, stacked cards, bottom-sheet actions, touch targets >= 44 px |
| Tablet | 768–1024 px | Two-column or split-view, collapsible panels |
| Desktop | > 1024 px | Multi-column, persistent sidebar, hover states, keyboard shortcuts |
3. Visual design
Typography
| Guideline | Rationale |
|---|---|
| Limit to 2–3 typefaces (display, body, mono) | Cognitive consistency; faster loading |
| Body text >= 16 px, line height 1.4–1.6 | Readability on screens; WCAG compliance |
| Establish a modular scale (e.g. 1.25 or 1.333) | Harmonious size progression |
| Ensure contrast ratio >= 4.5:1 (AA) or >= 7:1 (AAA) for text | WCAG 2.x Success Criterion 1.4.3 / 1.4.6 |
Color
| Guideline | Rationale |
|---|---|
| Define semantic palette (primary, secondary, success, warning, error, neutral) | Consistent meaning across the product |
| Use color tokens, not raw hex values | Theming support (light/dark mode); single source of truth |
| Never rely on color alone to convey information | Accessibility — colorblind users need shape, text, or icon reinforcement |
| Test with contrast checkers and color-blindness simulators | Catch issues before users do |
Spacing and layout
| Guideline | Rationale |
|---|---|
| Use a spacing scale (e.g. 4 px base: 4, 8, 12, 16, 24, 32, 48, 64) | Visual rhythm; predictable alignment |
| Apply consistent padding within components, margin between them | Separation of internal and external spacing concerns |
| Grid systems (8-column mobile, 12-column desktop) | Alignment and responsive reflow |
4. Information architecture
| Concept | Description |
|---|---|
| Content inventory | Catalog of all content types, their purpose, and ownership |
| Card sorting | User research technique to discover mental models for categorization |
| Tree testing | Validates navigation structure by asking users to find items in a proposed hierarchy |
| Taxonomy | Controlled vocabulary and hierarchical categorization of content |
| Labeling | Clear, consistent, user-centric names for navigation items and categories |
| Search schema | Facets, filters, autocomplete, synonyms that support findability |
5. Design systems
A design system is a collection of reusable components, guided by clear standards, that can be assembled to build any number of applications.
Anatomy
| Layer | Contents | Owned by |
|---|---|---|
| Design tokens | Color, typography, spacing, breakpoint, shadow values expressed as platform-agnostic variables | Design + engineering jointly |
| Core components | Buttons, inputs, modals, cards, tables — with defined states, variants, and accessibility annotations | Design system team or guild |
| Patterns | Compositions of components for common use cases (forms, data tables, search, navigation) | Product teams contribute; system team curates |
| Documentation | Usage guidelines, do/don't examples, code snippets, Storybook / Figma references | Design system team |
| Governance | Contribution model (open/federated/centralized), versioning, deprecation, breaking-change policy | Architecture + design leads |
Design-dev handoff
| Practice | Description |
|---|---|
| Design tokens in code | Export tokens from design tool (Figma, Tokens Studio) to CSS custom properties / JS constants |
| Component API contracts | Props, variants, states, and accessibility requirements specified before implementation |
| Interactive documentation | Storybook or equivalent — live components with controls, accessibility checks, visual regression |
| Visual regression testing | Automated screenshot comparison (Chromatic, Percy, Playwright) to catch unintended changes |
| Annotation layers | Redlines, spacing callouts, and interaction notes attached to design frames |
6. User research methods
| Method | Type | When | Output |
|---|---|---|---|
| User interview | Qualitative | Discovery, validation | Transcripts, insight themes, quotes |
| Contextual inquiry | Qualitative | Discovery | Workflow observations, environment constraints |
| Survey | Quantitative | Validation, satisfaction measurement | Statistical distributions, NPS/CSAT/SUS scores |
| Usability test | Mixed | Validation, iteration | Task success rate, time on task, severity-rated findings |
| A/B experiment | Quantitative | Growth, optimization | Statistically significant lift/drop in target metric |
| Card sort | Mixed | Information architecture | Category groupings, similarity matrices |
| Tree test | Quantitative | Information architecture | Findability score, path analysis |
| Diary study | Qualitative | Longitudinal behavior | Patterns over time, context shifts |
| Analytics review | Quantitative | Continuous | Funnels, drop-off points, feature usage frequency |
| Heuristic evaluation | Expert review | Any time | Severity-rated usability issues against established heuristics |
7. Prototyping spectrum
| Fidelity | Tools | Purpose | Effort |
|---|---|---|---|
| Sketch / whiteboard | Paper, whiteboard, tablet | Explore ideas quickly; disposable | Minutes |
| Wireframe | Figma, Balsamiq, Whimsical | Structure and layout; no visual polish | Hours |
| Interactive prototype | Figma prototyping, Framer, ProtoPie | Click-through flows for usability testing | Hours–days |
| High-fidelity mockup | Figma, Sketch | Pixel-perfect visual design for handoff | Days |
| Code prototype | HTML/CSS/JS, Storybook, framework components | Test real interactions, performance, accessibility | Days–weeks |
8. Competencies
| Competency | Description |
|---|---|
| Research craft | Planning studies, recruiting participants, moderating sessions, synthesizing findings, avoiding bias |
| Interaction design | Translating user needs into flows, wireframes, and interaction specifications |
| Visual design | Applying typography, color, layout, and motion to create coherent, polished interfaces |
| Systems thinking | Building and maintaining design systems that scale across products and teams |
| Accessibility expertise | Designing and auditing for WCAG compliance; understanding assistive technology |
| Facilitation | Leading design sprints, workshops, and critique sessions |
| Data literacy | Interpreting analytics, designing experiments, and using quantitative evidence to inform design decisions |
| Communication | Presenting design rationale to stakeholders; writing clear specifications for engineering |
9. External references
| Topic | URL | Why it is linked |
|---|---|---|
| Nielsen Norman Group | https://www.nngroup.com/ | Foundational UX research and guidelines |
| Interaction Design Foundation | https://www.interaction-design.org/ | Comprehensive UX education and encyclopedia |
| WCAG 2.2 | https://www.w3.org/TR/WCAG22/ | Web accessibility standard |
| Material Design | https://m3.material.io/ | Google's design system and guidelines |
| Apple Human Interface Guidelines | https://developer.apple.com/design/human-interface-guidelines/ | Apple platform design guidance |
| Laws of UX | https://lawsofux.com/ | Psychology-based UX principles |
| Design Thinking (IDEO) | https://designthinking.ideo.com/ | Human-centered design methodology |
| Inclusive Design (Microsoft) | https://inclusive.microsoft.design/ | Inclusive design toolkit and principles |
Keep project-specific design documentation in docs/design/, design tokens in docs/design/tokens/, and design decisions in docs/adr/, not in this file.