Axure is used for designing interactive prototypes for websites and mobile applications. Similarly Balsamiq is a rapid wireframing tool for designing web and app mockups. I use both and wanted to share in this brief article a comparison between the two applications using examples from a case study.
The case study we shall look at is one that has already been mentioned in a previous article. That is the UCT Thursdays site. UCT Thursdays is a promotional event that occurs on the UCT campus every Thursday showcasing student talents, corporate products/freebies and the largest offline social hub on the campus. I created an online experience for the event through Contextual Inquiry, Personas and prototyping launching a successful site with over 2100 fans on the integrated Facebook and Twitter pages.
I prototyped the project in both Balsamiq and Axure. Below I explain each one’s strengths in the User Experience design process.
Axure is the industry standard in interactive wireframe software and gives you the power to quickly and easily deliver much more than typical mockup tools. What makes it so cool is that it generates HTML wireframe prototypes which a pretty realistic functionally to the final product without any coding. The designer can then send a link to clients and users to review.
Key strengths apart from creating a HTML prototype from a drag-and-drop interface include
- Interactive prototypes
- JQuery Widget libraries for website and mobile applications
- Masters which allow for updating of every page of your website wireframe from a single location similar to how CSS changes run right through the whole site.
- Produce functional specifications in Microsoft Word format that document the interactions, annotations, and even content in your design.
Learning curve before mastery: High
Price: Not Free. 30 day Trial included.
Screen shot of the Axure prototype highlighting annotations
Axure generated Microsoft Word functional specification
Car Daily magazine app. See more prototypes on the Deliverables page.
This is a simple tool which does not have a complicated interface. Using Mockups feels like drawing, but because it’s digital, you can tweak and rearrange easily. Teams can come up with a design and iterate over it in real-time in the course of a meeting. Product managers, designers, developers, and even clients can now work together in the same tool to quickly iterate over wireframes, before writing code. It produces attractive sketchy wireframes which I personally enjoy. Its others features include
- Sketchy, low-fidelity wireframes which focus on rapid design conversations and functionality
- 75 built-in user interface components and 187 icons, plus a whole lot of community-generated components.
- Linking lets you generate click-through prototypes for demos & usability testing
- Share or present mockups with embedded links using PDF export, or use a 3rd party tool to export to code.
Learning curve before mastery: Short
Price: Not Free. 30 day trial included
Wireframe for the home page
Other examples. See more prototypes on the Deliverables page.
Which one to use is purely situational. Both are supported by strong community-generated components and widgets so the range of work one can do is quite wide. Axure is more expensive and suited for medium-to-large scale projects. Its annonating functionality means that the resulting prototype has useful notes on interactions for developers as opposed to creating seperate documentation. However because Axure RP offers more features than Balsamiq it takes longer time to learn and its HTML prototyping can be time consuming. Balsamiq is for smaller projects and rapid prototyping. Its prototypes are not as interactive as Axure RP but PDF mockups can be created. Very small learning curve and its lack of features is not such a show stopper either.
Other prototyping tools
If you don’t have money, another great tool I use is Pencil. Its a opensource GUI prototyping tool. Cool thing about it is that you can either install the full version on your computer or as a Firefox plugin. As a Firefox plugin you can use it online. Its sketchy design is similar to Balsamiq and its very easy to learn.
MockFlow is cloud based wireframing tool with interactive site map visualization, embedded revision history and a presentation mode for testing.
If you are using a Mac or Ipad and a bit of cash to blow OmniGraffle might be ideal for you. It has a range of free stencils, so whether you’re into desktop, mobile or web development it delivers.