Wireframe
A basic visual guide showing the layout and functionality of a webpage.
Definition
A wireframe is a low-fidelity layout that outlines the structure and functionality of a web page or app screen. It focuses on content hierarchy and user flow rather than visual design. Wireframes help stakeholders visualize concepts early in the design process before investing in detailed visual design. Tools include Figma, Sketch, and Balsamiq.
Why It Matters
Wireframes are low-fidelity layouts that define structure and functionality before visual design. They enable rapid iteration on concepts, alignment with stakeholders, and usability testing before expensive development begins.
Starting with wireframes saves significant time and cost. Changes at the wireframe stage take minutes; the same changes after development might take days. Getting structure right early prevents expensive rework.
Examples in Practice
Wireframe testing reveals navigation issues that would have required a major post-launch redesign.
A stakeholder's early wireframe feedback prevents building features users wouldn't want.
Wireframe iteration explores three concepts in the time building one prototype would take.