Tools for creating wireframes and prototypes (Part 2)

Axure Pro

Axure Pro

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.

  • http://www.axure.com Victor

    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.

  • http://gtothesquare.com Geries Handal

    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

  • http://www.strangesystems.com namho

    Thanks for the expanded view on Balsamiq. It’s obvious that it has quite a dedicated following.

  • http://www.strangesystems.com namho

    Looking very much forward to the Mac version of Axure Pro!

  • http://www.balsamiq.com Peldi

    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! ;)

  • http://www.justinmind.com Alex Luna

    Hello Nam-ho,

    I’m Alex, from justinmind.com. Thanks for mentioning us on your review. It’s 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. We’re 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 you’re interested in testing it, please get in touch, via mail or twitter (@just_in_mind). We’d love to hear from you.
    For more info, visit our blog. (http://www.justinmind.com/blog/?p=145)

  • http://www.TheWayOfTheUnplugged.com Efraim

    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

  • https://pidoco.com Tino

    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

  • Chris

    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

  • ForzaRP

    Balsamiq is pretty cool but I discovered CREATELY wireframes, which are pretty awesome too. Am using them for free btw, – http://creately.com/diagtype/wireframe

  • Aaron

    This is a great write-up. Do you have an update now that we are in 2012? If you dont have one already, can you point to someone else who has a updated version?

  • http://www.facebook.com/bella.king.182 Bella King

    Great help to me,
    thank you.

    Best regards: Joyfax Server