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:

—

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.

Balsamiq Studio's Mockup

I am so glad to see there are so many more applications dedicated to creating wireframes and prototypes. A far better scene from a couple of years ago when there was only Omnigraffle and Visio.

Here’s round up of information architecture (IA) and user interface (UI) tools for wireframing and prototyping:

Desktop wireframing tools

1. Balsamiq Mockup – “Create software mockups in minutes”. $79. Free for non-profits. Free limited version. Cross platform: runs on Adobe Air.
Lovable, easy to use wireframing tool that creates hand-drawn looking wireframes. Interface elements are nicely grouped, and support for iPhone interface wireframing. The output doesn’t look professional, but who cares – it’s a prototype. Online versions in the works.

2. Axure – “Wireframes, Prototypes, Specifications”. $589 for single license. Windows only.
I think Axure is the most heavily promoted in the list. It is by far looks the most professional and UX practitioner-focussed. What’s nice is that in addition to helping you creating wireframes, it can generate interactive HTML prototypes for testing and specifications from your notes and annotations. However the price does seem a little steep compare to its competition.

3. Pencil – “a Firefox add-on to do GUI prototyping and simple sketching”. Free. Cross platform: Mozilla Plug-in.
I loved the simplicity of Pencil, which looks as if it was a polished student project. Having said this, it has enough features to satisfy most wireframing experts who are used to Visio or Omnigraffle.

4. Prototype Composer – “Free prototyping tool from Serena Software”. Free. Windows-only.
Prototype composer is more of a fully featured tool to help you manage your team and software or web application development project. You can manage your project, assign roles and responsibilities to your team, define processes and create prototypes. Not really suited for low budget, rapid prototyping and testing.

5. WireframeSketcher – “Eclipse plug-in for creating wireframes and screen mockups”. $75. Free for non-profits. Cross platform: Eclipse required.
I haven’t tested this one out. It looks pretty slick, but just couldn’t get over the barrier of having to install Eclipse to run it. I myself would go through the trouble, but I doubt most users would bother (it requires you to download and install EMF core and GEF plug-ins before installing the application. Scary.)
Update: I did get a developer friend to help me through the installation process. It was a little scary and he saved me a ton of trouble. After the install, it took a while to figure out how to get a project started. WireframeSketcher is a very straight forward wireframe editor without too many bells and whistles. The objects are clean and the interface easy to use.

Online wireframing tools

6. iPlotz – “Wireframing, mockups and prototyping for websites and applications”. Free for limited use. $15/mo or $99/yr for full use.
Another excellent wireframing tool and one of my favorites in the list. The advantage of an application being online is that it allows sharing and collaborations, so you member of team can comment and even edit the wireframes directly. It has a very good set of features which include master templates, good library, full-screen preview, project management window, and simple task tracking. It also includes web and iphone libraries and 3 themes (Mac, Windows and hand drawn). Also worth mentioning is that it is available as a desktop application (Adobe Air required), which is very nice for those people who travel a lot and don’t have a reliable internet connection.

Other prototyping tools

7. Protonotes – “HTML prototyping collaboration tool”. Free. Online.
With a small snippet of javascript, you can allow your team to add notes to an HTML prototype you have already created. You can change status of the notes after reviewing them and also download the notes to Excel. Good tool for collaboratively testing and reviewing a site with your team or the client during the QC phase. You can also hook it up to a MySQL database.

8. Adobe Flash Catalyst – “A new professional interaction design tool for rapidly creating user interfaces without coding”. Free beta. Cross platform desktop app.
Not quite a wireframing tool, but a interface prototyping tool for creating Flash based rich internet applications. The autoplaying intro movie is unbelievably annoying. Once you get over that, you realize this is indeed a very powerful tool, fully integrated with Photoshop and Illustrator to prototype interactions and interfaces without writing a line of code. And at the end of the day, it generates SWF files which you can have your coder polish up and optimize.

9. & 10. Then there is the obligatory shout-out to Omnigraffle ($100 for Standard, $200 for Professional version) my personal tool of choice for which I personally developed a simple wireframe stencil. And then there is Microsoft Visio ($200 for Standard, $360 for Professional version) which also has good wireframe stencils.

I am sure there are a host of other great applications for wireframing. I’ve seen information architects use InDesign, Illustrator, Powerpoint, Keynote, Smartdraw, ConceptDraw and even Excel for wireframing. Please let me know if there are others so I can update this list.

—

As a side note, a couple of years ago I wrote a post on using wireframes that still gets a lot of hit and (amazingly) still on the first page when you google for wireframes.

—

Update: Shortly after posting this article, I found a Sitepoint article, 16 Design Tools for Prototyping and Wireframing from March 2009. Good list with descriptions and screenshots.

See also Wireframes Magazine. They have a good article on WireframeSketcher commenting that it’s actually a very good tool with storyboard mode and versatile master page functions.

Here’s also some other tools that I have been made aware of:

ForeUI $79. Cross-platform: runs on Java
Has support for multiple themes. Also like that you can assign actions to elements so that you can easily create a working prototype for testing.

Protoshare $29/mo for personal, $99+/mo for teams. Online: requires Firefox 3.0+
ProtoShare does a good job of organizing your site, and adding a lot of interactive functionality, useful for testing the prototype with users. It seems geared more for those who like to tinker with the code, as they provide you with the ability to manipulate the CSS to change the style of your prototype and other features good for those with some knowledge of coding. The app is packed with features, however I found the interface a little unintuitive and frustrating at times and not really that friendly towards your regular UX professionals.

Mockup Screens $90. Windows-only.

iRise Pro $6,995. Windows-only.

Lucid Spec $499. Windows-only.

Justinmind Prototyper $690. Windows/Mac.

Gliffy $5+/mo. Online.

JumpChart Free for limited use. $5+/mo. Online.

Hot Gloo Free (in beta). Online.

Microsoft Sketchflow Part of Expression Studio 3 – $599, Windows-only

Creately Pricing undecided. Online. Looks like a simplified Visio.

—

Update I created a follow-up article More tools for creating wireframes and prototypes which has a features comparison chart.

I recently noticed traffic on this site looking for my Using Wireframes article (my most popular post to date) posted on my old, now-retired blog, strangesystems.net. The article provides an overview of what wireframes are (from a web design, information architecture point of view), some guidelines on how to create them and some Visio and Omigraffle templates and stencils.

I think the issue rose from the fact that at some point both strangesystems.net and strangesystems.com both mapped to this old site and people have links pointing to when strangesystems.com was strangesystems.net.

There were two versions of this article, the original and the revised. I provide here links to both.

Also worth mentioning is Scaled Visio Wireframes Stencils & Templates, one of many articles I wrote on the User Experience & Design blog while I was at Forum One Communications. This is more like a follow up to the Using Wireframes article, taking into consideration feedback from our developers who complained that wireframes are often misleading and hard to implement since they aren’t properly scaled.