What Tools Do You Use for UI Prototyping?

AccUser asks: "There are many articles discussing methods of UI prototyping. Having been involved in the design and implementation of a number of commercial applications (both desktop and embedded), I know the value of producing early prototypes of the UI. In the past I have used visual programming tools, such as Visual Basic, but there is always that request: 'Can't you just complete the prototype and release it?' One project I was involved with, the UI prototype employed hand drawn graphics (including hand written text labels, etc) in order to be explicit about the fact that it was a prototype. What I would like to know is what tools and techniques do you use for UI prototyping, and how do you manage your client's expectations?"

What I use..

[aldragon]

Glade + Pygtk + Python

X-Code

[MBCook]

On the Mac side, X-Code is fantastic. Not only do you get to lay out the components but you can even connect many of the simple actions with drag and drop. This means that checking one box that should enable and disable other fields can work in just a few seconds. The button that is supposed to make the drawer slide out? That is trivial to do. You get a working demo that looks exactly like the final thing will. It is just like using Visual Basic but better because you get a "real language" (sorry, I don't like VB for most things).

When it gets approved, you just add the code on the back and you're all set.

Plus you could let your manager or client play with it. Put all the buttons and fields on there and set things up, then let him drag 'em around, change font sizes, etc. Sure it will probably be hideous, but he'll be happy :). They even did something like this for Steve Jobs when making the original Mac (story here [folklore.org] at Folklore.org [folklore.org].)

MVC

[Blnky]

This is an an excellent reason to develop with the Model-View-Controller [wikipedia.org] paradigm. You can develop the UI to be as complete as you want. It becomes reasonable to turn the prototype into the final product. However, that doesn't mean you can release it right away since the interface is only the view. You still have to develop the other two parts of the architecture. It is good for the customer because you can say yes to their request. It is also good for you since this separation has kept you from accidentally polluting the the rest of the code with the UI prototype/non-prototype. Also you can use separate languages for each part of the MVC architecture. Use a language that suits itself to the UI and then change to something else that better fits the controller and likewise the model.

Check out DENIM

[noblethrasher]

Surprised no one has mentioned DENIM, it's a free (as in juice) UI design tool that basically combines the advantages of a traditional whiteboard (it uses a drawing tablet for the primary interface) and something like the VB6 IDE. Check it out at http://dub.washington.edu/denim/ [washington.edu]

powerpoint (or impress)

[rnd()]

I've used PowerPoint (and Impress) to do UI mock-ups,.. The nice thing is that it's clearly not actual web/software widgets that are being used, so nobody really expects the final version to look exactly like the powerpoint version. Also, it is easy for anyone to change or update the document. I turn off the snap to grid feature which greatly improves the usability of PowerPoint, and build any standard widgets by grouping boxes and text as needed.

I'm still optimistic that a better tool may exist, but I've had good results with this approach when discussing UI design issues.