What is Wireframe?
Wireframes are basic visual representations of a webpage or app that show structure, layout, and content hierarchy - without colors, images, or final design. They are like a blueprint for a house. Wireframes help plan and align information architecture and user navigation early in the design process. There are different levels of detail: low-fidelity wireframes (simple sketches), mid-fidelity (more detailed with placeholders), and high-fidelity (close to final design). Tools like Figma, Balsamiq, or even paper are used. Wireframes save time and costs as changes at this stage are easy.
Key Points
- Focus on structure, not visual design
- Low/mid/high-fidelity depending on project phase
- Early alignment with stakeholders possible
- Changes in wireframe phase are cost-effective
- Wireframe → Mockup → Prototype → Development
- Tools: Figma, Balsamiq, Sketch, or paper
Practical Example
“Through wireframes, we could quickly test 3 different layout variants with the client before moving to design.”