★

What are the best tools for rapidly prototyping a web-application?

I've had a lot of success with Axure RP Pro. They're up to version 6.0 as of this writing, and it shows. With literally thousands of current users, Axure seems to be the prototyping tool to beat.

Some of the best aspects of Axure include the ability to model realistic interactions such as conditional events, drag-and-drop activities, animation, and other jQuery-like behaviors. Designing a prototype is fairly quick and easy and requires little or no coding if you're not up to it. On the other hand, Axure provides support for more advanced designs using conditional logic, variables, and event chaining, so you can usually create whatever you need.

One of the often-perceived drawbacks of Axure is that, although it presents the prototype in a browser, the resultant code is junky and not usable for production purposes. Yes, it generates pretty ugly HTML, CSS, and JavaScript, all of which can be edited in the usual way, but I don't recommend doing so. There are two ways of thinking about this:

1) Prototypes are explorations. They are temporary constructions, highly mutable, and should be easily created and revised without any concern for code cleanliness or adherence to standards. Or...

2) Prototypes are the foundations for the finished product and should eventually evolve into production-ready code. While they may still be exploratory in nature, prototypes should be developed so as to minimize the need for refactoring.

Personally, I subscribe to the first school of thought. Prototypes are meant to explore the nature of a problem, devise possible solutions, and iterate through alternatives. Since I'm no genius, that usually means trying things out, making mistakes, and trying again until I get it right. Having coded prototypes by hand, I can testify that they don't lend themselves to a lot of adventurous exploration: Being too adventurous runs the risk of messing up perfectly good code, and getting to "good" can take a while. So Axure's code junkiness doesn't bother me as long as I can quickly tear though design alternatives. Just don't let anybody use the resultant code.

Axure's not perfect, however. While it was clearly aimed at the UX profession, it was also pretty clearly not designed by a UX person. That's slowly changing, and I'm happy to see that the soon-to-be-released v6.0 is better, experience-wise, than v5.6 was.

Finally, I'd like to comment on the other means for rapidly prototyping a web app by saying that they're all valid. However, what you end up using will depend on the nature of your organization.

• Paper prototyping: In my case (working at Texas Instruments with thousands of employees worldwide and about 14,000 different products), paper prototyping won't cut it. It might be useful for some level of interaction design, but a paper prototype usually won't contain enough specification to carry itself through the development process or the testing cycle, nor will it do well if you have to deal with an offshore development team.
• Balsamiq: It's OK, but you have to struggle a bit to make it engaging. Since your question was about prototyping a Web app, you'll want a tool that lends itself well to creating snappy, realistic user interactions. I've used Balsamiq extensively in the past, but I could never count on doing anything other than static presentations with it (or, actually, semi-static presentations, since you can link pages together). Again, that may be good enough for your situation, but from the question you asked, Balsamiq doesn't feel like a suitable match.
• Keynote/Powerpoint/Visio/Illustrator: Useful for quick prototyping of static or semi-static designs, and (except for the lack of deep interactivity) relatively suitable for the entire development process as long as you make a good effort to document your specifications. The real drawback to these sort of prototypes is that you have to make the extra effort to tell how an interaction behaves, rather than just showing it, as with an Axure prototype or a hand-coded artifact. This is the way I used to present all my designs, and it invariably required a lot of hand waving and sound effects to convey the nature of the interaction.
• Photoshop: Very useful (sometimes deceptively so) for creating full-blown comps of the finished vision. With a little deft manipulation you can even get screens to "link" to each other, but I tend to stay away from Photoshop for prototyping purposes unless I really need the "wow" factor to sell something. (But if I need that level of fidelity just to sell an idea, maybe it's not a great idea to begin with.)  Plus, once a client sees a Photoshop rendering, there's no going back--you'll have to stay in Photoshop for the rest of the prototyping process. Good luck with that.

Anyway, that's about it. If you're looking for a prototyping tool to rapidly iterate through Web app design ideas, you're going to want to use something that:

• Enables you to create highly interactive, realistic designs
• Gives you the flexibility to employ advanced effects
• Creates explicit specifications that can be used throughout the development process

For me, that's Axure. At least until something better comes along.

I'm assuming this question is coming from a non-developer that has a goal of eventually launching a web application rather than just prototyping it.

I recommend you create lots of paper prototypes and/or electronic wireframes using the simplest tools you can e.g. PowerPoint / Balsamiq Mockups. Make sure you have a complete user experience covering a minimum viable product and do lots of testing with real users. Once you are sure that you have the simplest thing that works, make it as high fidelity as you can, ideally using HTML and javascript, and test it again. Everyone building things for the web should have some knowledge of HTML, CSS and JavaScript, they are the languages of the web and there are loads of great resources through which you can learn enough to get by in a few hours.

I would also recommend getting your final wireframe, with no server side logic up on to the web for some more testing. Add some analytics code, like Google Analytics or Clickly, and a mock a sign up box using some more copy and paste code from an email list manager such as Campaign Monitor or Mail Chimp. You can then do more testing by driving some traffic to the site using Google AdWords or Twitter to see if people are interested enough in the idea to submit their email address. With that validation it will be far lower risk for you to invest in the development of application logic and the data you have should help you prioritise the work effectively.

Finding a developer after you have reached this stage will be much easier and potentially cheaper as you'll have an very well defined product. I would recommend building the first version of the application logic using one of the following frameworks:

• Ruby on Rails,
• Django (Python)
• Symfony (PHP)

Leave the final decision to the developer, the fact that you get on well with them is far more important than their choice of programming language. These frameworks aim to provide 80% of the things that most web applications need and nothing more. This means they don't get in a developers way later down the line when you are trying to create the highly specialised user experiences you have developed through your prototypes.

If you are creating a web application where the unique user experience is critical I would recommend you avoid the following:

a) Heavyweight web application development platforms using Microsoft or Java technologies. They are generally much too slow to develop early stage web applications with as more lines of code are required to get things done. Additionally, the performance and stability benefits they claim to provide are rapidly becoming negligible when compared to newer web frameworks.

b) Content Management Systems (CMSs) like Drupal, Joomla and Wordpress. They are great for sites where you can live with the user experience they impose in return for very quickly getting lots of content online. Customizing them to exactly fit the user experience you have evolved on paper can be an absolute nightmare. They try to do too much and as a result get in the way of developers trying to create specialised user experiences. It's a nightmare you'll relive every time you want to develop the application further.

c) Rich prototyping tools, that try to do backend logic as well as front end design - anything more complex than Balsamiq Mockups. I've found them to be time sinks that slow development and add an unnecessarily layer of complexity to web application development projects. I have yet to see code generated from these kinds of tools that is useful either as a prototype suitable for user testing or as foundation for developers to build on top of. The only environments these are useful for are in large old corporations, such as banks, that have lots of time and money to waste on projects that move very slowly because of dependencies on legacy systems and massive amounts of bureaucracy. In those kinds of environment these tools give people something to play with that can keep them motivated while waiting for the mighty cogs to turn.

Balsomiq Mockups is nice, as it has pre-built objects to move around quickly, but if you'd like to use your own design in photoshop, and make it "clickable" and interactive as if it's a coded site,

I highly recommend http://InvisionApp.com.

https://gomockingbird.com/ is really good for fast prototyping.

Just a pencil and a paper!

Thanks for the great responses to my original question.
.
Jonathan -  I do have development experience and have designed some large and complex software and web applications. We have used a variety of tools - including some of the MVC based frameworks  mentioned - Ruby On Rails, Django, Symfony.  Cake PHP and CodeIgniter should be included in this list as well - as  they are very popular too.  You are right that if you are working with a developer you should trust their choice in this regard. But all the MVC frameworks do require programming and working with an expert developer.

However, I  have been on a quest to find  Rapid Application Development (RAD) tools that one could use  to  go beyond  screen mockups or wireframes  allowing the creation of a  working prototype - with little or no programming. The ideal product would allow a web application architect (who understands applications and database design  - but is not an expert coder) to create a rough working model and even a minimum viable product pretty quickly. There are at least two situations where this may be useful :
 
a) When you need  to quickly build a proof-of-concept for an idea and  give it to a few users for alpha testing and feedback. Maybe you do not mind throwing away your prototype and developing the final product with a "real" language or MVC framework.

b) You want to build a quick and dirty application for your own/internal company use and do not care too much about fine tuning the UI or performance.

We should keep in mind that all  application development tools require you to make various trade-offs between complexity vs ease of use, rapid development vs control on UI/performance etc. After all, you can get  ultimate performance if you use assembler - but we are all willing to live with the slighty lower performance of higher level languages. Generally, the higher the level of abstraction, the easier and faster it is to develop applications - and the lower the performance and control.    The question is how much performance/control etc. are you willing to trade off for the higher level of abstraction and speed of development.

I also realize that most programmers dislike code generators since they make it hard to get to the actual code to make changes or maintain it. They also generally do not like Visual Prototyping tools - as they do  little to advance their skill sets or  experience in their language of choice.  However, they are not our target audience for these tools.

With this perspective, here is a selection of tools  that I have discovered for this purpose:  (some of these  I have used). 

CodeCharge : This is a visual code generator that provides a fast way to build database  web applications with support for almost all flavors of databases and scripting languages (PHP / Perl /ASP/Java). Have used this tool for developing complete database apps in hours - not days.

UniPaaS : From Magic Software (product was originally called Magic). A unique tool that does not generate any code but allows creation of Rich Internet Applications as well as client server software. They have a free single version developer version called UniPaas Jet.   Magic gives a 10x or higher advantage in development speed in many cases.

Tersus :  A very unique  and powerful  Drag & Drop GUI  for Rapid appllication development that I recently discovered. Free open source license, 

Wavemaker :  Similar to Tersus - Drag & Drop  GUI. Generates java code. Free open source license (with some limitations). 

RadPHP XE : from Embarcadero - Visual PHP RAD.

All of the above products can be used to develop and deploy production quality applications and many of them are highly scalable as well (Magic / Tersus).
However. they all of course have limitations and may not be suitable for all types of web applications.  But  they could be useful in the scenarios mentioned earlier.  If any one has actual experience with these tools it would be great to hear from them.