Wireframe
Definition
A simple sketch showing a webpage's layout and structure without colours or detailed design. Used to plan content and user flow before visual design begins.
What is a Wireframe?
A wireframe is a basic visual guide that represents the skeletal framework of a website. Think of it as a blueprint – it shows what goes where, without the visual polish.
What Wireframes Include
- Layout structure
- Content placement
- Navigation elements
- Key functionality
- Basic user flow
What Wireframes Don't Include
- Final colours
- Actual images
- Detailed typography
- Branding elements
- Polished visuals
Why Use Wireframes?
Focus on Function
Without visual design distracting, you can concentrate on whether the structure and flow work.
Cheap to Change
Changing a wireframe takes minutes. Changing a designed page takes hours.
Client Alignment
Ensure everyone agrees on structure before investing in visual design.
Spot Problems Early
Navigation issues, missing content, or confusing layouts are easier to fix at this stage.
Types of Wireframes
Low-Fidelity
Very rough, often hand-drawn sketches. Quick to create, used for initial brainstorming.
Mid-Fidelity
More defined structure with placeholder text and boxes. Most common type.
High-Fidelity
Detailed layouts approaching final design. May include actual copy and basic styling.
Wireframes in the Design Process
- Discuss requirements
- Create wireframes
- Review and refine
- Apply visual design
- Build the website
Skipping wireframes often leads to expensive changes later when you realise the structure doesn't work.