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.
At the bottom of this post is a short video that covers Adobe Fireworks CS4 as a rapid prototyping platform for wireframes. I’ve been testing Fireworks CS4 over the last couple of weeks in any spare time I have, and although it takes a bit of learning if you’re used to using Photoshop, Flash and Illustrator then Fireworks sits nicely in the middle and seems to give the interaction designer the best of all three programs for designing user interfaces. That’s from a superficial perspective after spending a few hours tooling round with the application mind you. But first impressions are often lasting impressions.
Features Overview
As a quick overview of the features, here’s some stand-outs from the Fireworks product page:
- Customisable and reusable assets
- PDF export with click-throughs
- Universal interface for CS4 products (Hooray)
- Easy to navigate Layers, States and Pages (This is my own addition)
Download a trial
Anyone can try out a 30 day demo of the application by registering with Adobe and downloading.
Rapid Prototyping example video:
Slideshare has a slideshow from edanzico, posted 2 months ago that showcases user testing for the wordpress 2.5 admin panel, as well as the process and parameters for prototyping a new admin panel.
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.
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. 
