Review: 16 User Interface Prototyping Tools

Russell Wilson — Sat, 08 Nov 2008 01:49:46 +0000

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)

Design Tools

Russell Wilson — Thu, 02 Aug 2007 18:14:00 +0000

I am often asked what tools I prefer to use in designing user interfaces. I do believe that there isn’t a “best” tool. True, some tools are better at some tasks than others, but it really comes down to what tool works best for you. I’ve seen designers produce excellent interaction designs with Microsoft Powerpoint. If you are fast and comfortable with a tool, use it. And if you want a better tool, you have to weigh the cost of learning something new against the benefits. Personally, I’m an early-adopter, gadget-freak, bleeding-edge, over-70-feeds in my news reader type, so I love to experiment with new tools to study their interaction patterns as well as discover what new capabilities I might pick up.

My current list of design tools:

Concept exploration: CmapTools, MindManager, Pen & Paper

Interaction design: Pen & Paper, Microsoft Visio, Adobe Dreamweaver, Adobe Flex/AIR

Prototyping: Adobe Flex/AIR, Adobe Flash, Adobe Dreamweaver

Visual design: Adobe Illustrator, Adobe InDesign, Color Schemer

Dexo Design » adobe

Review: 16 User Interface Prototyping Tools

Design Tools

My current list of design tools: