Stack OverflowWhat is the best web prototyping tool?
[+85] [33] Fernando
[2008-09-22 01:48:37]
[ web-applications polls prototyping ]

What is the best tool to create a web application interface prototype?

(6) -1 Use of "best" - pst
There are lot of good applications and everything depends on what you are looking for. You can also try my own software and host it yourself (just like wordpress) - Nilesh
[+75] [2008-09-22 01:51:17] Swaroop C H

Try Balsamiq Mockups [1] (commercial desktop application) or Pencil Sketching [2] (open source Firefox add-on)


(3) Pencil Sketching is AWESOME, Thank you very much man!. - ramayac
+ pencil skatching blew my mind! - Andreas Niedermair
Pencil is money! - ryanulit
(3) +1 for Pencil. BTW you can also dload and install it as a standalone application. - ercan
Pencil sketching - this link does not work any more. - Roopesh Shenoy
The pencil sketching link does not work any more, I think this is the project it was referring to: - Ivan
Just try Cacoo It really cool and offer free access with 26 pages. - bnguyen82
[+42] [2008-09-22 01:56:59] jpeacock

Pen & paper. Seriously. You'll spend less time fighting/learning mockup tools and more time designing.

Create some basic templates of your pages, photocopy them, and fill in the dialogs/views/details by hand. It's surprisingly quick and definitely gets the idea across.

(1) +1 - Narrowing it down to one step between your brain and paper is not to be underestimated. - Tor Valamo
(3) It's also about colors. And you need to be able to compare various versions of designs and disable/enable styles to see the difference...pen and paper is fine if you are an expert. Everybody else needs something better. - Blub
I can have a simple mockup in Balsamiq done much quicker than trying to get an ugly pencil sketch scanned and emailed (or whatever online communications). Also trying to write text (mostly headers or dummy text) small enough that they'd be to scaled is near impossible. - Davy8
(4) -1. Paper isn't nearly as editable, searchable, sendable, etc. as doing it online. With an intuitive tool you can accomplish so much more. I find this answer a bit disingenuous given the op's question. - ragamufin
(1) Thoughts from the field: pen and paper are not as helpful as a tool like Balsamiq when you work with remote clients. Pen and paper cannot show animation the way a robust prototyping tool can. Good prototyping software can even generate code or pseudo-code. I recommend against using balsamiq pencil-mode designs in a proposal. Our stakeholders nearly eliminated an excellent vendor for a $3m project because they didn't understand the "sketch-looking stuff". Since the vendor wasn't around to explain, the misinformation showballed. - Brien Malone
(1) i agree that pen & paper are GREAT for getting ideas down, basic UI layouts and whatnot; but, when it comes to an interface prototype, i want digital copies that i can keep in the cloud. - jberger
[+29] [2010-04-28 17:24:10] Brendan

Balsamiq rocks. The fact that Mockingbird almost works on the iPad is pretty nifty too.

To the people who say "pen and paper" I don't really think they have any idea what they're talking about. To me this is precisely like saying "If you need to communicate with someone in another country just hop on a boat and go talk to them. Don't struggle with tools like a telephone or email." It's misinformation.

I'm 99% sure someone making an assertion that pen and paer is better for mockups than the modern tools has never used Mockups or Mockingbird.

As a consultant I've been creating mockups for 15 years in various ways (all painful till Balsamiq arrived) and I'll give you specific examples of why pen and paper is far inferior.

  • First and foremost: collaboration and sharing. I'll create a mockup of a screen for a user. If I'm using Balsamiq I send it to them or post it to a wiki page. I ALWAYS miss some things, the user can then make notes directly on the mockup or drag and drop components around themselves. The pure ease of sharing electronically gets people involved. I work with people around the USA and the world.
  • If you have a screen of any complexity and the user wants the navigation tree moved from the left to the right what are you going to do with pencil and paper? Spend 30 minutes redrawing the entire screen or spend 5 seconds selecting everything to slide left and make room?
    • How do you share something drawn by hand to people in other offices? Scan it in, scale it down, email? By definition a mockup you draw on a wiki is shared the instant you click save.

Creating a mockup in photoshop, Visio, and HTML are all relatively hard. But Balsamiq and Mockingbird are a completely new breed of tool. There was nothing available like Balsamiq till it was released about two or three years ago.

Balsamiq is to 'paper and pen' what the iPhone is to 'two cans attached by string'.

+1 for the venom - Don
[+26] [2009-11-08 10:17:15] Pascal Thivent

Good bye balsamiq [1], say hello to mockingbird [2]!

Mockingbird is an online tool that makes it easy for you to create, link together, preview, and share mockups of your website or application.

alt text


Mockingbird is really great! +1 - Jakub Arnold
+1 Really cool! - Elister
I've used Balsamiq for a long time and was even able to meet Peldi at SXSW. He's a stand up guy, and it makes me sad that they might struggle down the road due to the Flash platform approach. I can't help but feel like Mockingbird is really just a Balsamiq port to JS/HTML/CS (with Cappucino). If I was running either business, I'd try to work out a merge or buy of the other sometime next year. - Jason
Here is a good HTML5 excellent application - Nilesh
@Nilesh mockup tiger feels a little blocky to me. i like the scratchpad feel of balsamiq and mockingbird far better. - jberger
[+11] [2008-09-22 02:25:24] gregmac

To start with, regular old pencil and paper. It's quick, it's functional, and you don't spend time fighting with tools. Seriously, you can probably finish sketching out the design faster than you can even open an application.

If the initial concept is good, get a designer to mock up a design in Photoshop (or whatever tool of their choice). It doesn't have to be HTML yet. And seriously, if you are a programmer, you are probably[1] not a designer - leave it to the experts.

After this, you can take the design they did and turn it into HTML, and write the application.

Alternatively, after the pencil and paper stage, if you're more concerned about the user interface than the looks (lucky you for having such an enlightened client!), then actually build the interface, and don't worry about the look yet. Use semantic HTML so what you build now can be "skinned" later with mostly CSS.

[1] With very rare exception, most programmers suck at design. And no, knowing how all the tools work in photoshop does not make you qualified to do design.

+1 pencil and paper, just remember to use a 2HB pencil instead a smaller pencil or a pen. Bigger lines helps you avoid thinking in details while drawing the prototypes. - razenha
2B pencil ;] I used to take drawing classes, sorry :P - Marek Mollin
[+7] [2010-01-26 12:23:42] Cody

I will recommand ForeUI [1]. It is very handy and can export prototype to pictures, PDF and HTML. The most interesting thing is its ability to define interaction freely.


[+5] [2008-09-22 01:55:11] Craig Day

A lot of people I have come across lately really like Axure [1]


[+4] [2008-09-22 01:53:21] Lou Franco

Balsamiq Mockups [1] is very nice


[+4] [2009-06-16 14:08:11] Joel S

My normal workflow is...

  1. Paper and pencil
  2. Create a clickable mock using Omnigraffle (only mac) with wireframe stencils from Konigi [1].
  3. Create a complete design in photoshop.
  4. Implement in HTML/CSS

Note: Sometimes I find step 2 overkill depending on type of project, client, co-workers etc.

So my answer would be: check out Omnigraffle if you need anything more than paper and pencil (and if you are a mac user).


[+3] [2008-09-22 02:20:36] david dickey

A low-fidelity solution:

A box of multicolored index cards, a can of spray-on tack (temporary), a black marks-a-lot and a floor to ceiling whiteboard.

A whole wall to prototype on would be really cool, actually. I wonder how much that would cost? - Rahul
(2) @rahul: At a PPOE we noticed they were tearing down an old strip mall just down the road from us. We paid the demo crew $50 to bring us one of the old storefront windows (6' x 12', IIRC). Painted one wall of the conference room gloss white, then put the window in front of it. BAM! Instant full-wall whiteboard. All for under $100. - TMN
(2) @TMN: Balsamiq is under $100 too. - Seun Osewa
[+3] [2008-09-22 17:34:32] bluegene

We've been using iRise [1] for the last 6 months. It sort of serves as a requirements document as well as a prototype.


[+3] [2011-01-15 01:56:47] xiaoqun

LucidChart [1] is a great tool that I just found. Good set of functional menus and buttons that you can customize, and they even have hotspots and a demo mode so that you (or collaborators) can interact with a functional mockup.


[+3] [2011-04-21 08:48:09] Peter Severin

WireframeSketcher [1] lets you create click-through prototypes that then can be demoed on screen or exported to a clickable PDF. Storyboards can be used for a high level view of your prototype:

Storyboard example


[+2] [2008-09-22 05:19:31] Mackaaij

Our consultants use Mockup Screens [1] ("Quick and Easy Screen Prototypes"). It's easy to alter screens and the scetches make clear that this is only a design.


[+2] [2009-01-25 19:09:51] Raymond

I've been using Axure [1] for some time now. It works quite well and offers a lot of useful functions. I've used it for some small-medium sized webapplications and it was very helpful. I should say though that if you have a lot of Javascript/Ajax interaction on pages, the dynamic panels can become a hassle. In such cases, maybe it's best to just use some simple HTML/JS.

I've looked at Irise, suggested by someone else here - that looks very similar. Probably more suitable for bigger projects. However, Axure costs a LOT less than Irise :-).


[+2] [2009-09-20 00:20:53] iaingilfillan

I'd say a mix of Balsamiq Mockups and Axure. Balsamiq is great for design mockups and Axure is great for functional mockups. I've found that Balsamq is better to show to clients, it looks great and clients get a much better sense of how the page will look and be laid out. Axure is great for functional interactions and I find it more useful for the back end developers. I find that clients find Axure wireframes and specs a bit difficult to read.

[+2] [2010-01-27 04:38:20] Andy

ForeUI [1] is the best prototyping tool I've ever seen. It can create clickable prototype with any fidelity.


[+1] [2008-09-22 02:06:58] nzpcmad

Three methods:

  1. Use Visual Studio to design some very basic pages. Stub up some dummy data. Chain the pages together as simply as possible. Now you have a prototype to show the customer. The advantage is that the prototype is actually the code - it aligns the development and the documentation with no real effort.

  2. Visio - neater than pen and paper - easy to update and can be done in front of the client on the fly. Easy to import into documentation and looks more professional.

  3. Pen and paper - for clients who really don't know what they want and you know there are going to be heaps of changes. Once you've got the basics, move to one of the above.

[+1] [2008-09-22 02:13:29] Turnkey

Prototype with simple HTML pages and simple links. Use your favorite HTML editor for this. It's easy to then distribute the HTML pages to the clients. Sometimes I make the initial page based on an "Save as HTML" of another part of the app or similar app.

(1) Check out, which will help you do this without having to save as HTML or email HTML files. :) (disclaimer: I built quplo) - Rahul
[+1] [2009-03-10 19:41:20] Andee

For the developers who find that they need to collaborate with remote teams or clients when prototyping, ProtoShare [1] is a good place to look. It's kind of like Axure [2], but online for multiple people to access and add their comments to.


[+1] [2010-08-31 00:49:47] Prashanth Padmanabhan

I have been using Axure to prototype business applications as well as mobile applications. It creates HTML output which you can host in a website to share with colleagues and customers for discussion. I start with a pen and paper sketch and then build the clickable prototype in Axure.

[+1] [2010-10-15 14:06:53] Martin Kool

Handcraft [1] is made specifically for what you describe: web prototyping.


[+1] [2010-12-09 14:56:18] Marco

I use DiagramDesigner [1], an Open Source tool with this intersting capabilities:

  • Create your own component libraries
  • Smart stretching of groupped components (i.e. Label+TextBox)

[+1] [2011-02-22 12:15:37] moleculezz

Here is another option if anyone is interested. [1]


[+1] [2011-07-24 19:51:12] Marek Mollin

I myself use Several reasons, first 26 digarams are free which is good for a start if you go out of that scope prices are reasonable. It has all the stuff I need to build some business charts, some interaction flow diagrams, its good for prototpes and its number 1 feature it allows very simple collaboration. By simple I mean good. No stupid axure svns which get corrupted and collaboration is not realtime, no starting sessions, providing some links etc. I jsut invite person interested and as we talk on skype we can muddle through our mockups.

Then either I take it to Pencil from Mozilla which is just great but exporting the html is somehow awkward had to do my own templates. Its not perfect for this feature but its very simple. Or Axure if somebody needs some crazy interactions to be included.

After that I am ready for first usability tests and rethinking the process again.

I try almost propose tools in this thread. And found out that Cacoo is the most cool tool. Beside your finding, the tool allows large customization on every component it offers such as font, color, direction,...For example the tab component is separated instead of offering a bundle of tabs together as do other tools , so I can customize text color, background color for each individual tab. Even more, it allows me to add other flow diagrams, other kinds of shape into my web-frames because it offer components for other kinds of design as well.Finally, its interface is very professional. Love it. - bnguyen82
[0] [2010-01-28 11:25:29] Hefi is very good!

[0] [2010-03-03 01:29:16] Mark

I have always liked iPlotz

[0] [2010-05-27 00:52:14] Jafin

Former Balsamiq user, Balsamiq is a great tool and I still recommend it.

I Tried FlairBuilder [1] and liked its ability to join multiple pages in a project much easier than Balsamiq. It also felt like it responded a bit quicker.

Flair runs in Adobe Air and is reasonably lightweight. One of the things I felt was easier in Flair was simple control linking in a multi-page project.

There is a comparison from the vendor on Flair [2] vs Balsamiq [3] vs iplotz [4] here [5]

All products are evolving at a rapid pace, so take the opinion with a grain of salt.

I did try the Microsoft Expression Blend SketchFlow [6] but did not enjoy it, it just didn't feel as 'rapid' as both Balsamiq and Flair to use.


[0] [2010-07-28 06:45:13] Amir

I had great success with Apple Keynote [1]. I love it because it forces me to focus on the essentials, and gives me multiple master pages - A feature that's lacking from most mockup and prototyping tools.

I believe it's ideal for non-designers, and anyone who wants to get something up and running quickly and cheaply ( iWork [2] is currently selling for $33 on Amazon).

I wrote a blog post about my keynote prototyping experience, " How to prototype interactive iPad applications in 30 minutes or less using Apple Keynote [3]".


[0] [2010-11-24 10:19:52] Dan Moser

Try Justinmind Prototyper [1] powerful and flexible. On the other hand Justinmind Usernote allows you to publish your prototypes to make them available for your team and customers. They'll be able to test them and provide their feedback directly over the prototype. In addition you'll be able to run usability tests online by integrating your prototypes with the market leading usability testing tools.





[0] [2011-04-13 11:46:39] Abinasha

Web prototyping tool has two aspects.. 1 - What user see in the screen (UI prototype) 2 - What gets processed (The backend logic ex. Sending a mail)

First one if addressed by screen prototypes and the second depicting a flow diagram. A complete 360 degree of prototyping requires blending both of these two aspects. On clicking the Submit button it should take to the flow diagram and from there to next screens ( Based on choosen end point). [1] allows multi-level drill-down of workflows to screens


[0] [2011-09-26 19:58:00] vladocar

If you are using Photoshop like primary graphical tool you can use Photoshop Wireframing Kit

[0] [2011-12-04 23:31:43] Michael

Didn't work with it too much, but my first impression of framebox [1] was pretty good.

You should check it out.