Wireframe.

What is a wireframe?

A wireframe is a simplified layout of a web page or app screen that shows its structure, content blocks and hierarchy before any visual design is applied. Wireframes are usually grey boxes and placeholder text, deliberately plain, so the discussion focuses on what goes on the page and in what order. They range from rough sketches on paper to clickable prototypes that link screens together.

Why it matters

Wireframes are the cheapest point in a project to change your mind. Moving a section in a wireframe takes minutes; moving it after design and development can take days and cost real money. They also force important decisions early: what each page must say, which proof goes where and what the visitor should do next. Signing off wireframes before design starts reduces scope disputes later.

The main types

• Low fidelity Quick sketches or boxes showing layout and priority, ideal for early discussion.
• Mid fidelity Cleaner digital layouts with real headings and content structure, still without branding.
• High fidelity Detailed layouts close to the final design, sometimes using real copy and imagery.
• Clickable prototype Linked wireframes that let people test a journey before anything is built.

What to do about it

Before your next website or landing page project, ask for wireframes of the key pages with draft content, ahead of any visual design. Review them against two questions: does each section help a buyer decide, and is the next step obvious? Involve the people who talk to customers every day, such as sales or reception staff. Agree changes at this stage, in writing, before design starts.