Wireframing: The Blueprint for Building Your Dream Software

Would you start writing code (building software) without a “blueprint” in place?

The Importance of Creating a Wireframe

Let’s compare building software with the similarly complex construction of a house.

Imagine building your dream house without seeing a model home, or renderings, or at least a blueprint? Would you spend money on a house without knowing what it is going to look like or what the layout is going to be?

I definitely wouldn’t. I would want to verify that the layout will be functional, include the right number of bedrooms and bathrooms, and confirm the size of each room. A builder that doesn’t understand your preferences and needs will have a hard time building a house you’ll love to call home.

The same principle applies to building software. If the developer starts coding without creating a wireframe, you could end up with software that no one wants to use. To build the right solution for your needs, it is best practice to start with a wireframe.

What is Wireframing?

Wireframing is a quick and inexpensive way to visualize a digital product, just like a blueprint does for a house. Wireframes help define page structure, user flows, features, and functionality. It’s a great tool to validate the development plan, which should have been created from thorough user and stakeholder research, personas, journey maps, and story maps.

What Wireframing Is NOT

Wireframing does not encompass design elements like color scheme, typeface, or button shape. Instead, they should be be low-fidelity mockups that instruct the layout of the digital product. Discussions about visual treatment should be avoided until a later stage of development. The goal of wireframing is to validate features, functionality, and workflows.

How To Create a Wireframe

Creating a wireframe can be as simple as sketching out a proof of concept on a napkin, scrap of paper, or whiteboard. If you want to get a little fancier, you can use a tool, like Miro, Figma, Sketch, or others. Once you have your tool of choice in place, follow these 5 tips to wireframing:

5 Tips to Wireframing

1. Design workflows, not screens
2. Keep it generic
3. Keep it simple
4. Use black and white
5. Use simple shapes

Let’s apply these five tips to a real-world example, like adding an item to a shopping cart. The goal might be something like, “as a user, I want to add an item to my cart and be able to choose whether to check out or continue shopping”.

1. Design workflows, not screens

You want the wireframes to depict the process the user would take in selecting an item and adding it to their cart. The wireframes should show:

1. A user selecting an item
2. The user choosing to add it to their shopping cart
3. The user checking out by entering their payment information

The goal is to determine if you have the correct flow by visualizing the steps a user will take and options they will see as they go through the process of adding the item to their cart and checking out.

2. Keep it generic

The specific items you’re trying to sell, details, and descriptions are unnecessary and distracting at this stage of development, so keep it simple. I highly suggest using placeholder text or lorem ipsum. The most important thing to convey in a wireframe is the steps the user will take from start to finish.

3. Keep it simple

There’s no need to worry about the header, where the logo is going to go, or how to navigate to other parts of the app. There’s also no need to worry about required fields or error states. Concentrate on the happy path. Otherwise, you and your stakeholders will get bogged down with details that will likely change as you get further into development anyway.

4. Use black and white

Adding color will take focus away from the task at hand. It is best not to introduce color until everyone is aligned on workflow. Going back to our house example, you need to determine where the walls will go before deciding on a paint color.

5. Use simple shapes

We don’t need images or icons. We don’t even need straight lines. I recommend representing everything as a square, circle, or some other simple shape. The above example uses puzzle pieces. The goal is to simply convey where the element will go, not the design of the element.

Benefits of Creating Wireframes

Wireframes are the perfect tool for communicating application functionality to stakeholders and customers early in the development process. It allows you to see the vision and prove assumptions before spending too much time and money on development.

Wireframes also help drive conversations at later stages of production, informing visual design pixel-perfect design comps. Wireframes truly are the blueprints of software development.