# UX Prototyping

> Create interactive prototypes to test and refine digital product designs. Use for: wireframing, low/high-fidelity prototyping, user flows, interactive mockups, usability testing, design iteration, and stakeholder communication.

- Skill: `majiayu000/ux-prototyping-2` (Agent Skill, multi-file: 2 files)
- Install (CLI): `npx skillmds@latest add majiayu000/ux-prototyping-2`
- Raw SKILL.md: https://api.skillmd.com/api/skills/majiayu000/ux-prototyping-2/raw
- Safety review: pending (external: skill-scanner PASS, skillspector PASS)
- Works with: Claude Code, Claude.ai, OpenAI Codex
- Category: Product & Planning
- Author: majiayu000 (https://skillmd.com/u/majiayu000)
- Updated: 2026-09-09
- Page: https://skillmd.com/skills/majiayu000/ux-prototyping-2

---


# UX Prototyping

Create interactive prototypes to visualize, test, and refine digital product designs before development.

## Overview

UX prototyping involves creating preliminary versions of digital products to test functionality, gather feedback, and refine designs. Prototypes range from simple sketches to fully interactive mockups.

## Wireframing

### Purpose of Wireframes

**What Wireframes Are**:
- Skeletal blueprints of interfaces
- Focus on structure and layout
- Low-fidelity representations
- No detailed visual design
- Emphasize functionality

**Benefits**:
- Quick and inexpensive
- Easy to iterate
- Focus on UX, not aesthetics
- Facilitate communication
- Identify issues early

### Wireframe Fidelity Levels

**Low-Fidelity**:
- Rough sketches
- Basic shapes and placeholders
- Grayscale
- Minimal detail
- Fast iteration

**Mid-Fidelity**:
- More defined layout
- Basic typography
- Spacing and alignment
- Some UI elements
- Digital tools

**High-Fidelity**:
- Detailed layout
- Actual content
- Refined UI elements
- Near-final design
- Interactive elements

### Wireframing Techniques

**Paper Sketching**:
- Fastest method
- Brainstorming and ideation
- Collaborative sessions
- No tool learning curve
- Easy to discard and restart

**Digital Wireframing**:
- Tools: Figma, Sketch, Adobe XD, Balsamiq
- Easy sharing and collaboration
- Reusable components
- Version control
- Annotations and notes

**Wireframe Elements**:
- Layout and grid
- Navigation
- Content hierarchy
- Functionality indicators
- Annotations

### Best Practices

**Focus on Structure**:
- Content placement
- Information hierarchy
- User flow
- Functionality
- Avoid visual design details

**Use Placeholders**:
- Lorem ipsum for text
- Gray boxes for images
- Icons for functionality
- Consistent sizing

**Annotate**:
- Explain interactions
- Describe functionality
- Note content requirements
- Clarify user flows

## Prototyping Fidelity

### Low-Fidelity Prototypes

**Characteristics**:
- Paper or simple digital
- Basic interactions
- Clickable wireframes
- Fast to create
- Focus on concept

**Use Cases**:
- Early ideation
- Concept validation
- Quick feedback
- Stakeholder alignment
- User flow testing

**Tools**:
- Paper prototypes
- InVision (clickable wireframes)
- Marvel
- Balsamiq

### Medium-Fidelity Prototypes

**Characteristics**:
- More refined visuals
- Interactive elements
- Some design details
- Realistic content
- User flow simulation

**Use Cases**:
- Usability testing
- Design refinement
- Stakeholder presentations
- Developer handoff preparation

**Tools**:
- Figma
- Adobe XD
- Sketch + InVision
- Axure RP

### High-Fidelity Prototypes

**Characteristics**:
- Polished visuals
- Full interactivity
- Animations and transitions
- Realistic data
- Near-final product

**Use Cases**:
- Final usability testing
- Stakeholder approval
- Developer handoff
- Marketing and demos
- User acceptance testing

**Tools**:
- Figma (advanced prototyping)
- Adobe XD
- Principle
- ProtoPie
- Framer

## Interactive Prototyping

### Interaction Design

**Types of Interactions**:
- **Click/Tap**: Navigate between screens
- **Hover**: Show tooltips, highlights
- **Drag**: Sliders, reordering
- **Scroll**: Parallax, sticky elements
- **Swipe**: Carousels, dismissals
- **Keyboard**: Shortcuts, form input

**Interaction States**:
- Default
- Hover
- Active/Pressed
- Focused
- Disabled
- Loading

### Transitions and Animations

**Purpose**:
- Provide feedback
- Guide attention
- Show relationships
- Enhance usability
- Add polish

**Types**:
- **Fade**: Smooth appearance/disappearance
- **Slide**: Directional movement
- **Scale**: Grow/shrink
- **Dissolve**: Blend between states
- **Smart Animate**: Automatic transitions (Figma)

**Best Practices**:
- Keep animations short (200-400ms)
- Use easing for natural feel
- Be consistent
- Don't overuse
- Ensure accessibility

### User Flows

**Defining User Flows**:
- Step-by-step paths
- From entry to goal completion
- Decision points
- Alternative paths
- Error states

**Flow Components**:
- Entry points
- Screens/pages
- Actions
- Decision points
- End states

**Documenting Flows**:
- Flowcharts
- User flow diagrams
- Annotated prototypes
- Storyboards

## Prototyping Tools

### Figma

**Strengths**:
- Real-time collaboration
- Component system
- Auto Layout
- Advanced prototyping
- Developer handoff

**Prototyping Features**:
- Hotspots and connections
- Interactions and triggers
- Transitions and animations
- Overlays and modals
- Device frames

### Adobe XD

**Strengths**:
- Fast performance
- Voice prototyping
- Auto-animate
- Repeat Grid
- Adobe ecosystem integration

**Prototyping Features**:
- Artboard connections
- Triggers and actions
- Transitions
- Timed transitions
- Component states

### Sketch + InVision

**Strengths**:
- Powerful design tool (Sketch)
- Collaboration platform (InVision)
- Extensive plugins
- Design systems

**Prototyping Features**:
- Sync from Sketch
- Hotspots
- Gestures
- Transitions
- Comments and feedback

### Axure RP

**Strengths**:
- Complex interactions
- Conditional logic
- Variables and functions
- Dynamic content
- Documentation

**Prototyping Features**:
- Widgets and masters
- Interactions and events
- Conditional logic
- Adaptive views
- Specifications

## Prototyping Workflow

### Planning

**Define Goals**:
- What needs testing?
- What decisions need validation?
- Who is the audience?
- What fidelity is appropriate?

**Scope**:
- Which features to include?
- How many screens?
- Level of interactivity?
- Time and resources available?

### Creation

**Iterative Process**:
1. Sketch initial concepts
2. Create low-fidelity wireframes
3. Test and gather feedback
4. Refine to mid-fidelity
5. Add interactions
6. Test again
7. Develop high-fidelity prototype
8. Final testing and validation

**Efficiency Tips**:
- Use components and symbols
- Leverage design systems
- Reuse patterns
- Start simple, add complexity
- Focus on critical paths

### Testing

**Usability Testing with Prototypes**:
- Define tasks
- Recruit participants
- Observe interactions
- Ask follow-up questions
- Identify issues
- Iterate

**Feedback Collection**:
- Task completion
- Time on task
- Errors and confusion
- Satisfaction ratings
- Qualitative feedback

### Iteration

**Refining Prototypes**:
- Address usability issues
- Clarify confusing elements
- Improve interactions
- Enhance visual design
- Test again

**When to Stop**:
- Goals achieved
- No major issues found
- Stakeholder approval
- Ready for development
- Diminishing returns

## Advanced Techniques

### Responsive Prototyping

**Multi-Device Design**:
- Desktop, tablet, mobile
- Breakpoints and layouts
- Adaptive vs. responsive
- Touch vs. mouse interactions

**Tools**:
- Figma constraints
- Adobe XD responsive resize
- Sketch responsive design
- Separate artboards per device

### Micro-Interactions

**Purpose**:
- Provide feedback
- Guide users
- Delight and engage
- Communicate status

**Examples**:
- Button press animations
- Loading indicators
- Form validation
- Pull-to-refresh
- Like/favorite animations

**Design Considerations**:
- Subtle and quick
- Purposeful
- Consistent
- Accessible

### Data-Driven Prototypes

**Dynamic Content**:
- Realistic data
- Variable content
- Personalization
- Search results
- User-generated content

**Implementation**:
- Plugins (Content Reel, Craft)
- Manual data entry
- Spreadsheet integration
- API connections (advanced)

## Collaboration and Handoff

### Stakeholder Presentations

**Presenting Prototypes**:
- Set context and goals
- Walk through user flows
- Demonstrate interactions
- Gather feedback
- Document decisions

**Tips**:
- Tell a story
- Focus on user value
- Show, don't just tell
- Be open to feedback
- Explain design rationale

### Developer Handoff

**Specifications**:
- Measurements and spacing
- Colors and typography
- Interaction details
- States and variations
- Assets and icons

**Tools**:
- Figma Inspect
- Zeplin
- Adobe XD Share
- Sketch Measure plugin

**Documentation**:
- Interaction descriptions
- Edge cases
- Error states
- Responsive behavior
- Accessibility requirements

### Design Systems

**Component Libraries**:
- Reusable components
- Consistent patterns
- Shared across projects
- Version control
- Documentation

**Benefits**:
- Faster prototyping
- Consistency
- Easier maintenance
- Team alignment
- Scalability

## Best Practices

### Prototyping Principles

**Start Low, Go High**:
- Begin with low-fidelity
- Validate concepts early
- Increase fidelity progressively
- Don't over-invest too soon

**Focus on Goals**:
- What needs testing?
- What decisions need validation?
- Don't prototype everything
- Prioritize critical paths

**Iterate Quickly**:
- Fast feedback loops
- Fail fast, learn fast
- Don't get attached
- Embrace change

### Common Pitfalls