Wireframe

Design

What is a 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.

Pre-Product Score

10

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 Score

3

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.

Submit a request

Do you have a term or technical question that you want us to write about? Let us know below and we'll let you know if we can add it to our queue!