Review: 16 User Interface Prototyping Tools
People constantly ask me what the best prototyping or mockup tool is. My standard answer is “whichever tool you are most comfortable/experienced with.” But just to cover all the bases and make sure that I’m not missing out on the “silver bullet”, I decided to do a review of all the tools that I’m aware of. You could (and probably should) distinguish between pure mockup tools (e.g. “Pencil”) and tools for creating interactive prototypes (e.g. Adobe’s soon to be released product code named “Thermo”), but for the purposes of this matrix, I lumped them all together, and I noted which have interactive capabilities and which don’t.
My picks:
1) Low fidelity mockups for idea exploration and communication: Balsamiq
2) Interactive prototypes to test and communicate interactions: Adobe Flex (Thermo may change my mind)
3) High fidelity drawing tool: Adobe Illustrator or OmniGraffle
Review:
| Balsamiq | Pencil | OmniGraffle Pro | Visio Pro | |
| One liner | Cool! | This can’t really be a Firefox addon! | Amazingly simple and powerful drawing | Practical and business-like |
| Ramp up time | none | minuscule | small | small |
| Other expertise required | none | none | none | none |
| Supports interactivity | nope | nope | nope | nope |
| Full lifecycle product (rough to spec) | rough only | rough only | yes | somewhat |
| Fun to use | absolutely! | yes | yes | somewhat |
| Ease of creating a mockup of tree navigation | drag and drop and populate | no tree stencil! | had to download Yahoo stencils | straight-forward |
| Time to build mockup of tree navigation | 15 min | 1 hr | 1 hr | 30 min |
| Quirky? | nope | somewhat | nope | nope |
| Cost | $79 | free | $199.95 | $559.95 |
| Photoshop CS4 | Illustrator CS4 | Fireworks CS4 | Dreamweaver CS4 | |
| One liner | Gold standard for bitmap tools | Gold standard for vector tools | Bitmap + Vector but I still don’t get it… | Yes, there are countless HTML toolkits out there, but I still love it |
| Ramp up time | very large | very large | medium | large |
| Other expertise required | knowledge of bitmap tools | knowledge of vector tools | none (for this) | html, javascript, css |
| Supports interactivity | nope | nope | nope | yes |
| Full lifecycle product (rough to spec) | professional | professional | yes | yes |
| Fun to use | somewhat | somewhat | rendering is poor | yes |
| Ease of creating a mockup of tree navigation | from scratch | from scratch | no default tree! | had to find javascript tree control and figure out how to use |
| Time to build mockup of tree navigation | 1 hr | 1 hr | gave up | gave up |
| Quirky? | difference between Illustrator and PS can be confusing | difference between Illustrator and PS can be confusing | average | nope |
| Cost | $699 | $599 | $299 | $399 |
| Flash CS4 | Flex 3 Pro | Thermo (codename) | Powerpoint 2007 | |
| One liner | You can do whatever you want – total interactive flexibility | With some programming experience this rocks! | Not released yet – but from experience on the beta I have high hopes | Great prototyping tool for the earnest product manager  |
| Ramp up time | huge | medium | large | negligible |
| Other expertise required | programming | programming | none | none |
| Supports interactivity | oh yes! | oh yes! | yes! | okay… yes |
| Full lifecycle product (rough to spec) | yes | rough – not really a visual tool | sort of | rough only |
| Fun to use | yes | subjective, but for me yes | yes! | no |
| Ease of creating a mockup of tree navigation | no built-in tree | easier than flash because of built-in tree, but still not automatic | medium | no tree |
| Time to build mockup of tree navigation | gave up | 1 hr | 1 hr | 2 hr |
| Quirky? | not really | nope | nope | nope |
| Cost | $699 | $699 | ? | $299 |
| Axure | iRise Pro | Microsoft Expression Blend 2 | Microsoft Expression Design 2 | |
| One liner | Why? | Think process, large teams, … but why? | Microsoft’s Flash | Microsoft’s Fireworks |
| Ramp up time | very large | very large | very large | large |
| Other expertise required | none | none | a little more than Flash | a little more than Fireworks |
| Supports interactivity | I think | I think | yes | nope |
| Full lifecycle product (rough to spec) | yes | yes | yes | professional |
| Fun to use | no | no | no | no |
| Ease of creating a mockup of tree navigation | didn’t find tree immediately | didn’t find tree immediately | didn’t try – too tired to go on – opened the interface and started clicking around and just closed it | Stopped with Blend 2 – I hope the argument for these tools is not “MS Office integration |
| Time to build mockup of tree navigation | gave up | gave up | gave up | didn’t try |
| Quirky? | not really | not really | don’t know | don’t know |
| Cost | $589 | $6,995 | $499 | $699 (for Studio – couldn’t find individual) |
Thank you Russell! A very usefull post indeed – I’ll be directing interested parties to this page in future. (curious about Thermo)
Nice write up!
My picks are:
1) Low fidelity mockups for idea exploration and communication: paper, whiteboard
2) Interactive prototypes to test and communicate interactions: Axure, XHTML and Javascript
3) High fidelity drawing tool: Visio
Hello Russell,
There is an inexpensive tool called MockUp Screens. It costs $79 for a single copy and around $400 for a corporate license. It is quirky, and not interactive, but you can create wireframes easily and create HTML printouts of a sequence of screens. You might want to add it to your list.
http://www.mockupscreens.com/
Thanks,
Chauncey Wilson
Glaring omission! I forgot a row for “platform” (had intended to include it). Here is the data for platform for each:
Balsamiq (cross platform – Adobe AIR)
Pencil (cross platform – Firefox Addon)
OmniGraffle Pro (Mac)
Visio Pro (Win)
Photoshop CS4 (Mac, Win)
Illustrator CS4 (Mac, Win)
Fireworks CS4 (Mac, Win)
Dreamweaver CS4 (Mac, Win)
Flash CS4 (Mac, Win)
Flex 3 Pro (Mac, Win)
Thermo (Mac, Win)
Powerpoint 2007 (Mac, Win)
Axure (Win)
iRise Pro (Win)
Microsoft Expression Blend 2 (Win)
Microsoft Expression Design 2 (Win)
MockUp Screens (Win)
Russell, I think you need to stick w/ Fireworks longer.
1) it DOES do interactivity. it has state management and can export to HTML or SWF.
2) Its unparalleled multi-levelled layering is an amazing design process tool.
There is a reason why Adobe couldn’t “kill” fireworks. its very loyal users have fought hard because it is truly the only UI High fidelity graphics tool out there. Everything else is just pretending.
on Blend, I think the real reason to use Blend is b/c your development environment is .NET3 based. otherwise, there is no reason to ever go there.
The one tool you are missing is Denim in the digital space, and then you have nothing in the analog space. Pencil/paper is till the best low-fi tool ever!
– dave
My picks:
1) Lo-Fi: Paper, Balsamiq
2) Interactivity & demonstrations: Axure
3) Hi-fi drawing: OmniGraffle Pro
Ramp up time on Axure isn’t “very large.” If you want to do really fancy RIA stuff, yeah, that takes a bit of learning. But doing simple HTML prototypes is pretty easy to figure out.
just some other options:
- raw HTML, supported by libs such as YAML and YUI (see b&a article http://boxesandarrows.com/view/prototyping-with
- I like to use htmlb, but requires a sap netweaver platform … (: indeed all these platforms are good for prototyping if that is also the target platform (websphere, netweaver, .net/moss …)
- for detailed design, I am one of those who like a REAL control on the visuals, so Illustrator&Fireworks are fine, but then I have to promote Inkscape: http://www.inkscape.org
it produces fine svg files which can be linked together to form a prototype using the <a xlink:href=… tag in svg
Nice article. I agree though with Fred that Axure ramp-up is not large. I found it pretty quick to learn (see here for links to tutorials: http://evolvingworker.com/2008/9/19/graphic-user-interface-design-with-axure)
Yay!
Another great ap from Adobe I just love giving those guys all my money to let me use buggy software all day long I hope they leave lots of bugs in Thermo it wouldn’t feel like an Adobe product if it just worked…
I have found that InDesign has worked well for high-fidelity mock-ups as well. It has most of the vector tools I would want from Illustrator, and for creating multi-page annotated mock-ups or wireframes.
It’s a “use what your comfortable with” thing. I imagine most interactive-based designers don’t usually get InDesign, instead getting the Web Suite (if they’re using Adobe apps). So probably not a standard option for $700 stand-alone. But if you happen to have InDesign and aren’t currently using it for mock-ups/prototypes, it’s worth giving it a spin.
Being able to set up re-usable character, paragraph and object styles makes things pretty convenient. And you can even have objects hyperlink to other pages, so you can make a ‘clickable’ prototype PDF.
Also, someone pointed me to ProtoShare. Have yet to use it, so I’m not recommending it. Curious if anyone has given it a try? It’s a hosted web prototyping tool.
http://www.protoshare.com/
- Chris
What about Visual Studio. The express version is free, all the control’s you need (for windows apps)
If you want interaction, VB is easish to learn.
matching your other tasks – tree in seconds.
for just the windows without interaction the ramp up is easy. If you don’t want to spend the time learning basic coding, use images within a powerpoint
Just wanted to show a bit of support for Axure. It’s a great way to quickly put together an interactive mock which you can share with others.
I think it would be helpful to note your experience as that will dramatically color your evaluations, as it clearly did. Based on your reviews, I can pretty much guess you love Adobe products and have used them for years.
Other folks who are maybe less of an Adobe fan or have used, say, Microsoft products more might find them more productive and would at least give them fair play in a review and not just open, click around, and close.
Anyways, I agree Blend is difficult but doubtless it is better for a UI designer than Flex and certainly more productive than Flash for those not already steeped in the Adobe world.
But there is definitely room for improvement across the board, IMO.
Ditto what David Malouf said about Fireworks. It supports interactivity probably better than most applications. The pages and layers are both very helpful, which puts it above Illustrator or InDesign for UI design of a multi-page flow or site.
And you have complete control over look and feel of components, which for a design agency is pretty important (maybe not so much for company doing internal mockups).
1) Lo-Fi: Paper, Axure
2) Interactivity & prototyping: Fireworks (simple interactivity, exports to PDF + HTML), Axure (complex interactivity, HTML protos)
3) Hi-fi drawing: Fireworks, Illustrator
4) Site maps & flowcharts : Axure, MindManager
Like David Malouf said, you need to spend more time with Fireworks as you got pretty much about it wrong. It does support interactivity and its rendering is purposefully set to 72ppi onscreen as its output is the Web and nothing else. It also has a full library of OS and browser widgets that make rapid prototyping a lot easier than with apps like Illustrator or Photoshop. And with version CS4, depending on how you build your file, its exported code is rather decent and not throwaway as it used to me (at least for me).
Can anyone recommend a good tutorial/book/website for Fireworks? (and please don’t send a link to Adobe docs) — I *want* Fireworks to be a great tool — I would be one of its greatest proponents… *IF* I could figure out the magic that everyone else seems to have discovered. When I play around with it my mockups look pixelated (not smooth) and I can’t seem to get any extra value out of it… admittedly I haven’t gone through a class or worked through serious examples/tutorials yet. But I haven’t done that for the other products I use either…
And to the point J. Ambrose made — I have become very Adobe-centric, and that’s where a majority of my experience is right now. In the past I have used .NET to develop Windows based apps, but not really in a UI design role. I’m sure Blend/Expression is a nice suite of tools, but I can’t help but wonder “why do we need it?” At best it’s playing catch up to Adobe’s suite right?
I think Fireworks has some use as far as importing items directly into Flash (I haven’t actually exported to HTML)… but just because it can do it, doesn’t mean it’s the best way to get the job done. To me, Fireworks does a subset of what Flash can, but why not just do it in Flash anyway. For example, you can take an item, convert it to a symbol, and give it some states, but it’s a little different than Flash, kind of quirky, and not very intuitive. So why wouldn’t you just import the item into Flash and convert to a symbol and edit it there?
Also, I personally like Fireworks a little better than Photoshop… the reason being that I’m usually taking a mockup, pulling individual UI pieces and making them functional. To me, Fireworks is great in that respect, but I just don’t use the more advanced functionality.
@Russell,
In the case of Blend, I would suggest it is actually Microsoft leading the way. Thermo is like Adobe’s Blend in terms of purpose at least (and also in some of the interactions from what I’ve seen).
In any case, to answer the question (of “why?”), both platform vendors need to have effective tools for their platforms. Expression and Visual Studio for Microsoft; Flash, Flex Builder, now/soon Thermo, and others for Adobe.
No need to get partisan. I think a better approach is to pick the right tool for the job and also to help your tool vendors improve where you think they should.
I must admit, I do enjoy fireworks…
Especially the kind you can aim at your friends, blow stuff up, or I guess possibly shoot in the sky exploding into a million beautiful colors (if you are into that sorta thing). As a kid I remember really looking forward to the 4th of July because I would save up all my money for the entire year and buy the craziest damn assortment of gun powder you could legally purchase as a 10 year old and then sitting mindlessly for hours lighting things that would most definitely leave black scorch marks on my parent’s driveway (which was a big no-no at our house), make giant holes in the front yard, or blow off my hand,. And of course, as a kid, there was always talk of that one mythical firework stand a little further than what you could ride your bike to that had one of those insane "12 for 1" fireworks deals. You know the one, you went to the stand and actually paid for thirteen, but for some reason it felt really good to buy one and get twelve free.
I don’t really know what it is, but fireworks are mindless, probably a waste of money, completely dangerous, while ironically being totally patriotic. USA #1!!! Now that I’ve grown up (this might be an arguable point to some) I get what fireworks are about. but with Adobe Fireworks, <a href="http://www.youtube.com/watch?v=msq8_npdkkg&feature=related" rel="nofollow">I just don’t get it</a>. I really want to like this product and Adobe wants me to like this product (they make Fireworks the default program to open images). Now I’m not a smart man, I will readily admit this, but to me, Fireworks is like the designer version of the "12 for 1" stand. I save my money all year long to buy the latest Adobe products and I get this wacky Fireworks program for "free" which I should be excited about, even though in reality I really paid for it.
I’m already familiar with Flash, Photoshop, and Dreamweaver and I can "blow stuff up" with them pretty easily, but all I hear is people talking about how awesome Fireworks is and I feel like I’m definitely missing something. You know it kind of feels like I’m stuck with some <a href="http://www.davesfireworks.com/brev_files/blackcats.jpg" rel="nofollow">Black Cats</a> and everyone else is playing with <a href="http://www.cpsc.gov/cpscpub/prerel/prhtml98/98149b.jpg" rel="nofollow">M-80s</a>.
Can someone please explain to me why Fireworks is so awesome? I would be really excited to rapidly blow prototypes up with it or even light my own wonderful face on fire as some kind of exported image/interactive presentation, but until then I’m going to be shooting bottlerockets at the Wilson house. Wait, he doesn’t get it either, but it will still be fun!
Poor Adobe Director, a language (Lingo) much easier than Actionscript, Flex MXML, Silverlight, etc.. yet equally as powerful for high fidelity prototyping.
http://www.adobe.com/products/director/
Layer Magazine web site has great list of Fireworks tutorials.
http://www.layersmagazine.com/category/tutorials/fireworks
@Russell
Check out AdobeTV under the Fireworks category. That is a great place to start. You’ll see me announce the Fw beta which is way old, but check some of these vids out:
Adobe Fireworks Home on Adobe TV:
http://tv.adobe.com/#pd+Fireworks
These are videos produced by Fireworks users that are passionate about the product.
Here’s a few vids I would recommend in terms of prototyping:
Rapid Prototyping:
http://tv.adobe.com/#vi+f1498v1659
Creating Interactive Prototypes:
http://tv.adobe.com/#vi+f1498v1660
The complete design process:
http://tv.adobe.com/#vi+f1498v1658
Information and Interaction Design:
http://tv.adobe.com/#vi+f1498v1661
Why cooper uses Fireworks:
http://tv.adobe.com/#vi+f1498v1638
Hope that gets you started. If you want more you can explore the videos on Layers magazine:
Layers Magazine – Fireworks:
http://www.layersmagazine.com/category/tutorials/fireworks
Hope this helps ya for now Russell!
@ Ron Norman
I use Fireworks to create prototypes surprisingly enough for prototyping new features in Fireworks.
A useful integration tip is copying objects from Fireworks into Flash is super easy. If you used Pages to create a click-thru mockup that exports to HTML, then you have the option to Open the PNG in Flash and decide which pages get imported, do Pages get converted to Frames or do you want them converted to Scenes in Flash? How bout to Layers? The choice is yours. The PNG importer has a lot of robust features for taking your prototypes to the next level of IA in Flash.
99% of the time I can simulate everything with Fireworks, but there are times when Flash can perform advanced Interactions that are better suited to be created in Flash and not in Fireworks. A timesaver for me is the ability to create and use a button symbol in Fireworks, but when you need to do more advanced interactions say in Flash, copy the button in Fireworks and paste into Flash and the button symbol will retain all states even the hit state so you dont have to re-create it again!
Thanks for the handy breakdown.
I use Flash for sketching, lofi prototypes, hifi prototypes and interactive prototypes.
In my experience, it’s the ideal tool because it can do every type of prototype and you don’t need to know very much about Flash to use it very effectively.
I do workshops on rapid prototyping in Flash and here are my course notes that go into more details…
http://skyrize.com/2008/07/31/course-notes-from-the-rapid-prototyping-workshop/
[...] User Interface Prototyping Tools Russel Wilson of Dexo Design has done an excellent review of available UI Prototyping tools and provided tables comparing attributes including how fun they are to use, time to ramp up, and [...]
Thanks. Interesting. I wouldn’t say Axure is that bad as you have implied (One liner: “Why?”). We have created some rich, interactive, mockups using it. I admit doing a tree is a pain, though! Its certainly not for high quality prototypes, and that is fine for us…
Definitely think you gave Fireworks short shrift. Although I am admittedly biased as a long time user, it seems to me like “I don’t get it” sort of disqualifies you from reviewing it. There is indeed a difference in working in FW vs other tools if you are used to them, but spending the time to sit through a lynda.com tutorial should clarify how things work.
Also I didn’t understand the “rendering is poor” comment. That seems out of date to me – I wonder if your review is based on an earlier version…
[...] Review: 16 User Interface Prototyping Tools | Dexo Design: Design for Web Sites and Applications (tags: prototyping) [...]
In my nearly 14 years as a professional designer I’ve used Dreamweaver, Fireworks, Flash, Director, iRise, Visio, Photoshop, Illustrator, and of course Powerpoint.
Recently, my team took a fresh look at what was available. Here are some of the dimensions that were important to us:
1. It provides wireframing, IA and prototyping capabilities.
2. All stakeholders can use it. For me, that means my human factors engineers, interaction designers, product managers and developers. To succeed, it needs to be considered "better than powerpoint" in ease of use, speed and portability.
3. It forces low-fidelity, promoting rapid iterations and disposability. Key, because what we really want is paper-prototyping, with the efficiencies of digital workflow.
4. It’s low enough cost that all stakeholders can justify owning a copy. (That’s dozens of people.) Remember, paper is our competition!
5. It can be used for any UI platform–not just web/HTML, but embedded/handheld products too.
In the end, we chose Axure, and we’re quite happy with it. It has proven to be an excellent competitor to Paper, Visio and Powerpoint.
My dream tool would be one that integrates a Style Guide tool as the UI control library. The default style-guide would be all of the standard UI controls in low-fi, wireframe format. Then you could drop in your skin/customized controls and with the flick of a switch, flip between low and hi-fi versions of your spec.
Hi,
very nice article, I love the one-liners.
BTW I have just started an petition to Omni to get them considering (at least) if it would be possible for them to develop an app for interactive prototyping.
Maybe it helps, if other people sign it.
http://forums.omnigroup.com/showthread.php?p=51014#post51014
@Chris Gielow
Your Style Guide idea for Axure is fantastic. Did you pass it on to the Axure people? If you post in their forum, Victor will certainly respond and take the idea into account for a future version.
I use Axure myself, after using Visio and Powerpoint for a while.
Also @Chris Gielow and @Stéphane Bergeron, if I’m understanding you right their already is that feature. It’s called the Style Editor and appears on the far left side of the text formatting toolbar (with Axure RP 4.6 that is)
[...] Wilson of Dexo Design has done an excellent review of available UI Prototyping tools and provided tables comparing attributes including how fun they are to use, time to ramp up, and [...]
[...] Russell Wilson of Dexo Design put together a handy review of 16 prototyping tools. [...]
Wotcha
Nice post, thanks, but you forgot two great freebies that are well worth a look. The first is Denim (http://dub.washington.edu:2007/denim/) which is a sketching tool, works great if use a pen/tablet has interactivity and exports a rough HTML version of your prototype.
The other is the fantastic Serena Prototype Composer which used to cost big bucks buit is now free at http://www.serena.com/products/prototype-composer/home.html
It does great prototyping, interactivity, sitemapping, is network collobarative and generates documentation as well. I’ve used it successfully on sevral big projects and left behind me a legacy of client-converts.
Cheers!
Rob
I find visio tool a lot of wasted potential. Compared to this i find PPT much quicker if you are a little organized and know some tricks of grouping, cutting, pasting
My choices:
Low fidelity/Wireframes: Indesign
Interactive prototypes: Indesign (interactive pdf)
High fidelity: Fireworks
[...] Wilson from Dexo Design recently did a quick comparission between 16 different mockup/prototyping software which included Pencil, Omnigraffle Pro, Visio Pro, Photoshop, Illustrator, Fireworks, Dreamweaver, [...]
OmniGraffle does produce interactive prototypes, with image maps and hyperlinks. It’s pretty cool for that. I like it for low fi prototypes then export them as PNG’s so i can give the high fidelity finishing in Fireworks, and i can even export the high fidelity version over the pngs to get the prototype with high fidelity look : )
[...] Review: 16 User Interface Prototyping Tools [...]
Nice article, thanks.
I’ve often used powerpoint (now use OOo Impress in the same situations) but don’t usually bother sorting out the interaction there. Instead, I print to PDF and use acrobat to add links and annotations.
I usually work in lo-fi black-and white as I find the nicer the graphics, the more that decision makers will worry about colour and aliasing and the like instead of focussing on navigation and usability- I mean, we are talking wireframes, right?
Since moving to a Mac, I tend to use OmniGraffle (I <3 OG and http://graffletopia.com/) for both lo and hi-fi mockups and leave the final design to the designers
I used to <3 Visio, when it was still owned by Shapeware and was capable of interacting with your networks. I was halfway through constructing a database-backed system monitoring tool (which was quite awesome in beta) in Visio that would monitor all the PCs and printers on my network (50-70) for faults in real-time when Microsoft bought it and the next version didn’t connect in __quite__ the same way, buggrit! Now, I find Visio insanely complex and over-engineered and doesn’t do half as much.
Tried Axure, didn’t light my fire either. Keep hearing about Pencil but I don’t think I’ve used it yet.
Thanks for the list!
Very interesting to read your comments.
I always thought Axure is great to use, but then ive never used it for a navigational tree.
I prefer MindJet MindManagaer Pro 7
cheers
I’d like to add my voice to the folks above recommending Indesign for wireframes, mockups and basic interactive mockups. I’ve found that I can do these tasks much faster in Indesign than other tools, but you need to make sure you don’t start veering into visual design if you’re doing wireframes.
Illustrator and Photoshop are great tools for intense detail implementation phase, but very slow for early phase design tasks. You can get really bogged down in technical details quite quickly using these applications.
I use Visio for sitemaps, user task flows, that kind of thing. Anything with boxes and arrows is the Visio sweet spot.
Of course, the problem comes when you need several people to work on the same set of documents. Indesign access and skills seems to be a little uncommon, so that can set up some barriers.
Hi, I’ve been looking for some articles about Hifi-Test. I can see that you too have the same interests. Your post on “16 User Interface Prototyping Tools | Dexo Design: Design for Web Sites and Applications” is a good example so I hope that you can keep providing information. I wish you every success.
[...] a comment » This posting gives a quick overview of the top-playing tools available to User Experience [...]
Perhaps you would also be interested in the tool I have developed:
http://wireframesketcher.com
It’s an Eclipse plugin for creating wireframes, screen mockups and UI prototypes. It’s still in its early stages but it should stack up pretty well against some of the tools listed here.
Anyone know of a more lightweight option to Fireworks/Photoshop that can support layers?
I have used Viso a lot for sitemaps, so it will do in a pinch for a wireframe…but there are easier and better tools for that..even powerpoint if you need to share with lots of people, or balsamiq, because it is fun to use.
But I also like to annotate using a different tool – Snagit’s editor is a really nice and simple way to add callouts,etc onto an image. But I wish I could store those callouts on a layer, so I can put them on top of a new image as part of the iterative dev process.
Great review, I enjoyed reading it and even found some new tools to try!
Important thing I miss though is whether the tool is usable by non-techie people. In our company we have several system analysts doing such prototypes and most of them simply can’t use half of the mentioned tools.
Btw I mostly stick to MockupScreens, and new release seems even more promissing:
http://mockupscreens.com/index.php?page=What_s_New
Cheers,
Mario
Thermo is now named Flash Catalyst — find it in http://labs.adobe.com/technologies/flashcatalyst/
[...] further fuel the discussion, I want to refer to Russell Wilson’s review of 16 user interface prototyping tools. I like how he categorises his “picks” into “Low fidelity mockups for idea [...]
First of all, this is a review of general UI tools and not prototyping tools. Claiming this as a review of “Prototyping Tools” in your title is misleading.
I’m pretty shocked with your take on Axure and iRise. It’s almost like you didn’t even try them out. You “think” they support interactivity? You could’ve probably found that out by just reading some articles online.
Fireworks doesn’t offer interactivity? You should definitely check again.
I’m also disappointed in this review by the fact that you gave up on the “tree navigation” portion for so many products. If we’re talking about just drawing up a mockup, what’s the big deal? Exactly what did you create using Balsamiq Mockups (which I absolutely love) could you not recreate for the others?
Lastly, just looking at your tags makes me wonder… You’ve used “adobe, balsamiq, catalyst, mockup, prototype, thermo, tools” to describe this article. It probably would’ve been better to either include all product names or leave them all out.
Well, I don’t mean to come across so negative, but this is a half-baked, biased review. It’s fine as a personal blog post, but I think the attention it’s garnered really does a disservice to the UX community, especially if you’re trying to pass this off as an expert or even knowledgeable review. I’d give this 2 out of 5 stars.
[...] – Dexo: Design for Web Sites and Applications (tags: wireframe prototyping [...]
EEK’s makes some valid points. Let me address each:
[EEK] Review of general UI tools and not prototyping tools
[Russ] What is a “general” UI tool? All of these tools (and some that I did not include) are used to create UI prototypes
[EEK] shocked with take on Axure and iRise
[Russ] I’ve already admitted to being a little harsh on them. I don’t have a lot of experience with them. I downloaded trial versions and experimented with them. My gut reaction was “why?” Why take the time to learn these tools when I can accomplish the same with many of the others? What do these tools give me that I can’t get elsewhere? I’m asking… someone help me understand.
[EEK] Fireworks doesn’t offer interactivity
[Russ] I know people who LOVE Fireworks. I have to admit that I WANT to love it, but can’t seem to figure it out. I love the fact that it is a bitmap and vector tool all in one, and that they seem to be positioning it as mockup tool with the screen widgets that come with it and the integration. But the onscreen rendering is poor, it crashes on my Macbook Pro regularly (and I don’t use it that often), and once again, why is it any better than PS/Illustrator? Help me out here… I always ask the big proponents this question and never get solid examples. I will say that I’m signed up for workshop using Fireworks at an upcoming conference…
[EEK] gave up on tree navigation
[Russ] it was MUCH more difficult to create a simple tree in the other products than Balsimiq. Try it.
[EEK] bad tags
[Russ] You’re right. I typed them in quickly and they aren’t ideal. I will change them
[EEK] half-baked biased review
[Russ] half-baked – maybe… biased, not really. Biased based on my experience – maybe. Biased because I favor a particular product/company, no. I simply want to use the best tools possible and I’m even willing to learn new tools to improve. But I haven’t found anything in the other tools that would make me want to change. Like I said in the opening – the best tool is the tool that you are most comfortable with. I don’t feel that this review does a disservice to the UX community – they are all very intelligent people that can draw their own conclusions. At the least this will hopefully provide a base list for people to investigate on their own (which I highly recommend). And if anyone has any insightful feedback on these tools or others, I would really appreciate a comment for the benefit of all who have read this.
Hi,
1) Products like Balsamiq, Pencil, Photoshop, Illustrator, or Omnigraffe are used to create assets you might use to import into prototyping apps or to print out for paper prototypes. In my experience, they aren’t used for the actual prototyping (although I’ve read about workarounds and certain plugins you can use).
2) Here’s why… With Axure, you have the ability to generate high interactivity (think HTML or AJAX-esque) with fairly easy-to-use tools (think Visio drag-n-drop and being able to define those objects). You’ll definitely want to run the Axure demo again and follow along with their online demos. For example, being able to pass data variables is a big plus.
3) Just wanted to point out that Fireworks does allow some interactivity (You wrote “[EEK] Fireworks doesn’t offer interactivity”). I’m not gonna argue the value of Fireworks vs. Photoshop or Illustrator or that it’s got poor rendering–that’s not really the issue here. It’s the fact that you listed Fireworks as having no interactivity when in fact it does.
4) Would you provide an example of what you did in, say, Balsamiq? I’m just trying to understand what exactly was meant by “tree navigation” and what type of interactivity was being created. I can definitely go back and try it myself once I get a better understanding.
5) Yeah, I think the select tags lends to the bias (or supposed bias).
6) What I’m trying to say is that I feel some UX folks may not have the time or the access to some of the tools available and they may take this as a definitive review. It doesn’t have to do with intelligence–I believe UX professionals are some of the brightest minds out there.
Just so you know, I didn’t read through all the comments so I didn’t realize others were mentioning the same things about Axure, iRise, and Fireworks. Maybe it’d help to add some notes around these specific issues in the review summary.
Thanks, it’d be good to see you give this review another shot (and possibly expand it to include other products such as InDesign or Serena). Maybe an update in 6 months or something.
@EEK — great suggestion (follow up post) – I’ll take you up on that. And I appreciate your comments. I’ll also comment in more detail regarding the “tree navigation”, but have a current deadline pulling me away…
this is an excellent reference tool. I’ll be sure to send to my folks at xgineer
Russell,
Great article. I like Balsamiq myself.
This data might be easier to consume and digest as a blist widget. President Obama’s team used one to keep a web list of donors. You could do the same – run the features down column one and each product horizontally as columns. Here’s an example and some more info:
http://www.blist.com/what-is-blist/blist-widgets
Let me know if you need some help.
For what it’s worth, every screen in LiquidPlanner was designed with PowerPoint plus SnagIt for images. That pair of tools is so fricken fast and easy it’s not funny; plus anyone you work with can take a copy of the PPT and review/edit it (no real skill required).
All the screenshots in this post are PowerPoint believe it or not:
http://www.liquidplanner.com/blog/2008/12/15/sneak-peak-professional-timesheets-for-liquidplanner
Of course if you want interactive prototypes that’s a different beast.
[...] using Fireworks as a user interface prototyping tool. The thread includes a link to an article, Review: 16 User Interface Prototyping Tools, as well as a Meetup notice for Tuesday, February 17, 2009 at 6:45 p.m. in San Francisco where the [...]
[...] Russell Wilson at Dexo Design. This is a very thorough matrix that describes many different tools based on task as [...]
[...] um 12:00 · Gespeichert unter 1 Auf der Website von Dexo Design findet sich eine Übersicht, in der die Funktionalität von 16 Softwareprodukten für User [...]
[...] Analizando 16 herramientas para crear propotipos de interfaces de usuario (en inglés). vía: DexoDesign [...]
[...] 5 links on Delicious. (Show Details)Dexo: Design for Web Sites and ApplicationsAdobe – Developer Center : Industry trends in prototypingblist | share your weblists > [...]
Really helpful… Thank you, I usually work with Pencil/Balsamiq
Hi everybody,
very interesting comments about prototyping I have to say.
We have been developing Hot Gloo over the last half a year and are currently in alpha phase. There is no public beta out yet, but we welcome you to visit our blog or follow us on twitter, where we will keep yu updated about the status of Hot Gloo.
http://blog.hot-gloo.com/
http://twitter.com/HotGloo
I'm done with Fireworks CS4. Buggy, alpha crap. Want to know how they can improve it exponentially? Fix this ONE bug.
I wondered if any of you have tried our prototyping tool screenarchitect http://www.screenarchitect.com we recently won a Jolt Productivity awary with it. The major advantage of Screen Architect is that it is simple to use, use can create interaction is you want but under the covers the design elements created are being stored in Enterprise Architect (UML Case tool) so that they can then be referenced and used in the underlying analysis model. This allows traceability to occur between the UI design and the requirements and even the data model so you remove the age old issue of not being able to trace impacts from changes in the UI to the datamodel or requirements or vice versa.
Look forward to your comments on it.
We have ForeUI (http://www.foreui.com), an easy to use screen mockup tool. It provides wire frame, Windows XP and Mac OS X styles for mockups.
[...] Review: 16 User Interface Prototyping Tools – Dexo Design – [...]
[...] Evaluación de 16 herramientas de prototipado [...]
@livebysatellite – ProtoShare is a web-based prototyping and wireframing tool that encourages collaboration among team members and other stakeholders. Feel free (or anyone else interested) to sign up for a free 30-day trial. We are actively evolving the product, so I would be interested in gaining users' insights on their experience.
Feel free to contact me if you do have feedback.
Russell, thank you for your review on all the different tools. With so many tools out there, finding the right one to fit one's needs can be difficult.
Thanks,
Andrea
andrea [at] protoshare [dot] come
Yes – have to agree….ramp up time on Axure is minimal – I had an off-shore contractor running it no-problem within a day. Having used Balsamiq, iRise, Axure, Stencil, Flash Catalyst (beta), and Visio to do sketches & wireframes to rough-to-medium fidelity prototypes, I appreciate someone doing this review but felt like maybe he just ran out of steam on the last batch? Also version numbers would be nice (e.g. Axure 4.5 or 5.0?)
Protoshare, notablapp etc are nice but too complex and very expensive, especially for a freelancer like me.
A really cool tool to share content smoothly with your clients would be
Uhuroo it is simple and easy to use.
Being a freelance designer I use it all the time..I make my wirframes on CS3 or Axure and share it with my clients easily. It has
1) Plugins,
2) Search with documents,
3) Privacy Settings etc.
Best part for me was unlike the others its FREE!
You missed one of the best – FlairBuilder $99, lo-fi as as easy to use as Balsamiq, but also can go further and create clickable prototypes. Also a one man effort, impressive!
I found your blog on google and read a few of your other posts. I just added you to my Google News Reader. Keep up the good work. Look forward to reading more from you in the future.
i love this! thx for the extra ordinary reviews. I use Omni on mac – but if i need a fast mockup I will go for Balsamiq.
I've created some Powerpoint Wireframe Stencils and posted them as a free download onto my blog. Feel free to use them & enhance them …. and leave a comment if you like them
http://www.mgitsolutions.com/blog/2009/01/powerpo...
Cool list. You have forgotten Flair Builder and Open Office Draw, both of which are interesting.
This is a really nice resource, but I would encourage you to add a few criteria to your table.
- Platform?
- For Designing Web Apps? (like Axure, iRise)
- For Designing PC Apps?
- For Designing Handheld/Mobile Apps?
- For Designing Embedded Apps? (like Rapid)
- For Designing Business Processes/Work Models?
- Wireframing?
- Drawing/Illustrating?
- IA diagramming? Link IA to Wireframes?
- Symbol library with updatable instances?
- Hi-Fidelity Prototyping (back end database connectivity etc.)?
- Easily Shared Prototype (does it generate HTML, or do you need a special runtime?)
- Auto-Generated Specification document?
- Collaboration tools, version tracking?
Also, as a user of many of these tools, I think your Axure one-liner should be "a better alternative to Visio or Powerpoint for lo-fi wireframing and prototyping." It's ramp up time is negligible. Both Axure and iRise support Interactivity. The iRise one-liner is "designed to allow business-analysts to create hi-fi prototypes and specifications."
[...] – Review: 16 User Interface Prototyping Tools saved by vandy4342009-07-24 – Large real estate companies report losses. saved by jstampf2009-07-07 [...]
[...] See the original post: Review: 16 User Interface Prototyping Tools – Dexo Design – Russell Wilson’s Blog on UI Desi… [...]
hello
im new on this forum….
[...] Review: 16 User Interface Prototyping Tools [...]
[...] Shared Review: 16 User Interface Prototyping Tools – Dexo Design [...]
[...] http://www.dexodesign.com/2008/11/07/review-16-user-interface-prototyping-tools/ http://articles.sitepoint.com/article/tools-prototyping-wireframing [...]
Fantastic Post! Thanks for sharing. In the end I decided to go with Balsamiq – very quick and cheap. Though Blend + Sketchflow has peaked my interested since I develop with .net and Silverlight
I think this evaluation is pretty focused on a tree diag. It may not be the best evaluation of the tool as such – because the focus of each of these tools are different and may not overlap with each other.
I third the recommendation for Flairbuilder. Extremely friendly to use.
Another very good free tool. Give a try.
http://gomockingbird.com/
It uses http://www.cappucino.org/
Have you guys tried infopath for prototyping?
Compare & contrast for key measures, tabulated presentation. Nice. Best review.
We are very a distributed team & interactivity is a necessity. Most lo-fi tools were not suitable for us.. in that.. it was best for brainstorming & getting launched. We wanted something that could translate the wireframes to working prototypes, generate requirements & gives the ability to associate workflows.
Pricing was critical. Products like Mockflow can lock you into signing up for a year although they state the price for a monthly rates. Pay attention to the fine print. & then there were the super expensive, elaborate ones…
Axure was `just right for us. Very frustrated with its inability to allow for real time, online collaboration. It allows for interactivity in that you can create html versions & email to the teams… for feedback. If something better comes along that also facilitates instant collaboration, we will jump board..
I would like to add on the post by adding that web standard are greatly important. For example what is now happening between HTML5 vs. Flash.
The best price/features prototyping tool IMHO is http://www.justinmind.com. Those guys are evolving their app so fast!
[...] verktyg för användarcentrerad design såsom prototyping (här finns exempel på några verktyg: http://www.dexodesign.com/2008/11/07/review-16-user-interface-prototyping-tools/, [...]
Hello,
Great article, very detailed review. I’m writting to let you know about anothe prototyping tool you might like. Justinmind Prototyper brings some powerful features that make really easy to create complex prototypes. We focus on high-fidelity, both in the visual and interaction sides, so you end having a prototype that can be barely differenced from a real application. It’s great to transmit your ideas to your clients and get their feedback.
Check thsi video for a fast idea: http://bit.ly/cw6bzj
Cheers,
Dan
@Justinmind