Recently I undertook a review of different software for prototyping websites. It was great to have the time to have a cursory look at the different products on offer for a Windows OS platform. Here’s the results.
Some of the comparison fields were taken from this very good (but a little dated) article - http://boxesandarrows.com/view/visio_replaceme#comment_4021
| Considerations |
MS Visio |
Adobe Fireworks |
Axure |
Adobe Flash |
iRise |
| Scenario Design |
0
|
0
|
5
|
0
|
5
|
| Page Design |
5
|
5
|
5
|
5
|
5
|
| Widget Library |
2
|
3
|
4
|
3
|
4
|
| Dynamic Display |
0
|
5
|
5
|
5
|
5
|
| Data Interaction |
0
|
3
|
5
|
3
|
3
|
| Decision Logic |
0
|
0
|
0
|
0
|
3
|
| Annotations |
0
|
0
|
5
|
0
|
5
|
| Centralized Server |
0
|
0
|
5
|
0
|
5
|
| Portable Distribution |
3
|
5
|
3
|
5
|
3
|
| Requirements Management |
0
|
0
|
5
|
0
|
3
|
| Enterprise Support |
0
|
0
|
5
|
0
|
5
|
|
Export to MS Word
|
0
|
2
|
5
|
0
|
5
|
| Total |
10
|
23
|
52
|
21
|
51
|
| Considerations |
MS Visio |
Adobe Fireworks |
Axure |
Adobe Flash |
iRise |
| Free form Shapes |
5
|
5
|
0
|
5
|
0
|
| Customisable assets |
4
|
4
|
5
|
4
|
4
|
| Master templates |
3
|
4
|
5
|
4
|
5
|
| Export to html (Linked prototype) |
3
|
5
|
5
|
4
|
0
|
| Export to PDF |
4
|
5
|
1
|
2
|
0
|
| Prototyping Functionality |
3
|
4
|
5
|
5
|
4
|
| Annotation |
3
|
3
|
5
|
0
|
4
|
| Sitemapping capability |
3
|
3
|
4
|
1
|
0
|
| Page guides |
4
|
5
|
5
|
5
|
0
|
| Export to CSS |
0
|
2
|
0
|
0
|
0
|
| Mac/PC Support |
0
|
5
|
0
|
5
|
0
|
| Supports all font formats |
2
|
5
|
2
|
5
|
0
|
| Live field elements |
0
|
5
|
5
|
5
|
5
|
| Auto-generate site specs |
0
|
0
|
5
|
0
|
3
|
| Version Control |
0
|
0
|
5
|
0
|
0
|
| Aesthetic quality |
4
|
5
|
3
|
5
|
3
|
| Total |
38
|
60
|
55
|
50
|
28
|
| Over all score |
48
|
83
|
107
|
71
|
79
|
| Considerations |
MS Visio |
Adobe Fireworks |
Axure |
Adobe Flash |
iRise |
| Lynda tutorials |
Yes - 03 & 07
|
Yes - All versions
|
No - but Axure have
|
Yes - All versions
|
No
|
| Price (NZD) |
$955
|
$546
|
$1,076
|
$1,277
|
$50,000+
|
Note that this is a personal review from a cursory inspection, spending between 5 – 10 hours evaluating the products.
The 960 Grid Layout system is a well thought out set of tools and templates that can greatly increase the speed and process when designing and building sites. It is only a single tool to slip into your belt of tools, but it is pretty far reaching and comprehensive and the download includes css/html; templates for fireworks, visio, omingraffle and photoshop; a GNU public license; and printable pdf sketch sheets. It is based around the philosophy that all modern monitors support at least 1024 x 768 and that 960 is divisible by the widths contained within the template. The layout and structure of the template is well documented on the demo page.
From a UI / IA design perspective, this is a very handy tool when thinking about page layout with specific attention to pixel height and width of a page. Great for example, when a site has to be E-Govt compliant and there is a set amount of content that needs to be scaled in a thought out fashion.
The 960 grid system is a generous offer from Nathan Smith, a Senior Front-end developer who works for Viewzi. His personal site is called Sonspring, through which he does not for profit work for charities and religious organisations.
A couple of weeks ago I went to a workshop run by Philip Fierlinger of Xero fame, all about Flash prototyping. It was generally a good session, and although there wasn’t anything particularly new that I learnt about Flash - looking at Philip’s prototypes opened my mind to the possibilities of using it for a few upcoming projects at Chrome. Here’s a brief screenshot of the control buttons in Philip’s tutorial templates.
Phillip's Flash Controls
And here’s the simple prototype I made in the workshop - even though the workshop was focused to a Powerpoint “slide” style of building, I found it just as quick to build a “buttons” style prototype to give the user open access to the functionality.
Hit the pic to see the prototype in action.
Screenshot of Flash Prototype
So I’m almost finished my second prototype for a project, and today we presented to a client and I showed a Flash prototype instead of a boring old static set of wireframes. In a few words - it went extremely amazingly well. So well in fact, that because this is a new client we’re dealing with, I was half wondering whether it was just the client and not the process. But I must say - this is the first time I have ever presented and not really had even a single question at the end. After 20 minutes of showing them the prototype and talking about it they knew exactly what they were getting, so we ended up waiting for the designer to show up. Done and done.
I recently read an article about Flash prototyping on Boxes and Arrows and there was a lot of critiscism about length of time it takes to build, and ending up with something that can’t be used further down the track (as in the case of CSS/html). But the prototype I built took about the same time, if not a little less than a Visio diagram, and I didn’t have to answer any functionality questions which looks like it will save time in the long run. I even built my IA site map into a fancy little button in the top left hand corner of the prototype. Seems like it’s all win win to me.
There are many different tools for prototyping that an Information Architect can use to author sitemaps and wireframes. I’ve never personally found a tool that I’ve been 100% happy with. The most common prototyping tool would have to be Microsoft Visio (which is what I use mostly) which allows for extremely rapid prototyping with a moderate amount of customization for doing live user testing. There often seems to be tension between a full GUI (Graphical User Interface) and dynamic code producing tools for testing purposes. Some of the most well known tools among others are Axure, IRise, Omnigraffle, Flash, Photoshop, Fireworks, Illustrator, InDesign, Freehand, Powerpoint and even Ruby on Rails. Below are screen views of Visio, Axure and Omingraffle. For the most part Axure is the only product focused to application and site design. But it falls down in the limited number of template elements that it has, and the inability a user has to create their own template elements. The screenshot from Visio is from a contact form page that I recently authored as part of an Information Architecture.
Omnigraffle
Omnigraffle Interface
Visio
Visio Interface
Axure
Axure Interface
I'm an Information Architect working in Wellington New Zealand who deals a lot with web standards, conventions and best practice every day. This is the place where I place findings, musings and facts as a repository for myself and anyone else who might benefit. 
