Overview
A wireframe is a low-fidelity visual guide that outlines the structure and layout of a digital interface. It focuses on content placement, functionality, and user flow—without the distraction of design elements like colors or fonts.
Purpose
- Plan page hierarchy and structure
- Communicate layout and flow to stakeholders
- Align product, design, and engineering teams
Types
- Low-Fidelity: Simple sketches or grayscale layouts
- High-Fidelity: Detailed wireframes with annotations and interactions
When to Use
- Early in the design process
- Before visual design and development
- For user testing and iteration
Related Context