Tools for creating wireframes and prototypes (Part 1)
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.
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.
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.
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.