What Is a Wireframe?

A wireframe design is a simplified version of an app or webpage. It’s like a blueprint of how the design elements will be laid out, how the user will interact with the page, how each page or interface element is supposed to function, what users are supposed to do in each section, and more. 

A wireframe shows where each design element will eventually be placed before the coloring, fonts, and other UI design work is done. You can liken it to a blueprint that shows where each part of a house will go before any furniture, light fixtures, and other items are placed. A wireframe could indicate elements such as:

  • Placeholder text
  • Search bars
  • Logos
  • Social sharing buttons
  • Headers and footers
  • Navigation menus
  • Contact information

Wireframes are often made in shades of grey. Lighter shades tell the team where lighter colors should be; darker shades indicate darker colors. 

Wireframes are also two-dimensional. That means they are not ideal for showing design elements that appear in front of other elements. Thus, they often exclude drop-down menus, elements that are sometimes shown and sometimes hidden, and hovering elements.

When Do Designers Create a Wireframe?

When designers have a general plan for a product, they can make a wireframe design to show how it will appear visually. This takes less time than actually designing the product but has more visual appeal than just writing about it.

In the first stage of the design process, a designer might sketch the wireframe on a piece of paper and then add detail to it with design software to present to stakeholders. This lets other team members make informed decisions about where design elements should go and so on. 

Decisions and changes are more easily made at this stage before designers and software engineers put the time into fully designing and implementing the final product. The team can add ideas and make sure the concept will promote the organization’s objectives. They may even gather user feedback based on a wireframe and improve the concept before making a prototype.

Levels of Detail in Wireframes

At different stages of a product design, the team can create wireframes with varying levels of detail. The levels are often called: 

  • Low-Fidelity Wireframes: These are very rough sketches that are not drawn to scale. They are not meant to look good; they are simply used to start discussing the product, strategize on user flow, and make decisions. They are also very easy to change by merely sketching over them. 
  • Mid-Fidelity Wireframes: These are made with more detail but still avoid finished typography or images. Greyscale and text weights can separate design elements and show how prominent each will look. 
  • High-Fidelity Wireframes: In the late stages of product design, these wireframes show real images and include text and color.

Wireframe designs in general help design teams get early feedback from users before much design work is completed. They also let stakeholders give honest feedback, add suggestions, and plan how the product will integrate with other products or web pages. Finally, wireframes save time and money in the early stages, allowing designers to communicate concepts quickly and easily