Take the 2-minute tour ×
User Experience Stack Exchange is a question and answer site for user experience researchers and experts. It's 100% free, no registration required.

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.

share|improve this question

closed as not constructive by Benny Skogberg, JonW Apr 2 '13 at 14:14

As it currently stands, this question is not a good fit for our Q&A format. We expect answers to be supported by facts, references, or expertise, but this question will likely solicit debate, arguments, polling, or extended discussion. If you feel that this question can be improved and possibly reopened, visit the help center for guidance.If this question can be reworded to fit the rules in the help center, please edit the 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
8  
"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
    
FlairBuilder is an excellent prototyping tool. –  user6803 Jul 26 '11 at 5:33

15 Answers 15

up vote 37 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.

share|improve this answer
3  
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
2  
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 '12 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 '12 at 19:34

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

share|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
    
Balsamiq is great, but I wouldn't call it "prototyping" –  Ben Brocka Jul 24 '12 at 19:26
    
I think it depends on your definition of prototyping, Ben. Actual code prototypes are fantastic, I do agree. But I've often found it easier to keep clients from focusing on UI preferences when poking around paper UX prototypes. –  Matt Oct 18 '12 at 16:58

Mockingbird

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

share|improve this answer

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.

share|improve this answer

Pencil

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

share|improve this answer

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.

share|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

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.

share|improve this answer

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/

share|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 '12 at 19:46

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

share|improve this answer

Foundation

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

share|improve this answer

We're looking for long answers that provide some explanation and context. Don't just give a one-line answer; explain why your answer is right, ideally with citations. Answers that don't include explanations may be removed.

FluidUI

I would like to add FluidUI to this list. We have just launched this tool last month. It is web based, designed to quickly allow you to create both low and high fidelity UI prototypes. Supports multiple platforms but you can set the page dimensions to whatever you need.

Link to it is fluidui.com but if you fancy jumping straight in and trying it out without filling forms and whatnot you can do so at http://www.fluidui.com/editor

share|improve this answer
3  
If you're directly affiliated with the product could you more clearly point out your affiliation with the product? It's required by our FAQ –  Ben Brocka Jul 24 '12 at 19:20
    
I work with FluidUI in a business dev role, just trying to get the word out there as we are new to the market. –  john larkin Aug 7 '12 at 11:25

Blue wireframe in Google Docs.

From this blog post by Morten Just, he has created a public Google Drawing you can use. I'm not sure why but the blank template has disappeared now, so I've shared the template I copied a while back. Zoom out if you don't see the wireframe objects to the left.

It has a set of wireframe objects that you copy, paste and then resize on to the mockup area to the right.

Then there is a gallery of google docs of people who have done mockups using this template

enter image description here

share|improve this answer

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

share|improve this answer

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

share|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

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.

share|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

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