Before we launch right into debating the nuances of wireframing, let’s take a minute to define the topic of debate for those of you who may be new to the realm of user interface and user experience. So…”What is a wireframe” – you might ask. Wireframing itself is an incredibly important step in the for-screen design process. It is the architectural blueprint for an interface (anything from a website to an application.)

In the same way you cannot start brick and mortar on a house without a plan, you cannot begin applying pixels or writing blocks of code without a method to the madness.

2016-09-13_wireframes3

The main function of a wireframe is to provide a hierarchy of information in a design in order to plan a layout that best navigates a user through the information provided for the best understanding and easiest navigation of an interface. The wireframing step is essential, as it allows the designer to determine the layout and user interactions without all the distraction of colors, visuals, and even what most people would consider ‘design.’ A low-fidelity wireframe might not even contain typeface choices or copy. But we will get to that in a second. For now, a simple definition of a wireframe is a black and white blueprint that details all functionality so that the designer can then apply the paint.

 

The wireframing step is essential, as it allows the designer to determine the layout and user interactions without all the distraction of colors, visuals, and even what most people would consider ‘design.’

 

What is the value of a Wireframe?

Now that we know a wireframe is a blueprint, we’d like to dig into why this blueprint is so important.

  • First, this blueprint dictates an interface’s information architecture. It shows a connection between pages, or screens, and details the connecting paths a user will take to navigate the interface.
  • Second, a wireframe also lays out a consistent way of presenting information. Maybe all the details are presented in a table, or bulleted list. All pictures appear as squares, or all user profile images appear in a circle. This consistency becomes a visual language that a user subconsciously recognizes, and helps them digest the information presented.
  • Finally, the last value of the wireframe is that it helps prioritize the content. In this step the designer is determining how much space to allot for each item, and where in the visual hierarchy it is located.

Ok, we’re done with the basics, now let’s get to it. For the rest of this post, we will be speaking directly about how Steadfast uses low- & high-fidelity wireframes; meaning we will specifically be talking about websites, and the cases in which we deem it appropriate to go into more or less detail in this crucial step.

 

The Low-Fidelity Wireframe

It is important to note here that wireframes can be executed in a number of manners, from paper sketches, to computer drawn images. At Steadfast, we create the latter, and we build them in illustrator for speed and accuracy. As you can imagine, low-fidelity wireframes are faster to create, and tend to be a tool to facilitate team communication on a project. Here are Steadfast, our low-fidelity wireframes are often a launching point for a designer’s initial thoughts on a layout and our content writers initial thoughts on content length and hierarchical importance. They tend to lean a little more abstract and utilize simple blocks to represent space saved for an image and mock content (Lorem ipsum) used to guess at the length of various content blocks.

2016-09-13_wireframes4

The basics:

  • This step comes after the initial site map
  • Defines layout and hierarchy of sections
  • Can almost be considered a refined ‘brain dump’ of organizational ideas
  • Contains dummy content (Lorem ipsum)
  • Entirely made of black and white shapes

 

The High-Fidelity Wireframe

By contrast, the high-fidelity wireframe at Steadfast includes more actual content, specific typeface choices, and may include specific information on image dimensions, and even button styles. Our designers tend to play with shades of grey rather than sticking to sheer black and white in order to lay out subtleties in contrast that will appear once color is applied, style the navigation, and really look at pairing typefaces in a space where color is not a conflicting option. In this case, our designers start to see the life of the site emerge before color and imagery are even an option. This step for us at Steadfast moves the wireframe a little beyond the basic structural benefits, moving toward the life-like qualities of design, but without distracting from the focus of function.

2016-09-13_wireframes2

 

The basics:

  • Generally comes after a low-fidelity wireframe
  • Includes more detail; typeface choices, specific dimensions
  • Contains actual content; at least headlines and subheads
  • Grayscale rather than black and white
  • Is a middle ground between and initial concept and the final design

 

While one or the other can be used depending on what is needed for a specific project, here at Steadfast we find it best works for our process to create a low-fidelity wireframe internally and settle on layout, while getting feedback from the team that helps us refine the product into a high-fidelity wireframe that we then present to our clients. This way, we can not only demonstrate how a user will interact with their site, but we can also give our clients a more life-like view of what they can expect their site to look like. While there are no colors or images used, the typefaces and actual content help our clients see their brand in the wireframe and allows them to visualize where our designers are going.

No matter which style you use, user experience is key, and the wireframing step itself is essential to providing the best solution possible for that end user.

Happy Wireframing!

Author Info

Steadfast

We help businesses grow through brand marketing and design.

– We focus on solutions, not transactions
– We aim to be a flexible partner, not a per hour vendor
– We strive for long-term brand growth, not quick fixes

Our team is hungry, humble and smart and we operate within our core values of Humility, love and courage.