Wireframe

Definition:

Wire framing is a type of prototype that provides proof that confirms that certain assets fit cohesively. Once the wireframe gets approved, the software developers have a clear list of assets to start building. This makes the asset less likely to be abandoned, which ultimately saves time and money.

Analogy:

If you think of a website as a house, then the wireframe is the architect's blueprints.

In blueprints, the architect determines which critical structures and appliances should go into a particular room, and where they fit most cohesively. At this stage of development, the architect only cares about sizes, shapes, and flow.

A good architect generally wants to incorporate balance and variety into the space so they try to have elements that lead the home buyer through the layout that make sense visually and spatially.

For example, the architect might decide that the bed has to go in the bedroom and would fit best in the corner away from the door. It wouldn't make sense for the bed to be placed in the kitchen. The architect doesn't particularly care about the color of the bed, they only care about whether the concept of having the bed in the room makes sense and how big the bed should be.

In other words:

A wireframe is a simple, low-fidelity layout of a website that consists mostly of basic text and shapes, free from any real "design" elements to showcase the layout of what you are building.

Why are wireframes important?

It's one thing to know what a term means, but that is worthless if you don't know why you should know what a wireframe is in the first place. Let's break down the importance of this tech term based on two high level categories. We'll walk through an explanation as well as provide a score, 1-10, that shows you how much you should care about wireframes.

Pre-Product: 10/10

The first will be if you do not have a product yet. This means that you don't have a physical product. Maybe you're in the ideation phase, or maybe you're almost ready to start development. Whichever it is, we'll get into why wireframes are important and why you should or shouldn't care about it if you do not have a product.

This is a super important part of the product development lifecycle. Before you build any product, you should first start out with a wireframe to test your assumptions and ensure that your approach is well thought out and proper. You need to have a wireframe before you launch your product if you want to ensure you approach development as efficiently as possible.

Live Product: 3/10

The second category is if you do have a live product. Maybe you just launched your business or maybe it's been live for years and you're continuing to improve its quality. Regardless of the scenario, if your product is live, wireframes carry a different weight.

Once your product is live, you're good to go so a wireframe is no longer that relevant. The only reason you would need to go back to one is if you want to launch a new feature or flow. In that case, you should first put together a quick wireframe before going into development.

Examples of wireframes

So you know what a wireframe is, by definition. You know if you should care about it or not depending on your situation as a business/company/product. To dig in deeper, we will walk through some examples so we can make sure you really have a solid grasp on wireframes.

Three types of wireframes:

A wireframe is the skeleton of a site, showing the bare bones of what a product is going to look like. There are three categories of wireframes that we'll walk through in these examples: sketches, low-fidelity, and high-fidelity.

1. Sketched Wireframe

A sketch is going to be your most basic wireframe you can put together. You can do this with just a pen and piece of paper. The point here is to put your very first draft of your wireframe down on paper. It doesn't need to be fancy, it just needs to be practical. A sketch should be your step one in putting together a wireframe as it is the least time intensive and the easiest to iterate on.

2. Low-fidelity Wireframe

Once you are confident with the direction of your wireframe sketch, you can take that next step into a low-fidelity wireframe. A low-fidelity wireframe is also just a basic wireframe, and a sketch can be considered a low-fidelity wireframe. The only difference between a low-fidelity and a sketch is that a low-fidelity wireframe can be done online as well, using wire-framing tools such as Sketch, Balsamiq, or InVision.

3. High-fidelity Wireframe

With a little bit more confidence, you're ready for a high-fidelity wireframe , which more accurately captures more essence of advanced design. There is nothing that a user can interact with, they can only look at the wireframe itself. However, rather than just being a vision, you can actually see the colors, the design, and what the product will become as you continue your development journey to a prototype, then MVP, and finally Version 1.

Thanks to Bracketology for the wireframe example!

Key Takeaways:

1. A wireframe is a simple, low-fidelity layout of a website that consists mostly of basic text and shapes, free from any real "design" elements to showcase the layout of what you are building.
   
2. If you don't have a product yet, a wireframe is something you should be well aware of.
   
3. If you do have a product, you are likely past the wireframe stage, unless you are ready to launch new features.
   
4. There are different types of wireframes, all of which you can do with either pen and paper or with an online tool.