Why You Should (or Shouldn’t) Wireframe.

Why You Should (or Shouldn’t) Wireframe.

As a designer, you are presented with an idea for a product or a website. It sounds awesome, but you don’t really have a solid idea on how to go about getting started. You are not totally familiar with the type of users who would use this product nor do you have any idea how this app should look or feel. You do, however, know exactly how the app works and what the steps are for going through such an experience. Your first step going into this project is to create a wireframe.

What is a wireframe? 

A wireframe is simply a bare template for an interface for a product or a website. It usually does not have any color, or images whatsoever, and is used to show what and where different functions go along with the general layout.  You can look at this as a blueprint for your final mockup.

 
The purpose of a wireframe is to not so much plan how an app looks, but more of how it works.  The simplicity of the wireframe allows you to ignore any possible design influences such as color or imagery, so that you can ensure that the app works well.

 
Why Wireframe? 

Wireframing can take out a good amount of guesswork when it comes time to create the design of the product. In fact, having a blueprint of a design will allow you to plan, and make design decisions a bit quicker and effectively.


It can be a great way to get some ideas out the door with your client and making sure that you and your client are on the same page throughout the process of the design.

Also, laying out the function of the product before designing can be useful, because laying out the function during the thick of your design process can be a bit daunting and time consuming.


Wireframing Methods and Tools

 
Designers use a variety of tools when it comes to wireframes. Some designers like to sketch it out in a notebook since it’s quick, accessible and always nice to freehand. Others use the same design programs that they typically use whether it is Sketch or Photoshop. Designers can also create wireframes with software that are created specifically for wireframes such as Balsamiq and Axure.


There is not a right or wrong way on how to go about developing a wireframe as long as you understand how to best utilize them.

Different Types of Wireframes

The types of wireframes that can be created can depend on where you are in the design process, or how big the design project is. 

Example of a Lo-Fi Wireframe – Source: airlinefiesta.com


Low Fidelity Wireframe

Lo-Fi wireframes are good when the scale of the project is quite large and you are sitting at ground zero. It is also a great way to brainstorm layout ideas seeing that Lo-Fi wireframes are quick to make and edit. There should be very little detail in terms of layout, so no text, and squares are typicaly used in place of sections and images. Completing a Lo-Fi wireframe will allow designers to move on to the next step without having to worry about any possible features that could conflict with the design later down the process.

Example of a Hi-Fi Wireframe – Source: Vando Sanchez via Dribbble.com

 
High Fidelity Wireframe

Unlike Lo-Fi wireframes, Hi-Fi wireframes include a bit more detail. Hi-Fi wireframes may include text, a fade of color, basic images if any, and may be a bit more strict in terms of positioning. Hi-Fi wireframes can be created after the Lo-Fi wireframe is created, or if the design is being built off of an established project. The goal for a Hi-Fi wireframe is to be able to see layouts more clearly, and can see some finer content against it.

Creating a Hi-Fi wireframe is a great way to ease yourself going into the final design. When creating the final design, things such as image specs and layout won’t be too much to think about, which can help you focus on the important details that your design needs.


Is Wireframing Ever Useless? 

Wireframing may be a bit useless under certain circumstances. It can be considered as an extra step in anyone’s design process. If the problem you are attempting is solve is so cut and dry, that a brainstorming session would take more time than the value it gives, then you may want to leave wireframing out. Also, certain designers tend to enjoy solving all of the layout issues while working on the final design as it helps promote some of the more sophisticated ideas making the process less linear and designers aren’t limiting their creative ability.


There are many designers who swear by wireframes and make it a must for their design process. It can be handy for many design situations and has their benefits, but whether or not you should wireframe is ultimately up you.