Wireframes: Low-Fidelity vs High-Fidelity

What are Wireframes?

Wireframes are a vital part of our web design process because they bridge the gap between strategy and design. All the data, spreadsheets, and discussions finally come together in a nice package that we can all see and interact with for the first time. They might not be pretty but they allow us to quickly convey and revise our concepts and strategy, without the distraction of design.

Now that we’ve established the importance of wireframes, let’s discuss the various types and different ways we can approach them.

Low-Fidelity Wireframes

Low-fidelity wireframes are a simple visual representation of the content strategy. They give you a quick look at what content will be on each page, what visual priority that content has, and how it could be laid out at a very basic level. Low-fidelity wireframes consist of annotated blocks that represent content areas. They are relatively quick to produce and, for most people, much easier to digest than a spreadsheet of pages and content types. However, for more complex projects low-fidelity wireframes might leave too many questions unanswered before moving into design.

High-Fidelity Wireframes

High-fidelity wireframes go into much more detail. Whereas in low-fidelity you might see a gray box that represents a “featured post area.” In high-fidelity you might see featured images, excerpts, and links to view the full article. This added detail is perfect for exploring and documenting complex concepts such as menu systems or interactive maps. High-fidelity wireframes take more time to produce but the files can be used as a starting point for the design—thus saving design time in the end.

It should be noted that for simple projects going into this much detail is usually unnecessary.

The Hybrid Approach

If there are only a few complex components of the project we often use a hybrid approach to wireframes. We start with the low-fidelity approach to establish the bulk of the project while leveraging the detail of high-fidelity for the complex areas of the project.

This approach allows us to meet all of our objectives while remaining as efficient as possible.

The key is flexibility, choose a method that make the most sense for your situation. This is true throughout the entire project. Wireframes are a very important part of the process but they are only as good as the strategy they’re based on. In the end, wireframes are just one of the steps toward the end goal of a great project.