Design User Interfaces: Create intuitive and user-friendly interface designs
Implement UI Components: Build reusable interface components following established patterns
Solve UX Problems: Address common user experience challenges with proven solutions
Ensure Accessibility: Make interfaces accessible to all users including those with disabilities
Build Design Systems: Create consistent component libraries and design systems
Review Interfaces: Evaluate existing interfaces for usability and best practices
Prototype Interactions: Design and implement interactive UI behaviors
Optimize Navigation: Structure information architecture and navigation flows
Handle Form Design: Create effective forms with proper validation and feedback
Display Data: Present complex data in clear, scannable formats
Provide Feedback: Communicate system state and user actions effectively
Responsive Design: Adapt interfaces for different screen sizes and devices

Core Concepts

UI Patterns

UI patterns are reusable solutions to common design problems. They provide:

Consistency: Users recognize familiar patterns across applications
Efficiency: Proven solutions save design and development time
Usability: Patterns are tested and refined through widespread use
Communication: Shared vocabulary for designers and developers
Accessibility: Established patterns often include accessibility considerations

Design Systems

A design system is a collection of reusable components, patterns, and guidelines:

Component Library: Reusable UI building blocks
Design Tokens: Variables for colors, spacing, typography
Usage Guidelines: When and how to use each component
Accessibility Standards: WCAG compliance requirements
Code Examples: Implementation references
Documentation: Comprehensive guides and principles

Atomic Design Methodology

Breaking interfaces into atomic units:

Atoms: Basic building blocks (buttons, inputs, labels)
Molecules: Simple combinations of atoms (search field with button)
Organisms: Complex components (headers, forms, cards)
Templates: Page-level layouts
Pages: Specific instances with real content

Navigation Patterns

1. Tabs Pattern

Organize content into multiple panels shown one at a time.

When to Use:

Related content categories at the same hierarchy level
Limited number of sections (3-7 tabs ideal)
User needs to switch between views frequently
Screen space is limited

Anatomy:

[Tab 1] [Tab 2] [Tab 3]
─────────────────────────
Content for active tab

Best Practices:

Highlight active tab clearly
Keep tab labels short and descriptive
Maintain state when switching tabs
Use icons + text for clarity
Ensure keyboard navigation works
Consider mobile alternatives (dropdown, segmented control)

Accessibility:

Use ARIA role="tablist", role="tab", role="tabpanel"
Implement arrow key navigation
Set aria-selected and aria-controls
Ensure tab panels are focusable

Example HTML:

<div role="tablist" aria-label="Content sections">
  <button role="tab" aria-selected="true" aria-controls="panel-1" id="tab-1">
    Overview
  </button>
  <button role="tab" aria-selected="false" aria-controls="panel-2" id="tab-2">
    Details
  </button>
  <button role="tab" aria-selected="false" aria-controls="panel-3" id="tab-3">
    Settings
  </button>
</div>

<div role="tabpanel" id="panel-1" aria-labelledby="tab-1">
  Overview content...
</div>

2. Accordion Pattern

Vertically stacked sections with expand/collapse functionality.

When to Use:

Long pages with distinct sections
Progressive disclosure of information
FAQ sections
Settings panels
Limited screen space

Types:

Single Expand: Only one panel open at a time
Multi Expand: Multiple panels can be open simultaneously
Nested: Accordions within accordions

Best Practices:

Use clear, descriptive headers
Provide visual indicators (chevron, +/-)
Consider default state (collapsed vs first open)
Animate transitions smoothly (200-300ms)
Maintain content when collapsed
Allow keyboard control

Accessibility:

Use <button> for headers
Set aria-expanded attribute
Use aria-controls to link header and panel
Ensure keyboard navigation (Enter, Space, Arrow keys)
Provide proper heading hierarchy

Example Structure:

<div class="accordion">
  <h3>
    <button aria-expanded="false" aria-controls="section-1">
      Section Title
      <span class="icon" aria-hidden="true">▼</span>
    </button>
  </h3>
  <div id="section-1" hidden>
    <p>Section content...</p>
  </div>
</div>

3. Breadcrumbs Pattern

Show user's location in site hierarchy.

When to Use:

Deep site hierarchies (3+ levels)
E-commerce category navigation
Documentation sites
Multi-step processes

Best Practices:

Show current location clearly
Make previous levels clickable
Use appropriate separators (>, /, →)
Keep labels concise
Consider mobile truncation
Place at top of page

Accessibility:

Use <nav> with aria-label="Breadcrumb"
Mark current page with aria-current="page"
Provide sufficient color contrast
Ensure keyboard navigation

Example:

<nav aria-label="Breadcrumb">
  <ol>
    <li><a href="/">Home</a></li>
    <li><a href="/products">Products</a></li>
    <li><a href="/products/electronics">Electronics</a></li>
    <li aria-current="page">Laptops</li>
  </ol>
</nav>

4. Pagination Pattern

Navigate through large sets of content split across pages.

Types:

Numbered: Show page numbers (1, 2, 3...)
Load More: Button to load additional content
Infinite Scroll: Automatically load as user scrolls
Prev/Next: Simple navigation between pages

When to Use:

Search results
Product listings
Blog archives
Data tables

Best Practices:

Show current page clearly
Provide Previous/Next controls
Include First/Last page links
Show total page count or results
Use ellipsis for skipped pages (1 ... 5 6 7 ... 20)
Maintain scroll position appropriately
Consider load time and performance

Accessibility:

Use <nav> with aria-label="Pagination"
Mark current page with aria-current="page"
Disable non-functional links properly
Provide text alternatives for icon-only controls

5. Menu Patterns

Dropdown Menu

Reveals additional options on click or hover.

Best Practices:

Prefer click over hover for mobile compatibility
Add small delay before closing on hover
Indicate submenu with arrow icon
Keep menu depths shallow (2-3 levels max)
Position intelligently to avoid viewport overflow

Mega Menu

Large dropdown showing multiple columns and categories.

When to Use:

E-commerce sites with many categories
Sites with complex information architecture
When standard dropdown feels cramped

Best Practices:

Use grid layout for organization
Include visual elements (icons, images)
Group related items
Provide clear visual hierarchy
Close on outside click or Esc key

Hamburger Menu

Collapsible menu for mobile navigation.

Best Practices:

Use recognizable icon (three horizontal lines)
Provide label for clarity ("Menu")
Animate opening/closing
Disable body scroll when open
Include close button in menu
Consider alternatives for better discoverability

Accessibility:

Use proper ARIA roles and states
Support keyboard navigation
Announce menu state to screen readers
Ensure focus management

Form Patterns

1. Input Validation Pattern

Provide feedback on user input correctness.

Validation Types:

Required Fields: Must be completed
Format Validation: Email, phone, URL patterns
Length Validation: Min/max characters
Range Validation: Numeric ranges
Custom Rules: Business logic validation

Timing:

On Submit: Traditional approach, all errors at once
On Blur: Validate when leaving field
On Change: Real-time validation as typing
Hybrid: Combine approaches for best UX

Best Practices:

Mark required fields clearly (asterisk, "required" label)
Provide inline error messages near fields
Use clear, helpful error messages
Show success states when appropriate
Group related errors
Disable submit until form is valid (optional)
Preserve user input when showing errors
Support browser autofill

Error Message Guidelines:

Be specific about the problem
Explain how to fix it
Use friendly, non-technical language
Avoid blame ("You entered..." → "Email format invalid")

Visual Indicators:

Red border/background for errors
Green for success/valid
Icons to reinforce state
Sufficient color contrast

Accessibility:

Use aria-invalid="true" for invalid fields
Link errors with aria-describedby
Announce errors to screen readers
Ensure error messages are programmatically associated

Example:

<div class="form-field">
  <label for="email">
    Email Address <span aria-label="required">*</span>
  </label>
  <input
    type="email"
    id="email"
    aria-invalid="true"
    aria-describedby="email-error"
    required
  />
  <div id="email-error" class="error-message" role="alert">
    Please enter a valid email address
  </div>
</div>

2. Multi-Step Forms Pattern

Break long forms into multiple steps or pages.

When to Use:

Complex forms with many fields
Logical grouping of related information
Onboarding flows
Checkout processes
User registration

Components:

Progress Indicator: Show current step and total steps
Step Navigation: Move between steps
Review Step: Summary before submission
Save Draft: Allow returning later

Best Practices:

Keep steps focused on single topic
Show progress clearly
Allow backward navigation
Validate each step before proceeding
Save progress automatically
Provide way to skip optional steps
Show time estimate if possible
Use descriptive step titles

Progress Indicators:

Linear steps (1 → 2 → 3 → 4)
Step labels with numbers
Percentage completion
Visual timeline

Accessibility:

Use aria-label for step indicators
Announce step changes
Ensure keyboard navigation works
Mark completed/current/upcoming steps

3. Inline Editing Pattern

Edit content directly in place without separate form.

When to Use:

Spreadsheet-like interfaces
Quick edits to existing content
Data tables
User profiles
Settings pages

Interaction Modes:

Click to Edit: Click field to make editable
Always Editable: Fields always in edit mode
Edit Button: Explicit button to enter edit mode
Row/Item Edit: Edit entire row or item at once

Best Practices:

Provide clear visual feedback for editable areas
Show edit mode clearly (border, background change)
Include Save/Cancel actions
Auto-save on blur (optional)
Validate before saving
Show loading state during save
Handle errors gracefully
Keyboard shortcuts (Enter to save, Esc to cancel)

Visual States:

Default: Shows content, hints at editability
Hover: Indicate interactivity
Edit: Clear input/editing interface
Saving: Loading indicator
Saved: Brief success confirmation

Accessibility:

Use semantic HTML elements
Provide clear labels
Announce state changes
Support keyboard-only interaction

4. Search Patterns

Autocomplete/Typeahead

Show suggestions as user types.

Best Practices:

Debounce input (300ms delay)
Highlight matching characters
Show both recent and relevant results
Limit number of suggestions (5-10)
Allow keyboard navigation (arrows, Enter)
Clear suggestions on Esc
Show "No results" state
Include search button as fallback

Accessibility:

Use role="combobox" and aria-autocomplete
Announce suggestion count
Use aria-activedescendant for highlighted option
Ensure screen reader support

Filtering

Narrow results based on criteria.

Types:

Faceted Search: Multiple filter categories
Tag Filters: Select/deselect tags
Range Filters: Sliders for numeric ranges
Date Filters: Date pickers or presets

Best Practices:

Show active filters clearly
Display result count
Allow clearing individual or all filters
Update results in real-time or with Apply button
Preserve filter state in URL
Provide filter presets for common queries

5. Form Layout Patterns

Single Column

Best for mobile and simplicity.

Advantages:

Easier to scan vertically
Better mobile experience
Reduces cognitive load
Higher completion rates

Multi-Column

Use for related fields or space efficiency.

Best Practices:

Keep related fields together
Left-align labels
Use for short forms only
Stack on mobile

Label Positioning

Top Labels: Fastest completion, best for mobile
Left Labels: Space-efficient, good for data entry
Inline Labels: Placeholder-style (use carefully)

Data Display Patterns

1. Table Pattern

Display structured data in rows and columns.

When to Use:

Comparing data across multiple dimensions
Large datasets requiring sorting/filtering
Detailed data requiring precision
Admin interfaces and dashboards

Essential Features:

Sorting: Click headers to sort columns
Filtering: Search or filter by column
Pagination: Handle large datasets
Row Selection: Checkboxes for bulk actions
Responsive: Adapt for mobile screens

Advanced Features:

Column Resizing: Drag to adjust width
Column Reordering: Rearrange columns
Frozen Columns: Keep headers/first column visible
Expandable Rows: Show additional details
Inline Editing: Edit cells directly
Export: Download as CSV/Excel

Best Practices:

Left-align text, right-align numbers
Use consistent formatting
Highlight on hover
Show loading states
Handle empty states
Provide clear sorting indicators
Use zebra striping sparingly
Avoid horizontal scrolling when possible

Responsive Strategies:

Horizontal Scroll: Simple but less ideal
Card View: Transform rows into cards
Priority Columns: Hide less important columns
Expandable Rows: Hide details until expanded
Comparison View: Show 2-3 items side-by-side

Accessibility:

Use semantic <table>, <thead>, <tbody>, <th>, <td>
Add scope attribute to headers
Provide table caption
Use aria-sort for sortable columns
Ensure keyboard navigation for interactive elements

2. Card Pattern

Container for related information with visual hierarchy.

When to Use:

Product listings
User profiles
Dashboard widgets
Content previews
Mixed content types

Anatomy:

Image/Visual: Hero image or icon
Header: Title and metadata
Body: Description or details
Actions: Buttons or links
Footer: Supplementary info

Variations:

Product Card: Image, title, price, add to cart
User Card: Avatar, name, bio, follow button
Article Card: Thumbnail, headline, excerpt, read time
Stat Card: Number, label, trend indicator

Best Practices:

Consistent card sizes in grid
Clear visual hierarchy
Adequate padding and spacing
Hover states for interactivity
Limit actions to 1-2 primary actions
Use subtle shadows for depth
Ensure touch targets are large enough (44x44px min)

Grid Layouts:

Responsive columns (1 on mobile, 2-4 on desktop)
Equal height cards or masonry layout
Consistent gaps between cards

Accessibility:

Use semantic HTML
Provide alt text for images
Ensure sufficient contrast
Make entire card clickable when appropriate
Use heading tags for titles

3. List Pattern

Sequential display of similar items.

Types:

Simple List: Text-only items
Detailed List: Multiple lines per item
Interactive List: Clickable/selectable items
Grouped List: Organized by categories
Inbox List: Messages with preview, time, status

Best Practices:

Clear visual separation between items
Consistent item height or natural flow
Show item count
Highlight selected items
Provide quick actions
Support multi-select when appropriate
Implement virtual scrolling for long lists

Accessibility:

Use semantic list elements (<ul>, <ol>, <li>)
Provide unique IDs for items
Announce selection changes
Support keyboard navigation

4. Grid Pattern

Items arranged in rows and columns.

When to Use:

Image galleries
Product catalogs
App launchers
Icon sets
Media libraries

Grid Types:

Fixed Grid: Consistent item sizes
Masonry: Variable heights, Pinterest-style
Responsive Grid: Adapts to screen size

Best Practices:

Use CSS Grid or Flexbox
Maintain aspect ratios
Implement lazy loading for images
Provide grid/list view toggle
Consistent gaps
Handle empty states

Responsive Behavior:

Mobile: 1-2 columns
Tablet: 2-4 columns
Desktop: 4-6 columns

5. Dashboard Pattern

Overview of key metrics and data visualizations.

Components:

KPI Cards: Key metrics with trends
Charts: Line, bar, pie, area charts
Tables: Detailed data
Activity Feeds: Recent events
Quick Actions: Common tasks

Layout Strategies:

Fixed Layout: Predetermined positions
Draggable Widgets: User-customizable
Responsive Grid: Adapts to screen size

Best Practices:

Prioritize most important metrics
Use consistent timeframes
Provide context (comparisons, trends)
Enable drilling down for details
Update data in real-time or show last update time
Support customization
Export/share capabilities

Feedback Patterns

1. Toast/Snackbar Pattern

Brief, temporary message about system state or action result.

When to Use:

Confirm action completion (saved, deleted, sent)
Show brief notifications
Non-critical errors
Undo opportunities

Best Practices:

Display for 3-7 seconds
Position consistently (bottom center or top right)
One toast at a time, or queue multiple
Provide dismiss action
Avoid blocking important content
Keep message concise
Use appropriate colors (success: green, error: red, info: blue)
Offer undo for destructive actions

Don't Use For:

Critical errors requiring user action
Information user must read
Multiple simultaneous messages
Long messages

Accessibility:

Use role="status" or role="alert"
Announce to screen readers
Don't auto-dismiss too quickly
Provide manual dismiss option

Example Structure:

<div class="toast" role="status" aria-live="polite">
  <span>Settings saved successfully</span>
  <button aria-label="Close notification">×</button>
</div>

2. Modal/Dialog Pattern

Overlay that focuses user attention on specific task or information.

Types:

Alert Dialog: Important message requiring acknowledgment
Confirmation Dialog: Yes/No decisions
Form Dialog: Input collection
Lightbox: Image/media viewer

When to Use:

Critical decisions
Focus on single task
Collect required information
Interrupt destructive actions
Display full-size media

Best Practices:

Dim background content (overlay)
Disable background interaction
Provide clear close option (X button, Cancel, Esc key)
Focus first input or close button on open
Return focus to trigger element on close
Keep content concise
Position in viewport center
Prevent body scroll when open
Avoid modal inception (modal within modal)

Accessibility:

Use role="dialog" or role="alertdialog"
Set aria-modal="true"
Use aria-labelledby and aria-describedby
Implement focus trap
Support Esc to close
Announce to screen readers

Structure:

<div class="modal-overlay">
  <div role="dialog" aria-modal="true" aria-labelledby="modal-title">
    <h2 id="modal-title">Confirm Deletion</h2>
    <p>Are you sure you want to delete this item?</p>
    <div class="modal-actions">
      <button>Cancel</button>
      <button class="danger">Delete</button>
    </div>
  </div>
</div>

3. Loading States Pattern

Indicate ongoing process or data fetching.

Types:

Spinners: Circular or linear progress
Progress Bars: Show completion percentage
Skeleton Screens: Content placeholders
Shimmer Effect: Animated placeholder
Inline Loaders: Within buttons or sections

When to Use:

Page loading
API requests
File uploads
Background processing
Infinite scroll loading

Best Practices:

Show immediately (within 100ms)
Indicate progress when possible
Provide estimated time for long operations
Allow cancellation when appropriate
Use skeleton screens for better perceived performance
Avoid blocking entire UI unnecessarily
Show partial content as it loads

Skeleton Screens: Better UX than blank screens or spinners:

Match layout of actual content
Use subtle animation
Load content progressively
Maintain scroll position

Accessibility:

Use aria-busy="true" during loading
Announce loading completion
Provide text alternative for visual loaders
Ensure keyboard users can cancel

4. Empty States Pattern

Communicate when no content exists and guide next action.

Types:

First Use: Guide new users
No Results: Search/filter returned nothing
Error State: Something went wrong
Completed State: All tasks done

Components:

Illustration: Visual element
Heading: Clear message
Description: Explanation and guidance
Call-to-Action: Primary next step

Best Practices:

Be encouraging and helpful
Provide clear next action
Use appropriate tone for context
Include relevant illustration
Make CTA prominent
Offer alternatives or suggestions

Examples:

First Use:

"Welcome to your inbox!"
"You don't have any messages yet.
Why not invite your team?"
[Invite Team Button]

No Results:

"No results found for 'query'"
"Try different keywords or clear filters"
[Clear Filters Button]

Error:

"Oops, something went wrong"
"We couldn't load your data. Please try again."
[Retry Button]

Accessibility:

Provide meaningful text
Ensure images have alt text
Make CTAs keyboard accessible

5. Notification Badge Pattern

Indicate unread items or pending actions.

Types:

Numeric Badge: Show count (5, 12, 99+)
Dot Badge: Indicate presence without count
Status Badge: Online, offline, busy states

When to Use:

Unread messages
Pending notifications
Cart item count
User status indicators

Best Practices:

Position consistently (top-right of icon)
Use contrasting colors
Limit numbers (99+ for large counts)
Clear when viewed
Don't overuse
Size appropriately

Accessibility:

Include in accessible name
Announce updates to screen readers
Example: aria-label="Messages (3 unread)"

Interaction Patterns

1. Drag and Drop Pattern

Move or reorder items by dragging.

Use Cases:

File uploads
List reordering
Kanban boards
Image galleries
Form builders

Interaction States:

Draggable: Visual indicator (handle icon)
Dragging: Item follows cursor, original position shown
Drop Zone: Highlight valid targets
Invalid: Show when can't drop
Dropped: Animate to final position

Best Practices:

Provide clear drag handles
Show drop zones clearly
Animate transitions smoothly
Support keyboard alternatives
Confirm destructive drops
Auto-scroll when dragging near edges
Show preview of final state

Keyboard Alternative:

Select item
Cut/Copy
Navigate to target
Paste/Insert

Accessibility:

Implement keyboard controls
Announce drag/drop actions
Provide alternative interaction method
Use appropriate ARIA attributes

2. Infinite Scroll Pattern

Automatically load content as user scrolls down.

When to Use:

Social media feeds
Image galleries
News feeds
Product catalogs

Best Practices:

Show loading indicator
Provide "Load More" button as fallback
Maintain scroll position on back navigation
Include footer only after all content
Allow jumping to specific items
Show total count when possible
Provide way to stop auto-loading

Accessibility Concerns:

Announce new content to screen readers
Ensure keyboard users can access all content
Provide skip links
Consider pagination alternative

Performance:

Implement virtual scrolling for large lists
Lazy load images
Remove off-screen content
Debounce scroll events

3. Filter and Sort Pattern

Refine and organize displayed data.

Filter Types:

Checkboxes: Multi-select categories
Radio Buttons: Single selection
Range Sliders: Numeric ranges
Date Pickers: Date ranges
Search: Text matching

Sort Options:

Alphabetical (A-Z, Z-A)
Numeric (low-high, high-low)
Date (newest, oldest)
Relevance
Popularity

Best Practices:

Show active filters clearly
Display result count
Allow clearing individual filters
Provide "Clear All" option
Update results immediately or with Apply button
Preserve filter state in URL
Default to most useful sort
Show sort direction clearly

Mobile Considerations:

Use bottom sheet or sidebar for filters
Provide filter button with count badge
Allow applying filters before closing panel

4. Search Pattern

Help users find specific content or items.

Components:

Search Input: Text field for query
Search Button: Submit search
Clear Button: Reset search
Autocomplete: Suggestions while typing
Recent Searches: Previously searched terms
Filters: Refine results
Results: Matching items

Best Practices:

Make search prominent and easy to find
Show search icon
Provide keyboard shortcut (/, Ctrl+K)
Show search scope if limited
Highlight matching terms in results
Show "No results" state with suggestions
Preserve search in URL
Implement debouncing (300ms)

Search UX:

Instant search vs submit button
Autocomplete suggestions
Fuzzy matching for typos
Search within results
Sort by relevance

5. Undo/Redo Pattern

Reverse or replay actions.

When to Use:

Content editors
Drawing applications
Email clients
Any destructive action

Implementation:

Immediate Undo: Toast with undo button
Command Pattern: Stack of reversible actions
Keyboard Shortcuts: Ctrl+Z, Ctrl+Y/Ctrl+Shift+Z
Menu Options: Edit menu items

Best Practices:

Provide undo for all significant actions
Show undo option immediately (toast)
Set reasonable time limit (5-10 seconds)
Clear messaging about what will undo
Support multiple undo levels
Disable when no actions to undo
Persist undo history appropriately

Accessibility Patterns

WCAG Principles

Perceivable: Information must be presentable to users in ways they can perceive.

Provide text alternatives for non-text content
Provide captions and alternatives for multimedia
Create content that can be presented in different ways
Make it easier to see and hear content

Operable: Interface components must be operable by all users.

Make all functionality keyboard accessible
Give users enough time to read and use content
Don't design content that may cause seizures
Help users navigate and find content

Understandable: Information and UI operation must be understandable.

Make text readable and understandable
Make content appear and operate in predictable ways
Help users avoid and correct mistakes

Robust: Content must be robust enough to be interpreted by various user agents.

Maximize compatibility with current and future tools

Keyboard Navigation

Essential Patterns:

Tab: Move forward through interactive elements
Shift+Tab: Move backward
Enter/Space: Activate buttons and links
Arrow Keys: Navigate within components (menus, tabs)
Esc: Close dialogs, cancel actions
Home/End: Jump to first/last item

Focus Management:

Visible focus indicators (outline, highlight)
Logical tab order (follows visual order)
Focus trap in modals
Return focus after closing dialogs
Skip links for main content

Best Practices:

Don't rely on hover-only interactions
Ensure all interactive elements are keyboard accessible
Provide keyboard shortcuts for common actions
Document keyboard shortcuts
Test with keyboard only

ARIA (Accessible Rich Internet Applications)

Roles: Define what an element is or does:

role="button", role="tab", role="dialog"
role="navigation", role="main", role="search"
role="alert", role="status", role="log"

States and Properties:

aria-expanded: Expandable elements (true/false)
aria-selected: Selected items (true/false)
aria-checked: Checkboxes (true/false/mixed)
aria-disabled: Disabled state (true/false)
aria-hidden: Hide from screen readers (true/false)
aria-label: Accessible name
aria-labelledby: Reference to labeling element
aria-describedby: Reference to description
aria-live: Announce dynamic changes (polite/assertive)
aria-current: Current item in set (page/step/location)

Best Practices:

Use semantic HTML first
Add ARIA when semantic HTML isn't sufficient
Don't override native semantics
Keep ARIA attributes updated with UI state
Test with screen readers

Screen Reader Support

Considerations:

Logical heading hierarchy (h1, h2, h3...)
Descriptive link text (avoid "click here")
Alt text for images
Labels for form inputs
Error messages associated with inputs
Announce dynamic content changes
Provide text alternatives for visual information

Common Screen Readers:

NVDA (Windows, free)
JAWS (Windows, commercial)
VoiceOver (macOS, iOS)
TalkBack (Android)

Color and Contrast

Requirements:

Text Contrast: 4.5:1 for normal text, 3:1 for large text (WCAG AA)
Enhanced Contrast: 7:1 for normal, 4.5:1 for large (WCAG AAA)
UI Components: 3:1 for interface elements and graphics

Best Practices:

Don't rely on color alone to convey information
Use patterns, icons, or text in addition to color
Test with color blindness simulators
Provide high contrast mode
Ensure focus indicators have sufficient contrast

Form Accessibility

Labels:

Associate <label> with inputs using for/id
Don't use placeholder as only label
Group related inputs with <fieldset> and <legend>

Validation:

Associate errors with fields using aria-describedby
Mark invalid fields with aria-invalid="true"
Announce errors to screen readers with role="alert"
Don't rely on color alone for validation states

Instructions:

Provide clear instructions before form
Indicate required fields
Show format requirements
Offer example inputs

Responsive Patterns

Mobile-First Approach

Design for mobile screens first, then enhance for larger screens.

Benefits:

Forces focus on essential content
Progressive enhancement
Better performance on mobile
Easier than desktop-first

Breakpoints:

/* Mobile: 320px - 767px (default) */

/* Tablet: 768px+ */
@media (min-width: 768px) { }

/* Desktop: 1024px+ */
@media (min-width: 1024px) { }

/* Large Desktop: 1440px+ */
@media (min-width: 1440px) { }

Adaptive Layouts

Fluid Grids:

Use percentages or flexible units (fr, %)
CSS Grid and Flexbox
Container queries for component-level responsiveness

Flexible Images:

img {
  max-width: 100%;
  height: auto;
}

Responsive Typography:

Relative units (rem, em)
Fluid typography with clamp()
Adjust line length for readability (45-75 characters)

Mobile Navigation Patterns

Hamburger Menu:

Icon toggles slide-out menu
Most common but can hide navigation
Include label for clarity

Tab Bar:

Fixed bottom navigation (iOS pattern)
3-5 main sections
Always visible

Priority+:

Show items that fit, hide overflow in menu
Adapts to available space
Good for primary navigation

Bottom Sheet:

Slides up from bottom
Good for filters, actions
Easy thumb reach

Touch Interactions

Touch Targets:

Minimum 44x44px tap targets
Adequate spacing between targets
Larger targets for primary actions

Gestures:

Tap: Primary action
Double Tap: Zoom (use carefully)
Long Press: Show context menu
Swipe: Delete, archive, navigate
Pinch: Zoom
Pull to Refresh: Update content

Best Practices:

Provide visual feedback for touches
Avoid hover-dependent interactions
Support both portrait and landscape
Consider thumb zones (easy, stretch, hard to reach)
Test on actual devices

Responsive Tables

Strategies:

Horizontal Scroll: Simplest but least ideal
Priority Columns: Hide less important columns
Stacked Cards: Each row becomes a card
Flip Headers: Rotate headers to row labels
Comparison View: Show 2-3 items side by side

Example - Stacked Cards:

Desktop:
| Name | Email | Role | Status |

Mobile:
┌─────────────┐
│ John Doe    │
│ Email: j@   │
│ Role: Admin │
│ Status: ✓   │
└─────────────┘

Common UI Patterns Checklist

Button Patterns

Primary action button (filled, high contrast)
Secondary action button (outlined or ghost)
Tertiary/text buttons for low priority actions
Icon buttons for common actions
Button groups for related actions
Toggle buttons for on/off states
Floating action button (FAB) for primary mobile action
Loading state in buttons
Disabled state with reduced opacity

Input Patterns

Text input with label and placeholder
Password input with show/hide toggle
Search input with icon and clear button
Textarea for multi-line input
Select/dropdown for choosing from options
Radio buttons for single selection from few options
Checkboxes for multi-selection
Toggle switch for on/off settings
Date picker for date selection
File upload with drag-and-drop
Range slider for numeric input
Color picker for color selection

Navigation Patterns

Top navigation bar
Sidebar navigation
Breadcrumb navigation
Pagination
Tabs
Stepper for multi-step processes
Anchor links for in-page navigation
Back to top button

Overlay Patterns

Modal dialogs
Slideover/drawer
Popover for contextual information
Tooltip for hints
Dropdown menu
Context menu (right-click)
Bottom sheet (mobile)

Feedback Patterns

Toast notifications
Alert banners
Inline messages
Loading spinners
Progress bars
Skeleton screens
Success/error states
Empty states

Content Patterns

Card layouts
List views
Grid layouts
Table displays
Timeline/activity feed
Hero section
Image gallery
Carousel/slider
Video player
Avatar/profile picture

Design Tokens

Standardized design variables for consistency.

Color Tokens

Primary Colors:
- primary-50 to primary-900 (shades)

Semantic Colors:
- success (green)
- warning (yellow)
- error (red)
- info (blue)

Neutral Colors:
- gray-50 to gray-900

Text Colors:
- text-primary
- text-secondary
- text-disabled

Spacing Tokens

- spacing-xs: 4px
- spacing-sm: 8px
- spacing-md: 16px
- spacing-lg: 24px
- spacing-xl: 32px
- spacing-2xl: 48px

Typography Tokens

Font Sizes:
- text-xs: 12px
- text-sm: 14px
- text-base: 16px
- text-lg: 18px
- text-xl: 20px
- text-2xl: 24px

Font Weights:
- normal: 400
- medium: 500
- semibold: 600
- bold: 700

Line Heights:
- tight: 1.25
- normal: 1.5
- relaxed: 1.75

Border Radius Tokens

- rounded-none: 0
- rounded-sm: 2px
- rounded: 4px
- rounded-md: 6px
- rounded-lg: 8px
- rounded-xl: 12px
- rounded-full: 9999px

Shadow Tokens

- shadow-sm: subtle elevation
- shadow: default elevation
- shadow-md: medium elevation
- shadow-lg: large elevation
- shadow-xl: maximum elevation

Performance Considerations

Perceived Performance

Show content immediately (skeleton screens)
Progressive loading
Optimistic UI updates
Smooth animations (60fps)

Actual Performance

Code splitting
Lazy loading images and components
Virtual scrolling for long lists
Debouncing and throttling
Caching strategies
Minimize reflows and repaints

Image Optimization

Appropriate formats (WebP, AVIF)
Responsive images (srcset)
Lazy loading
Blur-up placeholder technique
Proper sizing and compression

Testing UI Patterns

Usability Testing

User interviews
Task completion testing
A/B testing
Heat maps and click tracking
Session recordings

Accessibility Testing

Keyboard navigation testing
Screen reader testing
Color contrast checking
Automated accessibility audits (axe, Lighthouse)
Manual WCAG compliance review

Cross-browser Testing

Test in major browsers (Chrome, Firefox, Safari, Edge)
Test on actual devices
Use browser dev tools for responsive testing
Check for progressive enhancement

Performance Testing

Lighthouse audits
Core Web Vitals
Loading time testing
Interaction latency
Animation frame rates

Resources and Tools

Design Systems

Material Design (Google)
Human Interface Guidelines (Apple)
Fluent Design (Microsoft)
Polaris (Shopify)
Carbon (IBM)
Ant Design
Atlassian Design System

Component Libraries

Shadcn UI
Radix UI
Headless UI
Chakra UI
MUI (Material-UI)
Ant Design
Bootstrap
Tailwind UI

Accessibility Tools

axe DevTools
WAVE
Lighthouse
NVDA (screen reader)
VoiceOver (screen reader)
Color contrast checkers

Prototyping Tools

Figma
Sketch
Adobe XD
Framer
InVision

Pattern Libraries

UI Patterns
Patternry
Mobile Patterns
Pttrns

Conclusion

UI design patterns provide proven solutions to common interface challenges. By understanding and applying these patterns appropriately, you can create:

Consistent Interfaces: Familiar patterns reduce learning curve
Accessible Experiences: Built-in accessibility considerations
Efficient Development: Reusable components and standardized approaches
Better UX: Tested patterns that users understand

Remember:

Choose patterns appropriate for your context
Customize patterns to fit your brand and users
Test with real users
Prioritize accessibility
Stay updated with evolving best practices
Focus on user needs over trends

UI patterns are guidelines, not strict rules. Adapt them thoughtfully to create interfaces that serve your users effectively.

ui-design-patterns

UI Design Patterns

When to Use This Skill