Not sure where to start?
Pattern Action Buttons Shading a button to signal it's clickable, leveraging real-world and learned-GUI knowledge — plus a standardized action-verb label vocabulary. Principle Gestalt Psychology The perceptual-organization principles — proximity, similarity, closure, continuity — behind grouping and focal-point design. Process Rapid Prototyping Site maps, storyboards, and schematics along the low-to-high-fidelity prototyping spectrum.
See how it all connects
Every pattern, principle, process, and standard in the knowledge base, mapped as one interactive graph — follow the relationships between concepts instead of browsing them one at a time.
Explore the graph →Patterns 105 Concrete, reusable solutions to a recurring UI or content problem — the patterns themselves, independent of the theory that motivates them.
Content
E-commerce
Forms & Interaction
Interaction Modalities
Internationalization
Navigation & Search
- Breadcrumb Navigation
- Browsable Content
- Category Pages
- Consistent Sidebars of Related Content
- Content Organization Schemes
- Embedded Links
- External Links
- Filters and Facets
- Jump Menus
- Multiple Ways to Navigate
- Navigation Menus
- Organized Search Results
- Search Action Module
- Site Map (Navigation Page)
- Straightforward Search Forms
- Unified Browsing Hierarchy
Responsive Design
Site Genres
User-Tailored Content & Accounts
Visual Design & Layout
Website Discoverability
Principles 31 The underlying theories, laws, and cognitive models that the patterns above are built on.
Accessibility Principles
Cognitive, Perceptual & Interaction Principles
- Affordance
- Change Blindness
- Cognitive Load
- Emotional Design
- Error Prevention and Recovery
- Fitts's Law
- Gestalt Psychology
- Gulfs of Execution and Evaluation
- Hick's Law
- Interface Design Principles
- Interface Metaphor
- Keyboard Shortcuts
- Mental Models
- Modal vs. Modeless Interfaces
- Motion Design
- Peak-End Rule
- Recognition Over Recall
- Seven Stages of Action
- Stroop Effect
- Undo
- Visual Hierarchy
Human-AI Interaction Principles
Information Architecture Principles
Trust & Privacy Principles
Visual & Communication Theory
Processes 23 Design methodology: how to learn about users and run a design project.
- A/B Testing
- Affinity Diagramming
- Card Sorting
- Contextual Inquiry
- Customer-Centered Design
- Customer Research Methods
- Design-Centering Styles
- GOMS
- Heuristic Evaluation
- Iterative Design
- Journey Mapping
- Know Your Customers
- NASA-TLX
- Participatory Design
- Personas and Scenarios
- Rapid Prototyping
- Service Design
- Storyboarding
- Task Analysis
- Usability Engineering
- Usability Evaluation Methods
- Web Design Patterns
- Web Site Development Process
Standards 10 Formal external specifications and legal/regulatory frameworks that the patterns and principles above are designed to conform to, rather than design theory in their own right.
Accessibility Standards
Platform Interface Guidelines
Privacy & Data Law
- CalOPPA (California Online Privacy Protection Act)
- CCPA / CPRA (California Consumer Privacy Act / California Privacy Rights Act)
- COPPA (Children's Online Privacy Protection Act)
- Fair Information Practices
- GDPR (General Data Protection Regulation)
- HIPAA (Health Insurance Portability and Accountability Act)
Sources 158 The external and internal sources cited, grouped by origin.
Academic Coursework & Independent Study
Digital.gov
- Federal chatbot and virtual-assistant case studies (Digital.gov)
- An Introduction to Content (Digital.gov)
- Interviews (Digital.gov Human-Centered Design Guide)
- Plain Language Guide (Digital.gov / PLAIN)
- Research Collaboration and HCD Guide Series (Digital.gov)
- Usability Testing (Digital.gov Plain Language Guide)
European Union
FTC
FuguUX Public (Substack)
- Fitts's Law: Why Every UX Practitioner Should Know It
- The Grid - Structure and Style
- Affordances and Signifiers (FuguUX Blog Post)
- Grouping Elements: Turning Visual Chaos into Intuitive Design
- It Just Works: Tiny Details That Matter in UX Design
- Preattentive Processing in UX Design, or the Magic of Making Things Pop Out
- The Importance of Information Visualization
- The Vanishing Act: How Change Blindness Affects Your Users (and What to Do About It)
- When Your Design (Inadvertently) Fights Your Users
Google Assistant
Google Search Central
Government & Company Design Systems
- Android Developers: Passkey Design Patterns and Biometric Authentication
- Wear OS Design Guidelines (Android Developers)
- Android XR Design Guidelines (Android Developers)
- Carbon Design System: Accessibility, Content, Color, Motion, and Spacing Guidelines (IBM)
- Carbon Design System: Empty States and Dashboards (IBM)
- GOV.UK Webchat Alpha: User Research and Accessibility Patterns
- Designing for people with dyscalculia and low numeracy
- AI Playbook for the UK Government
- accessible-autocomplete (GOV.UK Design System)
- Contextual Research and Observation (GOV.UK Service Manual)
- GOV.UK Design System
- Designing Good Government Services: An Introduction (GOV.UK Service Manual)
- Keyboard Accessibility (Home Office Design System)
- Loading Spinner (Home Office Design System)
- Accessibility (Material Design)
- Color usage (Material Design)
- Dark theme (Material Design)
- PatternFly AI: Conversation and Chatbot Guidelines (Red Hat)
- PatternFly: Empty State and Dashboard Design Guidelines (Red Hat)
- Design Principles (U.S. Web Design System)
- Design Tokens (U.S. Web Design System)
- USWDS Components: Date Picker, Memorable Date, Character Count, Input Mask, Text Input, Validation
- Autosave (VA.gov Design System)
ICO
MDN Web Docs
- Accessibility and Spatial Patterns (MDN Web Docs)
- Personalization to Help Browse Safely (MDN Web Docs)
- Cognitive accessibility (MDN Web Docs)
- Web Accessibility: Understanding Colors and Luminance (MDN Web Docs)
- Using ARIA for Labels with Embedded Fields (MDN Web Docs)
- Responsive Web Design (MDN)
- MDN: Web Share API
NIST
Van Duyne, Landay & Hong — The Design of Sites (2006)
- The Design of Sites: Ch. 1 — Customer-Centered Web Design: More Than a Good Idea
- The Design of Sites: Ch. 2 — Making the Most of Web Design Patterns
- The Design of Sites: Ch. 3 — Knowing Your Customers: Principles and Techniques
- The Design of Sites: Ch. 4 — Involving Customers with Iterative Design
- The Design of Sites: Ch. 5 — Processes for Developing Customer-Centered Sites
- The Design of Sites: Pattern Group A — Site Genres
- The Design of Sites: Pattern Group B — Creating a Navigation Framework
- The Design of Sites: Pattern Group C — Creating a Powerful Homepage
- The Design of Sites: Pattern Group D — Writing and Managing Content
- The Design of Sites: Pattern Group E — Building Trust and Credibility
- The Design of Sites: Pattern Group F — Basic E-Commerce
- The Design of Sites: Pattern Group G — Advanced E-Commerce
- The Design of Sites: Pattern Group H — Helping Customers Complete Tasks
- The Design of Sites: Pattern Group I — Designing Effective Page Layouts
- The Design of Sites: Pattern Group J — Making Site Search Fast and Relevant
- The Design of Sites: Pattern Group K — Making Navigation Easy
- The Design of Sites: Pattern Group L — Speeding Up Your Site
- The Design of Sites: Pattern Group M — The Mobile Web
- The Design of Sites: Glossary
web.dev
Wikipedia
- 12 Basic Principles of Animation (Wikipedia)
- A/B Testing (Wikipedia)
- Affordance (Wikipedia)
- Breadcrumb navigation (Wikipedia)
- California Online Privacy Protection Act (Wikipedia)
- Card Sorting (Wikipedia)
- California Consumer Privacy Act (Wikipedia)
- Cognitive Load (Wikipedia)
- Color Theory (Wikipedia)
- Contextual Design (Wikipedia)
- Contextual Inquiry (Wikipedia)
- Children's Online Privacy Protection Act (Wikipedia)
- Dark pattern (Wikipedia)
- The Design of Everyday Things (Wikipedia)
- Design system (Wikipedia)
- Emotional Design (Wikipedia)
- Error message (Wikipedia)
- Error-Tolerant Design (Wikipedia)
- Faceted Search (Wikipedia)
- Favicon (Wikipedia)
- Fitts's Law (Wikipedia)
- General Data Protection Regulation (Wikipedia)
- Gestalt Psychology (Wikipedia)
- GOMS (Wikipedia)
- Heuristic evaluation (Wikipedia)
- Hick's Law (Wikipedia)
- Health Insurance Portability and Accountability Act (Wikipedia)
- Human Interface Guidelines (Wikipedia)
- Information architecture (Wikipedia)
- Interaction Design Pattern (Wikipedia)
- Interface Metaphor (Wikipedia)
- Iterative Design (Wikipedia)
- Keyboard Shortcut (Wikipedia)
- Material Design (Wikipedia)
- Mental Model (Wikipedia)
- Meta-moderation system (Wikipedia)
- Modal Window (Wikipedia)
- Mode (User Interface) (Wikipedia)
- NASA-TLX (Wikipedia)
- Navigation bar (Wikipedia)
- Negative space (Wikipedia)
- Net Promoter Score (Wikipedia)
- Participatory Design (Wikipedia)
- Peak-End Rule (Wikipedia)
- Poka-yoke (Wikipedia)
- Progressive disclosure (Wikipedia)
- Recall (Memory) (Wikipedia)
- Recognition Memory (Wikipedia)
- Responsive Web Design (Wikipedia)
- Search engine optimization (Wikipedia)
- Service Design (Wikipedia)
- Storyboard (Wikipedia)
- Stroop Effect (Wikipedia)
- System Usability Scale (Wikipedia)
- Thread (online communication) (Wikipedia)
- Typography (Wikipedia)
- Undo (Wikipedia)
- Usability Engineering (Wikipedia)
- Usability Testing (Wikipedia)
- Visual Hierarchy (Wikipedia)
- WAI-ARIA (Wikipedia)
- Web Accessibility (Wikipedia)
- Web Accessibility Initiative (Wikipedia)
- Web Colors (Wikipedia)
- Web Content Accessibility Guidelines (Wikipedia)
- Web navigation (Wikipedia)
- Web Typography (Wikipedia)
- White space (visual arts) (Wikipedia)