In a follow-up to 10 tools for creating wireframes and prototypes I did a quick comparison of some of the features I think are valuable in a wireframe/prototyping tool. Here a brief summary of the categories:
Master Templates: As any information architect knows, the home page is different. However most of the subpages have navigation and layout elements that are repeated. It’s nice to have a master page or template features that allows you to manage these common elements.
Multiple Themes: Whenever you test wireframes with users, a clean, professional wireframes gives the impression that the designs are final, and the users are apt to be less critical. Providing hand-drawn wireframes are less intimidating and show that it is a work in progress and users are more likely to comment on them. Some tools provided themes that made the wireframes look hand-drawn.
Basic Shapes: A good set of basic shapes and objects makes for less work and more time sweating over the details.
Custom Shapes You’ll always find something lacking in the basic set or you just prefer some objects to looks a certain way. More importantly, you may want some objects to be aggregated into usability-proven patterns that you use over and over again. Think Yahoo Design Patterns.
Annotations: As much as we wish all wireframes are self-explanatory, you’ll need to communicate the wireframes to stakeholders, developers, designer and others at some point. Being clear about how the elements are supposed to work is always better than a nasty surprise before launch.
Interactive Mockup: Testing the wireframes with users is the best way to get feedback on usability issues. Why not have interactive mockups created automatically as you create your wireframes? And if the tool generates HTML, your developers may love you more.
—
The list is organized in order of price. Can’t beat free:
| Platform | Price | Free Version |
Master Templates |
Multiple Themes |
Basic Shapes | Custom Shapes |
Anno-tations | Interactive Mockups |
Noteworthy Features |
|
| Pencil | Mac / Win (Firefox) |
Free | Free | N | N | 37 | N | N | N | Simple Works as Firefox plug-in |
| Prototype Composer | Win | Free | Free | N | N | 21 | N | N | Y | Extensive project, process and requirements features |
| Gliffy | Online | $5/mo | Trial | N | N | 35 | N | N | N | Basic diagramming tool with libraries for UI, UML, flowcharts, floor plans, networking etc. |
| Wireframe Sketcher | Mac / Win (Eclipse) |
$75 | Trial / Nonprofits |
Y | N | 45 | N | N | N | Requires Eclipse installation |
| Balsamiq Mockup | Mac / Win (Adobe Air) |
$79 | Trial / Nonprofits |
N | N | 64 | N | N | N | Easy to use; Hand-drawn theme |
| ForeUI | Mac / Win | $79 | Trial | N | Y | 27 | Y | N | Y (DHTML) |
Nice paper rumple background |
| Mockup Screens | Win | $90 | Trial | N | Y | 17 | N | Y | Y | |
| iPlotz | Online | $15/mo | Trial | Y | Y | 57 | N | Y | N | Online / desktop ver available; Good commenting tool; Task and team management |
| ProtoShare | Online | $29/mo | Trial | Y | N | 29 | N | Y | Y | CSS Style editing; Extensive interactive tools |
| Lucid Spec | Win | $499 | Trial | N | N | 26 | Y | Y | Y | 3 display modes: Design, Simulate, Describe |
| Axure Pro | Win | $589 | Trial | Y | N | 36 | Y | Y | Y (HTML) |
Create, manage specs from annotations; Version control; Good online widgets library |
| JustinMind Prototyper | Mac / Win | $690 | Trial | Y | N | 39 | N | Y | Y | Integrated functional scenarios and requirements tools |
| iRise Pro | Win | $6,995 | Trial | Y | N | 16 | N | Y | Y (DHTML) |
Create fully functional simulations; Import data for simulations |
—
You may ask which are my favorites? I think Axure Pro is the most comprehensive and UX professional-friendly, but a little pricey when you have to buy multiple licenses for it to be effective as a team collaboration tool. I didn’t like the fact that it’s Windows-only. When I was running a UX team a couple of years ago, really hated the fact that I had to decide between Visio (Win) and Omnigraffle (PC).
This is why I found myself leaning towards an online solution, iPlotz which overcomes the platform issue and also allows for online team collaboration and commenting. However iPlotz doesn’t have a strong interactive mockup features for testing with users, nor does it have the ability for custom symbols. If these additional features are planned for the future, it would definitely be at the top of my list.
Hi Mike,
Thank you for writing these articles on wireframing and prototyping tools. There is a Mac version of Axure RP in the works. We’ve been posting updates at http://www.axureformac.com. Let me know if you have any questions.
Looking very much forward to the Mac version of Axure Pro!
I been using Balsamiq Mockups for a while and love it.
It is a big advantage that it looks handmade, because it let you (and the team) focus in usability, not in colors, and look and feel. Also, there are a couple things that Balsamiq provides:
A user-contributed collection of ready-to-use UI components and design patterns built using Balsamiq Mockups. http://mockupstogo.net/
Based on the mockup you can also generate a flex application with a server script in java, php or .net. http://www.themidnightcoders.com/develop-ria/balsamiqapp
Overall is the best value, plus once the team is used to the concept of wireframes, you can integrate balsamiq with a three wikis: Jira, xWiki and Confluence
Thanks for the expanded view on Balsamiq. It’s obvious that it has quite a dedicated following.
Hi there, thanks for the useful article.
A few notes about Mockups:
– the price is $79 per user, but the plugin versions cost less and we offer volume discounts here: http://www.balsamiq.com/products/mockups/desktop#buyvolume
– master pages: we’re working on something that will provide the same functionality (but with a twist). In the meantime you can use this trick: http://www.balsamiq.com/products/mockups/help#templates
– number of controls is 75, not 64.
– re: custom shapes: http://www.balsamiq.com/products/mockups/support#custom
– re: annotations, we have markup controls and if you use a plugin version you can use the platform’s collaborating features to give each other feedback
– interactive mockups: we don’t want to do too much here, but you can link mockups together: http://www.balsamiq.com/products/mockups/help#links
Also look at these tools that extend Mockups in different ways: http://www.balsamiq.com/products/mockups/community
We are also working on a web version, currently in private beta: http://www.balsamiq.com/products/mockups/web
I think that’s all for now! 😉
Hello Nam-ho,
Im Alex, from justinmind.com. Thanks for mentioning us on your review. Its very nice to see our work spreading. I just wanted to add a new info: we just released a new version, Justinmind Prototyper 2.6, which have custom shapes, called Widgets, which you said we lacked. Were also adding libraries of them on our site, for free downloads. Also, we added a little more compatibility between PC and Mac versions, and HTML generation, which was a user request.
If youre interested in testing it, please get in touch, via mail or twitter (@just_in_mind). Wed love to hear from you.
For more info, visit our blog. (http://www.justinmind.com/blog/?p=145)
Have you seen these yet!?
http://www.MockupMagnets.com
Awesome tool, just to get the ideas solidified with your team/client before using software for the details.
-E
Hi,
nice little compilation of tools but sadly we were not included in the list. So I’m just stopping by to let you guys know about the pidoco° Usability Suite.
We offer a fully browser-based wireframe tool with some great collaboration features incl. Usability Tester.
Try us 31-days free of charge and without any obligations whatsoever! Please visit http://pidoco.com/user/register
Thanks for reading and hope to see you there soon!
Tino
Hi Tino,
I tried several tools and in the end settled for pidoco (thanks Tino). We use the expert review and sharing of prototypes a lot – our development is based in russia and we do a lot of remote meeting sort of stuff.
Nice tool, thanks!
Chris