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 tried Axure RP for some time, but now I’m using Balsamiq Mockup. If you need to make a dynamic, hi-fi model, Axure RP is for you. But, on the other hand, drawing static, lo-fi model is easier and takes less time. And since my designer-partner uses a Mac, the AIR-based Balsamiq Mockup was the right choice for me. I’m glad I didn’t pay for Axure RP. (Company did.) ;-D
It’s a great overview of wireframing and prototyping tools. I just wanted to make some corrections regarding WireframeSketcher.
WireframeSketcher also works with Aptana Studio, Zend Studio and other Eclipse-based IDEs so it’s technically not Eclipse-only.
Regarding the installation, is actually easy. Eclipse figures out and installs all the dependencies automatically. Manual installation is only required if there is no direct Internet connection.
Thanks Peter for the installation instructions. After reading reviews of WireframeSketcher on other sites I am convinced that it is a great product and I will soon be checking it out. But I think you could make some improvements on the homepage to comfort people who aren’t very technically minded. Something like a 1-2-3 instructions for each OS.
Namho,
You are probably looking for this page:
http://wireframesketcher.com/install_details.html
There probably should be a more visible link to it.
You should also look at ForeUI (http://www.foreui.com), it’s pretty nice for doing interactive prototypes and has different skins so you can do low-to-high fidelity versions from “hand drawn” to OS X or Windows XP variations.
The developer is also very responsive to requests. It fits squarely in between Balsamiq, which I also own and Axure (both of which, I use). IMHO, it has a better UI for creating interactivity than Axure and being a Java app, it’s cross platform.
ForeUI can also export mockups as PDFs or as DHTML.
Thanks for a great overview.
For low fidelity mock-ups we use MockupScreens: it’s totally easy to use even for non-programmers and great thing is it let us switch between “windows” and “rough sketch” look for our prototypes.
Anyway this type of tool is indispensable for us for quite some time now whenever we need to clarify requirements for new development. I can’t imagine going back to old-style workshops with lot of people talking about something they don’t really grasp just yet.
There’s also JustInMind Prototyper, for hi-fi wireframes and prototyping. It works on both Mac and PC platforms and it’s very robust, for grand projects.
If you’re interested in trying it out, reach me at JustInMind’s blog.
greets!
ForeUI +1
Skinnable wireframe is really interesting and useful. DHTML exporting is good for remote review.
We just completed an exhaustive evaluation of requirements visualization and prototyping tools. We learned a ton:
1) While prototypes are fast and easy to build, they are difficult to integrate with larger scale BRD documents. The typically sit outside the requirements definition process.
2) There are new solutions that integrate prototyping into the requirements definition process (like Blueprint (http://www.blueprintsys.com) and the upcoming Microsoft suite.
On the prototyping front, we liked Balsamiq a lot, but Blueprint (http://blueprintsys.com/Products.php) is going to be used to tied prototypes and other requirements together.
Another wireframe/prototyping tool is Hot Gloo.
http://hello.hotgloo.com
Just tried ForeUI, switching themes is so cool~