Wireframing
A wireframe is a sketch of a web page. They are a tool for thinking about structure and hierarchy: the order of information, the visual weight of each element (what draws the eye, usually through contrast and size), and how someone's attention moves down the page.
Abby Covert, in How to Make Sense of Any Mess, calls this a schematic: "a diagram of an object or interface simplified for the sake of clarity… known by many other names including wireframes, sketches, lo-fis, and blueprints."
Why wireframes come first
Visual design is seductive. The moment a layout has colour, typography, and imagery, feedback often drifts towards details like “can we make the blue darker?”. Instead, wireframes help us focus on the bigger picture. Is this the right structure? Are we helping the user do what they came to do? Are we making the important things obvious?
Wireframes also make it easy to explore different directions. Because they are essentially just sketches, it’s easy to iterate quickly. We can lay out the same content in two or three ways, compare them, and refine.
Low vs high fidelity wireframes
Wireframes can be a rough sketch, or a detailed realistic layout. This difference is called ‘fidelity’.
- Low-fidelity wireframes are often monochrome with no branding. They may have placeholder copy and simple boxes instead of images. The purpose of low-fi wireframes is to explore structure and layout rather than aesthetics.
- High-fidelity wireframes are the other end of the spectrum. They are detailed and often have real content, imagery and branding.
We typically reach for low-fidelity wireframes because they are quicker and easier to iterate on. Branding can be added in the subsequent design phase, once wireframes are signed off.
Examples of wireframes
Below are the rough sketches I drew for this website. The left sketch eventually turned into the Website Redesign Handbook homepage. These are extremely low-fidelity, created to kickstart discussion.
Below are much more detailed wireframes that we produced for Geese Theatre Company. These were eventually signed off, before we moved to the visual design phase.
Clickable wireframes
Often, wireframes are presented as static digital sketches. But plenty of tools allow you to create wireframes that you can link together so you can click through them. We call these prototypes.
When you’re thinking about a user journey, for instance how a user might go about donating on a multi-step form, these clickable prototypes can be useful.
Testing wireframes with users
Because wireframes are quick and easy to change, they're a great way to validate our assumptions with real users before committing to a design direction.
Ask someone to complete a task on a wireframe and you’ll quickly learn whether it holds up.
Clickable prototypes are especially useful here, as people can move through a journey much as they would on the real site.