Wireframe

Definition

A wireframe represents a page using grey blocks: headings, text, images, buttons, and forms. It ignores aesthetics, focusing only on what appears and in what order.

‍

How it works

There are two main types: low-fidelity (rectangles and labels, sometimes on paper) and mid-fidelity (actual text, a grid, and realistic proportions). The most popular tools are Figma, Whimsical, and Miro.

Wireframing comes after the site map and before the graphic design phase.

‍

Why it matters for your site

Changing the order of sections in a wireframe takes five minutes. Doing it on a developed site takes days. Wireframes allow you to resolve key questions—such as which proof point comes first or where to place the call to action—before investing in design.

‍

The We-R perspective

The wireframe is where copywriting and strategy meet. A wireframe filled with placeholder text often hides a vague message; we prefer to use real headlines as soon as possible to evaluate the page based on what it will actually say.

‍

Learn more

See also:Landing page,Design system,Value proposition. And to put it into practice:why your site isn't generating leadsorour Webflow sites.

‍

Sources: We-R project methodology · Figma documentation.

Last updated: October 2026.