Wireframing: The Blueprint for Building Your Dream Software
Could you imagine building your dream house without seeing a model home or renderings or a blueprint? Could you imagine spending all that money and not knowing what your house is going to look like or what the layout is going to be? I’m not talking about the carpet or the paint or the appliances. I’m talking about the basics, the fundamentals—like number of stories, bedrooms, bathrooms, and how you get to them.
Don’t you want to know that there’s a hallway on the top floor with 2 bedrooms on the left and 1 bedroom and 1 bathroom on the right, instead of “you’ll have 3 bedrooms and a bathroom somewhere”? Sounds a little ridiculous, doesn’t it? Well, the same thing goes for building software. Why would you start writing code (building software) if you don’t have the “blueprint” in place?
What is Wireframing?
This is where wireframing comes into play. Wireframing is a quick and cheap way to get concepts in front of customers, buyers, users, and stakeholders. In our house example, think of this as the first draft of the blueprint. Wireframes can represent page structure/layout, user flows, features, and functionality. Wireframes are the best way to validate our vision of what we’ve learned from our research, personas, journey maps, and story maps. The key to wireframing is to create quick mockups, get feedback, iterate, and repeat. Wireframes are the first step in really making a product tangible.
What is Wireframing NOT?
Wireframing is NOT worrying about look and feel. Wireframes are meant to be low-fidelity. Any and all visual treatment should be avoided during wireframing. The goal is to validate features, functionality, and workflows, NOT visual design. If you’re worried about being pixel perfect, you aren’t being quick. If you’re deciding between rounded or square buttons, you’re not validating workflows.
How to Wireframe?
So what is my simple approach to wireframing? Sketching out a proof of concept that accomplishes a goal or achieves a task. With that being said, you can create wireframes on napkins, scrap pieces of paper, whiteboards, or with one of the great tools out there like Miro, Figma, Sketch, and others. Once you have your tool of choice in place, follow these 5 key tips to wireframing:
Design workflows, not screens
Keep it generic
Keep it simple
Use black and white
Use intangible objects
Let’s apply these 5 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”.
Design workflows, not screens
We want the wireframes to depict a process:
A user selecting an item
Choosing to add it to their shopping cart
Checking out by entering in their payment information
The goal is to show the steps of adding an item to a shopping cart, NOT what each screen will look like. We are just trying to determine if we have the correct flow.
Keep it generic
The specific items we’re trying to sell don’t matter at this point. The details and descriptions aren’t important at this time. 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.
Keep it simple
There’s no need to worry about the header or 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 either. Concentrate on the happy path. Otherwise, you and your stakeholders will get bogged down with the details, which will come later.
Use black and white
Just like with the details and logos and copy, color will take focus away from the task at hand. There is no need to start adding conversations about color before everyone agrees on the workflow. Again, going back to our house example, let’s determine where the walls will go before deciding on a paint color.
Use intangible objects
We don’t need images or icons. We don’t even need straight lines. I recommend representing everything as a square or a circle or some other intangible object. The above example uses puzzle pieces. This will still convey the message of “this is where the item image will go” without having to discuss what items to display or if the image composition is right.
Conclusion
So what is the purpose of these tips? Earlier, I said wireframing was meant to be quick and cheap. These tips help ensure that you don’t get bogged down with the details. They ensure you’re not crossing over into visual design (which we’ll be covering later).
What does this all mean? Wireframing is the perfect option for getting early ideas in front of your stakeholders and customers. It allows you to see the vision before spending too much time and money. Wireframes allow you to prove your assumptions. Wireframes also help drive your visual design and drive your pixel-perfect design comps. Wireframes are the blueprints of software development.
By Josh Rothman