Ux Designer

UX Designer

Overview

Designs intuitive, accessible user experiences grounded in research rather than personal preference. Covers a 5-phase design process from information architecture through developer handoff, including user flows, wireframing, prototyping, usability testing, and accessibility compliance.

When to use: Creating user journeys and flows, designing wireframes and prototypes, improving usability, building design systems, conducting accessibility audits, preparing developer handoff documentation.

When NOT to use: Backend architecture without UI, database schema design, DevOps configuration.

Quick Reference

Key UX Principles

1. Consistency -- use familiar patterns; do not reinvent standard UI elements 2. Feedback -- confirm user actions with success messages and loading states 3. Error Prevention -- design to prevent errors, not just handle them 4. Recognition Over Recall -- show options rather than requiring memory 5. Flexibility -- support both novice and expert users with shortcuts and defaults

Design Patterns Summary

Common Mistakes

Delegation

• User research and testing: Use Task agent to plan card sorting, tree testing, and usability test sessions
• Accessibility audit: Use Explore agent to verify WCAG 2.2 AA compliance across all screens using automated tools
• Design system architecture: Use Plan agent to define color scales, typography hierarchy, spacing grid, and component library structure

References

• Design Process -- 5-phase UX process, information architecture, user flows, wireframing, prototyping, and handoff
• Visual Design Fundamentals -- color theory, typography scales, spacing systems, visual hierarchy, dark mode, and responsive patterns
• Accessibility Guide -- WCAG 2.2 AA compliance, keyboard navigation, screen readers, color contrast, and audit checklists
• Tools and Resources -- design tools, prototyping platforms, testing services, and accessibility checkers

Accessibility Guide

Accessibility ensures that all users, regardless of ability, can effectively use the interface. Target WCAG 2.2 AA compliance as the minimum standard.

Color Contrast Requirements

Tips:

• Test contrast with tools like WebAIM Contrast Checker
• Do not rely on color alone to convey information (use icons or text labels)
• Ensure contrast is sufficient in both light and dark modes

Keyboard Navigation

All interactive elements must be operable via keyboard alone.

Required keyboard behaviors:

Focus management rules:

• Tab order must follow the visual reading order (top-to-bottom, left-to-right)
• Focus indicators must be visible (at least 2px outline or equivalent)
• Focus should not get trapped in any component (except modals with explicit escape)
• After closing a modal, focus returns to the element that triggered it

Screen Reader Support

Semantic HTML first:

<!-- CORRECT: Semantic elements provide meaning -->
<nav aria-label="Main navigation">
  <ul>
    <li><a href="/home">Home</a></li>
    <li><a href="/about">About</a></li>
  </ul>
</nav>

<main>
  <article>
    <h1>Page Title</h1>
    <section aria-labelledby="section-heading">
      <h2 id="section-heading">Section</h2>
      <p>Content here.</p>
    </section>
  </article>
</main>

<!-- WRONG: Divs with no semantic meaning -->
<div class="nav">
  <div class="link">Home</div>
</div>

ARIA usage rules:

• Use semantic HTML before reaching for ARIA attributes
• aria-label for icon-only buttons (e.g., close button with X icon)
• aria-describedby for form field help text
• aria-live="polite" for dynamic content updates (notifications, alerts)
• aria-expanded for collapsible sections and dropdown menus
• Never use ARIA to override correct semantic HTML behavior

Form Accessibility

<!-- CORRECT: Label associated with input -->
<label for="email">Email address</label>
<input id="email" type="email" aria-describedby="email-help" required />
<span id="email-help">We will never share your email.</span>

<!-- Error state -->
<label for="password">Password</label>
<input
  id="password"
  type="password"
  aria-invalid="true"
  aria-describedby="password-error"
/>
<span id="password-error" role="alert"
  >Password must be at least 8 characters.</span
>

Form rules:

• Every input must have an associated <label> element
• Error messages must be programmatically associated with the input
• Required fields must be indicated visually and programmatically
• Form groups should use <fieldset> and <legend>

Images and Media

• All meaningful images must have descriptive alt text
• Decorative images use alt="" (empty) to be skipped by screen readers
• Video content needs captions and transcripts
• Audio content needs transcripts
• No auto-playing media with sound

Responsive and Zoom

• Content must be usable at 200% zoom
• No horizontal scrolling at standard viewport widths
• Touch targets must be at least 44x44px on mobile devices
• Text must be resizable without breaking layout

Comprehensive Audit Checklist

• [ ] Color contrast meets 4.5:1 for normal text, 3:1 for large text
• [ ] Keyboard navigation works for all interactive elements (Tab, Enter, Escape)
• [ ] Focus indicators are visible on all focused elements
• [ ] Alt text provided for all meaningful images
• [ ] Form labels associated with inputs via for/id
• [ ] Semantic HTML used (headings, nav, main, article, section)
• [ ] ARIA labels added for icon-only buttons
• [ ] Screen reader tested (VoiceOver, NVDA, or JAWS)
• [ ] Zoom to 200% works without horizontal scrolling
• [ ] No flashing content faster than 3 times per second (seizure risk)
• [ ] Error messages are descriptive and associated with fields
• [ ] Dynamic content updates announced via aria-live regions
• [ ] Modals trap focus and return focus on close
• [ ] Skip navigation link available for keyboard users
• [ ] Focus not obscured by sticky headers or overlays (WCAG 2.4.11)
• [ ] Touch targets at least 24x24px with adequate spacing (WCAG 2.5.8)
• [ ] Dragging actions have single-pointer alternatives (WCAG 2.5.7)

Design Process

Phase 1: Information Architecture

Goal: Organize content and functionality logically.

Activities:

• Card sorting -- let users organize content into categories to discover their mental models
• Site mapping -- create hierarchy of pages and features
• Navigation design -- define primary, secondary, and utility navigation structures
• Labeling -- establish clear, user-friendly terminology that matches user expectations

Validation checklist:

• IA tested with 5+ users via tree testing
• Navigation paths are clear and logical
• Labels match user mental models (not internal jargon)

Phase 2: User Flows

Goal: Map paths users take to complete tasks.

Key flows to design:

• Onboarding -- first-time user experience from signup to first value
• Core tasks -- primary use cases covering 80% of usage
• Error states -- recovery paths from mistakes
• Edge cases -- less common but important scenarios

Flow diagram elements:

[Entry Point] --> [Decision] --> [Action] --> [Outcome]
                       |
                  [Alternative Path]

Validation checklist:

• Happy path documented for each core task
• Error states designed with clear recovery actions
• Exit points identified at each step
• Flows validated against user research data

Phase 3: Wireframing

Goal: Create low-fidelity layouts focusing on structure over visual design.

Fidelity levels:

Key screens to wireframe:

• Homepage or dashboard
• Core task screens (CRUD operations)
• Navigation (header, sidebar, footer)
• Forms and input validation states
• Empty states, loading states, error states

Wireframe checklist:

• Clear visual hierarchy (size, weight, contrast)
• Consistent layout patterns across screens
• Accessible contrast and sizing
• Touch targets at least 44x44px on mobile
• Forms grouped logically with clear labels

Phase 4: Prototyping and Testing

Goal: Create interactive prototypes for usability testing.

Prototyping tools:

• Figma (recommended) -- collaborative, browser-based, built-in prototyping
• Framer -- code-based prototyping for advanced interactions
• ProtoPie -- complex micro-interactions and multi-device prototypes

Usability testing script:

1. Welcome (5 min): Explain process, get consent, set expectations
2. Context (5 min): Ask about current solutions, pain points
3. Tasks (20 min): "Try to [complete specific task]"
4. Think-aloud: "Tell me what you are thinking as you work"
5. Debrief (5 min): Overall impressions, suggestions

Usability metrics:

Validation checklist:

• Prototype covers all main user flows
• 5+ users tested (catches ~85% of issues)
• Task completion rate exceeds 70%
• Critical issues documented and addressed

Phase 5: UI Design and Handoff

Goal: Create high-fidelity, production-ready designs.

Design system elements:

• Colors -- primary, secondary, neutrals, semantic (error, success, warning, info)
• Typography -- scale (h1-h6, body, small), weights, line heights
• Spacing -- 4pt or 8pt grid system for consistent rhythm
• Components -- buttons, inputs, cards, modals, tooltips, dropdowns
• Icons -- consistent set (Heroicons, Lucide, or Font Awesome)

Component states to design:

Developer handoff deliverables:

• Design specs (spacing, colors, fonts) via inspect mode
• Component states documented (default, hover, active, disabled, error)
• Responsive breakpoints for mobile, tablet, and desktop
• Interaction specifications (animations, transitions, micro-interactions)
• Exported assets (icons, images, logos in required formats)

Handoff checklist:

• Designs match brand guidelines
• Accessibility verified (contrast, keyboard navigation)
• Responsive layouts defined for all breakpoints
• Component library documented with usage guidelines
• Handoff reviewed with development team

Tools and Resources

Design Tools

Prototyping Platforms

Usability Testing Services

Accessibility Tools

Screen reader testing:

Design System Components

When building a design system, include these component categories:

Design Token Structure

Organize design tokens for systematic theming:

Colors:
  primary/    -- Brand primary (50-950 scale)
  secondary/  -- Brand secondary
  neutral/    -- Grays for text, borders, backgrounds
  semantic/   -- error, success, warning, info

Typography:
  h1-h6       -- Heading sizes and weights
  body        -- Default text (sm, base, lg)
  caption     -- Small supporting text

Spacing:
  4pt grid    -- 4, 8, 12, 16, 20, 24, 32, 40, 48, 64

Breakpoints:
  sm: 640px   -- Mobile landscape
  md: 768px   -- Tablet
  lg: 1024px  -- Desktop
  xl: 1280px  -- Large desktop

Responsive Breakpoint Strategy

Visual Design Fundamentals

Visual design creates consistent, accessible interfaces through systematic use of color, typography, spacing, and hierarchy.

Color Theory

Color Schemes

60-30-10 Rule

• 60% -- Primary color (backgrounds, large areas)
• 30% -- Secondary color (supporting elements)
• 10% -- Accent color (CTAs, highlights)

Shade Scale Generation (50-900)

/* Primary color scale */
--color-primary-50: #eff6ff;
--color-primary-100: #dbeafe;
--color-primary-500: #3b82f6; /* Main brand color */
--color-primary-600: #2563eb;
--color-primary-900: #1e3a8a;

/* Neutral grays */
--color-gray-50: #f9fafb;
--color-gray-300: #d1d5db;
--color-gray-500: #6b7280;
--color-gray-700: #374151;
--color-gray-900: #111827;

/* Semantic colors */
--color-success: #10b981;
--color-warning: #f59e0b;
--color-error: #ef4444;
--color-info: #3b82f6;

Color Contrast Requirements

/* Good: 8:1 contrast */
.text-good {
  color: #111827;
  background: #ffffff;
}

/* Bad: 2.1:1 fails WCAG */
.text-bad {
  color: #d1d5db;
  background: #ffffff;
}

Typography

Modular Type Scale (Major Third 1.25)

--text-xs: 0.64rem; /* 10.24px */
--text-sm: 0.8rem; /* 12.8px */
--text-base: 1rem; /* 16px - body text */
--text-lg: 1.25rem; /* 20px */
--text-xl: 1.563rem; /* 25px */
--text-2xl: 1.953rem; /* 31.25px */
--text-3xl: 2.441rem; /* 39px */
--text-4xl: 3.052rem; /* 48.83px */
--text-5xl: 3.815rem; /* 61px */

--font-normal: 400;
--font-medium: 500;
--font-semibold: 600;
--font-bold: 700;

Font pairing: Maximum 2 fonts. Heading font distinctive, body font readable.

/* Modern & clean */
--font-heading: 'Inter', sans-serif;
--font-body: 'Inter', sans-serif;

/* Classic & professional */
--font-heading: 'Playfair Display', serif;
--font-body: 'Source Sans Pro', sans-serif;

Line Height and Vertical Rhythm

/* Headings: tight */
h1,
h2,
h3 {
  line-height: 1.2;
}

/* Body: comfortable */
p {
  line-height: 1.6;
  max-width: 65ch; /* Optimal readability */
}

/* Letter spacing */
.heading {
  letter-spacing: -0.02em;
}
.uppercase {
  letter-spacing: 0.05em;
}

/* Lobotomized owl selector for vertical rhythm */
* + * {
  margin-top: var(--space-4);
}

h1 + p,
h2 + p {
  margin-top: var(--space-6);
}

Heading Hierarchy

h1 {
  font-size: var(--text-4xl);
  font-weight: var(--font-bold);
  margin-bottom: var(--space-8);
  color: var(--color-gray-900);
}

h2 {
  font-size: var(--text-3xl);
  font-weight: var(--font-bold);
  margin-bottom: var(--space-6);
  color: var(--color-gray-900);
}

h3 {
  font-size: var(--text-2xl);
  font-weight: var(--font-semibold);
  margin-bottom: var(--space-4);
  color: var(--color-gray-800);
}

p {
  font-size: var(--text-base);
  line-height: 1.6;
  color: var(--color-gray-700);
}

Spacing System

8pt Grid System

--space-1: 0.25rem; /* 4px */
--space-2: 0.5rem; /* 8px */
--space-3: 0.75rem; /* 12px */
--space-4: 1rem; /* 16px */
--space-6: 1.5rem; /* 24px */
--space-8: 2rem; /* 32px */
--space-12: 3rem; /* 48px */
--space-16: 4rem; /* 64px */
--space-24: 6rem; /* 96px */

Usage patterns:

.button {
  padding: var(--space-3) var(--space-6);
}
.card {
  padding: var(--space-6);
}
.section {
  padding: var(--space-16) 0;
  margin-bottom: var(--space-12);
}
.stack {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}

Spacing Scale Reference

Visual Hierarchy Principles

1. Contrast

h1 {
  font-size: var(--text-4xl);
  font-weight: var(--font-bold);
  color: var(--color-gray-900);
}

.caption {
  font-size: var(--text-sm);
  color: var(--color-gray-500);
}

2. Alignment

.content {
  text-align: left;
}

.header {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

3. Repetition

.button {
  padding: var(--space-3) var(--space-6);
  border-radius: var(--radius-md);
  font-weight: var(--font-semibold);
  transition: all 200ms ease-in-out;
}

4. Proximity

.form-group {
  display: flex;
  flex-direction: column;
  gap: var(--space-2); /* Related items close */
  margin-bottom: var(--space-6); /* Groups separated */
}

Dark Mode Strategy

CSS Custom Properties

:root {
  --bg-primary: #ffffff;
  --bg-secondary: #f9fafb;
  --text-primary: #111827;
  --text-secondary: #6b7280;
  --border-color: #e5e7eb;
}

@media (prefers-color-scheme: dark) {
  :root {
    --bg-primary: #111827;
    --bg-secondary: #1f2937;
    --text-primary: #f9fafb;
    --text-secondary: #d1d5db;
    --border-color: #4b5563;
  }
}

.card {
  background: var(--bg-secondary);
  color: var(--text-primary);
  border: 1px solid var(--border-color);
}

System Preference Detection

/* Respect system preference */
@media (prefers-color-scheme: dark) {
  body {
    background: var(--bg-primary);
    color: var(--text-primary);
  }
}

/* Manual toggle */
[data-theme='dark'] {
  --bg-primary: #111827;
  --text-primary: #f9fafb;
}

Dark mode considerations:

Responsive Typography

Fluid Typography with clamp()

/* Syntax: clamp(min, preferred, max) */
h1 {
  font-size: clamp(2rem, 5vw, 4rem);
}

h2 {
  font-size: clamp(1.5rem, 4vw, 3rem);
}

p {
  font-size: clamp(1rem, 2.5vw, 1.125rem);
}

.section {
  padding: clamp(2rem, 8vw, 6rem) 0;
}

Breakpoint-Based Scaling

h1 {
  font-size: 2rem;
}

@media (min-width: 768px) {
  h1 {
    font-size: 3rem;
  }
}

@media (min-width: 1024px) {
  h1 {
    font-size: 3.5rem;
  }
}

Responsive Layout Patterns

Mobile-first grid:

.grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-4);
}

@media (min-width: 768px) {
  .grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (min-width: 1024px) {
  .grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

Container with max-width:

.container {
  width: 100%;
  max-width: 1280px;
  margin: 0 auto;
  padding: 0 var(--space-4);
}

@media (min-width: 768px) {
  .container {
    padding: 0 var(--space-6);
  }
}

Visual Design Checklist

Color System:

• [ ] Primary, secondary, accent colors defined
• [ ] Complete shade scales (50-900)
• [ ] Neutral grays defined
• [ ] Semantic colors (success, warning, error, info)
• [ ] All text meets WCAG 4.5:1 contrast
• [ ] Dark mode palette tested

Typography:

• [ ] Maximum 2 font families
• [ ] Modular type scale (8-10 sizes)
• [ ] Font weights specified
• [ ] Line heights appropriate
• [ ] Body text max-width 65ch
• [ ] Responsive scaling defined

Spacing:

• [ ] 8pt grid implemented
• [ ] Consistent spacing scale
• [ ] Adequate whitespace
• [ ] Vertical rhythm with lobotomized owl

Visual Hierarchy:

• [ ] Size, weight, color establish importance
• [ ] Elements aligned consistently
• [ ] Visual patterns repeated
• [ ] Related elements grouped

Responsive Design:

• [ ] Mobile-first approach
• [ ] Breakpoints defined
• [ ] Touch targets 44x44px minimum
• [ ] Typography scales appropriately
• [ ] Layouts stack on smaller screens