Wireframing is the norm in IT industry. It is the concept of visually outlining the information and interaction of your web application before you start designing or coding. Even if you aren’t from an IT background, it has probably found its way into your workflow in some form. While some of us are old school and prefer the old paper and pen approach, and some of us prefer clickable HTML wireframes that describe your web application in every detail—the point is, we all are doing it. And with such widespread adoption of wireframes, a myriad of products have appeared with claims of making the task of wireframing faster,easier and more useful.
Which one should I be using?
Wireframing tools can be classified in the following categories basis the purpose served-
- Wireframing software – Tools that allow you to create basic sketch type mockups that look like mockups drawn on back of the napkin. Well yes I understand this sounds basic but this type of mockups could be used in the ideating phase and should not look like a final design.
- Generic diagramming software – Tools like Microsoft Visio or UML Star that let you create lots of different kinds of diagrams such as flowcharts, UML charts, wireframes, network diagrams, etc.
- Prototyping software – These are the tools that help you create click-through software prototypes. Some prototyping tools let you create wireframes within the tools, other focus on linking existing images together like Flinto or Pixate.
- Generic image creation software – Tools like Photoshop, Illustrator, and Sketch fall into this category. These are generic drawing tools that can also be used for creating wireframes but have steeper learning curve.
Now that you know which category serves your need, you could look at the cost, the ease of use and make your decision. Most software come with a free trial period and you could also request most companies to extend your trial period if you need more time evaluating their software. Trust me it works!
So getting down to the business of reviewing tools, it will not be possible for me to review each tool but I have narrowed it down to the two tools used I have used extensively. Our contenders for the review are Balsamiq and UXpin.
$79 – Single User
- Mainly a wireframing tool to create quick mockups
- Simple and easy to use
- Can create interactive PDFs
- Creates Sketchy style mockups
- Rapid Prototyping tool
- Point and click interaction
- Can export to images, html and interactive pdfs
Cons compared to UXpin
- Limited number of features when compared with UXpin
- Unable to show interactivity such as hover effect, slide effect etc except click through
- The files are saved as *.bmml files which requires balsamiq desktop tool
Pros compared to UXpin
- It comes with a Desktop app, which can also work fluidly offline.
- Since it has limited features meant to create back of napkin type mockups, it’s faster and doesn’t lag.
- Easy to learn and use
Starter – 12$ per month
Freelancer – 29$ per month
Team Effort (most popular) – 49$ monthly
Company Wide – 89$ per month
- Interactive wireframing tool. Can add interactions and create a prototype that behaves like the final product
- Ability to prototype mobile and desktop apps
- Pre-built layouts
- More interactions such as change state on hover
Cons compared to Balsamiq
- With bigger mockups that use images, it starts to lag
- To use UXpin internet connectivity is a must
- Steeper learning curve when compared to Balsamiq
Pros compared to Balsamiq
- Can share files and can preview without requiring UXpin credentials.
- Can export as html
- Can layer UI elements so it’s simpler to perform HTML slicing
Now based on your requirement you could choose either one of these tools. Just because UXpin has more features, I will not be placing it above Balsamiq since both have unique usage values, as sometimes sketchy mockups are required during ideating phase, and sometimes it’s nice to present your ideas in an attractive way. The decision is up to you.
In conclusion, one of the tools that hasn’t been mentioned is “Pen and Paper”. Yes, an actual pen.and some real made-from-wood paper. OK, so these don’t allow you to make a prototype, and there are no built-in elements. But, if you are more comfortable with the traditional approach, why not get your ideas down on paper first and refine them in software later?