A wireframe is used to plan layout and user flow before design and development begin.
Wireframe Explained
Why Wireframe Matters
Helps plan structure before building a site.
Where You'll Come Across It
Design phase of projects.
Practical Example
A simple outline showing page sections.
Frequently Asked Questions
What is the difference between a wireframe and a design mockup?
A wireframe shows structure and layout without visual design, using simple boxes and lines. A mockup adds colours, fonts, images, and branding to show what the final design will look like. Wireframes come first in the design process.
Do I need to approve wireframes?
Yes. Wireframe approval is an important step because it locks in the page structure and content hierarchy before visual design begins. Changes at the wireframe stage are quick and inexpensive compared to changes after design is complete.
What tools are used to create wireframes?
Common tools include Figma, Adobe XD, Balsamiq, and Sketch. Some designers also start with pen and paper. The tool matters less than the thinking behind the layout and user flow.