Wireframe

Learn more

A wireframe is a simplified visual outline of a website, application, or individual screen. It shows the placement of essential interface elements, such as the header, navigation, content, forms, buttons, and footer, without defining their final visual design.

The purpose of a wireframe is to communicate information hierarchy, navigation, and the function of individual sections before decisions are made about colors, typography, imagery, and other elements of the visual identity.

What does a wireframe include?

The contents of a wireframe depend on the type of project and the required level of detail. It may show:

the position of the logo and main navigation;
the arrangement of headings, text, and visual content;
the placement of buttons and other calls to action;
the structure of forms;
lists of products, services, articles, or search results;
sidebars, filters, and secondary navigation;
the order of sections on a page;
basic relationships between different screens.

Instead of final images and copy, a wireframe may use simple rectangles, lines, symbols, and placeholder text. This helps the team focus on structure and functionality rather than visual details.

Types of wireframes

Wireframes can be categorized by their level of detail:

low-fidelity wireframes are basic sketches that communicate the general layout and primary elements;
mid-fidelity wireframes provide more accurate proportions, content hierarchy, and labels for important functions;
high-fidelity wireframes show precise component placement and more realistic content while still avoiding the complete visual design.

A basic wireframe can be drawn on paper. More detailed versions are usually created with interface design software that makes it easier to modify layouts, reuse components, and share the project with other people.

What is a wireframe used for?

A wireframe helps organize the concept for a website or application before visual design and development begin. It allows the team to check whether all necessary content and features have been included and placed in logical locations.

Wireframes can be used to:

plan information architecture;
establish content hierarchy;
design navigation and user flows;
discuss functionality with clients and team members;
identify missing or unnecessary elements;
compare alternative layout concepts;
provide a foundation for visual design and development.

Changing a wireframe is usually faster than rebuilding a finished design or working front end. Wireframing can therefore reduce the need for costly revisions later in the project.

Wireframe vs. mockup

A wireframe focuses primarily on structure, information hierarchy, and the placement of functionality. It typically uses a limited color palette and simplified visual elements.

A mockup presents an interface that is much closer to the intended final appearance. It may include the selected colors, typography, images, icons, spacing, and other elements of the visual identity. A mockup shows how the product should look but is usually static.

Wireframe vs. prototype

A wireframe does not have to be interactive. It may present a single view or a collection of screens without allowing users to operate their functions.

A prototype simulates how a product will work. It may allow users to move between screens, open menus, select options, or follow a sample purchasing or booking process. A prototype can be based on simple wireframes or detailed visual designs.

Wireframes and responsive design

A layout created for a large screen does not fully define how a website should behave on a smartphone. A responsive design project should therefore include wireframes for several representative screen sizes, particularly mobile and desktop layouts.

A mobile wireframe helps determine the order of sections, the behavior of navigation, the position of essential buttons, and the presentation of tables, forms, filters, and other complex components on a narrow screen.

What makes a good wireframe?

A good wireframe should be clear enough for clients, designers, and developers to form the same understanding of the proposed layout and functionality. It should:

reflect the website’s purpose and user needs;
communicate a clear information hierarchy;
include all essential functions;
present logical and consistent navigation;
explain interactions that cannot be understood from the layout alone;
account for mobile devices;
remain easy to revise.

A wireframe is not a finished visual design or complete technical specification. It does not automatically define the exact behavior of every feature, the technology used to build it, or the final appearance of the interface. Depending on the project, it may need to be supplemented with functional requirements, a prototype, visual designs, and development documentation.