What are Wireframes?

What Is a Wireframe?

A wireframe is a static, low-fidelity representation of a website or mobile app interface using only simple shapes. Wireframes are used to communicate structure, content, and functionality. Wireframes should be created early on in the design process. It’s much more efficient to make big changes during the wireframing stage compared to the prototype (more on that next week!) or the beta software.

Wireframes are similar to an architectural blueprint, you’ll see how space will be allocated for different rooms, but you won’t see paint colors, flooring types, landscaping, etc.

Types of Wireframes

Wireframes can vary on how they are created and the amount of detail included. Wireframes can be hand-drawn sketches or built within design programs such as Adobe XD (my preference) or Basalmiq.  The fidelity of a wireframe identifies the level of wireframe presentation.

• Low-fidelity wireframes are relatively quick to develop as they are simpler compared to high-fidelity wireframes. Low-fidelity wireframes tend to be more abstract with fake content (lorem ipsum) and boxes and other shapes to stand in for images, videos, etc.
• High-fidelity wireframes have an increased level of detail. They may include real content. Both types of wireframes contain annotations indicating additional details that can't be captured by the wireframes.

Why Create Wireframes?

The role of wireframes is to create a place to start from and to set a direction for the design. Wireframes help to plan an interface without investing too much time, effort, and resources. Wireframes also have the advantage of presenting designs to the team without getting bogged down in the details of visual design, like typography, color scheme, photography, etc.

Wireframes can also help determine intended functionality for the interface and to prioritize content within the website or app.

The Benefits of Wireframing

A picture is worth a thousand words! By looking at a wireframe, you should have a good idea of what screens an app or website will have. Wireframes are also part of the project documentation. They are also used as a reference point for functional specifications and to make sure that everyone on the project is on the same page.

The Limitations of Wireframing

Wireframes aren’t good for user testing because they are static. They make it difficult to convey the overall user experience to the user, unlike a prototype (again, more on this next week!). Wireframes also don't help convey complex design effects and interactions. Wireframes can show where the effect or interaction begins and ends, but it doesn’t show what happens in between screens.

Need Help on a Project?

Contact me to see how I can help you redesign your website or create a mobile app for your business!