This is the process of quickly sketching and playing with different ideas and layouts. The goal of wireframing is to brainstorm over the different “designs” (even if they are still just black and white sketches) and try to evaluate different ideas. Since we have great tools for rapid prototyping, wireframing become less important. We are only trying to experiment with the loose outline of the design and definitely don’t go into details or high-fidelity wireframes.
Sometimes on more complex projects it might be still worthwhile to go into high fidelity wireframing. This really depends on the complexity of the interface. You can also go back to wireframing at any stage of the projects and you should actually do that.
We prefer to keep the prototype low fidelity: make it ugly, and people will overlook the aesthetic design and they will focus on the concept. That's our point at this stage of the project.
Difference between wireframe and prototype
Prototype is the preliminary version of our product derived from our wireframes. It is an interactive wireframe which you can experiment using and see/understand how the product will function.
If you have a set of different wireframes of several screens, the prototype will be the aggregation of these wireframes tied together which you can click through with your mouse/phone—and understand the connections between different screens (wireframes).
Tools for wireframing
In order of increasing effort and fidelity...
This is a surprisingly powerful way to wireframe. We'll add a proper explanation soon. but in the meantime, you might find this guide on how to do the same with Google Slides, to be useful.
Balsamiq is one of the oldest wireframing tool. Its philosophy is to use almost like hand-drawn elements to allow you to focus only on the layout and elements, instead of the visual appearance.
Although Murally is not a dedicated prototyping tool, the selection of its tools allows you to collaboratively sketch wireframes and quickly iterate over it. We like to use it.
These tools are more sophisticated and allows you to produce final-like wireframes—we can even call them mockups. We'd rather use them to produce low-fidelity wireframes. There are very few projects which justifies creating high-fidelity wireframes, almost like a real product. Simply because this is not the right place to experiment about visuals.
Which tool to use?
Try to use the best tool for the situation.
- If you are working with others, Google Docs or Murally can be extremely effective.
- If you are working alone find the one you can move the fastest.
- If you need high fidelity wireframes, use Sketch, Illustrator or even Photoshop. Need to collaborate? No problem, use Screenhero and work collaboratively.