# Wireframing
Wireframing is the practice of creating simplified, low-fidelity representations of a user interface that focus on structure, layout, and functionality rather than visual design. Wireframes strip away colors, images, and styling to reveal the skeletal framework of a page or screen—showing what elements exist, where they're positioned, and how users navigate between them. This technique emerged from [[Information Architecture (IA)]] and became a standard UX design practice.
Wireframes serve as a communication bridge between strategy and visual design, allowing teams to align on structure before investing in high-fidelity mockups. They're deliberately rough to encourage feedback and iteration—polished designs tend to discourage critique. The term draws an analogy to architectural blueprints, which show structure without decoration. Wireframes range from quick paper sketches (lo-fi) to interactive clickable prototypes (mid-fi), but always prioritize layout over aesthetics.
## Wireframe Fidelity Levels
| Level | Characteristics | Use Case |
|-------|-----------------|----------|
| **Lo-fi (sketch)** | Hand-drawn, rough boxes, minimal detail | Early ideation, rapid exploration |
| **Mid-fi** | Clean boxes, placeholder text, basic interactions | Stakeholder alignment, user testing |
| **Hi-fi** | Detailed, real content, interactive | Developer handoff, final validation |
## What to Include vs Exclude
| Include | Exclude |
|---------|---------|
| Content blocks and hierarchy | Actual images or graphics |
| Navigation elements | Brand colors |
| Form fields and buttons | Typography styling |
| Placeholder text (Lorem ipsum) | Visual polish |
| Annotations explaining behavior | Final copy |
## Wireframe Process
```
1. Research & Strategy
└── User needs, content inventory, IA
↓
2. Sketch (Lo-fi)
└── Paper sketches, whiteboard, rapid ideas
↓
3. Digitize (Mid-fi)
└── Wireframing tools, gray boxes
↓
4. Review & Iterate
└── Stakeholder feedback, user testing
↓
5. Handoff
└── Annotated wireframes to visual design
```
## Key Elements
| Element | Purpose |
|---------|---------|
| **Header/Navigation** | Global navigation, branding zone |
| **Content blocks** | Main information hierarchy |
| **Sidebars** | Secondary content, filters |
| **CTAs (Calls to Action)** | Primary user actions |
| **Forms** | Input fields, validation notes |
| **Footer** | Secondary links, legal |
## Wireframing Tools
| Tool | Type | Notable Features |
|------|------|------------------|
| **Figma** | Digital, collaborative | Real-time collaboration |
| **Balsamiq** | Digital, lo-fi | Sketch-style aesthetic |
| **Sketch** | Digital | macOS, extensive plugins |
| **Adobe XD** | Digital | Integration with Creative Cloud |
| **Paper & Pen** | Analog | Fastest, most accessible |
| **Whimsical** | Digital | Quick diagramming |
## Best Practices
| Practice | Rationale |
|----------|-----------|
| **Start low-fidelity** | Encourages feedback, prevents attachment |
| **Mobile-first** | Prioritizes essential content |
| **Use annotations** | Explains behavior not visible in static image |
| **Test with users** | Validates structure before visual investment |
| **Keep it gray** | Prevents distraction by aesthetics |
| **Show real content hierarchy** | Reveals information architecture |
## Common Mistakes
| Mistake | Problem |
|---------|---------|
| Too much detail too soon | Discourages feedback |
| No annotations | Developers guess at behavior |
| Skipping wireframes | Expensive rework later |
| Using real images | Distracts from structure |
| Not testing | Assumptions go unchallenged |
## References
- https://en.wikipedia.org/wiki/Website_wireframe
## Related
- [[Information Architecture (IA)]]
- [[User Experience (UX)]]
- [[Mockups]]
- [[User Interface Design]]
- [[Design Thinking]]