Term · Web & development
Wireframe
A wireframe is a simplified, usually grey-scale sketch of a web page or app screen. It shows what content and functions appear, where, and in what order — without colours, fonts or final images. It is the blueprint that visual design is built on.
[ 01 ]
Explained
Why wireframes come first
- Structure problems are cheap to fix on a sketch and expensive after visual design and development.
- Reviewers focus on content and flow instead of colours.
- They make the page plan concrete: which blocks, which messages, which actions.
What a wireframe shows
- Layout of blocks and their hierarchy.
- Headings and key texts, or placeholders describing them.
- Navigation, buttons and forms.
- Placement of images and media.
- Mobile and desktop arrangements for key pages.
Reviewing wireframes
Ask:
- Does the page answer the visitor's main questions in the right order?
- Is the main action clear and easy to reach?
- Is anything missing that sales or support would expect?
- Does it work on a phone?
Linked together into clickable flows, wireframes become a prototype that can be tested with users. See UI/UX design.
[ 02 ]
FAQ
Frequently asked questions
Are wireframes necessary for small sites?
Even a rough sketch of key pages helps. For complex sites and applications, they are essential.
Should wireframes include real text?
Real or realistic text is better than placeholder text; it shows whether the content fits and makes sense.