Frontend Ui Ux Design

Frontend UI/UX Design

Overview

This skill enables creation of production-ready frontend UI/UX designs from research through implementation. Follow a structured design process that balances user needs, business goals, technical constraints, and accessibility requirements.

Design Workflow

1. Understand Requirements

Gather Context:

• Project goals and success metrics
• Target audience and user personas
• Technical constraints (frameworks, browsers, devices)
• Brand guidelines and design language
• Accessibility requirements (WCAG level)

Clarify Scope:

• Type of deliverable (wireframes, mockups, design system, component library)
• Fidelity level (low, medium, high)
• Responsive breakpoints needed
• Browser and device support

2. Research & Strategy

User Research:

• Analyze user needs, goals, and pain points
• Review existing analytics or user feedback
• Identify key user journeys and scenarios
• Define information architecture

For complete research process: See uiux-design-process.md for detailed research, personas, journey mapping, and information architecture guidelines.

3. Design & Prototype

Create Wireframes:

• Start with low-fidelity layouts
• Focus on content hierarchy and structure
• Define user flows for key tasks
• Iterate based on feedback

Apply Visual Design:

• Define color palette (primary, secondary, semantic colors)
• Establish typography scale and spacing system
• Design components with variants and states
• Ensure visual hierarchy and consistency

For design principles: See design-principles.md for visual hierarchy, consistency, simplicity, feedback, and error prevention guidelines.

For design systems: See design-systems.md when building comprehensive design systems with design tokens, governance, and documentation.

4. Ensure Accessibility

WCAG Compliance:

• Minimum contrast ratios (4.5:1 for text, 3:1 for large text/UI)
• Keyboard navigation support
• Screen reader compatibility (semantic HTML, ARIA labels)
• Focus indicators and skip links
• Alternative text for images

For complete accessibility guidance: See accessibility-guide.md for WCAG 2.1/2.2 standards, ARIA patterns, keyboard navigation, testing tools, and compliance checklists.

5. Design Responsive Layouts

Mobile-First Approach:

• Start with mobile design (320px minimum)
• Progressively enhance for tablets (768px+)
• Optimize for desktop (1024px+, 1440px+)
• Use fluid grids and flexible images
• Apply appropriate layout patterns

For responsive patterns: See responsive-design.md for breakpoints, layout patterns (fluid grid, column drop, off-canvas), responsive navigation, typography, images, tables, forms, and container queries.

6. Build Component Libraries

Component Design:

• Design atomic components (buttons, inputs, icons)
• Create molecule components (form fields, cards, menus)
• Build organism components (headers, forms, sections)
• Define component variants, states, and props
• Document component usage patterns

For component details: See component-library.md and component-patterns.md for comprehensive component catalogs with specifications, variants, states, and usage guidelines.

7. Optimize Performance

Performance Considerations:

• Optimize images (WebP/AVIF, lazy loading, responsive images)
• Minimize CSS/JS bundle sizes
• Implement critical CSS for above-the-fold content
• Use efficient animations (transform, opacity)
• Monitor Core Web Vitals (LCP, FID, CLS)

For optimization details: See performance-optimization.md for image optimization, code splitting, caching strategies, and performance budgets.

8. Document & Handoff

Design Deliverables:

• Design specifications (colors, typography, spacing)
• Component documentation with variants
• Responsive breakpoint designs
• Accessibility report and compliance checklist
• Implementation guidelines and design tokens

For output format: See output-format.md for structured deliverable formats including design briefs, wireframes, visual designs, component libraries, and developer handoff materials.

Quick Reference

When to Load References

• [uiux-design-process.md](references/uiux-design-process.md) - Full design process from research through prototyping and user testing
• [design-principles.md](references/design-principles.md) - Core design principles (hierarchy, consistency, simplicity, feedback)
• [design-systems.md](references/design-systems.md) - Building comprehensive design systems with tokens and governance
• [accessibility-guide.md](references/accessibility-guide.md) - WCAG compliance, ARIA patterns, keyboard navigation, testing
• [responsive-design.md](references/responsive-design.md) - Breakpoints, layout patterns, responsive components
• [component-library.md](references/component-library.md) - Atomic/molecular component catalog with specifications
• [component-patterns.md](references/component-patterns.md) - Component patterns (forms, navigation, data display, feedback)
• [performance-optimization.md](references/performance-optimization.md) - Image optimization, code splitting, Core Web Vitals
• [design-tools-and-resources.md](references/design-tools-and-resources.md) - Design tools, frameworks, icon libraries, resources
• [output-format.md](references/output-format.md) - Structured deliverable formats for handoff
• [examples.md](references/examples.md) - Real-world design examples and patterns
• [design-checklist.md](references/design-checklist.md) - Quality checklist before finalizing designs

Key Principles

1. User-Centered Design

• Always start with user needs and goals
• Validate assumptions through research and testing
• Prioritize usability over aesthetics

2. Accessibility First

• Design for all users, including those with disabilities
• Follow WCAG 2.1 AA standards minimum
• Test with keyboard navigation and screen readers

3. Mobile-First Responsive

• Start with smallest screen sizes
• Progressively enhance for larger screens
• Ensure touch-friendly interactions (44x44px minimum)

4. Design System Thinking

• Build reusable, consistent components
• Document patterns and usage guidelines
• Maintain design token systems

5. Performance Matters

• Optimize images and assets
• Keep bundle sizes small
• Monitor and improve Core Web Vitals

6. Iterative Process

• Start with low-fidelity, iterate to high-fidelity
• Gather feedback early and often
• Refine based on user testing and metrics

Accessibility Guidelines (WCAG 2.1/2.2)

Comprehensive guide for designing and implementing accessible user interfaces.

WCAG Principles: POUR

1. Perceivable

Information and UI components must be presentable to users in ways they can perceive.

2. Operable

UI components and navigation must be operable.

3. Understandable

Information and operation of UI must be understandable.

4. Robust

Content must be robust enough to be interpreted by a wide variety of user agents, including assistive technologies.

---

WCAG Conformance Levels

Level A (Minimum)

Basic accessibility features. Legal requirement in many jurisdictions.

Level AA (Recommended)

Addresses most common accessibility barriers. Widely adopted as standard.

Level AAA (Enhanced)

Highest level of accessibility. Not required for entire sites, but aim for critical content.

Recommendation: Target Level AA for all public-facing websites and applications.

---

Color & Contrast

Contrast Ratios (WCAG 2.1)

Level AA

• Normal text: 4.5:1
• Large text (18pt+ or 14pt+ bold): 3:1
• UI components and graphics: 3:1

Level AAA

• Normal text: 7:1
• Large text: 4.5:1

Best Practices

1. Don't rely on color alone

• Bad: Red = error, green = success (color only)
• Good: Red + error icon + "Error" text

2. Test with color blindness simulators

• Protanopia (red-blind)
• Deuteranopia (green-blind)
• Tritanopia (blue-blind)
• Achromatopsia (no color)

3. Use patterns or textures

• Charts: Use patterns in addition to colors
• Status indicators: Icons + color

4. Provide high contrast mode

• Support prefers-contrast media query
• Windows high contrast mode compatibility

Tools

• WebAIM Contrast Checker
• Chrome DevTools Contrast Checker
• Stark (Figma plugin)
• Color Oracle (color blindness simulator)

---

Keyboard Accessibility

Essential Requirements

1. All functionality via keyboard

• No mouse-only features
• Tab to navigate
• Enter/Space to activate
• Escape to close/cancel

2. Logical tab order

• Follow visual layout
• Top to bottom, left to right
• Use tabindex="0" to include in order
• Avoid positive tabindex values

3. Visible focus indicator

• Minimum 2px outline
• Sufficient contrast (3:1)
• Never remove outline without alternative

   /* Good */
   :focus {
     outline: 2px solid #0066CC;
     outline-offset: 2px;
   }
   
   /* Also good - custom focus style */
   :focus {
     outline: none; /* Remove default */
     box-shadow: 0 0 0 3px rgba(0, 102, 204, 0.5);
   }
   
   /* Bad */
   :focus {
     outline: none; /* No alternative provided */
   }

4. Skip links

• "Skip to main content" at page top
• Hidden until focused

   <a href="#main" class="skip-link">Skip to main content</a>
   
   <style>
   .skip-link {
     position: absolute;
     top: -40px;
     left: 0;
     background: #000;
     color: #fff;
     padding: 8px;
     z-index: 100;
   }
   
   .skip-link:focus {
     top: 0;
   }
   </style>

5. Focus management

• Move focus to modal when opened
• Return focus to trigger when closed
• Focus first error on form submission
• Trap focus in modal dialogs

Keyboard Shortcuts

Common Patterns

• Tab: Next focusable element
• Shift+Tab: Previous focusable element
• Enter: Activate button/link
• Space: Activate button, check checkbox
• Arrow keys: Navigate menu, tabs, radio buttons
• Escape: Close modal, clear search, cancel operation
• Home/End: First/last item in list

Custom Shortcuts

• Document them clearly
• Avoid conflicts with browser/screen reader shortcuts
• Provide alternatives (don't require shortcuts)
• Make them discoverable

---

Screen Reader Support

Semantic HTML

Use correct elements

<!-- Good -->
<button>Click me</button>
<a href="/page">Link</a>
<nav>...</nav>
<main>...</main>
<header>...</header>
<footer>...</footer>

<!-- Bad -->
<div onclick="...">Click me</div>
<span class="link">Link</span>
<div class="nav">...</div>

ARIA (Accessible Rich Internet Applications)

When to use ARIA

• When semantic HTML is insufficient
• For complex widgets (tree view, tabs, accordion)
• To enhance existing HTML

ARIA Rules

1. Use semantic HTML first 2. Don't change native semantics 3. All interactive elements must be keyboard accessible 4. Don't use aria-hidden on focusable elements 5. All interactive elements must have accessible names

Essential ARIA Attributes

Roles

<div role="button">...</div>
<div role="dialog">...</div>
<div role="navigation">...</div>
<div role="alert">...</div>
<div role="status">...</div>

States & Properties

<!-- Expanded/collapsed -->
<button aria-expanded="false" aria-controls="menu">Menu</button>

<!-- Current page -->
<a href="/about" aria-current="page">About</a>

<!-- Disabled -->
<button aria-disabled="true">Submit</button>

<!-- Required field -->
<input aria-required="true" />

<!-- Invalid field -->
<input aria-invalid="true" aria-describedby="error" />
<span id="error">Email is invalid</span>

<!-- Labels and descriptions -->
<button aria-label="Close dialog">×</button>
<input aria-labelledby="label" aria-describedby="help" />

Live Regions

<!-- Polite: Wait for pause -->
<div aria-live="polite">Search returned 10 results</div>

<!-- Assertive: Interrupt immediately -->
<div aria-live="assertive" role="alert">Error: Connection lost</div>

<!-- Off: No announcements (default) -->
<div aria-live="off">...</div>

Alternative Text

Images

<!-- Informative image -->
<img src="chart.png" alt="Sales increased 25% in Q4" />

<!-- Decorative image -->
<img src="decoration.png" alt="" />
<!-- or -->
<img src="decoration.png" role="presentation" />

<!-- Linked image -->
<a href="/profile">
  <img src="avatar.png" alt="View profile" />
</a>

<!-- Complex image -->
<img src="complex-chart.png" alt="Quarterly sales data" 
     longdesc="chart-description.html" />

Icon buttons

<!-- With text -->
<button>
  <svg aria-hidden="true">...</svg>
  Delete
</button>

<!-- Icon only -->
<button aria-label="Delete item">
  <svg aria-hidden="true">...</svg>
</button>

Form Accessibility

Labels

<!-- Good: Explicit label -->
<label for="email">Email</label>
<input type="email" id="email" />

<!-- Good: Implicit label -->
<label>
  Email
  <input type="email" />
</label>

<!-- Bad: Placeholder as label -->
<input type="email" placeholder="Email" /> <!-- No label! -->

Helper text and errors

<label for="password">Password</label>
<input
  type="password"
  id="password"
  aria-describedby="password-help"
  aria-invalid="true"
  aria-errormessage="password-error"
/>
<p id="password-help">Must be at least 8 characters</p>
<p id="password-error" role="alert">Password is too short</p>

Required fields

<!-- Visual and programmatic indication -->
<label for="name">
  Name <span aria-label="required">*</span>
</label>
<input type="text" id="name" required aria-required="true" />

Fieldset and legend (for grouped inputs)

<fieldset>
  <legend>Contact preferences</legend>
  <label><input type="checkbox" /> Email</label>
  <label><input type="checkbox" /> SMS</label>
  <label><input type="checkbox" /> Phone</label>
</fieldset>

---

Focus Management

Modal Dialogs

// Open modal
function openModal(modal) {
  // Store last focused element
  const lastFocused = document.activeElement;
  
  // Show modal
  modal.classList.add('open');
  
  // Move focus to modal
  modal.focus();
  
  // Trap focus
  trapFocus(modal);
  
  // Close handler
  modal.addEventListener('close', () => {
    // Return focus to trigger
    lastFocused.focus();
  });
}

// Focus trap
function trapFocus(element) {
  const focusableElements = element.querySelectorAll(
    'button, [href], input, select, textarea, [tabindex]:not([tabindex="-1"])'
  );
  const firstFocusable = focusableElements[0];
  const lastFocusable = focusableElements[focusableElements.length - 1];
  
  element.addEventListener('keydown', (e) => {
    if (e.key === 'Tab') {
      if (e.shiftKey) {
        if (document.activeElement === firstFocusable) {
          e.preventDefault();
          lastFocusable.focus();
        }
      } else {
        if (document.activeElement === lastFocusable) {
          e.preventDefault();
          firstFocusable.focus();
        }
      }
    }
  });
}

Single Page Apps (SPA)

// Announce route changes
function navigateToPage(page) {
  // Load content
  loadContent(page);
  
  // Update page title
  document.title = page.title;
  
  // Move focus to main content
  const main = document.querySelector('main');
  main.tabIndex = -1;
  main.focus();
  
  // Announce to screen readers
  const announcement = document.createElement('div');
  announcement.setAttribute('role', 'status');
  announcement.setAttribute('aria-live', 'polite');
  announcement.textContent = `Navigated to ${page.title}`;
  document.body.appendChild(announcement);
  
  // Remove announcement after it's read
  setTimeout(() => announcement.remove(), 1000);
}

---

Touch & Mobile Accessibility

Touch Target Sizes

Minimum sizes

• iOS: 44x44 points
• Android: 48x48 dp
• WCAG 2.1 Level AAA: 44x44 CSS pixels

Implementation

/* Button may be visually smaller */
.button {
  display: inline-flex;
  padding: 8px 16px;
  /* Ensure at least 44px height */
  min-height: 44px;
  align-items: center;
}

/* Increase clickable area with pseudo-element */
.icon-button {
  position: relative;
  width: 24px;
  height: 24px;
}

.icon-button::before {
  content: '';
  position: absolute;
  top: -10px;
  left: -10px;
  right: -10px;
  bottom: -10px;
  /* Creates 44x44px touch target */
}

Spacing Between Targets

• Minimum 8px spacing between touch targets
• Prevents accidental activation

Gestures

• Provide alternatives to complex gestures
• Swipe: Also provide buttons
• Pinch-to-zoom: Also provide zoom buttons
• Multi-finger: Also provide single-finger alternative

---

Motion & Animation

Prefers Reduced Motion

/* Default: with animation */
.button {
  transition: background 0.3s ease;
}

/* Respect user preference */
@media (prefers-reduced-motion: reduce) {
  .button {
    transition: none;
  }
  
  * {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

Safe Animations

Avoid

• Flashing more than 3 times per second
• Parallax scrolling (can cause vestibular issues)
• Excessive motion
• Auto-playing videos with sound

Best Practices

• Provide play/pause controls
• Respect reduced motion preference
• Use subtle animations
• Avoid animations for critical information

---

Content Accessibility

Headings

Hierarchy

<h1>Page Title</h1>
  <h2>Section</h2>
    <h3>Subsection</h3>
    <h3>Subsection</h3>
  <h2>Section</h2>

• Don't skip levels (h1 → h3)
• Use for structure, not styling
• One h1 per page (usually)

Link Text

<!-- Good: Descriptive -->
<a href="/report.pdf">Download Q4 Financial Report (PDF, 2MB)</a>

<!-- Bad: Generic -->
<a href="/report.pdf">Click here</a>

<!-- Bad: URL as text -->
<a href="https://example.com">https://example.com</a>

Language

<!-- Page language -->
<html lang="en">

<!-- Different language section -->
<p>The French word for hello is <span lang="fr">bonjour</span>.</p>

Abbreviations

<abbr title="World Wide Web Consortium">W3C</abbr>

---

Testing Checklist

Automated Testing

Tools

• Lighthouse (Chrome DevTools)
• axe DevTools
• WAVE Browser Extension
• Pa11y
• Jest-axe (for React)

What they catch

• Missing alt text
• Insufficient contrast
• Missing labels
• ARIA errors
• Heading hierarchy

Limitations

• Only catch ~30% of issues
• Can't test keyboard navigation
• Can't test screen reader experience
• Can't test logical reading order

Manual Testing

Keyboard Navigation

• [ ] Tab through entire page
• [ ] All interactive elements reachable
• [ ] Visible focus indicator
• [ ] Logical tab order
• [ ] No keyboard traps
• [ ] Modal focus trapped correctly
• [ ] Escape closes modals

Screen Reader Testing

• [ ] Test with NVDA (Windows, free)
• [ ] Test with JAWS (Windows, paid)
• [ ] Test with VoiceOver (macOS/iOS, built-in)
• [ ] Test with TalkBack (Android, built-in)
• [ ] All images have alt text
• [ ] Form labels announced
• [ ] Errors announced
• [ ] Dynamic content announced
• [ ] Headings navigable
• [ ] Links descriptive

Visual Testing

• [ ] Zoom to 200% (WCAG)
• [ ] Test with browser zoom
• [ ] Test with Windows high contrast mode
• [ ] Simulate color blindness
• [ ] Check contrast ratios
• [ ] Test without images
• [ ] Test without CSS

Mobile Testing

• [ ] Touch targets at least 44x44
• [ ] Adequate spacing between targets
• [ ] Pinch to zoom allowed
• [ ] Orientation changes supported
• [ ] Screen reader gestures work

---

Quick Wins

Easy improvements with high impact:

1. Add alt text to images 2. Ensure sufficient color contrast 3. Make focus visible 4. Use semantic HTML 5. Label all form inputs 6. Add skip link 7. Make links descriptive 8. Use heading hierarchy 9. Don't disable zoom 10. Test with keyboard

---

Common Mistakes

1. Placeholder as label → Always provide label 2. Removing focus outline → Provide alternative 3. Click div/span → Use button/link 4. Color-only indicators → Add icon/text 5. Low contrast text → Increase contrast 6. Auto-playing media → Provide controls 7. Small touch targets → Minimum 44x44px 8. Keyboard traps → Allow escape 9. Missing alt text → Describe image 10. Generic link text → Be descriptive

---

Resources

Official Guidelines

• WCAG 2.1: <https://www.w3.org/WAI/WCAG21/quickref/>
• ARIA Authoring Practices: <https://www.w3.org/WAI/ARIA/apg/>

Testing Tools

• axe DevTools: <https://www.deque.com/axe/>
• WAVE: <https://wave.webaim.org/>
• Lighthouse: Built into Chrome DevTools

Learning Resources

• WebAIM: <https://webaim.org/>
• A11y Project: <https://www.a11yproject.com/>
• Inclusive Components: <https://inclusive-components.design/>

Screen Readers

• NVDA (Windows): <https://www.nvaccess.org/>
• VoiceOver (Mac/iOS): Built-in
• TalkBack (Android): Built-in
• JAWS (Windows): <https://www.freedomscientific.com/>

Design System Components Reference

Comprehensive guide for designing and implementing common UI components.

Basic Components

Button

Purpose: Trigger actions, submit forms, navigate

Variants

• Primary: Main call-to-action (solid background, high contrast)
• Secondary: Less prominent actions (outlined or light fill)
• Tertiary/Ghost: Subtle actions (text-only or minimal style)
• Danger/Destructive: Delete, remove actions (red/warning color)
• Icon Button: Icon-only for compact spaces

Sizes

• Small: 32px height (dense UIs, tables)
• Medium: 40px height (default)
• Large: 48px height (hero sections, mobile CTAs)

States

• Default
• Hover (subtle background change)
• Active/Pressed (darker/pressed effect)
• Focus (visible outline for keyboard)
• Disabled (reduced opacity, no interaction)
• Loading (spinner, disabled interaction)

Specifications

/* Primary Button */
.button-primary {
  background: var(--color-primary);
  color: var(--color-white);
  border: none;
  border-radius: 4px;
  padding: 10px 16px;
  font-weight: 600;
  min-width: 80px;
  cursor: pointer;
  transition: background 0.2s ease;
}

.button-primary:hover {
  background: var(--color-primary-dark);
}

.button-primary:focus {
  outline: 2px solid var(--color-primary);
  outline-offset: 2px;
}

Accessibility

• Minimum size: 44x44px (touch devices)
• Clear focus indicator
• Descriptive text or aria-label
• Disabled state prevents interaction
• Loading state announces to screen readers

---

Input Fields

Types

• Text input
• Email input
• Password input
• Number input
• Textarea (multi-line)
• Search input

Anatomy

• Label (above input)
• Input field
• Helper text (below, descriptive)
• Error message (replaces helper text)
• Optional indicator or required asterisk

States

• Default (empty)
• Filled (with value)
• Focus (active, outlined)
• Disabled (non-editable)
• Error (validation failed)
• Success (validation passed)

Specifications

<div class="form-field">
  <label for="email" class="form-label">
    Email Address <span class="required">*</span>
  </label>
  <input
    type="email"
    id="email"
    class="form-input"
    placeholder="you@example.com"
    aria-describedby="email-helper"
    required
  />
  <p id="email-helper" class="form-helper">
    We'll never share your email.
  </p>
</div>

Best Practices

• Labels always visible (not placeholder-only)
• Clear placeholder as example
• Helper text for format or requirements
• Inline validation after blur
• Error messages specific and actionable
• Appropriate input type for mobile keyboards

Accessibility

• Label associated with input (for attribute)
• Helper text associated (aria-describedby)
• Error messages announced (aria-live)
• Required fields indicated (aria-required)

---

Checkbox

Purpose: Select multiple options from a list

States

• Unchecked
• Checked
• Indeterminate (partial selection, parent checkbox)
• Disabled
• Focus

Specifications

<div class="checkbox-wrapper">
  <input
    type="checkbox"
    id="terms"
    class="checkbox-input"
  />
  <label for="terms" class="checkbox-label">
    I agree to the terms and conditions
  </label>
</div>

Best Practices

• Minimum size: 20x20px (input), 44x44px (clickable area including label)
• Label clickable (increases target size)
• Clear visual checked state
• Use for independent selections

Accessibility

• Associated label
• Keyboard accessible (Space to toggle)
• Clear focus indicator
• aria-checked for custom checkboxes

---

Radio Button

Purpose: Select one option from a list

States

• Unselected
• Selected
• Disabled
• Focus

Best Practices

• Group related options
• Pre-select default when appropriate
• Clear visual selected state
• Use when only one choice allowed

Accessibility

• Grouped with fieldset and legend
• Arrow keys navigate between options
• Only one focusable in group (selected one)

---

Select Dropdown

Purpose: Choose one option from many

Variants

• Single select
• Multi-select
• Searchable select
• Grouped options

States

• Closed
• Open/Expanded
• Selected
• Focus
• Disabled

Best Practices

• Default placeholder or selected value
• Searchable for 7+ options
• Group related options
• Scroll long lists
• Clear selected value option

Accessibility

• Keyboard navigation (arrows, type to search)
• Announce selected value
• Escape to close
• Focus management

---

Navigation Components

Navigation Bar

Types

• Top Nav: Horizontal, global navigation
• Sidebar Nav: Vertical, many items, hierarchical
• Bottom Tab Nav: Mobile, 3-5 primary sections

Components

• Logo/Brand
• Primary navigation links
• Search bar (optional)
• User menu/profile
• Notifications (optional)
• CTA button (optional)

Responsive Behavior

• Desktop: Full horizontal menu
• Tablet: Condensed menu or icons
• Mobile: Hamburger menu or bottom tabs

Specifications

<nav class="navbar" role="navigation" aria-label="Main navigation">
  <div class="navbar-brand">
    <a href="/" class="navbar-logo">Brand</a>
  </div>
  
  <ul class="navbar-menu">
    <li><a href="/products" class="navbar-link">Products</a></li>
    <li><a href="/about" class="navbar-link">About</a></li>
    <li><a href="/contact" class="navbar-link">Contact</a></li>
  </ul>
  
  <div class="navbar-actions">
    <button class="navbar-user">Profile</button>
  </div>
</nav>

Accessibility

• Semantic nav element
• Current page indicator (aria-current)
• Skip to main content link
• Keyboard accessible
• Focus visible

---

Breadcrumbs

Purpose: Show current location in hierarchy

Best Practices

• Show hierarchy (Home > Category > Subcategory > Page)
• Make all levels clickable except current
• Use chevron or slash separators
• Don't include on homepage
• Mobile: Show only last 2-3 levels

Accessibility

• nav element with aria-label="Breadcrumb"
• Semantic ordered list
• aria-current="page" on current item

---

Tabs

Purpose: Organize related content into separate views

Types

• Horizontal tabs (default)
• Vertical tabs (sidebar)
• Pills (rounded background)

Best Practices

• 3-7 tabs ideal
• Clear, concise labels
• Indicate active tab clearly
• Don't use for sequential steps (use stepper)
• Load content on demand or pre-load

Accessibility

• ARIA tablist, tab, tabpanel roles
• Arrow keys navigate tabs
• Tab key enters content
• aria-selected indicates active
• aria-controls links tab to panel

---

Pagination

Purpose: Navigate through multiple pages of content

Components

• Previous button
• Page numbers
• Current page indicator
• Next button
• Optional: First/Last buttons
• Optional: Items per page selector

Best Practices

• Show 5-7 page numbers
• Truncate with ellipsis (1 ... 5 6 7 ... 20)
• Disable Previous on first page, Next on last
• Highlight current page
• Include total pages or items

---

Feedback Components

Alert / Notification

Types by Severity

• Info: Informational messages (blue)
• Success: Successful operations (green)
• Warning: Caution messages (yellow/orange)
• Error: Errors and failures (red)

Variants

• Inline Alert: Contextual, stays on page
• Toast/Snackbar: Temporary, auto-dismiss
• Banner: Page-level, persistent

Components

• Icon (semantic for type)
• Title (optional)
• Message text
• Action button (optional)
• Close button

Specifications

<div class="alert alert-success" role="alert">
  <svg class="alert-icon" aria-hidden="true">...</svg>
  <div class="alert-content">
    <h4 class="alert-title">Success!</h4>
    <p class="alert-message">Your changes have been saved.</p>
  </div>
  <button class="alert-close" aria-label="Close alert">×</button>
</div>

Best Practices

• Clear, actionable messages
• Appropriate severity level
• Auto-dismiss for non-critical (3-5 seconds)
• Allow manual dismiss
• Stack multiple toasts
• Position consistently (top-right common)

Accessibility

• role="alert" for important messages
• aria-live="polite" or "assertive"
• Focus on alert for critical errors
• Keyboard dismissible

---

Loading States

Types

• Spinner: Indeterminate progress
• Progress Bar: Determinate progress
• Skeleton Screen: Content placeholder
• Overlay Loader: Block interaction

When to Use

• Spinner: Quick operations (< 2s)
• Progress Bar: Long operations with known duration
• Skeleton: Initial page load, anticipate content
• Overlay: Prevent interaction during critical operation

Best Practices

• Show immediately (< 300ms delay)
• Provide context ("Loading products...")
• Use skeleton for perceived performance
• Never use generic "Loading..." for >3s
• Allow cancel for long operations

---

Modal / Dialog

Purpose: Focus user on specific task or information

Types

• Modal Dialog: Blocks background, requires action
• Non-Modal Dialog: Can interact with background
• Alert Dialog: Requires acknowledgment
• Confirmation Dialog: Confirm action

Components

• Overlay/backdrop
• Dialog container
• Header with title
• Content area
• Footer with actions
• Close button (top right)

Best Practices

• Use sparingly (disruptive)
• Clear title describing purpose
• Primary action prominent (right)
• Secondary action less prominent (left)
• Close on overlay click (non-critical)
• Escape key closes
• Focus trap inside modal

Accessibility

• role="dialog" or role="alertdialog"
• aria-labelledby pointing to title
• aria-describedby pointing to content
• Focus moved to modal on open
• Focus returned to trigger on close
• Keyboard trap (Tab cycles within)
• Escape closes modal

---

Data Display Components

Table

Purpose: Display structured, tabular data

Components

• Table header (column names)
• Table rows
• Cells
• Optional: Row actions
• Optional: Row selection
• Optional: Sorting indicators
• Optional: Pagination

Features

• Sortable columns
• Filterable columns
• Searchable
• Row selection (checkbox)
• Expandable rows
• Sticky header
• Horizontal scroll (responsive)

Responsive Strategies

• Horizontal Scroll: Simple, less accessible
• Stacked Layout: Cards on mobile
• Hide Columns: Show essential columns only
• Accordion Rows: Expand for details

Accessibility

• Semantic table elements (table, thead, tbody, tr, th, td)
• scope attribute on headers (col or row)
• Caption or aria-label describing table
• Sortable headers indicate sort state
• Keyboard navigation for interactive cells

---

Card

Purpose: Contain related information and actions

Components

• Header (optional, title/subtitle)
• Image/Media (optional)
• Content area
• Footer (optional, actions/metadata)

Variants

• Horizontal card (image left, content right)
• Vertical card (image top, content bottom)
• Clickable card (entire card is link)
• Interactive card (multiple actions)

Best Practices

• Consistent card sizes in grid
• Clear visual hierarchy within card
• Limit actions to 2-3
• Use hover effects for interactivity
• Adequate padding and spacing

---

Accordion

Purpose: Show/hide content sections

Best Practices

• Clear section headers
• Chevron indicator (down when collapsed, up when expanded)
• Allow multiple open (optional)
• Animate expansion smoothly
• Remember state (optional)

Accessibility

• button for header (clickable)
• aria-expanded indicates state
• aria-controls links to content
• Content has unique ID
• Keyboard accessible (Enter/Space to toggle)

---

Form Patterns

Multi-Step Form

Components

• Stepper/Progress indicator
• Form sections
• Previous/Next buttons
• Save draft (optional)
• Review step (before submit)

Best Practices

• Show progress clearly
• Allow back navigation
• Validate per step
• Save progress automatically
• Show review before final submit

---

Search

Variants

• Simple search (input + button)
• Autocomplete search (suggestions)
• Advanced search (filters, facets)

Best Practices

• Prominent placement
• Appropriate scope (site-wide vs. section)
• Show recent searches
• Autocomplete after 2-3 characters
• Highlight matching text
• Keyboard navigation (arrows, Enter)

---

Animation & Motion

Animation Durations

• Instant: 0ms (immediate changes)
• Fast: 100ms (tooltips, highlights)
• Normal: 200-300ms (most transitions)
• Slow: 400-500ms (large elements, page transitions)

Easing Functions

• Ease-in: Slow start (elements leaving screen)
• Ease-out: Slow end (elements entering screen)
• Ease-in-out: Slow start and end (position changes)
• Linear: Constant speed (loading spinners)

Common Animations

• Fade: Opacity change
• Slide: Position change
• Scale: Size change
• Rotate: Rotation
• Shake: Error indication

Best Practices

• Respect prefers-reduced-motion
• Animate transform and opacity (GPU accelerated)
• Avoid animating layout properties (width, height)
• Keep under 300ms for most interactions
• Use consistent easing across app

---

Micro-interactions

Examples

• Button press (scale down slightly)
• Like/favorite (heart animation)
• Add to cart (item flies to cart)
• Form validation (shake on error)
• Loading state (pulse or shimmer)
• Menu open (slide + fade)

Purpose

• Provide feedback
• Guide user attention
• Create delight
• Reinforce brand

Best Practices

• Subtle, not distracting
• Consistent across app
• Purposeful, not decorative
• Respect reduced motion preference

---

Component States Checklist

For every interactive component, design these states:

• [ ] Default (resting state)
• [ ] Hover (mouse over)
• [ ] Focus (keyboard navigation)
• [ ] Active/Pressed (being clicked)
• [ ] Disabled (not interactive)
• [ ] Loading (async operation)
• [ ] Error (validation failed)
• [ ] Success (operation succeeded)
• [ ] Empty (no data)
• [ ] Populated (with data)

---

Implementation Example: Button Component

// React + Tailwind Example
import { forwardRef } from 'react';
import { cva, type VariantProps } from 'class-variance-authority';

const buttonVariants = cva(
  // Base styles
  'inline-flex items-center justify-center rounded-md font-medium transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50',
  {
    variants: {
      variant: {
        primary: 'bg-blue-600 text-white hover:bg-blue-700',
        secondary: 'bg-gray-200 text-gray-900 hover:bg-gray-300',
        ghost: 'hover:bg-gray-100 text-gray-700',
        danger: 'bg-red-600 text-white hover:bg-red-700',
      },
      size: {
        sm: 'h-8 px-3 text-sm',
        md: 'h-10 px-4',
        lg: 'h-12 px-6 text-lg',
      },
    },
    defaultVariants: {
      variant: 'primary',
      size: 'md',
    },
  }
);

interface ButtonProps
  extends React.ButtonHTMLAttributes<HTMLButtonElement>,
    VariantProps<typeof buttonVariants> {
  loading?: boolean;
}

export const Button = forwardRef<HTMLButtonElement, ButtonProps>(
  ({ className, variant, size, loading, children, ...props }, ref) => {
    return (
      <button
        ref={ref}
        className={buttonVariants({ variant, size, className })}
        disabled={loading || props.disabled}
        {...props}
      >
        {loading && <Spinner className="mr-2" />}
        {children}
      </button>
    );
  }
);

This reference provides comprehensive specifications for building consistent, accessible UI components.

Component Patterns

Forms Best Practices

1. Input Design

• Clear labels above inputs
• Helper text below inputs
• Inline validation (as user types or on blur)
• Clear error messages
• Appropriate input types (email, tel, number)

2. Form Layout

• Single column for better completion rates
• Group related fields
• Logical field order
• Smart defaults and autofill
• Progress indicators for multi-step forms

3. Validation

• Real-time validation (after field blur)
• Clear error messages
• Highlight invalid fields
• Disable submit until valid (optional)
• Success feedback on submission

Modal/Dialog Patterns

1. When to Use

• Require user decision
• Display critical information
• Capture user input without context switch
• Confirm destructive actions

2. Best Practices

• Focus management (trap focus in modal)
• Close on overlay click or Escape key
• Disable background scroll
• Clear close button
• Descriptive title
• Primary and secondary actions

Navigation Patterns

1. Top Navigation

• Best for: 5-7 main sections
• Global navigation
• Always visible
• Horizontal layout

2. Sidebar Navigation

• Best for: Many navigation items
• Hierarchical content
• Collapsible for space
• Vertical layout

3. Bottom Tab Navigation (Mobile)

• Best for: 3-5 primary sections
• Quick switching between sections
• Always visible
• Touch-optimized

4. Hamburger Menu

• Use sparingly (reduces discoverability)
• Best for: Secondary navigation
• Mobile-friendly
• Animate open/close

Design Checklist

Before Development

• [ ] User research completed and documented
• [ ] Personas created
• [ ] User journeys mapped
• [ ] Information architecture defined
• [ ] Wireframes approved by stakeholders
• [ ] Visual designs finalized
• [ ] Design system documented
• [ ] Accessibility requirements defined
• [ ] Responsive breakpoints designed
• [ ] Animations and transitions specified

During Development

• [ ] Design tokens implemented
• [ ] Components match designs
• [ ] Responsive behaviors correct
• [ ] Accessibility requirements met
• [ ] Cross-browser compatibility verified
• [ ] Performance benchmarks met
• [ ] Animations smooth and performant

After Launch

• [ ] Usability testing conducted
• [ ] Analytics tracking implemented
• [ ] A/B tests running (if applicable)
• [ ] Feedback collection mechanism in place
• [ ] Performance monitoring active
• [ ] Accessibility audit completed

Design Principles

1. Visual Hierarchy

• Size: Larger elements draw more attention
• Color: Bright colors stand out, use sparingly
• Contrast: High contrast for important elements
• Spacing: White space separates and groups elements
• Typography: Weight and style create emphasis

2. Consistency

• Consistent component behavior across the application
• Consistent terminology and labels
• Consistent visual style and spacing
• Consistent interaction patterns
• Establish and follow design patterns

3. Simplicity

• Remove unnecessary elements
• Focus on essential features
• Progressive disclosure (show more as needed)
• Clear and concise copy
• Minimize cognitive load

4. Feedback & Response

• Immediate visual feedback for user actions
• Loading states for async operations
• Success/error messages
• Progress indicators for long processes
• Micro-interactions for delight

5. Error Prevention & Recovery

• Validate inputs inline
• Confirm destructive actions
• Provide clear error messages
• Offer suggestions to fix errors
• Allow undo for destructive actions

6. User Control

• Allow users to cancel operations
• Provide save drafts functionality
• Allow customization (themes, preferences)
• Give users control over notifications
• Respect user preferences (reduced motion, high contrast)

Design Systems

Design System Structure

Design System
├── Design Tokens
│   ├── Colors
│   ├── Typography
│   ├── Spacing
│   └── Other tokens
├── Foundation
│   ├── Grid System
│   ├── Breakpoints
│   └── Accessibility
├── Components
│   ├── Basic Components
│   ├── Form Components
│   ├── Navigation Components
│   └── Complex Components
├── Patterns
│   ├── Layout Patterns
│   ├── Navigation Patterns
│   └── Interaction Patterns
└── Guidelines
    ├── Usage Guidelines
    ├── Content Guidelines
    └── Accessibility Guidelines

Popular Design Systems

• Material Design (Google): Comprehensive, mobile-first
• Fluent Design (Microsoft): Modern, depth and motion
• Human Interface Guidelines (Apple): iOS/macOS standards
• Carbon Design (IBM): Enterprise-focused
• Ant Design: Rich component library, data-heavy
• Chakra UI: Accessible, composable components
• Tailwind CSS: Utility-first framework

Design Tools & Resources

Design Tools

UI Design

• Figma: Collaborative, browser-based, prototyping
• Sketch: Mac-only, plugin ecosystem
• Adobe XD: Adobe integration, prototyping
• Framer: Code-based design, advanced prototyping

Prototyping

• Figma: Interactive prototypes
• InVision: Advanced animations
• Principle: Mac-only, timeline animations
• ProtoPie: Sensor-based interactions

Handoff

• Figma: Dev mode, inspect, export
• Zeplin: Design-to-development handoff
• Avocode: Multi-tool support

Frontend Frameworks

Component Libraries

• React: Component-based, virtual DOM, large ecosystem
• Vue.js: Progressive, flexible, easy to learn
• Angular: Full framework, TypeScript, enterprise
• Svelte: Compiled, no virtual DOM, fast

UI Frameworks

• Material-UI (MUI): React, Material Design
• Ant Design: React, enterprise applications
• Chakra UI: React, accessible components
• Vuetify: Vue, Material Design
• Bootstrap: CSS framework, responsive grid
• Tailwind CSS: Utility-first CSS

CSS Frameworks

Utility-First

• Tailwind CSS: Highly customizable, design tokens
• Tachyons: Minimal, functional CSS

Component-Based

• Bootstrap: Grid system, pre-built components
• Bulma: Modern, flexbox-based
• Foundation: Enterprise, advanced features

CSS-in-JS

• Styled Components: React, tagged templates
• Emotion: Framework-agnostic, performant
• Stitches: Type-safe, variant API

Examples

Example 1: E-Commerce Product Page

User Journey: Browse → View Product → Add to Cart → Checkout

Key Components:

• Product image gallery (with zoom)
• Product title and price
• Size/color selector
• Quantity selector
• Add to cart button (prominent)
• Product description tabs
• Customer reviews
• Related products
• Breadcrumb navigation

Responsive Considerations:

• Mobile: Single column, sticky add-to-cart
• Desktop: Two-column layout, sidebar details

Accessibility:

• Alt text for product images
• ARIA labels for selectors
• Keyboard navigation for gallery
• Clear focus indicators

Example 2: Dashboard Analytics

User Journey: Login → View Overview → Drill into Metrics → Export

Key Components:

• Sidebar navigation
• Stats cards (KPIs)
• Charts (line, bar, pie)
• Data tables with filters
• Date range picker
• Export functionality

Responsive Considerations:

• Mobile: Collapsible sidebar, stacked cards
• Desktop: Fixed sidebar, grid layout for cards

Accessibility:

• Screen reader announcements for dynamic data
• Keyboard navigation for charts
• Data tables with proper headers
• Skip to content link

Example 3: Mobile App Onboarding

User Journey: Open App → Welcome Screens → Sign Up → Tutorial

Key Screens:

1. Welcome splash (brand introduction) 2. Features overview (3-4 screens, swipeable) 3. Sign up form (minimal fields) 4. Permissions request (with rationale) 5. Quick tutorial (interactive)

Design Patterns:

• Swipeable carousel for features
• Progress indicators (dots)
• Skip button (top right)
• Clear CTA buttons
• Celebratory success state

Output Format

When presenting UI/UX designs, structure your response as follows:

1. Design Brief

• Project overview and goals
• Target audience and personas
• Key user journeys
• Success metrics

2. Information Architecture

• Site map or app structure
• Navigation hierarchy
• Content organization

3. Wireframes

• Low-fidelity layouts
• Key user flows
• Content hierarchy

4. Visual Design

• Color palette (with hex codes)
• Typography specifications
• Spacing system
• Component designs

5. Component Library

• Component catalog with variants
• Component specifications
• Usage guidelines
• Code examples

6. Responsive Design

• Breakpoint designs (mobile, tablet, desktop)
• Responsive behaviors
• Touch interaction patterns

7. Accessibility Report

• WCAG compliance level
• Contrast ratios
• Keyboard navigation flow
• Screen reader considerations

8. Implementation Guidelines

• Design tokens (JSON/CSS variables)
• Component API specifications
• Animation specifications
• Developer handoff notes

9. Style Guide

• Brand guidelines
• Design principles
• Component usage rules
• Do's and don'ts

Performance Optimization

Frontend Performance

1. Asset Optimization

• Compress images (WebP, AVIF formats)
• Use responsive images (srcset, picture element)
• Lazy load images and components
• Minify CSS and JavaScript
• Remove unused CSS (PurgeCSS)

2. Critical Rendering Path

• Inline critical CSS
• Defer non-critical JavaScript
• Preload critical resources
• Minimize render-blocking resources

3. Core Web Vitals

• LCP (Largest Contentful Paint): < 2.5s
• Optimize images, use CDN, reduce server response time
• FID (First Input Delay): < 100ms
• Minimize JavaScript, split code, use web workers
• CLS (Cumulative Layout Shift): < 0.1
• Set image dimensions, reserve space for ads, avoid inserting content

4. JavaScript Optimization

• Code splitting (route-based, component-based)
• Tree shaking (remove unused code)
• Lazy load non-critical components
• Use React.memo, useMemo, useCallback (React)
• Virtual scrolling for long lists

Responsive Design Patterns Reference

Comprehensive guide to responsive web design patterns and techniques.

Responsive Breakpoints

Standard Breakpoints

/* Mobile First Approach */
/* Mobile (default): 0-767px */
.container { width: 100%; }

/* Tablet: 768px and up */
@media (min-width: 768px) {
  .container { width: 750px; }
}

/* Desktop: 1024px and up */
@media (min-width: 1024px) {
  .container { width: 970px; }
}

/* Large Desktop: 1440px and up */
@media (min-width: 1440px) {
  .container { width: 1200px; }
}

Common Breakpoint Sets

Bootstrap Approach

/* Extra small: <576px */
/* Small: ≥576px */
@media (min-width: 576px) { }

/* Medium: ≥768px */
@media (min-width: 768px) { }

/* Large: ≥992px */
@media (min-width: 992px) { }

/* Extra large: ≥1200px */
@media (min-width: 1200px) { }

/* XXL: ≥1400px */
@media (min-width: 1400px) { }

Tailwind CSS Approach

/* sm: ≥640px */
/* md: ≥768px */
/* lg: ≥1024px */
/* xl: ≥1280px */
/* 2xl: ≥1536px */

Device-Based Breakpoints

/* Phones (portrait) */
@media (max-width: 767px) { }

/* Tablets (portrait) */
@media (min-width: 768px) and (max-width: 1023px) { }

/* Tablets (landscape) */
@media (min-width: 1024px) and (max-width: 1365px) { }

/* Laptops */
@media (min-width: 1366px) and (max-width: 1919px) { }

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

---

Layout Patterns

1. Fluid Grid

Description: Columns expand/contract proportionally

.grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 1rem;
}

Use Cases

• Product grids
• Image galleries
• Card layouts

---

2. Column Drop

Description: Columns stack vertically on smaller screens

.column-drop {
  display: grid;
  gap: 1rem;
}

/* Mobile: Single column */
.column-drop { grid-template-columns: 1fr; }

/* Tablet: Two columns */
@media (min-width: 768px) {
  .column-drop { grid-template-columns: 1fr 1fr; }
}

/* Desktop: Three columns */
@media (min-width: 1024px) {
  .column-drop { grid-template-columns: 1fr 1fr 1fr; }
}

Use Cases

• Blog layouts
• Feature sections
• Team member grids

---

3. Layout Shifter

Description: Complete layout reorganization at breakpoints

/* Mobile: Stacked */
.layout-shifter {
  display: grid;
  grid-template-areas:
    "header"
    "main"
    "sidebar"
    "footer";
}

/* Desktop: Sidebar layout */
@media (min-width: 1024px) {
  .layout-shifter {
    grid-template-areas:
      "header header"
      "sidebar main"
      "sidebar footer";
    grid-template-columns: 250px 1fr;
  }
}

Use Cases

• Dashboard layouts
• Application interfaces
• Admin panels

---

4. Tiny Tweaks

Description: Minor adjustments (padding, font size)

.content {
  padding: 1rem;
  font-size: 16px;
}

@media (min-width: 768px) {
  .content {
    padding: 2rem;
    font-size: 18px;
  }
}

@media (min-width: 1024px) {
  .content {
    padding: 3rem;
    font-size: 20px;
  }
}

Use Cases

• Single-page sites
• Landing pages
• Simple layouts

---

5. Off Canvas

Description: Navigation hidden off-screen on mobile

.nav {
  position: fixed;
  top: 0;
  left: -250px;
  width: 250px;
  height: 100%;
  transition: left 0.3s;
}

.nav.open {
  left: 0;
}

/* Desktop: Always visible */
@media (min-width: 1024px) {
  .nav {
    position: static;
    left: 0;
    width: auto;
  }
}

Use Cases

• Mobile navigation
• Side drawers
• Filter panels

---

Responsive Typography

Fluid Typography

Using Clamp

/* Formula: clamp(min, preferred, max) */
h1 {
  font-size: clamp(2rem, 5vw, 4rem);
  /* Min: 32px, Preferred: 5% of viewport, Max: 64px */
}

body {
  font-size: clamp(1rem, 2.5vw, 1.25rem);
  /* Min: 16px, scales with viewport, Max: 20px */
}

Using Calc

h1 {
  font-size: calc(1.5rem + 2vw);
  /* Scales from 24px + viewport width */
}

Type Scale

/* Mobile */
:root {
  --text-xs: 0.75rem;   /* 12px */
  --text-sm: 0.875rem;  /* 14px */
  --text-base: 1rem;    /* 16px */
  --text-lg: 1.125rem;  /* 18px */
  --text-xl: 1.25rem;   /* 20px */
  --text-2xl: 1.5rem;   /* 24px */
  --text-3xl: 1.875rem; /* 30px */
  --text-4xl: 2.25rem;  /* 36px */
}

/* Desktop: Increase scale */
@media (min-width: 1024px) {
  :root {
    --text-base: 1.125rem; /* 18px */
    --text-lg: 1.25rem;    /* 20px */
    --text-xl: 1.5rem;     /* 24px */
    --text-2xl: 1.875rem;  /* 30px */
    --text-3xl: 2.25rem;   /* 36px */
    --text-4xl: 3rem;      /* 48px */
  }
}

---

Responsive Images

1. Flexible Images

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

2. Responsive Images (srcset)

<!-- Different resolutions -->
<img
  src="image-800.jpg"
  srcset="
    image-400.jpg 400w,
    image-800.jpg 800w,
    image-1200.jpg 1200w
  "
  sizes="(max-width: 600px) 100vw, 50vw"
  alt="Description"
/>

3. Art Direction (picture)

<!-- Different images for different screens -->
<picture>
  <source media="(max-width: 767px)" srcset="mobile.jpg" />
  <source media="(max-width: 1023px)" srcset="tablet.jpg" />
  <img src="desktop.jpg" alt="Description" />
</picture>

4. Modern Image Formats

<picture>
  <source type="image/avif" srcset="image.avif" />
  <source type="image/webp" srcset="image.webp" />
  <img src="image.jpg" alt="Fallback" />
</picture>

---

Responsive Navigation Patterns

1. Hamburger Menu

<nav class="navbar">
  <button class="menu-toggle" aria-expanded="false">
    <span class="sr-only">Menu</span>
    ☰
  </button>
  
  <ul class="nav-menu">
    <li><a href="/">Home</a></li>
    <li><a href="/about">About</a></li>
    <li><a href="/contact">Contact</a></li>
  </ul>
</nav>

/* Mobile: Hidden menu */
.nav-menu {
  display: none;
  flex-direction: column;
}

.menu-toggle {
  display: block;
}

.nav-menu.open {
  display: flex;
}

/* Desktop: Always visible */
@media (min-width: 768px) {
  .menu-toggle {
    display: none;
  }
  
  .nav-menu {
    display: flex;
    flex-direction: row;
  }
}

2. Priority+ Navigation

<nav class="priority-nav">
  <ul class="nav-items">
    <li class="nav-item">Home</li>
    <li class="nav-item">Products</li>
    <li class="nav-item">About</li>
    <li class="nav-item">Contact</li>
  </ul>
  <button class="more-button">More</button>
  <ul class="overflow-menu" hidden>
    <!-- Overflow items appear here -->
  </ul>
</nav>

3. Bottom Tab Bar (Mobile)

<nav class="tab-bar">
  <a href="/" class="tab-item active">
    <svg>...</svg>
    <span>Home</span>
  </a>
  <a href="/search" class="tab-item">
    <svg>...</svg>
    <span>Search</span>
  </a>
  <a href="/profile" class="tab-item">
    <svg>...</svg>
    <span>Profile</span>
  </a>
</nav>

/* Mobile: Fixed bottom tabs */
.tab-bar {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  display: flex;
  justify-content: space-around;
  background: white;
  border-top: 1px solid #e5e7eb;
}

/* Desktop: Convert to top nav */
@media (min-width: 768px) {
  .tab-bar {
    position: static;
    border-top: none;
    border-bottom: 1px solid #e5e7eb;
  }
}

---

Responsive Tables

1. Horizontal Scroll

.table-container {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

table {
  min-width: 600px;
}

Pros: Simple, preserves table structure Cons: Not ideal for accessibility, can hide content

2. Stacked Layout

/* Mobile: Stack rows */
@media (max-width: 767px) {
  table, thead, tbody, th, td, tr {
    display: block;
  }
  
  thead {
    display: none;
  }
  
  tr {
    margin-bottom: 1rem;
    border: 1px solid #ddd;
  }
  
  td {
    text-align: right;
    padding-left: 50%;
    position: relative;
  }
  
  td::before {
    content: attr(data-label);
    position: absolute;
    left: 0;
    width: 50%;
    padding-left: 1rem;
    font-weight: bold;
    text-align: left;
  }
}

<tr>
  <td data-label="Name">John Doe</td>
  <td data-label="Email">john@example.com</td>
  <td data-label="Role">Admin</td>
</tr>

3. Hide Columns

/* Hide less important columns on mobile */
@media (max-width: 767px) {
  .hide-mobile {
    display: none;
  }
}

4. Card Layout

/* Mobile: Convert to cards */
@media (max-width: 767px) {
  .responsive-table {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1rem;
  }
  
  .table-row {
    background: white;
    border: 1px solid #ddd;
    border-radius: 8px;
    padding: 1rem;
  }
}

---

Responsive Forms

Stacked on Mobile, Grid on Desktop

.form-grid {
  display: grid;
  gap: 1rem;
}

/* Mobile: Single column */
.form-grid {
  grid-template-columns: 1fr;
}

/* Desktop: Two columns */
@media (min-width: 768px) {
  .form-grid {
    grid-template-columns: 1fr 1fr;
  }
  
  /* Full width fields */
  .form-grid .full-width {
    grid-column: 1 / -1;
  }
}

Touch-Friendly Inputs

/* Larger inputs for mobile */
input, select, textarea {
  font-size: 16px; /* Prevents zoom on iOS */
  padding: 12px;
  min-height: 44px; /* Touch target size */
}

@media (min-width: 768px) {
  input, select, textarea {
    font-size: 14px;
    padding: 8px 12px;
  }
}

---

Container Queries

/* Container query (modern browsers) */
.card-container {
  container-type: inline-size;
}

/* When container is >400px wide */
@container (min-width: 400px) {
  .card {
    display: grid;
    grid-template-columns: 150px 1fr;
  }
}

/* When container is >600px wide */
@container (min-width: 600px) {
  .card {
    grid-template-columns: 200px 1fr;
  }
}

Benefits: Component-based responsive design, not viewport-based

---

Viewport Units

/* Viewport Width (vw) and Height (vh) */
.hero {
  height: 100vh; /* Full viewport height */
}

.sidebar {
  width: 30vw; /* 30% of viewport width */
}

/* Dynamic Viewport Units (mobile address bar) */
.hero-mobile {
  height: 100dvh; /* Dynamic viewport height */
}

/* Minimum/Maximum viewport */
.text {
  font-size: clamp(1rem, 2vw, 2rem);
}

---

Modern CSS Features

Grid Auto-Fit

.grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 1rem;
}

Result: Columns automatically wrap based on available space

Flexbox Wrapping

.flex-container {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
}

.flex-item {
  flex: 1 1 300px; /* Grow, shrink, base 300px */
}

Aspect Ratio

.video-container {
  aspect-ratio: 16 / 9;
}

.square {
  aspect-ratio: 1;
}

---

Performance Optimization

Lazy Loading Images

<img src="image.jpg" loading="lazy" alt="Description" />

Critical CSS

<style>
  /* Inline critical above-the-fold CSS */
  .hero { background: blue; }
</style>

<link rel="stylesheet" href="styles.css" media="print" onload="this.media='all'" />

Responsive Preloading

<link
  rel="preload"
  as="image"
  href="hero-mobile.jpg"
  media="(max-width: 767px)"
/>
<link
  rel="preload"
  as="image"
  href="hero-desktop.jpg"
  media="(min-width: 768px)"
/>

---

Testing Responsive Designs

Browser DevTools

• Chrome DevTools (Device Mode)
• Firefox Responsive Design Mode
• Safari Responsive Design Mode

Device Testing

• Physical devices (iOS, Android)
• BrowserStack (cloud testing)
• Sauce Labs (cloud testing)

Viewport Sizes to Test

• 320px (iPhone SE)
• 375px (iPhone 12/13)
• 390px (iPhone 14)
• 768px (iPad portrait)
• 1024px (iPad landscape)
• 1366px (Laptop)
• 1920px (Desktop)

Checklist

• [ ] Text readable at all sizes
• [ ] Touch targets adequate (44x44px minimum)
• [ ] Images scale properly
• [ ] Navigation accessible
• [ ] Forms usable
• [ ] Tables readable
• [ ] No horizontal scroll (unless intentional)
• [ ] Performance acceptable on mobile networks

---

Common Responsive Mistakes

1. Fixed widths → Use percentages or max-width 2. Viewport meta tag missing → Add <meta name="viewport"> 3. Desktop-first approach → Start mobile-first 4. Too many breakpoints → Keep it simple (3-4 max) 5. Neglecting touch targets → Minimum 44x44px 6. Ignoring landscape → Test both orientations 7. Large image files → Optimize and use srcset 8. Horizontal scroll → Use max-width: 100%

---

Mobile-First Media Queries

/* Mobile default styles */
.element {
  width: 100%;
  padding: 1rem;
}

/* Tablet and up */
@media (min-width: 768px) {
  .element {
    width: 50%;
    padding: 2rem;
  }
}

/* Desktop and up */
@media (min-width: 1024px) {
  .element {
    width: 33.333%;
    padding: 3rem;
  }
}

Benefits of Mobile-First

• Better performance (less CSS for mobile)
• Progressive enhancement
• Forces prioritization of content
• Easier to maintain

This reference provides comprehensive patterns for creating responsive, mobile-friendly interfaces.

UI/UX Design Process

Follow this systematic approach when designing user interfaces:

Phase 1: Research & Discovery

1. User Research

• User Interviews: Understand user needs, goals, and pain points
• Surveys: Gather quantitative data from target audience
• Analytics Review: Analyze existing usage data and metrics
• Competitive Analysis: Study competitor solutions
• Stakeholder Interviews: Understand business requirements

2. User Personas Create detailed personas including:

• Demographics (age, location, occupation)
• Goals and motivations
• Pain points and frustrations
• Technical proficiency
• Device and browser preferences
• Usage context and scenarios

3. User Journey Mapping

• Map current user journeys (as-is)
• Identify touchpoints and pain points
• Design future user journeys (to-be)
• Highlight emotional states throughout journey
• Identify opportunities for improvement

4. Information Architecture

• Define content structure and hierarchy
• Create site maps and navigation structures
• Organize content categories
• Plan taxonomy and metadata
• Design search and filtering strategies

Phase 2: Ideation & Wireframing

1. Sketching & Brainstorming

• Quick paper sketches (low fidelity)
• Explore multiple design directions
• Collaborative design sessions
• Crazy 8's exercises
• Design studio workshops

2. Wireframes

• Low-Fidelity Wireframes: Basic layouts and structure
• Focus on layout and content hierarchy
• No colors, minimal styling
• Use placeholder content (lorem ipsum, boxes)

• Mid-Fidelity Wireframes: More detailed structures
• Add actual content and copy
• Define component types
• Show interaction patterns

• High-Fidelity Wireframes: Near-final layouts
• Real content and imagery
• Detailed interactions
• Responsive behaviors

3. User Flows

• Design task flows for key user actions
• Define decision points and branching
• Map error states and edge cases
• Design happy paths and alternative paths
• Document entry and exit points

Phase 3: Visual Design

1. Design System Foundation

Color Palette

• Primary colors (brand identity)
• Secondary colors (accents, CTAs)
• Neutral colors (text, backgrounds, borders)
• Semantic colors (success, warning, error, info)
• Ensure sufficient contrast ratios (WCAG AA: 4.5:1 for text)

Typography

• Font families (primary, secondary, monospace)
• Type scale (h1-h6, body, captions)
• Font weights (light, regular, medium, bold)
• Line heights and letter spacing
• Responsive typography (fluid type scales)

Spacing System

• Base unit (4px, 8px common)
• Spacing scale (0.5x, 1x, 1.5x, 2x, 3x, 4x, 6x, 8x)
• Consistent margins and padding
• Grid systems (12-column, CSS Grid)

Elevation & Shadows

• Shadow levels (0-5 for material design)
• Elevation hierarchy
• Focus states and overlays

2. Component Design

Design comprehensive component library:

Basic Components

• Buttons (primary, secondary, tertiary, ghost, icon)
• Form inputs (text, textarea, select, checkbox, radio)
• Labels and helper text
• Icons and iconography
• Badges and tags
• Avatars and profile images

Navigation Components

• Navigation bars (top, side, mobile)
• Breadcrumbs
• Tabs and pills
• Pagination
• Steppers and progress indicators

Layout Components

• Cards and panels
• Modals and dialogs
• Drawers and sidebars
• Accordions and collapsibles
• Dividers and separators

Feedback Components

• Alerts and notifications
• Toast messages
• Loading states (spinners, skeletons)
• Progress bars
• Empty states and error states

Data Display

• Tables and data grids
• Lists (ordered, unordered, description)
• Charts and graphs
• Timelines
• Statistics and metrics

3. Mockups & Prototypes

• Create high-fidelity mockups
• Apply brand visual identity
• Design interactive prototypes
• Animate transitions and micro-interactions
• Create clickable prototypes for testing

Phase 4: Responsive & Adaptive Design

1. Responsive Breakpoints

   Mobile:      320px - 767px
   Tablet:      768px - 1023px
   Desktop:     1024px - 1439px
   Large:       1440px+

2. Mobile-First Approach

• Design for mobile first, then scale up
• Prioritize essential content and features
• Optimize for touch interactions
• Consider thumb zones and reachability
• Minimize data and loading requirements

3. Responsive Patterns

• Fluid Grids: Percentage-based layouts
• Flexible Images: Scale with container
• Media Queries: Breakpoint-specific styles
• Mobile Navigation: Hamburger menus, bottom tabs
• Responsive Typography: Fluid type scales, viewport units

4. Touch & Gesture Design

• Minimum touch target size (44x44px iOS, 48x48px Android)
• Swipe gestures (delete, refresh)
• Pull-to-refresh
• Pinch to zoom
• Long press actions

Phase 5: Accessibility & Inclusivity

1. WCAG Compliance

Level A (Minimum)

• Provide text alternatives for images
• Ensure keyboard accessibility
• Don't rely solely on color
• Provide clear labels

Level AA (Recommended)

• Contrast ratio 4.5:1 for normal text, 3:1 for large text
• Resize text up to 200% without loss of functionality
• Multiple ways to find content
• Consistent navigation

Level AAA (Enhanced)

• Contrast ratio 7:1 for normal text, 4.5:1 for large text
• No images of text
• Enhanced visual presentation

2. Screen Reader Support

• Semantic HTML (nav, main, article, aside)
• ARIA labels and roles
• Focus management
• Skip to content links
• Meaningful link text

3. Keyboard Navigation

• All interactive elements keyboard accessible
• Logical tab order
• Visible focus indicators
• Keyboard shortcuts (with discoverability)
• Escape to close modals/menus

4. Inclusive Design

• Color blindness considerations (don't rely on color alone)
• Motor disability considerations (large click targets)
• Cognitive disability considerations (clear language, consistent patterns)
• Vision impairment (zoom support, high contrast)
• Reduce motion for users with vestibular disorders

Phase 6: Implementation Guidelines

1. Design Tokens Define tokens for:

• Colors (semantic and base colors)
• Spacing (margins, padding, gaps)
• Typography (font sizes, weights, line heights)
• Border radius, border widths
• Shadows and elevation
• Animation durations and easing

2. CSS Architecture

• Methodologies: BEM, SMACSS, OOCSS, ITCSS
• CSS-in-JS: Styled Components, Emotion, CSS Modules
• Utility-First: Tailwind CSS, Tachyons
• Component Scoping: Avoid global styles
• CSS Custom Properties: Theme variables

3. Component Implementation

   // Example: Button Component
   <Button
     variant="primary"        // primary | secondary | ghost
     size="medium"            // small | medium | large
     disabled={false}
     loading={false}
     icon={<IconName />}
     onClick={handleClick}
   >
     Button Text
   </Button>

4. State Management

• Default state
• Hover state
• Active/pressed state
• Focus state (keyboard)
• Disabled state
• Loading state
• Error state
• Success state

Phase 7: Testing & Validation

1. Usability Testing

• Conduct user testing sessions
• A/B testing for design alternatives
• First-click testing
• Five-second test (first impressions)
• Tree testing (information architecture)

2. Accessibility Testing

• Automated testing (axe, Lighthouse, WAVE)
• Screen reader testing (NVDA, JAWS, VoiceOver)
• Keyboard navigation testing
• Color contrast testing
• Manual WCAG audit

3. Performance Testing

• Lighthouse scores
• Core Web Vitals (LCP, FID, CLS)
• Page load time
• Time to Interactive (TTI)
• Bundle size analysis

4. Cross-Browser Testing

• Chrome, Firefox, Safari, Edge
• Mobile browsers (iOS Safari, Chrome Mobile)
• Legacy browser support (if required)