• Rapid Prototyping Tools

    The domination of the wireframe may be coming to an end. As a key deliverable explaining the appearance and function of an interface, the wireframe is much loved. We create multi-page wireframe documentation. We argue over the “best” fidelity for a wireframe. We annotate, tweak and version our wireframes over the life of a project.

    Wireframes, however, aren't sufficient for displaying the rich experiences that we are designing. We need to embrace tools that simulate the complex interactions of our designs. In short, we need to replace wireframes with prototypes in our design deliverables.

    Dan Harrelson

    Rapid Prototyping 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 on Adaptive Path's blog. Head on over to check it out. 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.

    Read my list of prototyping tools (and add your own!)

    Get the FeedAdaptive Path News


    UX Team of One
    Leah Buley rocked the house at SXSW last week, with her insightful and inspirational “Being a UX Team of One.” (Commentary is still ringing in the twitterscape!) Did you miss it and wish you hadn’t? Tune in to her virtual seminar next month.


    AP Goes Heavy at IA Summit
    Adaptive Path was out in force at this year’s IA summit. Indi Young and Leah Buley got hands-on in their pre-conference workshops on mental models and rapid iterative design. Kate Rutter drew inspiration from the slime mold in her talk on navigating changing landscapes, while Chiara Fox answered the questions “What exactly is the Semantic Web? And why should I care?” Jesse James Garrett drew things together for the idea-packed conference with his closing keynote and 5-Minute Madness.


    New Trainings from Adaptive Path!
    We offer all of our UX Intensive and Good Design Faster content as in-house trainings. If you can't join us for our events, we can come to your organization to train your staff on the latest in Interaction Design, Research, Strategy, Information Architecture and the UX skills required to tackle the design challenges of fluid interactions, service design, and multi-channel experiences. Email us at contactus@adaptivepath.com for more information.

    Get the FeedSelections From Our Blog


     

    What We're Reading


     

    There are 76 thoughts on this idea

    1. Dan Harrelson (dot com) » Blog Archive &raqu

      [...] 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 [...]

    2. Ian Alexander

      We are moving towards more rapid prototyping but for wireframes we use ConceptDraw by CSOdessa primarily because Visio isn’t Mac friendly.

    3. Martha Roden

      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

    4. Pavel Konoplitskiy

      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.

    5. Chris Griffith

      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.

    6. Laurian Gridinoc

      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.

    7. Michelle Chung

      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!

    8. Jeff Seibert

      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.

    9. Dan Harrelson

      Prototype evaluation/collaboration/testing… what a great idea for a future post!

    10. Carolyn Snyder

      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.

    11. Luis Garcia, Jr.

      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.”

    12. Harry

      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?

    13. Josh Johnson

      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.

    14. Andrea Fidel

      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

    15. Peter Severin

      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.

    16. Fred Sampson

      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.

    17. JF Nogier

      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

    18. J.D. Hollis

      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.

    19. Marcus Faulwasser

      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

    20. Martin Kopta

      OpenOffice.org Draw/Impress, Both (and Linux ;-)), Free, OpenOffice.org

    21. Lisa Wenzel

      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.

    22. Colin Hewitt

      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.

    23. Zamous

      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.

    24. solle

      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

    25. Andrea Fidel

      **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.

    26. Eric Leclair

      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

    27. Igor Jese

      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

    28. Jeremy Johnson

      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 ;-)

    29. Carrie Garzich

      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.

    30. Rob Wilson » Prototyping and UX Design Tools

      [...] 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.  [...]

    31. Jakub Linowski

      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.

    32. Bryce Day

      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.

    33. Chris Rourke

      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

    34. David M.

      We are using ForeUI, which support wireframe, Windows XP and Mac OS X style for the same prototype.

    35. Cristian Pascu

      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

    36. Lulu

      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 !

    37. Tino Truppel

      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°

    38. Tino Truppel

      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°

    39. Rosita

      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!

    40. Dan Harrelson

      @Rosita … whoops! I’m not sure why the link to Google Docs broke, but I fixed it. Thanks for the head up.

    41. Ed

      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.

    42. Dotan Saguy

      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!

    43. adaptive path » blog » Dan Harrelson &

      [...] 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 [...]

    44. Dotan Saguy

      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/

    45. « rapid prototyping KCAI Blogs

      [...] rapid prototyping tools, by dan harrelson of “the adaptive path”. read the intro and the first section. [...]

    46. Rich Paul

      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.

    47. Five for Friday #4: Best Innovation Blogs «

      [...] 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. [...]

    48. Nuestra herramienta para la arquitectura de inform

      [...] Catalyst y FlairBuilder) veíamos que, por una parte, iba a acabar siendo algo que ya ha hecho Adaptive Path o Wireframes Magazine y, por otra, nos distanciábamos de un elemento fundamental en nuestra [...]

    49. Bernard

      I’m working at a company that does rapid prototyping for video games.

      I can imagine the tools listed here can be useful to prototype the menus and other parts of the graphical user interface of games, but for video games, mostly the game concept itself is prototyped, as this is the most difficult to get right.

      I just wanted to share this list of tools that can be used for rapid game prototyping.

      We are mainly using Unity3D at the moment to create prototypes. It’s easy to learn, and can be used to prototype any 3D interface.

    50. thor

      wow this is brand new to me, most of them, this is a very huge and great list. I have used only one from the list.

      Thor Hofmann

      records of death

    Comments are closed.

  • Close
    Team Profile