Wireframe.

A wireframe is the blueprint for a webpage. It shows where content is placed, the order in which visitors see it, and where buttons, forms, and images will go—but without the final colors, fonts, or photos. The Nielsen Norman Group describes wireframes as a standard deliverable in UX design that allows layout ideas to be visualized at the page level. For you as the client, this is the most cost-effective time to make changes: moving a box in a wireframe takes just a few minutes, while redesigning a finished page costs significantly more.

How a Wireframe Works

A wireframe is intentionally low-fidelity, meaning it looks unfinished. According to the Nielsen Norman Group, low-fidelity designs depict only some—or none—of the visual characteristics of the final system, such as a black-and-white sketch or one with placeholders for images. This shifts the focus of the discussion to structure rather than color schemes.

In the workflow, the wireframe comes between the concept and the design. First, you define the goals and target audience; this leads to the page structure and wireframes, followed by the visual design, and finally the technical implementation. Our article on the difference between UI and UX design explains how the user interface and user experience are related. According to the Nielsen Norman Group, wireframes are good at illustrating layouts but poor at describing interactions. For multi-step processes, they are therefore combined with flowcharts to create what are known as wireflows.

What Your Business Should Keep in Mind

Include actual content as early as possible. A wireframe filled with placeholder text hides just how long your service descriptions really are. In projects, we often see that a section in the wireframe looks spacious, but when filled with the actual text, it suddenly no longer fits in the planned space.

Review the wireframe from your customers’ perspective. For each page, ask yourself whether a visitor can immediately see what you offer, where you work, and how to contact you. On a landing page in particular, the order of the sections plays a major role in whether someone makes it all the way to the form.

Provide feedback on the structure, not the appearance. The gray boxes are intentional—not a sign of carelessness. According to the Nielsen Norman Group, designers are less attached to rough drafts and are more willing to change them than they are to polished designs. That’s why now is the right time to raise fundamental objections.

Check out the mobile and desktop views. On a smartphone, content appears one below the other, and elements that seem important side by side on the desktop are pushed down on the mobile version.

Frequently Asked Questions About Wireframes

Is a wireframe the same thing as a mockup or a prototype? No. A wireframe shows the structure, a mockup shows the final appearance, and a prototype also allows you to click on it. According to the Nielsen Norman Group, prototypes come in high and low levels of detail; a wireframe falls into the low-detail category.

What tools are used to create wireframes? On paper, on a whiteboard, or in design tools like Figma. For you as the client, it’s not the tool that matters, but the fact that you can provide feedback on the design.

Is a wireframe worth it even for a small website? Yes—even with just a few pages, it helps clarify what content you need to provide. Our article “Why Most Web Projects Fail at the Briefing Stage” shows where web projects often go wrong even before that.

If you're planning a new website and want to determine its structure before starting the design process, check out our web design services.