👋🏽 We wrote a book! Order Wireframing for Everyone today →

Balsamiq

Toggle navigation

Five Steps to Creating Great Wireframes

5 min. read

Good wireframes solve real problems and lead to strong products. From writing out the scenario to gathering inputs, here is a proven path to a great website or app.

Creating a wireframe is easy. But creating a great wireframe, one that contributes to creating a great product, goes far beyond having an idea and drawing a picture of it.

A great wireframe is one that solves a real problem. Follow these steps to create designs that lead to successful products.

Steps in the wireframing process:

  1. Articulate
  2. Generate
  3. Iterate
  4. Communicate
  5. Validate

1. Articulate

Before you open your wireframing tool or start sketching, take a few moments to write out the scenario you're addressing.

You must first understand who you are designing for and what problem you are trying to solve. If you can't answer these basic questions, you aren't ready to wireframe. Stop and go back to your requirements and/or user research.

Don't start designing before you fully understand the problem.

A good template to start with is to write out these 3 questions:

  1. Who will be using it?
  2. What is their goal? What problem does this product or feature solve for them?
  3. What are some of the actions or operations they are likely to perform?

Answering these questions will start you out on the right foot and prevent you from solving the wrong problem, which is much harder to fix later on.

When you are satisfied with your responses to these questions, you are ready for the next step.


2. Generate

Now comes the fun part.

This is your chance to be creative, to come up with as many ideas as you can without judgment or critique.

If you are using a wireframing tool, like Balsamiq, start by quickly adding UI controls to the canvas and moving them around to match the ideas in your head. You may want to draw controls such as rectangles and text to sketch out high-level concepts.

When you run into a roadblock or don't like what you've created, simply jump to a new wireframe and try another idea. If you have an idea that you know is bad, follow it anyway.

In this step, you want speed and quantity. If you are thinking too much, your analytical brain may be interfering with your best ideas. It's OK to be messy, you'll clean it up in the next step.


3. Iterate

Now it's time to look at your creative output.

If you've done the previous step successfully you should find ideas and directions that you didn't anticipate.

The goal in this step is to piece together the best parts of the ideas you visualized in the previous step. Collect and combine the concepts that address your users' needs in the most elegant way. Then add the missing details or steps that you overlooked in the initial generation phase.

Feel free to involve other colleagues who know the problem and use cases as design collaborators.

In this step you should start to see some solid user interface concepts come together that you're excited about. But don't strive for the final design here, try to have a few different variations for each screen, even if you're not 100% about the feasibility or layout.

It's also good to leave out finer details like fonts, colors, and interaction details that will be distracting in the next step.


4. Communicate

Don't make the mistake of thinking that because you've arrived at a solution that you're done.

Coming up with a good design (steps 1-3) is typically only about 50% of the work in the design process. Communicating your idea effectively and following it through to implementation can take as much effort, if not more.

A good wireframe should have 2 forms of communication to go along with it: The story behind it and instructions for developers.

At this point you've put a lot of thought into the design and made deliberate design decisions that aren't visible in the wireframe.

It may seem unnecessary, but bringing the design full circle by restating the original problem and explaining your design choices to the stakeholders is a crucial step is moving your design toward implementation.

This is an opportunity to get everyone on board and ease any concerns others might have about your design.

A good design should also be a good storyteller. Make time to create a presentation (or written report at the very least) about the process you went through and map your solution back to the problem it solves. This will go a long way to getting buy-in from everyone else on the team.

Finally, it can be very helpful to add annotations to the wireframe itself.

These can be notes or arrows pointing to specific areas of the interface that explain use cases, such as interactive behaviors, empty states and other edge cases, or performance or responsive considerations, to name a few.

Ideally, you understand the technology well enough to know the main things that developers will want to know. If not, spend some time with them and find out what else besides the visualization they'll need to know in order to build it.


5. Validate

Lastly, make sure that you provide an opportunity to gather feedback on your design after communicating it.

Talk to the person with the best understanding of the users' problem and ask them if your design proposal will solve it.

If you've done a good job with step #1, it should, but it is easy to get caught up in the creative design work and lose sight of the original problem.

So it's important as a final step to make sure that your design is actually worth building. At this point no code has been written, so it's much better to catch a mistake here than after the product has been released.

The second area to validate is whether your design can actually be built in the time allotted.

Designers, entrepreneurs, and product managers often have no idea what's involved in actually building the thing, so it can be easy to fall into the trap of "pie in the sky" designs that are great in theory, but nearly impossible to build given the inevitable time constraints.

You don't want to end up with a product that offers a compromised design because your idea wasn't realistic.

When possible, run your design by a few of the people who will be building it (hopefully you've already consulted with them a bit along the way) and make sure that you're not in for a surprise when they come back with their time estimates.

Lastly, you may want to validate your design ideas by watching people use them in usability tests.


Summary

People are often surprised to learn that wireframing is an elaborate enough step to warrant any kind of formal process, but hopefully this article has shown the value of taking the time to wireframe the right way.


For a deeper dive into the wireframing process, check out these courses:

Rapid Wireframing with Balsamiq

Free course on how to use Balsamiq Cloud to create wireframes of a digital product quickly. Lots of design tips and tricks by Billy Carlson, author and UX educator.

Rapid Wireframing with Balsamiq

Free course on how to use Balsamiq Cloud to create wireframes of a digital product quickly. Lots of design tips and tricks by Billy Carlson, author and UX educator.

How to Redesign a Website From Start to Finish

Follow a website redesign project for a museum, from the research phase to the final implementation. A free case study course with UX and UI expert Piccia Neri.


Webinar: How to Ideate Like a Designer

Watch the recording of our webinar about ideating like a designer.


By Leon Barnard
Got questions or feedback? Email support@balsamiq.com.


Related Articles

What are wireframes and why are they used?

A comprehensive guide to user interface wireframes. Learn what wireframes are, why they matter, and how they’re used through examples and demonstrations.

By Peldi Guilizzoni

Ten Principles of Effective Wireframes

Guiding principles to help designers wireframe better and encourage the entire team to participate in the design process.

By Billy Carlson

Wireframing User Flow with Wireflows

A wireflow is a hybrid design document that combines wireframing with flow diagramming. They are essentially wireframes showing user and system flow.

By Mike Angeles

6 min. read

Get the Inside Scoop!

Want to get exclusive early updates on our
Products, Wireframing Academy, and our Company?

Subscribe to our monthly newsletter and be part of our Inner Circle!

See what people think of our past issues!

Dazz Knowles
"Of all the e-mail newsletters I get, @balsamiq is the one I always read, they're brilliant!" - Dazz Knowles
M. Pesente
"It's always a big pleasure receiving such an inspiring newsletter. Love the Balsamiq culture!" - M. Pesente
Jérémie André
"Another great newsletter from @balsamiq!! 😁" - Jérémie André
Looking for more ways to get closer to Balsamiq? Join our Research program or Slack community!