UX/UI design
What Is a Wireframe, and Why Does It Come Before Visual Design?
A wireframe is a structural outline of a website. Here’s why it’s worth defining the content hierarchy and how the website will work before choosing colours and visual details.
If you’re planning a website, you’ve probably come across the term wireframe. In simple terms, it’s a visual outline that focuses on what goes where, in what order, and what takes priority, rather than colours, typefaces, or final images.
I like working with wireframes because they make it quick and easy to explore major structural decisions.
What Does a Wireframe Include?
A wireframe consists of simple blocks, placeholder text, and basic navigation elements. It can be a rough sketch on paper or a more detailed digital layout in Figma.
It typically shows:
- The header and navigation
- The position and main message of the hero section
- The order of content sections
- Calls to action
- Space for images or visual elements
- Forms
- The main sections of the footer
How Does It Differ from the Final Website Design?
| Wireframe | UI design |
|---|---|
| Shows the structure | Shows the visual appearance |
| Uses simple, mostly neutral elements | Uses final colours and typography |
| Focuses on content hierarchy | Focuses on personality and brand experience |
| Quick to modify | More detailed and time-consuming |
| Answers questions about how the website works | Answers questions about how it looks |
Why Not Start with the Visual Design Straight Away?
Visual design can easily draw attention away from the structure. Once colours, photography, and typography are in place, it becomes harder to spot an illogical content sequence.
A wireframe makes the structure much easier to assess. If visitors aren’t getting enough information in the right order, it quickly becomes apparent.
Example: A Wireframe for a Service Business Website
A service business homepage might follow this structure:
- What do you do, and who is it for?
- What problem do you solve?
- What services do you offer?
- Why should people trust you?
- Previous work or client testimonials.
- What does working with you involve?
- Contact / call to action.
This isn’t a universal formula, but it shows how wireframing also helps shape the logic of your messaging.
A Wireframe Is a UX Tool, Not Just a Sketch
A wireframe is most useful when it goes beyond arranging boxes. It should also reflect users’ goals: what they want to find out, what questions they have, what makes them hesitate, and where they need to make a decision.
For more complex projects, user flows, a sitemap, or UX research may come before wireframing or develop alongside it.
Does Every Website Need a Wireframe?
Not necessarily. For a very small landing page, structural planning and UI design may happen in a single step.
However, the more content, audiences, and functionality a website has, the more valuable it becomes to clarify the structure first.
What Happens After the Wireframe?
The approved wireframe provides the foundation for the visual concept: typography, colours, imagery, icons, components, and more detailed interactions. A clickable Figma prototype can follow, before development begins.
You can read about the full process on my UX/UI design service page.
In Brief
A wireframe helps separate two questions:
- What should we show, and in what order?
- What should it look like?
A clear answer to the first question gives the visual design a stronger foundation.
