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.