54

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.

Improve this question
4
  • Discussion about list based questions on meta is taking place here: meta.ui.stackexchange.com/questions/39/…
    – Rahul
    Commented Aug 16, 2010 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
    Commented Aug 16, 2010 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
    Commented Oct 6, 2010 at 14:59
  • FlairBuilder is an excellent prototyping tool.
    – user6803
    Commented Jul 26, 2011 at 5:33

15 Answers 15

Reset to default
37

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.

Improve this answer
10
  • 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
    Commented Oct 7, 2010 at 7:39
  • 2
    It's a good option for prototyping. But it's not a web-based prototyping app.
    – Bennett McElwee
    Commented Oct 12, 2010 at 2:53
  • It's not an app, but the question was 'web based', which it certainly is ;)
    – DA01
    Commented Oct 13, 2010 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
    Commented Feb 13, 2012 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
    Commented Feb 13, 2012 at 19:34
45

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

Improve this answer
3
  • 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
    Commented Oct 29, 2011 at 14:47
  • Balsamiq is great, but I wouldn't call it "prototyping"
    – Zelda
    Commented Jul 24, 2012 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.
    – Matthew
    Commented Oct 18, 2012 at 16:58
7

Mockingbird

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

Improve this answer
0
6

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.

Improve this answer
5

Pencil

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

Improve this answer
3

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.

Improve this answer
1
  • ## 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
    Commented Jul 20, 2011 at 18:56
2

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.

Improve this answer
2

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/

Improve this answer
1
  • 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
    Commented Feb 13, 2012 at 19:46
2

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

Improve this answer
1

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

Improve this answer
1

Foundation

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

Improve this answer
1

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

Improve this answer
2
  • 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
    – Zelda
    Commented Jul 24, 2012 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
    Commented Aug 7, 2012 at 11:25
0

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

Improve this answer
-2

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

Improve this answer
2
  • 1
    Would you classify a form editor as a prototyping tool? Curious :)
    – Rahul
    Commented Aug 17, 2010 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
    Commented Aug 18, 2010 at 15:52
-2

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.

Improve this answer
2
  • Axure isn't web-based...
    – Rahul
    Commented Oct 30, 2011 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
    Commented Oct 31, 2011 at 13:15

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