name: ux-ui-design
description: UX/UI Design skill for user research, wireframing, prototyping, visual design, interaction design, usability testing, accessibility, design systems, and responsive design. Use when designing user interfaces, conducting user research, creating design systems, evaluating usability, or when user mentions UX, UI, wireframes, prototypes, user flows, or accessibility.

UX/UI Design

A comprehensive UX/UI design skill that helps create user-centered, accessible, and visually appealing digital experiences.

Quick Start

Basic UX/UI design workflow:

# Understand users and their needs
# Research and analyze
# Define information architecture
# Create wireframes and prototypes
# Design visual interface
# Test with users
# Iterate and refine

Core Capabilities

1. User Research

Research Methods
- User interviews and contextual inquiry
- Surveys and questionnaires
- Usability testing
- A/B testing
- Card sorting
- Tree testing
- Competitive analysis
- Analytics review

User Research Artifacts
- User personas
- User journey maps
- Empathy maps
- Jobs to be Done (JTBD)
- User stories and scenarios
- Pain points and opportunities

Research Tools
- UserTesting, Lookback, Hotjar
- Google Analytics, Mixpanel
- Optimal Workshop, UsabilityHub
- Miro, FigJam for collaboration

2. Information Architecture

IA Principles
- Organization systems (hierarchical, sequential, matrix)
- Navigation systems (global, local, contextual)
- Labeling systems (consistent, clear, user-friendly)
- Search systems (faceted search, filters)

IA Deliverables
- Site maps and flow diagrams
- Content inventories and audits
- Navigation structures
- Taxonomy and metadata schemas
- Search strategies

IA Best Practices
- Keep navigation simple (3-click rule)
- Use familiar patterns
- Provide clear labels
- Support multiple paths to content
- Include breadcrumbs for context

3. Wireframing

Wireframe Types
- Low-fidelity: Quick sketches, basic layout
- Mid-fidelity: More detail, grayscale, placeholder content
- High-fidelity: Detailed, close to final design

Wireframe Components
- Layout grids and columns
- Navigation elements
- Content blocks and hierarchy
- Call-to-action buttons
- Form fields and inputs
- Image placeholders
- Annotations and notes

Wireframing Tools
- Figma, Sketch, Adobe XD
- Balsamiq (low-fidelity)
- Whimsical, Miro
- Paper and pencil (sketching)

4. Prototyping

Prototype Fidelity Levels
- Low-fidelity: Paper prototypes, clickable wireframes
- Mid-fidelity: Interactive wireframes, basic animations
- High-fidelity: Fully designed, realistic interactions

Prototyping Capabilities
- Click-through flows
- Animations and transitions
- Micro-interactions
- Form validation
- State changes
- Responsive behaviors
- User testing scenarios

Prototyping Tools
- Figma (interactive prototypes)
- Framer (code-based, advanced)
- Principle (animation-focused)
- ProtoPie (complex interactions)
- InVision, Marvel

5. Visual Design

Design Principles
- Balance: Visual weight distribution
- Contrast: Emphasis and hierarchy
- Repetition: Consistency and rhythm
- Alignment: Order and organization
- Proximity: Grouping related elements
- White space: Breathing room
- Typography: Readability and hierarchy

Color Theory
- Color psychology and meaning
- Color schemes (monochromatic, complementary, triadic)
- Accessibility (WCAG contrast ratios)
- Brand color systems
- Dark mode considerations

Typography
- Font pairing (2-3 fonts max)
- Type scale and hierarchy (H1-H6, body, caption)
- Line height and spacing
- Readability (line length 50-75 characters)
- Web-safe fonts and loading

Visual Design Tools
- Figma, Sketch, Adobe XD
- Adobe Illustrator (icons, graphics)
- Adobe Photoshop (image editing)
- Affinity Designer

6. Interaction Design

Interaction Patterns
- Navigation patterns (hamburger, tabs, breadcrumbs)
- Input patterns (forms, search, filters)
- Feedback patterns (loading, success, error)
- Data patterns (tables, lists, cards)
- Social patterns (comments, likes, sharing)

Micro-interactions
- Button hover states
- Loading animations
- Form validation feedback
- Pull-to-refresh
- Swipe gestures
- Drag and drop
- Tooltips and hints

Animation Principles
- Disney's 12 principles of animation
- Easing curves (ease-in, ease-out, ease-in-out)
- Duration (100-300ms for UI animations)
- Purpose (feedback, continuity, delight)

7. Responsive & Mobile Design

Responsive Design Principles
- Mobile-first approach
- Fluid grids and flexible layouts
- Flexible images and media
- CSS media queries
- Breakpoints (mobile, tablet, desktop)

Mobile Design Patterns
- Touch targets (minimum 44x44px)
- Thumb zones
- Bottom navigation
- Swipe gestures
- Pull-to-refresh
- Infinite scroll vs pagination

Adaptive vs Responsive
- Responsive: Fluid, adapts to any screen size
- Adaptive: Fixed layouts for specific breakpoints
- Progressive enhancement
- Graceful degradation

8. Accessibility (A11y)

WCAG 2.1 Principles (POUR)
- Perceivable: Information accessible to senses
- Operable: Interface navigable by all users
- Understandable: Content and operation clear
- Robust: Compatible with assistive technologies

Accessibility Requirements
- Color contrast: 4.5:1 for normal text, 3:1 for large text
- Keyboard navigation: All interactive elements accessible
- Screen reader support: Semantic HTML, ARIA labels
- Focus indicators: Visible focus states
- Alternative text: Descriptive alt text for images
- Captions and transcripts: For audio/video content
- Form labels: Explicit labels for inputs
- Error messages: Clear, actionable error descriptions

Accessibility Tools
- WAVE, Axe DevTools
- Lighthouse (Chrome)
- Color contrast checkers
- Screen readers (NVDA, JAWS, VoiceOver)

9. Design Systems

Design System Components
- Foundations: Colors, typography, spacing, grid
- Components: Buttons, inputs, cards, modals
- Patterns: Navigation, forms, data display
- Guidelines: Usage, accessibility, best practices
- Tokens: Design variables (CSS custom properties)

Design System Benefits
- Consistency across products
- Faster design and development
- Better collaboration
- Easier maintenance
- Scalability

Design System Tools
- Figma (shared libraries, variants)
- Storybook (component documentation)
- Zeroheight (documentation platform)
- Abstract (version control for Sketch)

Popular Design Systems
- Material Design (Google)
- Human Interface Guidelines (Apple)
- Fluent Design (Microsoft)
- Carbon Design System (IBM)
- Atlassian Design System

10. Usability Testing

Testing Methods
- Moderated usability testing
- Unmoderated remote testing
- Guerrilla testing
- A/B testing
- First-click testing
- 5-second test
- Tree testing (navigation)

Test Planning
- Define goals and metrics
- Create test scenarios and tasks
- Recruit participants (5-8 users)
- Prepare testing script
- Choose tools and environment

Metrics to Measure
- Task success rate
- Time on task
- Error rate
- Satisfaction (SUS, NPS)
- Click-through rate
- Conversion rate

Usability Testing Process

1. Plan → Define goals, scenarios, participants
2. Recruit → Find representative users
3. Prepare → Create prototype and script
4. Test → Observe and take notes
5. Analyze → Identify patterns and issues
6. Report → Share findings and recommendations
7. Iterate → Implement changes and retest

Design Workflows

Complete UX/UI Design Process

┌─────────────────────────────────────────────────────────┐
│                  UX/UI DESIGN PROCESS                   │
└─────────────────────────────────────────────────────────┘

Phase 1: DISCOVER (Research & Understand)
├── Stakeholder interviews
├── User research (interviews, surveys)
├── Competitive analysis
├── Analytics review
└── Problem definition

Deliverables:
├── Research findings report
├── User personas
├── Journey maps
└── Problem statements

Phase 2: DEFINE (Synthesize & Strategize)
├── Affinity mapping
├── User stories and scenarios
├── Information architecture
├── User flows
└── Feature prioritization

Deliverables:
├── Site map
├── User flows
├── Feature list
└── Success metrics

Phase 3: DESIGN (Ideate & Create)
├── Sketching and ideation
├── Low-fidelity wireframes
├── Mid/high-fidelity wireframes
├── Visual design exploration
├── Design system creation
└── High-fidelity mockups

Deliverables:
├── Wireframes
├── Visual designs
├── Style guide
└── Design specifications

Phase 4: PROTOTYPE (Build & Interact)
├── Interactive prototypes
├── Micro-interactions
├── Animations and transitions
├── Responsive variations
└── Accessibility implementation

Deliverables:
├── Interactive prototypes
├── Animation specs
└── Responsive designs

Phase 5: TEST (Validate & Iterate)
├── Usability testing
├── Accessibility audit
├── A/B testing
├── Analytics setup
└── Stakeholder review

Deliverables:
├── Test results and insights
├── Iteration recommendations
└── Final designs

Phase 6: DELIVER (Handoff & Launch)
├── Design specifications
├── Asset export
├── Developer handoff
├── Design QA
└── Post-launch monitoring

Deliverables:
├── Design files (Figma/Sketch)
├── Exported assets
├── Component documentation
└── Style guide

Design Critique Framework

Structure for effective design critiques:

1. CONTEXT (2 minutes)
   └── Designer explains: Problem, goals, constraints, decisions

2. REVIEW (5 minutes)
   └── Team silently reviews the design

3. FEEDBACK (15 minutes)
   ├── What works well?
   ├── What could be improved?
   ├── Questions and clarifications
   └── Alternative approaches

4. ACTION ITEMS (3 minutes)
   └── Next steps and decisions

Rules:
- Be specific and constructive
- Focus on user needs, not personal preferences
- Ask questions rather than make statements
- Support feedback with reasoning
- Respect the designer's decisions

Design Best Practices

Visual Hierarchy

1. SIZE
   Large = Important
   Small = Less important

2. COLOR
   High contrast = Attention
   Low contrast = Secondary

3. POSITION
   Top/Left = Primary (in LTR languages)
   Bottom/Right = Secondary

4. SPACING
   More space = Emphasis
   Tight spacing = Related items

5. TYPOGRAPHY
   Bold = Important
   Regular = Body
   Light = Subtle

Layout Principles

8-Point Grid System

Use multiples of 8 for:
- Spacing (8px, 16px, 24px, 32px, 40px, 48px)
- Element sizes
- Layout dimensions

Benefits:
- Consistency
- Easier handoff to developers
- Scales well for different densities

The 60-30-10 Color Rule

60% - Dominant color (background, main areas)
30% - Secondary color (supporting elements)
10% - Accent color (CTAs, highlights)

F-Pattern and Z-Pattern

F-Pattern (content-heavy pages):
- Users scan top to bottom
- Focus on left side
- Horizontal movements decrease down page

Z-Pattern (simple layouts):
- Start top-left
- Scan to top-right
- Diagonal to bottom-left
- End at bottom-right (CTA)

Mobile Design Guidelines

Touch Target Sizes

Minimum: 44x44 px (iOS), 48x48 dp (Android)
Recommended: 56-60px for primary actions
Spacing: 8px minimum between targets

Safe Areas

iOS:
- Top safe area: Below notch/status bar
- Bottom safe area: Above home indicator

Android:
- Top: Below status bar
- Bottom: Above navigation bar

Add padding to avoid system UI overlap

Mobile Navigation Patterns

1. Tab Bar (Bottom)
   - 3-5 primary sections
   - Always visible
   - Icons + labels

2. Hamburger Menu
   - More options
   - Hidden by default
   - Consider discoverability

3. Bottom Sheet
   - Contextual actions
   - Easy thumb reach
   - Swipe to dismiss

Form Design Best Practices

1. ALIGNMENT
   ✅ Top-aligned labels (fastest completion)
   ⚠️  Left-aligned (takes more space)
   ❌ Placeholder-only (accessibility issues)

2. FIELD LENGTH
   Match field length to expected input
   - Phone: Shorter field
   - Email: Medium field
   - Address: Longer field

3. INPUT TYPES
   Use appropriate HTML input types:
   - email, tel, number, date
   - Triggers correct keyboard on mobile

4. VALIDATION
   ✅ Inline validation (real-time feedback)
   ✅ Success indicators
   ✅ Clear error messages
   ❌ Validation only on submit

5. REQUIRED FIELDS
   ✅ Mark required fields (*)
   ✅ Or mark optional fields
   ✅ Explain why information is needed

6. PROGRESS INDICATORS
   For multi-step forms:
   - Show current step
   - Show total steps
   - Allow navigation between steps

7. AUTOFILL & AUTOCOMPLETE
   - Use autocomplete attributes
   - Support browser autofill
   - Provide suggestions when helpful

Button Design Guidelines

BUTTON HIERARCHY

Primary Button:
- High contrast
- Solid fill
- One per screen/section
- For main action

Secondary Button:
- Medium contrast
- Outline or ghost
- Supporting actions

Tertiary Button:
- Text/link style
- Low priority actions

BUTTON STATES

Default → Hover → Active → Disabled

Each state should be visually distinct:
- Hover: Slight color change
- Active: Pressed appearance
- Disabled: Reduced opacity (40-60%)

BUTTON SIZE

Large: 48-56px height (mobile primary actions)
Medium: 40-44px height (default)
Small: 32-36px height (secondary actions)

BUTTON LABELS

✅ Action-oriented ("Save changes", "Create account")
✅ Specific ("Delete file", not just "Delete")
❌ Generic ("Click here", "Submit")

Design by Component

Navigation Design

Primary Navigation

Desktop:
- Horizontal top bar
- 5-7 main items
- Dropdown menus for sub-items
- Search prominent

Mobile:
- Bottom tab bar (iOS)
- Top app bar + hamburger (Android)
- 4-5 items max in tab bar

Breadcrumbs

Usage:
- 3+ levels deep
- E-commerce, documentation
- Not for single-path flows

Format:
Home > Category > Subcategory > Current Page

Guidelines:
- Make all levels clickable (except current)
- Use chevron separator (>)
- Truncate on mobile

Card Design

Card Anatomy:
┌─────────────────────────┐
│  [Image/Thumbnail]      │
├─────────────────────────┤
│  Title                  │
│  Description            │
│  Metadata (date, author)│
│  [Action Button]        │
└─────────────────────────┘

Best Practices:
- Consistent card sizes
- Clear visual hierarchy
- Adequate padding (16-24px)
- Hover state for interactivity
- Shadow or border for definition

Modal Design

Modal Guidelines:

SIZE:
- Small: 400px width (confirmations)
- Medium: 600px width (forms)
- Large: 800px+ width (complex content)

STRUCTURE:
┌─────────────────────────────┐
│ Title                    [×]│
├─────────────────────────────┤
│                             │
│  Content                    │
│                             │
├─────────────────────────────┤
│     [Cancel]  [Primary]     │
└─────────────────────────────┘

BEHAVIOR:
- Click outside to close (or not, for critical actions)
- ESC key to close
- Focus trap (keyboard navigation)
- Prevent body scroll
- Return focus on close

ALTERNATIVES TO CONSIDER:
- Inline expansion
- Side panel
- Bottom sheet (mobile)
- Toast notification

Empty States

Empty State Components:
1. Icon/Illustration
2. Headline (what's empty)
3. Description (why it's empty)
4. Call-to-action (what to do)

Examples:

NO ITEMS:
"No messages yet"
"Start a conversation with your team"
[+ New Message]

NO RESULTS:
"No results found for 'search term'"
"Try different keywords or filters"
[Clear Filters]

NO CONNECTION:
"You're offline"
"Check your internet connection"
[Try Again]

Accessibility Guidelines

WCAG 2.1 Level AA Checklist

Perceivable

✓ Text alternatives for images (alt text)
✓ Captions for audio/video
✓ Color contrast 4.5:1 (normal text), 3:1 (large text)
✓ Don't rely on color alone to convey information
✓ Text can be resized 200% without loss of content
✓ Images of text avoided (use real text)

Operable

✓ All functionality available from keyboard
✓ No keyboard traps
✓ Sufficient time for reading and interaction
✓ Provide way to pause/stop moving content
✓ No content flashes more than 3 times per second
✓ Skip navigation links
✓ Descriptive page titles
✓ Focus order is logical
✓ Link purpose clear from text or context
✓ Multiple ways to find pages
✓ Headings and labels descriptive
✓ Focus indicator visible

Understandable

✓ Language of page specified
✓ Consistent navigation across pages
✓ Consistent identification of components
✓ Error messages provided
✓ Error suggestions provided
✓ Error prevention for critical actions

Robust

✓ Valid HTML markup
✓ Name, role, value for UI components
✓ Status messages announced to screen readers

Accessible Color Palettes

Tool Recommendations:
- WebAIM Contrast Checker
- Coolors (contrast checker)
- Stark (Figma plugin)
- Who Can Use (simulator)

Creating Accessible Palettes:
1. Start with brand colors
2. Test contrast against white/black
3. Adjust lightness if needed
4. Create color variants for different uses
5. Document which combinations are accessible

Example Accessible Palette:
Primary: #0066CC (4.5:1 on white) ✓
Secondary: #2E7D32 (4.5:1 on white) ✓
Error: #D32F2F (4.5:1 on white) ✓
Warning: #F57C00 (needs dark text) ⚠️
Success: #388E3C (4.5:1 on white) ✓

Screen Reader Considerations

Semantic HTML:
<header>, <nav>, <main>, <aside>, <footer>
<h1> to <h6> (proper hierarchy)
<button>, <a>, <input>, <label>

ARIA Labels:
- aria-label: Direct label
- aria-labelledby: Reference to label element
- aria-describedby: Additional description
- role: Define element purpose
- aria-live: Announce dynamic content

Example:
<button 
  aria-label="Close dialog"
  aria-describedby="close-help">
  ×
</button>
<span id="close-help" hidden>
  Press Escape to close
</span>

Design Tools & Workflow

Figma Best Practices

Organization

File Structure:
📁 Project Name
  📁 01 - Research
    📄 User Personas
    📄 Journey Maps
  📁 02 - Wireframes
    📄 Low Fidelity
    📄 High Fidelity
  📁 03 - Visual Design
    📄 Design System
    📄 Components
    📄 Final Designs
  📁 04 - Prototypes
  📁 05 - Handoff

Component Architecture

Atomic Design Methodology:

Atoms:
- Button, Input, Icon, Label

Molecules:
- Search bar (input + button + icon)
- Form field (label + input + error)

Organisms:
- Navigation bar
- Form section
- Card with actions

Templates:
- Page layouts
- Empty states

Pages:
- Real content instances

Auto Layout Tips

Use Auto Layout for:
✓ Buttons (padding adjusts to text)
✓ Navigation bars
✓ Cards with dynamic content
✓ Lists and grids
✓ Responsive components

Settings:
- Padding: 16px 24px (top/bottom, left/right)
- Gap: 8px between items
- Constraints: Left/Right or Scale

Figma Plugins (Essential)

Design:
- Unsplash (placeholder images)
- Iconify (icon library)
- Content Reel (placeholder content)

Accessibility:
- Stark (contrast, colorblind simulation)
- A11y - Focus Orderer

Productivity:
- Auto Layout (built-in)
- Find and Replace
- Rename It (batch rename)

Handoff:
- Zeplin, Avocode (design specs)
- Overflow (user flows)

Design System in Figma

Setup:
1. Create styles:
   - Colors (primary, secondary, etc.)
   - Typography (heading, body, etc.)
   - Effects (shadows, blur)
   - Grids (8pt, 12-column)

2. Create components:
   - Button variants (primary, secondary, size)
   - Input variants (default, error, disabled)
   - Icons
   - Cards

3. Publish library:
   - Enable as team library
   - Version updates
   - Notify designers of changes

4. Documentation:
   - Usage guidelines
   - Do's and don'ts
   - Code examples

Usage:
- Use library components
- Don't detach unless customizing
- Create instances, not copies
- Suggest improvements to system owners

Design Deliverables

User Personas

Persona Template:

┌─────────────────────────────────────────────┐
│ [Photo]  Name: Sarah Martinez               │
│          Age: 34                             │
│          Role: Product Manager              │
│          Location: San Francisco, CA        │
├─────────────────────────────────────────────┤
│ ABOUT                                       │
│ Bio and background information              │
│                                             │
│ GOALS                                       │
│ • Main goal 1                               │
│ • Main goal 2                               │
│                                             │
│ FRUSTRATIONS                                │
│ • Pain point 1                              │
│ • Pain point 2                              │
│                                             │
│ MOTIVATIONS                                 │
│ • What drives them                          │
│ • What matters most                         │
│                                             │
│ TECH SAVVINESS                              │
│ ■■■■□ (4/5)                                 │
│                                             │
│ PREFERRED CHANNELS                          │
│ Mobile app, Email, Web                      │
└─────────────────────────────────────────────┘

Based on: 12 user interviews, analytics data

User Journey Map

Journey Map Structure:

PERSONA: Sarah Martinez - Booking a flight

┌────────────┬─────────────┬──────────────┬──────────────┬────────────┐
│ PHASE      │ RESEARCH    │ COMPARE      │ BOOK         │ TRAVEL     │
├────────────┼─────────────┼──────────────┼──────────────┼────────────┤
│ ACTIONS    │ • Search    │ • Filter     │ • Select     │ • Check-in │
│            │ • Read      │ • Compare    │ • Pay        │ • Board    │
│            │   reviews   │   prices     │ • Confirm    │            │
├────────────┼─────────────┼──────────────┼──────────────┼────────────┤
│ THOUGHTS   │ "Need best  │ "Too many    │ "Is this     │ "Where's   │
│            │  price"     │  options"    │  secure?"    │  my ticket"│
├────────────┼─────────────┼──────────────┼──────────────┼────────────┤
│ EMOTIONS   │ 😊 Excited  │ 😕 Confused  │ 😰 Anxious   │ 😊 Happy   │
├────────────┼─────────────┼──────────────┼──────────────┼────────────┤
│ PAIN       │ None        │ Too complex  │ Slow         │ Confusing  │
│ POINTS     │             │ filtering    │ checkout     │ navigation │
├────────────┼─────────────┼──────────────┼──────────────┼────────────┤
│ OPPORT-    │ Saved       │ AI           │ One-click    │ Digital    │
│ UNITIES    │ searches    │ suggestions  │ checkout     │ wallet     │
└────────────┴─────────────┴──────────────┴──────────────┴────────────┘

Design Specifications

For Developers:

Component: Primary Button

STATES:
- Default: #0066CC, 16px padding, border-radius 8px
- Hover: #0052A3
- Active: #003D7A
- Disabled: #0066CC at 40% opacity

TYPOGRAPHY:
- Font: Inter, 16px, 600 weight
- Color: #FFFFFF
- Letter-spacing: 0.02em

SPACING:
- Internal: 12px vertical, 24px horizontal
- External: 16px margin-bottom

ANIMATION:
- Transition: all 0.2s ease-in-out
- Hover: scale(1.02)

ACCESSIBILITY:
- Min height: 44px
- Min width: 120px
- Focus outline: 2px solid #0066CC, 4px offset

When to Use This Skill

Use the UX/UI Design skill when you need to:

• ✅ Design user interfaces for web or mobile
• ✅ Conduct user research and testing
• ✅ Create wireframes and prototypes
• ✅ Develop design systems and style guides
• ✅ Ensure accessibility compliance
• ✅ Design responsive layouts
• ✅ Create information architecture
• ✅ Design navigation and user flows
• ✅ Evaluate usability
• ✅ Create user personas and journey maps
• ✅ Design forms and data input
• ✅ Create micro-interactions
• ✅ Conduct design critiques
• ✅ Handoff designs to developers
• ✅ Establish design best practices

Examples

See the examples/ folder for:
- Complete design process walkthrough
- Wireframe to high-fidelity design
- Design system creation
- Accessibility audit
- User research and testing templates

Resources

Design Tools

• Figma, Sketch, Adobe XD (UI design)
• Framer, Principle (prototyping)
• Miro, FigJam (collaboration)
• Maze, UserTesting (user testing)

Design Systems

• Material Design (Google)
• Human Interface Guidelines (Apple)
• Fluent Design (Microsoft)
• Carbon (IBM)
• Polaris (Shopify)

Learning Resources

• Nielsen Norman Group (research and articles)
• Smashing Magazine
• A List Apart
• Laws of UX
• UX Collective (Medium)

Communities

• Designer Hangout (Slack)
• Dribbble, Behance (portfolios)
• UX Stack Exchange
• Reddit: r/userexperience, r/UI_Design

Remember: Good design is invisible. Great design solves problems while being beautiful, accessible, and delightful to use.