Rapid Prototyping Tools
by Dan HarrelsonNewsletter readers: jump straight down to the list of tools.
Prototypes as a design deliverable are on the rise, and for good reason. I am strong believer that prototyping helps us to design better experiences. We are working in a world of rich, dynamic interfaces, both on the web and on our devices. The experiences we design are interactive, responsive, and have emotion. Prototypes allow us to articulate the feeling and function of a design in a way that a wireframe does not. But how do you select the best prototyping tool for the job?
Making Effective Prototypes
In order to evaluate a prototyping tool or technique, we first need to define what makes an effective prototype. The best prototypes are ones that slipstream right into our design process. We want the ability to quickly take sketches from a whiteboard to something interactive.
Effective prototypes are fast. We want to use techniques that allow for rapid iteration. A prototype should not just be bolted onto the end of a design process. Incorporating the creation of a prototype into your daily design work allows new ideas to emerge and validates concepts quickly.
Effective prototypes are disposable. Just like with any design deliverable, we are creating an artifact intended to express an idea to someone else (stakeholder, developer, user, etc). Once that design idea has been communicated, the prototype deliverable can be discarded. We don’t have to feel the burden of creating a masterpiece that will live on, and we certainly don’t have to work in production-level code.
Effective prototypes are focused. We want to select the interactions of our design that really need to be prototyped. Look for the parts of your design that have of complexity. Look for interaction patterns repeated throughout the user’s experience. Look for the interactions that bring revenue to your product. A prototype that demonstrates these interactions will be the best use of your time and energy. At our upcoming workshop, Good Design Faster we are teaching techniques to evaluate sketched concepts for the inclusion in a digital prototype. Use the promo code NEWS for 10% off.
Selecting the Tool
With the baseline set that a prototyping tool must enable us to create effective prototypes (above), we look at our particular organization to see what will fit.
First, let’s take a look at or team make up. Does someone on staff have the ability code? Is a Design Technologist a member of our UX group? Do we have a strong relationship with the engineering department that can help create prototypes? What about contract developers who can help out? Identifying our tech capabilities will point us towards coding a prototype by hand or using drawing-based prototyping software.
How large is our team? Are we a UX team of one, expected to research, sketch and prototype on our own? Are we members of a small, tight team that can nimbly iterate through a design prototype in less than one day? Are we part of a large organization that needs to navigate the murky waters of corporate politics and different perspectives with our prototype? Often, the larger the team, the more detail (read: spec) a prototype will require.
Where is the audience for our prototype located? Are they in the same office, glancing over our shoulders? Are they remote? Are they in a country who’s time zone is an entire day away? Answering this question will determine our ability to talk through a prototype versus having it be 100% self-explanatory.
Is our UX team in-house or are we members a consulting firm? If in-house, are we integrated deeply with the engineering team or are we a completely separate department? A UX group that’s “outside” often has to justify their design concepts a little more.
What is our budget for a prototyping tool? Like most software, the range of offerings covers the range from free to expensive. The best solutions tend to fall within the cheap to mid-priced range. The super-expensive solutions (both in time and money) are often just not worth it.
How flexible does our prototyping tool need to be? Are we targeting just one platform, such as the web? Are we designing for lots of platforms like mobile, kiosk, television, consumer electronics and the web? Many prototyping tools are created with a single output type (usually web) in mind, so we’ll either need to select one that we can tweak to our liking or opt for techniques of creating our own prototypes in code.
With the above criteria in mind, I started a list of prototyping tools. I encourage you to comment with your own suggested tools and techniques. My hope is that together we can generate a comprehensive selection criteria and menu of prototyping options. I will revise this list based on the feedback of this community.
Entries (RSS)
March 24th, 2009 at 2:18 pm
great list, some of the tools are new to me. I use JustProto http://www.justproto.com/en/.
March 24th, 2009 at 2:20 pm
[...] prototypes over wireframes. Over on the Adaptive Path blog I just wrote a post about it. I’m collecting a list of prototyping tools and could use your help to help make it event better. Leave a comment on the Adaptive Path blog [...]
March 24th, 2009 at 2:51 pm
We are moving towards more rapid prototyping but for wireframes we use ConceptDraw by CSOdessa primarily because Visio isn’t Mac friendly.
March 24th, 2009 at 3:01 pm
I’m a HUGE advocate of rapid prototyping using Flash.
In fact, I’m doing a session on exactly that topic at Web 2.0 Expo (http://is.gd/lvO6).
Plus, you can check out some notes on my process here http://skyrize.com/notes
March 24th, 2009 at 3:07 pm
Dan,
I love PowerPoint and have been using it for at least a decade to create screen mockups for Websites, Web-based applications, and other software applications. No special training is necessary to use it and most people already have the tool or a free-ware equivalent … which makes collaboration and editing easy. Plus, it prints well and can be used for paper prototypes for usability testing.
Just my two-cents worth!
Martha Roden
Technical Writer and Usability Specialist
March 24th, 2009 at 3:28 pm
A terrific list.
I created a Dreamweaver prototyping tool myself (HTML+css+snippets) and called it HolyGrail (“something that’s been sought for so long”).
http://www.amazedev.com/holygrail/
I also added a review of existing tools.
http://www.gui.ru/?p=488
Prototyping tools in Russia are subject to custom requirements
Many thanks for the article.
March 24th, 2009 at 3:41 pm
Adobe Director should be included in the list as well. Although I no longer use it at my current position, I spent almost 10 years using it as our main prototyping tools. FYI: A new version was just released.
March 24th, 2009 at 3:51 pm
I used Denim in the past, works great during meetings, now I’m trying to see if CogTool would help me analyse various interaction paths.
March 24th, 2009 at 4:24 pm
Hi Dan,
My friend put me onto your blog – very interesting, never thought about rapid prototyping for web design – as I am an industrial designer and thought this might be related to 3D rapid prototyping. Guess all design needs to have a workable mockup that can give a real-time assessment to flesh out concepts. You’re right – protos need to be PART of the design process, not the end result, as protos show you things you may miss – especially in product design where your design will be replicated hundreds and thousands of times over! My biggest fear is that some flaws appear that you didn’t see before, and rapid prototyping is definitely the way to test and iron them out!
I’m currently waiting for a prototype on a new shoe outsole I designed and have been documenting the steps on my blog too – http://michellechung.uwcblog.com/
As designers its definitely good to document your processes to share with all in the design community…
Great info and review there Dan!
March 24th, 2009 at 4:40 pm
Great list! To complete it, here are some UI Prototyping Tools I came across during my research, especially the Visual Prototyper seems to be promising.
Justinmind Visual Prototyper
GUI Design Studio
iPlotz
March 24th, 2009 at 5:24 pm
[...] Rapid Prototyping Tools [...]
March 24th, 2009 at 5:33 pm
Dan, thanks for the list, very useful. I’m part of the team that builds Backboard and we do a ton of interface prototyping, mostly using Photoshop and HTML/CSS mockups. We’ll try some of these other tools.
I think you left out an important aspect though – actually evaluating the prototype. Once we have something, most of our process revolves around the discussion and feedback on that mockup, to make sure we extract the best attributes of each design. This is what we built Backboard for – it’s a great way to collect feedback on any type of design or website.
I’d love to hear what other tools you use to effectively evaluate your prototypes.
March 24th, 2009 at 5:37 pm
Prototype evaluation/collaboration/testing… what a great idea for a future post!
March 24th, 2009 at 9:05 pm
On occasion, I’ve used Gliffy, an online diagram software. It’s very similar to Visio, but you can access it online. I think they’ve recently started charging if you have more than three “drawings.”
March 24th, 2009 at 10:23 pm
I’m currently testing out a tool called Blueprint Requirement Center. It does a lot more than just prototype the GUI. It starts by capture requirements for your app, then turns those into fully realized use cases. The use cases are then mapped to GUI screens, and once that’s complete it can generate QA test cases based on a simulation of the use cases through the GUI. The GUI builder is very similar to what you see with iRise, but a lot more structure built around it, which can be seen as either a positive or negative depending on your situation.
March 25th, 2009 at 12:17 am
Great list. From my point of view, some of these tools are not prototyping tools. Dreamweaver, Flash, Flex are more development tools since they generate something very close to the expected interface, but take more time to develop a prototype than Axure for instance.
See a complementary list of prototyping tools in French :
Prototyping Tools on Usaddict
JF Nogier – Usabilis
March 25th, 2009 at 12:17 am
I use Tinderbox for a lot of my rapid prototyping needs. I usually start by just taking some notes, and then I steadily add structure to the notes (attributes, links). Everything exports to HTML, so you can go directly from sketching out a site map or process flow to an HTML site you can click through.
March 25th, 2009 at 1:01 am
Great list, I prefer to dive quickly into html and so I found the jQuery Polypage plugin to be really impressive for the sake of showing interactive prototypes.
One can find more details in an article written by Clearleft’s Richart Rutter
March 25th, 2009 at 2:43 am
Hi Dan,
great list, might add a brick between powerpoint “near-life” wireframes and conceptional work in visio (we usually use BPMN for procedural proof of concept).
Today, we´re missing a (standard) methodology to deal with the granularity of “view”.
Complete “sites” in the past have been partly substituted by smaller areas within a site, to be modified runtime.
We try to represent this issue by “extended” BPMN diagrams, still missing the universal idea.
My concern is, that the majority of prototyping tools will still ease the way of coming up with complete “sites”, any “AJAX-behaviour” still to be simulated “frame-by-frame”.
Any experiences on that item out there?
thanks in advance!
Marcus
March 25th, 2009 at 4:47 am
Thanks for the interesting article. We are also often disucussing about make an wireframe/concept more tangible. We are using Visio for the wireframes and also to make clickable dummys in PDF-Format. With Acrobat Professional you can also use the form tools to enable checkboxes, radiobuttons, text fields and so on. So you have a “middle-complex” prototyp for rapid testing without high time efforts.
March 25th, 2009 at 5:01 am
We have just started using backboard – its really great for prototyping collaboration…
Also I’ve been exploring oversite – which looks pretty good too… well it looks pretty bad actually – but it works really well! Could do with a serious UX overhaul.
March 25th, 2009 at 8:25 am
See Review of 16 User Interface Prototyping Tools for a similar list.
March 25th, 2009 at 9:00 am
Great article and list! It will come in handy for the occasional classes I teach. You might want to add paper prototyping. Although it’s not a software tool like everything else on the list, paper prototyping deserves a seat at the “rapid prototyping tools” table. You’d be amazed what you can do with some sketches and no code at all.
March 25th, 2009 at 9:52 am
AFAIK, balsamic does not allow you to mock up a series of pages and link them together. For my needs, this rules it out instantly for prototyping. Also, for quite a few of these tools (visio, omnigraffle, fireworks, etc), when adding form controls to your wireframes, you only add a picture of the form control, rather than the actual interactive control. For me, this also limits their usefulness.
Details like this are important when trying to select a tool, but are hard to discover without trying each of the tools out yourself which is horribly time consuming. Maybe this is something we could all contribute to in a wiki or shared Google spreadsheet?
March 25th, 2009 at 10:24 am
Dan,
Great compilation of tools. Thanks for including ProtoShare in your post! One item that I feel needs a bit of clarification is that the yearly subscription provided includes 5 subscribers. For a single subscriber, our plan is $312 for the year.
We have also learned that encouraging interaction and feedback on prototypes in the early stages eliminates a ton of headaches for development teams. We’re excited to announce a new release of ProtoShare on 3/30 that includes more features and some RIA functionality.
Look forward to your next article!
thanks,
Andrea
March 25th, 2009 at 10:49 am
WireframeSketcher is another tool in this area. It’s an Eclipse plugin so you get nice features like cross-platform support and source control integration for a team work.
March 25th, 2009 at 12:05 pm
I’m partial to prototyping with Microsoft Excel, but then we just published a book on the subject, Effective Prototyping With Excel. You probably already have Excel, or another spreadsheet program, on your computer, so the cost is minimal, and it’s easy to share with others once you have the templates set up.
March 25th, 2009 at 4:33 pm
OpenOffice.org Draw/Impress, Both (and Linux
), Free, OpenOffice.org
March 26th, 2009 at 6:25 am
In response to Harry, Balsamiq is actively working on the linking feature. See Help me design the Linking Mockups feature.
March 26th, 2009 at 7:41 am
totally possible to prototype in Omnigraffle (especially with the readily available templates and stencils). Serena Prototyping Tool for PC which is now free seems to be quite a good business tool
March 26th, 2009 at 8:05 am
**ProtoShare Correction: Sorry for the typo, I meant the least expensive plan is the “Personal” plan; it includes two licensed users, at $156/user a year. Also, the plan you reference, the “Team” plan, is for five licensed users, and comes out to $165.60/yr. As it’s a web-based collaborative tool ALL packages have unlimited users as Reviewers.
Thanks.
March 26th, 2009 at 8:41 am
Dan, Thanks for the great blog!!
All these tools are awesome. I think the next logical step would be resources? Where do you get your rapid prototypes done? How long does it take to get them (how fast do you want them) vs the cost? (time is money)
Keep up the great work!!!
Thanks!!
Eric
March 26th, 2009 at 9:01 am
[...] adaptive path » blog » Dan Harrelson » Rapid Prototyping Tools (tags: wireframes usability tools design prototyping) [...]
March 26th, 2009 at 3:31 pm
BTW Fireworks can export real html controls all part of CS4 and their “Rich Symbols”. Cooper Design also uses Fireworks and I have been using it with a lot of success.
March 29th, 2009 at 5:23 am
[...] list of prototyping tools on Adaptive [...]
March 30th, 2009 at 6:48 am
MockupScreens is one tool you missed, with idea of creating very rapid black-and-white prototypes. New major release (coming next week) allows to switch between “Windows”, “Web” and “Black and White” look and feel.
And there are some more tools listed here:
http://c2.com/cgi/wiki?GuiPrototypingTools
Cheers,
Igor
March 30th, 2009 at 7:13 pm
Lately prototyping and sketching have really started some great conversations. I recently had a developer ask “what tools do you use to prototype” – I created this post in response:
http://www.jeremyjohnsononline.com/2009/02/24/so-you-want-to-prototype/
While there are a lot of really good tools out there, and they continue to get easier to use, there are other aspects – like fidelity of the prototype, to use “real” code or not, etc… In the end, I really think you can’t go wrong with prototyping – from pen and paper to a $50k tool – anything that quickly helps you get out the bad ideas, so you can start having the good ones
April 6th, 2009 at 2:04 pm
We wireframe in Adobe InDesign and have used that for low-fi prototypes. There are features within InDesign that make it easy to create links and buttons that will export out to PDF — much easier than creating them within Acrobat.
April 10th, 2009 at 1:58 am
[...] Design Tools for Prototyping and Wireframing (статья Гари Барбера) Rapid Prototyping Tools (статья Дэна [...]
April 10th, 2009 at 12:19 pm
[...] a Crackberry like me. One recent link I followed from there took me to a comparison of Rapid Prototyping Tools by Dan Harrelson. He includes cutting edge products such as Expressions Blend and Flex, too. [...]
April 10th, 2009 at 8:54 pm
Review: 16 User Interface Prototyping Tools / November 7th, 2008 by Russell Wilson
http://www.dexodesign.com/2008/11/07/review-16-user-interface-prototyping-tools/
April 22nd, 2009 at 8:29 pm
Hi there, we developed and use Screen Architect as our prototyping tool. Screen Architect (www.screenarchitect.com) allows rapid development of prototypes while also automatically generating UML elements within Sparx Systems, Enterprise Architect (UML Case Tool http://www.sparxsystems.com) the advantage of this is that the designer / prototyper can develop the prototype with the customer and add requirements elicited from the customer at the same time. These requirements are saved as elements behind the scences in EA, the UML tool for the business analyst to work with and associate to other model elements. Additionally, each UI element is automatically created in the analysis model ready for the analyst to reuse allow traceability between the UI design and the underlying analysis and data models.
April 23rd, 2009 at 9:22 am
FluidIA – is another agile UI prototyping tool which I began building recently. It is open source, web based and very much focused on affording exploration and refinement. Agile? The idea is to allow for very rapid adjustments of position, size, content and independent of scope by means of reusable objects and inheritance. Always looking for people to get involved. Jakub.
April 29th, 2009 at 5:17 am
We are using ForeUI, which support wireframe, Windows XP and Mac OS X style for the same prototype.
April 29th, 2009 at 12:51 pm
Very good article, thanks.
Another that should be added to the list is Iplotz, drag & drop, simple & sketchy look,shareable output, worth a look
http://iplotz.com/
Cheers
Chris
May 13th, 2009 at 5:15 am
[...] Listado de herramientas y análisis de Dan Harrelson [...]
May 27th, 2009 at 12:10 pm
A tool that tries to be both an wireframing and prototyping tool is FlairBuilder (http://www.flairbuilder.com). It basically lets you create highly interactive prototypes with a plain look’n'feel, using a set of fully functional components: buttons, links, tabs, etc., with the possibility to also add conditional logic to wireframe interactions and navigation.
I hope you’ll find it useful!
Cheers,
Cristian
June 3rd, 2009 at 3:20 pm
I have recently collected a list of prototyping tools you may find interesting.
June 23rd, 2009 at 9:14 am
[...] adaptive path » blog » Dan Harrelson » Rapid Prototyping Tools – List of rapid prototyping tools from Adaptive Path. [...]
June 24th, 2009 at 3:46 pm
Hi,
we have developed a solution to add functionnality to Axure like add comments to pages and administrate the prototype online with registered users: ax-admin
http://www.axure-users.net/ax-admin
Chears
Régis
June 26th, 2009 at 2:14 am
Prototyping is very interesting and creative , I working in a prototyping company , which make me learn a lot on prototypes and creative design , it make me feel achivement to provide high quality to creative desgn on prototypes , aslo I get review many many creative products .
I think it’s very helpful to improve me on all aspects , If you have interests on our company, Welcome to visit our Web :http://www.sunpe.com , Aslo I’m welcome your letter to share on prototypes .My mail is sales_07@sunpe.com, I’m Lulu . Thank you !
July 6th, 2009 at 2:24 pm
[...] Rapid Prototyping Tools- Adaptive Path, March 24, 2009 [...]
August 7th, 2009 at 9:35 am
Another wireframe/prototyping tool is Hot Gloo.
http://hello.hotgloo.com
September 1st, 2009 at 6:40 am
Dear Webdistortion Readers,
we’ve changed our name from RapidRabb.it to pidoco°. Now, that we’re officially pidoco°, please visit our website, in order to test the pidoco° Wireframe Tool !
Best,
Tino
pidoco°
September 1st, 2009 at 6:40 am
Dear Adaptivepath Readers,
we’ve changed our name from RapidRabb.it to pidoco°. Now, that we’re officially pidoco°, please visit our website, in order to test the pidoco° Wireframe Tool !
Best,
Tino
pidoco°
September 2nd, 2009 at 2:41 pm
Dan, I was able to see the list of prototyping tools about 4 months ago but I can’t seem to find it anymore. Would you mind re-posting or providing the link. The list is fantastic and will help with a project for my company. Thank you!
September 2nd, 2009 at 7:37 pm
@Rosita … whoops! I’m not sure why the link to Google Docs broke, but I fixed it. Thanks for the head up.
September 7th, 2009 at 2:38 pm
Accidentally found a new service:
Coutline’s professional online platform is an efficient tool that allows to create and design website prototypes and documentation
http://coutline.com
Project Samples:
Mega iRon Mockup
https://www.coutline.com/coside/designer/page/area/r?page_id=1b7f58dcc0edf864
Coutline Mockup
https://www.coutline.com/coside/designer/page/area/r?page_id=2ac5a92dd3921d54
September 14th, 2009 at 10:53 am
Dan, thanks for your post. I strongly agree with your criteria for making effective prototypes, and Protoshare definitely meets this criteria as well as any prototyping tool out there.
September 16th, 2009 at 10:08 am
Glad you mentioned the Keynote / Powerpoint option. You’re right that most people don’t know about the hyperlinking and animations capabilities which is great for interactive mock-ups.
I just shared my own Powerpoint/Keynote templates + my home-made vector graphics library for quickly prototyping iPhone apps at Mockapp.com
Enjoy!
September 16th, 2009 at 12:46 pm
[...] this year I wrote about the value of prototyping. Along with my thoughts on why and how to create effective design prototypes, I listed some rapid [...]
September 17th, 2009 at 3:08 am
Yet another: MocFlow (http://www.mockflow.com/)
September 17th, 2009 at 8:56 am
[...] 40 tools VN:F [1.6.5_908]Rating: 0.0/10 (0 votes cast) [...]
September 28th, 2009 at 8:49 pm
Just an update to let you know that the Powerpoint version of MockApp was fixed last week and now works with both PowerPoint 2008 on Mac and Powerpoint 2007 on PC. You can download it for free at http://MockApp.com/download/
September 30th, 2009 at 6:36 am
[...] rapid prototyping tools, by dan harrelson of “the adaptive path”. read the intro and the first section. [...]
September 30th, 2009 at 7:29 am
I’ve recently taken most of these tools for a test-drive and I’m astounded at how hard it is to create rich interactivity. Showing a custom floating dialog or hiding sections of the page in response to user interaction was nigh impossible unless we started to build the actual pages and risk getting locked into the code too early. Axure seems to be the only one which really allows for that level of interactivity to be easily produced in a format I can put in front of users to test. I agree with a recent article on using appropriate fidelity for prototypes and I understand that every project is different. But, I also really believe that simulating interactivity allows users to forget the design and focus on how it behaves. As we create more complex Web UIs, we need the tools to allow us to simulate those behaviors easily and present them in a standard browser.
September 30th, 2009 at 9:45 am
In the list is misssing: http://www.hotgloo.com.
Thanks for sharing!
October 3rd, 2009 at 8:41 am
If you want to build it yourself, a great site is: http://help.dottoro.com.
Great list
Cheers
Tom
October 18th, 2009 at 1:14 am
Missing from the list:
Workflow for Visio
Thanks for the great resource!
December 3rd, 2009 at 11:30 am
[...] Listado de herramientas y análisis de Dan Harrelson [...]
February 5th, 2010 at 12:08 pm
[...] Lately it’s been hard to do the normal morning media-skimming rounds without reading about Design Thinking. The answer to the question of how to innovate, according to the New York Times, Stanford University, and Fast Company, is to change the way you think about the creation process. What is needed, they agree, is more Design Thinking. Design Thinking and IDEO, a design and innovation consulting firm, go together, well, like a shopper and carriage—as you can see in this 1999 management-theory cult classic “Deep Dive.” It’s the video that sort of started it all. Beautiful people from IDEO collaborate to design a super-sexy supermarket aisle-cruiser. But it’s not just about design, as IDEO founder Tim Brown makes clear in this MIT video, it’s about good thinking. Design Thinking places the emphasis on three aspects of ideation that often go under-emphasized a culture pretty obsessed with the technical side of things: empathy, ethnography, and rapid prototyping. [...]