Contents
Contents
Overview
FAQs
Sign up for
Mindmesh
Get started

What is a wireframe?

Definition: A wireframe is a visual representation of a website or app showing the raw user interface structure using a combination of shapes, lines, and text.

Wireframes are created to represent the different elements of the website in the early stages of design and development as a blueprint for the layout, functionalities, and content of the website or app. 

Designers and engineers use them to understand how the website should look and work before building it.

Different types of wireframes

Low-fidelity wireframes

Represent the website without much detail, just enough to communicate the idea for the website design, layout, and user interface.

They are abstract and made using sketching tools or on paper, include placeholder content (text, pictures…), and aren’t created for accuracy.

Teams use them to quickly sketch different variations of a website and easily edit it. The goal is to see which design they will use for the second phase.

Mid-fidelity wireframes

Include more detail than Low-fidelity frameworks and incorporate website design elements (buttons, search bars, navbar…) while still keeping the design simple.

They also use placeholder content, but the design (spacing, typography, color) and element layout are more accurate and closer to a working website.

They are used to test the design, gather feedback and make improvements before moving to the next stage.

High-fidelity wireframes

Are the most detailed types of frameworks and are very similar to the final website build.

They use little to no placeholders opting for actual content, images, and elements used in the final build. The design is pixel-perfect, and the website meets all user expectations.

They are used to present the final design to stakeholders without making many changes before proceeding with building it.

Wireframes elements

Wireframe elements are split into three categories:

  • Design represents the visual aspect, the layout of the website, color, logos, typography, images, and text placement. Everything that can be seen on the website is a design element.
  • Navigation represents the structure and organization of all the buttons, forms, navbars, menus, and interactive elements. Almost everything clickable on the website is a navigation element.
  • Information represents the website's content, such as text, images, videos, and information about the website. 

Since wireframes are just visual representations of a website and can’t be interacted with, designers use links and descriptions to represent the actions happening on the website when a user interacts with a certain element (open another page, animate an element, send a request).

These elements change and become more detailed through the three wireframe types/phases.

Tools used for creating wireframes

  • Whiteboard/Pen and paper (best for low-fidelity)
Wonder what your customers want?
Discover Mindmesh

Article FAQs

What is wireframing?
Wireframing is the part of the design process where the designer takes in all gathered ideas for a website and creates a wireframe, helping the team and stakeholders understand how their ideas can be translated into a real product.
What is a wireframe in web design?
It’s a visual representation of the website layout with its design used by teams to create a concept for a website before building it.

Recommended Terms

JOIN FOR A DESK YOU ACTUALLY WANT TO BE AT

Get started

Hundreds of tech workers have already
tried Mindmesh and use it daily

Get Started

A monthly newsletter delivered straight to your inbox