Just like a blueprint of a building, a wireframe describes the structure of a product. The goal of wireframing is to connect the product’s information architecture to its visual design. Creating this connection is especially important during the early stages of product design, when designers need to explore a range of ideas and narrow it down to one or two that look most promising.
A wireframe acts as a tool that allows designers to visualize their ideas on a piece of paper or whiteboard, share them with other people, and get valuable feedback. The speed of creation is the major advantage of wireframing, and it makes this tool extremely valuable during brainstorming sessions. Wireframes show the zones where your product’s major content elements will appear on the page. For that reason, wireframes typically do not use any styling; they don’t include colors, imagery, fonts, or anything else that can distract from the wireframe’s main objective, which is to allow you to evaluate the logical organization of content and functional elements on individual pages.
As wireframes are only basic objects that represent an idea, it can be hard to understand this artifact outside of a design environment. That’s why it’s not recommended that you use wireframes as a tool for communicating ideas to stakeholders; it might be difficult for people to imagine the future state of a product by looking at boxes and arrows. When it comes to showing a demo of your product to stakeholders, it’s much safer to present your idea in the format of a prototype.
There are two types of website wireframes–low fidelity wireframes and high fidelity wireframes. Low fidelity wireframes tend to be more abstract because they often use simple objects–boxes, arrows, and placeholder text. They are helpful in the early stages of product design when teams are just discovering design direction. Lo-fi wireframes require less investment from designers; it’s relatively easy to create these kinds of wireframes, even with basic design skills.
High fidelity wireframing involves an increased level of detail and better resembles real UI design. Hi-fi wireframes might include real content as well as properly-sized functional elements–buttons, menus, and forms. They can be used as documentation for a project or serve as a foundation for functional prototypes. Read on for more tips and best practices for effective wireframing, and for the latest developments in UX design knowledge.