# Prototyping Techniques

## Overview

Prototyping is the process of creating early samples or models of a product to test concepts, gather feedback, and validate designs before full development. Prototypes range from low-fidelity sketches to high-fidelity interactive simulations.

## Prototype Fidelity Levels

### Low-Fidelity
- Quick to create
- Paper sketches
- Wireframes
- Basic layouts
- Early concepts

**Use When:**
- Exploring ideas
- Early validation
- Rapid iteration
- Concept testing
- Team alignment

### Medium-Fidelity
- More detail
- Digital wireframes
- Basic interactions
- Some styling
- Structured layouts

**Use When:**
- Refining concepts
- Testing flows
- User testing
- Stakeholder review
- Design development

### High-Fidelity
- Detailed design
- Interactive prototype
- Real content
- Final styling
- Near-final experience

**Use When:**
- Final validation
- Detailed testing
- Stakeholder approval
- Development handoff
- User acceptance testing

## Prototyping Methods

### Paper Prototyping
- Hand-drawn sketches
- Quick iteration
- Low cost
- Easy to modify
- Collaborative

**Best For:**
- Early ideation
- Team brainstorming
- Quick concepts
- Rapid iteration
- Low-fidelity testing

### Digital Wireframes
- Digital sketches
- Structure and layout
- Content placement
- Navigation flow
- Basic interactions

**Best For:**
- Information architecture
- Layout testing
- Content structure
- Navigation design
- Medium-fidelity

### Interactive Prototypes
- Clickable prototypes
- User flows
- Interactions
- Animations
- Realistic experience

**Best For:**
- User testing
- Stakeholder demos
- Flow validation
- Interaction design
- High-fidelity testing

### Code Prototypes
- HTML/CSS/JS
- Functional prototype
- Real interactions
- Performance testing
- Technical validation

**Best For:**
- Technical feasibility
- Performance testing
- Complex interactions
- Development reference
- Production-ready

## Prototyping Tools

### Design Tools
- Figma
- Sketch
- Adobe XD
- InVision
- Framer

### Code Prototypes
- HTML/CSS
- JavaScript frameworks
- React
- Vue
- Angular

### Specialized Tools
- Axure (complex interactions)
- Principle (animations)
- Proto.io (mobile)
- Marvel (quick prototypes)

## Prototyping Process

### 1. Define Goals
- What to test
- Questions to answer
- Success criteria
- Target users
- Scope

### 2. Choose Fidelity
- Appropriate level
- Time constraints
- Testing needs
- Stakeholder requirements
- Resources available

### 3. Create Prototype
- Build prototype
- Include key features
- Test interactions
- Add content
- Refine details

### 4. Test Prototype
- User testing
- Stakeholder review
- Gather feedback
- Identify issues
- Document findings

### 5. Iterate
- Refine based on feedback
- Fix issues
- Improve design
- Test again
- Repeat as needed

## Prototyping Best Practices

### 1. Start Low-Fidelity
- Begin with sketches
- Rapid iteration
- Explore concepts
- Save time
- Focus on structure

### 2. Test Early
- Don't wait for perfection
- Test early concepts
- Gather feedback
- Iterate quickly
- Validate assumptions

### 3. Focus on Key Features
- Core functionality
- Critical paths
- Important interactions
- Key user flows
- Essential features

### 4. Use Real Content
- Actual content when possible
- Realistic data
- Meaningful examples
- Contextual information
- Authentic experience

### 5. Test with Users
- Real users
- Target audience
- Actual scenarios
- Realistic tasks
- Authentic feedback

## Common Prototyping Mistakes

### 1. Too Much Detail Too Early
- Over-detailed early prototypes
- Wasted time
- Hard to change
- Premature decisions
- Slower iteration

### 2. Not Testing
- Creating but not testing
- No feedback
- Assumptions not validated
- Missed issues
- Wasted effort

### 3. Wrong Fidelity
- Inappropriate level
- Too detailed or too basic
- Doesn't meet needs
- Wasted resources
- Poor results

### 4. Ignoring Feedback
- Not acting on feedback
- Defensive about design
- Missing improvements
- Wasted testing
- Poor outcomes

## Prototype Testing

### Usability Testing
- Task-based testing
- Observe users
- Gather feedback
- Identify issues
- Measure success

### Concept Testing
- Validate concepts
- Test ideas
- Gather reactions
- Assess viability
- Make decisions

### Stakeholder Review
- Get approval
- Align team
- Communicate design
- Gather input
- Build consensus

## Prototyping for Different Stages

### Discovery
- Low-fidelity
- Explore concepts
- Test ideas
- Rapid iteration
- Quick validation

### Design
- Medium to high-fidelity
- Refine designs
- Test interactions
- Validate flows
- Detailed testing

### Development
- High-fidelity
- Technical validation
- Performance testing
- Development reference
- Handoff documentation

## Best Practices Summary

1. **Start Simple**: Begin with low-fidelity
2. **Test Early**: Don't wait for perfection
3. **Focus on Key Features**: Core functionality
4. **Use Real Content**: Authentic experience
5. **Test with Users**: Real user feedback
6. **Iterate Quickly**: Rapid refinement
7. **Choose Right Fidelity**: Appropriate level
8. **Document Decisions**: Record learnings
9. **Share Widely**: Communicate design
10. **Act on Feedback**: Implement improvements

