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.
Frequently Asked Questions
High-Fidelity wireframes represent a close representation of the final design, often with a limited color palette and placeholder content. Unlike Low-Fidelity wireframes High-Fidelity wireframes take “content types” a step further with additional design detail to help the viewer visualize the general style and flow of a page.
Low-Fidelity wireframes are designed to communicate the basic content types, blocks, and flow of a page. Low-Fidelity wireframes use only essential colors/features and often exclude placeholder content. You can think of Low-Fidelity wireframes as an abstracted version of the final page.
“Mockup” is a design term that could mean “rough sketch” or “low-fidelity wireframe” in most cases. The jargon is used to convey a quick-take on a design that is meant to be consumed in a way that is distant from the final design.