wireframing

What this skill does

# Wireframing Skill

## Table of Contents
1. [When to Use This Skill](#when-to-use-this-skill)
2. [Core Concepts](#core-concepts)
3. [Wireframe Types](#wireframe-types)
4. [Information Architecture](#information-architecture)
5. [User Flows](#user-flows)
6. [Wireframe Elements](#wireframe-elements)
7. [Annotation and Specification](#annotation-and-specification)
8. [Tools and Technologies](#tools-and-technologies)
9. [Iteration Process](#iteration-process)
10. [Best Practices](#best-practices)
11. [Wireframing Examples](#wireframing-examples)

## When to Use This Skill

Wireframing is essential during various phases of product development and design:

### Early Product Discovery
- **Requirements gathering**: Visualize stakeholder ideas and requirements
- **Concept exploration**: Quickly test multiple design directions
- **Feasibility assessment**: Identify technical constraints early
- **Scope definition**: Define feature sets and functionality boundaries

### Design Process
- **Information architecture**: Structure content and navigation hierarchies
- **Layout exploration**: Test different arrangements of UI elements
- **User flow mapping**: Visualize user journeys through the product
- **Interaction design**: Define how users interact with interface elements

### Collaboration and Communication
- **Stakeholder alignment**: Get buy-in before detailed design work
- **Developer handoff**: Communicate functionality and structure
- **User testing**: Validate concepts without expensive high-fidelity work
- **Design documentation**: Create reference materials for the team

### Iteration and Refinement
- **Design critique sessions**: Focus feedback on structure not aesthetics
- **Rapid prototyping**: Test ideas quickly with minimal investment
- **A/B testing concepts**: Compare different approaches efficiently
- **Design system foundation**: Establish patterns before visual design

## Core Concepts

### Low Fidelity vs High Fidelity

**Low Fidelity Wireframes**

Characteristics:
- Basic shapes and placeholders (boxes, lines, simple text)
- Grayscale or monochromatic color schemes
- Minimal detail and visual polish
- Focus on structure and layout
- Quick to create and modify
- Often hand-drawn or using basic digital tools

When to use:
- Early conceptual phases
- Rapid iteration and exploration
- Stakeholder workshops and brainstorming
- When you need quick feedback on structure
- Budget or time constraints

Advantages:
- Fast creation and iteration
- Low investment reduces attachment to ideas
- Encourages focus on functionality
- Accessible to non-designers
- Reduces cognitive load during review

**High Fidelity Wireframes**

Characteristics:
- Detailed UI elements and components
- Refined spacing and alignment
- Actual or representative content
- Interactive elements clearly defined
- May include real images and copy
- Closer to final design

When to use:
- After concept validation
- Developer handoff preparation
- Detailed user testing
- When precise specifications are needed
- Stakeholder presentations requiring polish

Advantages:
- Clear communication of intent
- Better for usability testing
- Serves as development reference
- Identifies edge cases and details
- Reduces ambiguity in implementation

### The Wireframing Spectrum

```
Sketches → Low-Fi → Mid-Fi → High-Fi → Mockups → Prototypes
  ↓          ↓        ↓         ↓         ↓          ↓
Paper    Boxes &  Details   Refined   Visual    Interactive
notes    labels   added     content   design    behavior
```

### Fidelity Dimensions

Wireframes can vary in fidelity across multiple dimensions:

1. **Visual Fidelity**: Level of visual detail and polish
2. **Content Fidelity**: Real vs placeholder content
3. **Functional Fidelity**: Interactive vs static
4. **Layout Fidelity**: Precise vs approximate spacing

## Wireframe Types

### 1. Paper Sketches

**Description**: Hand-drawn wireframes on paper or whiteboards

**Use Cases**:
- Brainstorming sessions
- Quick ideation
- Early concept exploration
- Collaborative workshops
- Personal thinking process

**Tools**:
- Pen and paper
- Whiteboards
- Sticky notes
- Dot grid notebooks
- Stencils and templates

**Techniques**:
- Quick sketching with basic shapes
- Crazy 8's method (8 ideas in 8 minutes)
- Thumbnail sketches for multiple concepts
- Annotation with arrows and notes
- Photograph for digital archiving

**Advantages**:
- Zero learning curve
- No tool barriers
- Encourages creativity
- Natural for collaboration
- Portable and accessible

**Limitations**:
- Not easily shared remotely
- Difficult to iterate digitally
- Lacks precision
- Hard to maintain version control
- Not suitable for developer handoff

### 2. Low-Fidelity Digital Wireframes

**Description**: Simple digital wireframes using basic shapes and minimal styling

**Visual Characteristics**:
- Boxes, lines, and simple geometric shapes
- Grayscale color palette
- Placeholder text (Lorem ipsum or FPO)
- Generic icons (squares with X's for images)
- Minimal hierarchy through size and weight

**Content**:
- "Hero Image" or gray boxes for visuals
- Lorem ipsum or repeated text
- Generic labels and headings
- Simplified navigation structures

**Common Elements**:
- Header placeholders
- Navigation bars (simple lines/boxes)
- Content blocks (rectangles)
- Button placeholders (outlined boxes)
- Form fields (lines or simple inputs)
- Footer areas

**Best For**:
- Exploring multiple layout options
- Testing information hierarchy
- Getting quick stakeholder feedback
- Validating user flows
- Design team discussions

### 3. Mid-Fidelity Wireframes

**Description**: More refined wireframes with moderate detail

**Visual Characteristics**:
- Actual UI component representations
- Refined spacing and alignment
- Typography hierarchy (different weights/sizes)
- Some real content mixed with placeholders
- Basic iconography
- Grid-based layouts

**Content**:
- Mix of real and placeholder text
- Actual headings and key copy
- Representative content length
- Realistic form labels
- Actual navigation items

**Interactive Elements**:
- Clear button states
- Form field types defined
- Dropdown indicators
- Link styling
- Active states indicated

**Best For**:
- User testing structure and flow
- Detailed stakeholder reviews
- Information architecture validation
- Content strategy alignment
- Pre-development planning

### 4. High-Fidelity Wireframes

**Description**: Detailed, polished wireframes that closely represent final design

**Visual Characteristics**:
- Precise spacing and measurements
- Refined typography system
- Real or high-quality placeholder content
- Detailed component states
- Accessibility considerations
- Responsive breakpoints shown

**Content**:
- Actual copy or near-final content
- Real images or high-quality stock photos
- Accurate data representations
- Proper content hierarchy
- Character count considerations

**Annotations**:
- Interaction specifications
- State descriptions
- Conditional logic
- Error handling
- Loading states
- Edge cases documented

**Best For**:
- Developer handoff
- Detailed usability testing
- Stakeholder sign-off
- Design system documentation
- Accessibility review

### 5. Interactive Prototypes

**Description**: Clickable wireframes that simulate user interactions

**Capabilities**:
- Page navigation
- Form interactions
- Modal and overlay behaviors
- Animations and transitions
- Conditional logic
- User input handling

**Fidelity Levels**:
- Low-fi interactive: Basic click-through
- Mid-fi interactive: Some conditional flows
- High-fi interactive: Complex behaviors and micro-interactions

**Use Cases**:
- Usability testing
- Stakeholder demonstrations
- User flow validation
- Interaction pattern testing
- Presentation to executives

**Tools**:
- Figma prototyping
- Axure RP
- Proto.io
- InVision
- Adobe XD

## Information Architecture

### Sitemaps

**Purpose**: Visual representation of website/app structure and hierarchy

**Components**:
- Pages/screens rep