Wireframing
Creating simplified visual guides that represent the skeletal structure of a user interface, focusing on layout and functionality rather than visual design.
Also known as: Wireframes, Low-fidelity design, Page schematics
Category: Techniques
Tags: user-experience, design, planning, prototyping, interfaces
Explanation
Wireframing is the practice of creating low-fidelity representations of user interfaces that focus on structure, content hierarchy, and functionality rather than visual design. Wireframes serve as blueprints for digital products.
**What Wireframes Show**:
- Page layout and structure
- Content placement and hierarchy
- Navigation elements
- Functional components (buttons, forms)
- Spacing and grouping
- User flow between screens
**What Wireframes Don't Show**:
- Colors and branding
- Typography choices
- Images and graphics
- Final visual polish
- Animation and interactions
**Fidelity Levels**:
**Low-Fidelity**:
- Quick sketches, often on paper
- Boxes, lines, and placeholders
- Used for early exploration
- Minutes to create
**Mid-Fidelity**:
- Digital but still grayscale
- More accurate proportions
- Basic annotations
- Used for stakeholder review
**High-Fidelity**:
- Closer to final layout
- May include some styling
- Detailed interactions
- Used for user testing
**Benefits of Wireframing**:
1. **Fast iteration**: Changes are cheap before coding
2. **Focus on structure**: Separates layout from aesthetics
3. **Communication**: Aligns team on functionality
4. **Early feedback**: Catch problems before investment
5. **Documentation**: Reference for development
**Wireframing Process**:
1. List content and features needed
2. Sketch rough layouts (multiple options)
3. Refine chosen direction
4. Add annotations explaining behavior
5. Review with stakeholders
6. Iterate based on feedback
7. Hand off for visual design
**Common Elements**:
- Rectangles for images/video
- Lines for text
- X-boxes for placeholder images
- Gray boxes for content areas
- Annotations for interactions
**Tools**: Balsamiq, Figma, Sketch, Adobe XD, Whimsical, paper and pen
Wireframing is about making decisions visible and testable before committing to expensive development work.
Related Concepts
← Back to all concepts