up vote 37 down vote favorite
39
share [g+] share [fb]

I'm looking for a list of web-based prototyping tools and I'd like to build one up here by using StackExchange's democratic voting system.

There are already some lists around the web, notably these ones:

I found both of those from the Google search "list of prototyping tools".

StackExchange UI should, on the long term, be the best format for managing such a list. Let's go for relevance, not necessarily completeness; completeness would involve adding tons of answers including little-known or outdated tools. Instead, I'd like to see a list of current web-based prototyping apps, and votes for each product would ideally evolve over time (eg. Balsamiq will likely start out at the top today, but 5 years from now we might see something else show up).

I'm making this a community wiki since it's more documentation than objectively answerable.

link|improve this question
Discussion about list based questions on meta is taking place here: meta.ui.stackexchange.com/questions/39/… – Rahul♦ Aug 16 '10 at 21:01
3  
From the FAQ: "Avoid asking questions that are subjective, argumentative, or require extended discussion. This is not a discussion board, this is a place for questions that can be answered!" – Roger Pate Aug 16 '10 at 23:36
7  
"Avoid asking questions that are subjective, argumentative, or require extended discussion" = then we shouldn't have a site dedicated to UI and UX. The practice pretty much REQUIRES lengthy, sometimes subjective discussions. – DA01 Oct 6 '10 at 14:59
feedback

15 Answers

up vote 26 down vote accepted

HTML + CSS + JS

That's pretty much the only option if you're looking at high fidelity prototyping.

I'm an advocate of going hi-fi (code it) or stick very lo-fi (sketchy apps like Balsamiq).

Unless you're testing relatively tame interactions, I find solutions like Axure and the like a bit dangerous. It implies hi-fidelity, but you can't finesse the interactions in apps like that to the point where it will reflect the actual user experience.

link|improve this answer
1  
Massive +1. But coding it doesn't necessarily mean you'll be doing hi-fi work; you could code it lo-fi no problem. – Rahul♦ Oct 7 '10 at 7:39
It's a good option for prototyping. But it's not a web-based prototyping app. – Bennett McElwee Oct 12 '10 at 2:53
It's not an app, but the question was 'web based', which it certainly is ;) – DA01 Oct 13 '10 at 14:20
A coded prototype unfortunately isn't used in most UX settings. By all means use it if it's what you're comfortable with, but the purpose of most UX prototyping is to refine ideas and test - and you get much better return on investment by using the prototyping tools mentioned elsewhere than by coding. – Peter Feb 13 at 18:41
The goal is to refine ideas and test SOLUTIONS. The problem I have with non-coding prototyping is that they usually are refining and testing solutions based on the ability of that particular prototyping software--which rarely--if ever--correlates with what actually has to get built. For BROAD site flow type testing, sure, something like Axure is great. For testing actual UI interactions and usability, it sucks. It's misleading and often more of a wrench in the process than a help. – DA01 Feb 13 at 19:34
show 2 more comments
feedback
up vote 39 down vote

Balsamiq Mockups

So, since you mentioned it, I'll add Balsamiq to start the list :)

The Web version isn't in full release yet, but the desktop app is pretty nifty.

When it does go live, the product will exist here: Balsamiq Web app project page

Otherwise, there's always the desktop app (at the same URL, just click the "Desktop App" link).

link|improve this answer
My team has been lucky to be a part of the private beta. The web version removes the question "Is this the most up to date version of this wireframe". That alone makes it worth it. – sudonim Oct 29 '11 at 14:47
feedback
up vote 8 down vote

Mockingbird

I found Mockingbird to to be one of the easiest to use browser-based apps - http://gomockingbird.com

link|improve this answer
+1 I use that one too. – Jouke van der Maas Aug 16 '10 at 21:00
feedback
up vote 6 down vote

Handcraft

Balsamiq is definitely my first choice for sketching out ideas in brainstorm and kick-off sessions with clients. But when it comes to fully functional prototypes my drug of choice always is Handcraft. It's perfect for HTML prototyping and offers some great functional extra's to create interaction flows that would normally need back-end coding skills or throwing things together in javascript.

link|improve this answer
feedback
up vote 3 down vote

Mockflow

My wife's interactive agency has had success with:

http://www.mockflow.com/

Quick to get started and a reasonable amount of built-in controls and screens for wireframes.

link|improve this answer
## Mockflow I evaluated almost a dozen about a year ago and settled on Mockflow. We've been using it for about a year now to do sitemaps and wireframes. For sitemaps, its pretty lame because they only build width wise and have no other display options. I usually end up having to draw the sitemaps with their wireframe components instead of the built in feature. For wireframes, its very good. It works w/Adobe Air or completely web based which is very nice. For review you just email a url to people and that url updates every time you hit Save which is always fun. You can make templates, folders, – Dan Jul 20 '11 at 18:56
feedback
up vote 3 down vote

Pencil

Pencil is quite a good one that I've grown accustomed to using. Not strictly web-based but it is a Firefox plugin.

link|improve this answer
feedback
up vote 2 down vote

Hotgloo

Hotgloo provides basic prototyping, hot links on regions between pages, some high fidelity capabilities--on par with balsamiq; more sophisticated than mockingbird, but not as capable as a desktop app like axure or justinmind.

http://www.hotgloo.com/

link|improve this answer
Here is a fairly complex feature I worked out using hotgloo. skedgeme.hotgloo.com/wf/e45359a4#/92b98efc The actual came out different but hotgloo helped me figure out a lot of the back and forth. AND share it with others. I use hotgloo when I really need to flesh out interaction and get buyin. It is flashbased which has its issues. The CS team is very responsive. – Itumac Feb 13 at 19:46
feedback
up vote 1 down vote

my.origramy

Thanks for sharing! I'd add my.origramy service to the list. It's a free online service I use whenever I need to make a website prototype, a mind map, a diagram or a scheme.

link|improve this answer
feedback
up vote 1 down vote

Gliffy

How about gliffy? We just started using it at my company, it is way cheaper than balsamiq or mockingbird, and more versatile as well

link|improve this answer
feedback
up vote 0 down vote

Foundation

If you're looking at HTML/CSS/JavaScript solution, I would recommemnd taking a look at http://foundation.zurb.com/

link|improve this answer
feedback

We're looking for long answers that provide some explanation and context. Don't just give a one-line answer: please explain why you're recommending it as a solution. Answers that don't explain anything will be deleted. See Good Subjective, Bad Subjective for more information.
up vote 0 down vote

Pidoco

Pidoco is a web-based prototyping software that supports

  • clickable prototypes
  • wireframes/mockups
  • web, mobile
  • collaboration
  • remote usability testing
link|improve this answer
feedback
up vote 0 down vote

There's http://cacoo.com . The interface is a little esoteric, but the free version is a bit less restrictive than some of the others (25 pages, 15 users).

link|improve this answer
feedback
up vote -1 down vote

I'd like to also add Axure RP. I saw it somewhere in some list to which a link here refers to but there is no comment mentioning it so I decided it will be a benefit for someone not clicking all the links above.

Axure is relatively expensive but it does a great work. I am using it quite often and I think it has all the necessary features required for making either a quick mock-up or interactive prototype.

http://axure.com/ have a look at it if interested.

link|improve this answer
Axure isn't web-based... – Rahul♦ Oct 30 '11 at 22:39
Yeah, sorry, my mistake... I thought that the question is about the end product is reviewed in browser, not like picture or something. – BetaSve Oct 31 '11 at 13:15
feedback
up vote -2 down vote

Wufoo is an online form editor, where you can dragndrop input elements and build up advanced multipage forms. I just came across it today so I have no idea if it's good or not.

Wufoo

link|improve this answer
1  
Would you classify a form editor as a prototyping tool? Curious :) – Rahul♦ Aug 17 '10 at 21:31
1  
This form editor is not as general purpose as a prototyping tool, but it's still a RAD tool for easily putting together designs and workflows. For what it does I think it's better than Axure. – neoneye Aug 18 '10 at 15:52
feedback
up vote -2 down vote

FlairBuilder is an excellent prototyping tool.

link|improve this answer
feedback

We're looking for long answers that provide some explanation and context. Don't just give a one-line answer: please explain why you're recommending it as a solution. Answers that don't explain anything will be deleted. See Good Subjective, Bad Subjective for more information.

Your Answer

 
or
required, but never shown
discard

Not the answer you're looking for? Browse other questions tagged or ask your own question.