wireframing-prototyping

What this skill does

# Wireframing and Prototyping

## Wireframing Tools and Techniques

### Popular Wireframing Tools
- **Figma**: Collaborative design tool with wireframing and prototyping
- **Sketch**: Mac-based design tool with wireframing capabilities
- **Adobe XD**: Design and prototyping tool from Adobe
- **Balsamiq**: Low-fidelity wireframing tool with hand-drawn style
- **Axure RP**: Advanced prototyping tool for complex interactions
- **Framer**: Design and code tool for high-fidelity prototypes

### Wireframing Techniques
- **Low-Fidelity**: Quick sketches focusing on structure and layout
- **Mid-Fidelity**: More detailed with basic styling
- **High-Fidelity**: Near-final designs with full styling
- **Grayboxing**: Using grayscale to focus on layout
- **Paper Prototyping**: Hand-drawn sketches for quick ideation
- **Digital Wireframes**: Created in design tools for precision

### Wireframing Best Practices
- **Focus on Structure**: Emphasize layout and information hierarchy
- **Use Placeholders**: Use lorem ipsum and placeholder images
- **Keep it Simple**: Avoid colors, images, and detailed styling
- **Annotate**: Add notes to explain functionality
- **Iterate**: Create multiple versions and refine
- **Test Early**: Test wireframes with users before adding detail

## Low-Fidelity vs High-Fidelity Prototypes

### Low-Fidelity Prototypes
- **Purpose**: Quick exploration of ideas and concepts
- **Tools**: Paper, whiteboard, Balsamiq, Sketch
- **Time**: Hours to create
- **Detail**: Minimal, focus on structure
- **Cost**: Low
- **Use Case**: Early ideation, brainstorming, concept validation

### High-Fidelity Prototypes
- **Purpose**: Realistic representation of final product
- **Tools**: Figma, Sketch, Adobe XD, Framer
- **Time**: Days to weeks to create
- **Detail**: Full styling, interactions, animations
- **Cost**: High
- **Use Case**: User testing, stakeholder approval, developer handoff

### Choosing Fidelity Level
- **Early Stage**: Low-fidelity for exploration
- **Mid Stage**: Mid-fidelity for refinement
- **Late Stage**: High-fidelity for validation
- **Time Constraints**: Lower fidelity when time is limited
- **Audience**: Higher fidelity for stakeholders, lower for internal teams

## User Flow Diagrams

### User Flow Fundamentals
- **Start Point**: Where the user begins the journey
- **End Point**: The goal or completion state
- **Decision Points**: Places where users make choices
- **Actions**: What users do at each step
- **Screens/States**: Each screen or state in the flow
- **Connections**: Lines showing how users move between screens

### User Flow Types
- **Happy Path**: The ideal user journey
- **Alternative Paths**: Different ways users can complete tasks
- **Error Paths**: What happens when things go wrong
- **Edge Cases**: Unusual or rare scenarios
- **Cross-Device Flows**: Flows spanning multiple devices

### User Flow Best Practices
- **Keep it Simple**: Show only essential steps
- **Use Standard Symbols**: Use consistent symbols for actions, decisions, screens
- **Label Clearly**: Add clear labels for each step
- **Consider Multiple Paths**: Show alternative paths and edge cases
- **Test with Users**: Validate flows with real users
- **Document Assumptions**: Note any assumptions made

## Sitemaps

### Sitemap Fundamentals
- **Hierarchy**: Show the structure of the site or app
- **Pages**: List all pages or screens
- **Relationships**: Show how pages connect to each other
- **Navigation**: Indicate main navigation paths
- **Depth**: Show how many levels deep the structure goes

### Sitemap Types
- **Hierarchical**: Tree structure showing parent-child relationships
- **Organizational**: Grouped by function or category
- **Sequential**: Linear flow for processes
- **Matrix**: Multiple ways to access content

### Sitemap Best Practices
- **Keep it Current**: Update sitemap as structure changes
- **Use Clear Labels**: Use descriptive, user-friendly labels
- **Limit Depth**: Aim for 3-4 levels maximum
- **Show Relationships**: Indicate cross-links and related content
- **Consider Navigation**: Show main navigation paths
- **Plan for Growth**: Leave room for future expansion

## Interactive Prototyping Methods

### Prototyping Tools
- **Figma Prototyping**: Built-in prototyping with interactions and animations
- **Principle**: Advanced animation and interaction design
- **ProtoPie**: Advanced prototyping for complex interactions
- **InVision**: Prototyping and collaboration platform
- **Framer**: Code-based prototyping for realistic interactions

### Interaction Types
- **Screen Transitions**: Moving between screens
- **Micro-Interactions**: Small animations for feedback
- **Scroll Effects**: Animations triggered by scrolling
- **Hover States**: Changes when user hovers
- **Click Actions**: What happens when elements are clicked
- **Form Interactions**: Validation, error states, success messages

### Animation Principles
- **Purposeful**: Every animation should have a purpose
- **Smooth**: Use appropriate easing functions
- **Performant**: Keep animations at 60fps
- **Accessible**: Respect prefers-reduced-motion
- **Consistent**: Use consistent timing and easing
- **Subtle**: Don't overuse animations

## Design Handoff to Developers

### Handoff Deliverables
- **Design Files**: Source files in design tool format
- **Specifications**: Detailed specs for each component
- **Assets**: Exported images, icons, illustrations
- **Style Guide**: Colors, typography, spacing
- **Component Library**: Reusable components with documentation
- **Annotations**: Notes on functionality and behavior

### Handoff Tools
- **Figma Dev Mode**: Built-in developer handoff features
- **Zeplin**: Design handoff and collaboration platform
- **Abstract**: Version control for design files
- **Avocode**: Design-to-code conversion tool
- **Storybook**: Component documentation and testing

### Handoff Best Practices
- **Communicate Early**: Involve developers early in the process
- **Provide Context**: Explain the why behind design decisions
- **Be Available**: Answer questions and provide clarification
- **Use Version Control**: Track changes and iterations
- **Document Everything**: Provide clear, comprehensive documentation
- **Test Implementation**: Review implementation against designs

### Developer Handoff Checklist
- [ ] Design files shared with proper permissions
- [ ] All assets exported in correct formats and sizes
- [ ] Color values provided (HEX, RGB, HSL)
- [ ] Typography specifications (font family, size, weight, line height)
- [ ] Spacing and layout measurements
- [ ] Interaction and animation specifications
- [ ] Accessibility requirements documented
- [ ] Responsive breakpoints defined
- [ ] Component variations and states documented
- [ ] Questions and concerns addressed

## Prototyping for User Testing

### Testing Preparation
- **Define Goals**: What you want to learn from testing
- **Create Tasks**: Realistic tasks for users to complete
- **Prepare Script**: Introduction, tasks, and questions
- **Test Prototype**: Ensure prototype works correctly
- **Recruit Participants**: Find appropriate test participants
- **Set Up Environment**: Prepare testing space or remote setup

### Testing Execution
- **Introduction**: Explain the purpose and process
- **Think Aloud**: Ask participants to verbalize their thoughts
- **Observe**: Watch how participants interact with prototype
- **Take Notes**: Record observations, issues, and insights
- **Ask Questions**: Probe for deeper understanding
- **Thank Participants**: Show appreciation for their time

### Testing Analysis
- **Identify Patterns**: Look for recurring issues and insights
- **Prioritize Findings**: Rank issues by severity and frequency
- **Create Recommendations**: Provide actionable recommendations
- **Share Results**: Communicate findings with the team
- **Plan Iterations**: Decide what to change and test next