### User Flows

**Creating User Flows:**
1. Identify the task or goal
2. Map entry points
3. Document each step and decision
4. Include success and error paths
5. Identify drop-off points

**Standard Symbols:**
- Rectangles: Screens/pages
- Diamonds: Decision points
- Arrows: Flow direction
- Ovals: Start/end points
- Parallelograms: User input

### Wireframing

**Fidelity Levels:**
- **Low-Fidelity**: Sketches, basic shapes, placeholder content
- **Mid-Fidelity**: Grayscale, real content, basic interactions
- **High-Fidelity**: Near-final design, realistic data

**Essential Elements:**
- Layout structure and grid
- Content placement and hierarchy
- Navigation elements
- Interactive components
- Annotations for developers

**Tools:** Figma, Sketch, Balsamiq, Whimsical

### Prototyping

**Fidelity Levels:**
- **Paper Prototypes**: Quick sketches for early testing
- **Clickable Wireframes**: Basic interactive flows
- **High-Fidelity Prototypes**: Near-production interactivity

**Uses:**
- Concept validation
- Usability testing
- Stakeholder presentations
- Developer communication

**Tools:** Figma, Principle, ProtoPie, Framer, InVision

### Micro-interactions

**Components:**
1. **Trigger**: User action or system condition that initiates
2. **Rules**: What happens when triggered
3. **Feedback**: Visual, audio, or haptic response
4. **Loops and Modes**: How interaction changes over time

**Examples:**
- Like button animation
- Pull-to-refresh indicator
- Password strength meter
- Toggle switch animation
- Form field validation feedback

### Animations and Transitions

**Principles:**
- **Easing**: Natural acceleration/deceleration (ease-in-out preferred)
- **Duration**: 200-500ms for most UI animations
- **Choreography**: Coordinated element movement
- **Purpose**: Always serve functional or emotional purpose

**Types:**
- Page transitions, loading animations
- Hover states, focus indicators
- Reveal animations, progress indicators
- Celebratory animations (confetti, success)

**Tools:** After Effects, Principle, Lottie, CSS animations

---