How do you mock-up / sketch your web app?

We've been using plain paper & pen to create mock-ups, but it's kind of hard to collaborate online (many interactions of scan-email-comment).

So far I liked this one: http://www.mockupscreens.com . There's another one called Axure, but it's quite expensive: http://www.axure.com . I tried Denim a while back (http://dub.washington.edu/denim/ ), but it's a pain to use with a mouse (Denim was designed for tablet-pcs). Drawing tools are ok, but they do not have ready-to-use UI components like buttons, drop-downs, etc... Visio has UI components, but it's expensive.

Are you using any tools for web app mock-ups?

I use Adobe InDesign - it allows you to put together a library of symbols and shapes that you can re-use to build your mockup very quickly. Once you've put in a little bit of work getting these elements together you're good to go. It also allows you to add additional pages, auto page number, import images... you name it. Probably not what Adobe had in mind, nor is it a cheap option but it's certainly versatile.

pencil, paper or software, words or images?

Pen, pencil and paper are fluid, cheap and unconstrained. What do I mean by unconstrained? Well it has to do with brain structure. Drawing visually uses very primitive parts of the brain that efficiently processes information with little interpretation overhead. So your ability to transfer ideas using pencil to paper work with diagrams (images) better than words. [0] Your ability to create your ideas is superior [1] with pen and paper than some software tool.

My personal preferences are to use pen/paper, then white-board and marker, camera and lego. [2] Then text (electronic) and only then to some form of constrained tools like a diagramming tool, methodology.

Reference

[0] Curt McNamara, 'Applied Systems Thinking '

http://www.tc.umn.edu/~ahler002/TFTCON.HTM

[1] WIth limitations most of them relate to the proximity of your team.

[2] Notice they are all tactile stuff. They don't work with things that require numbers or complicated structures very well.

I use Photoshop to mock up the wireframes. I found it to be an excellent way to get your thoughts down visually and quickly adjust on the fly. With a PS document's layers and commenting tools, it works well for ongoing, collaborative changes. And once it is to your liking, you can easily make it a final draft for implementation.

I scribble a very rough sketch on a notepad. Once I have a reasonable idea of the layout and functionality of a page, I just move right into rails and iterate from there. You get realism and real code that way. Moderate proficiency with XHTML/CSS makes iterating not that much more difficult than pen and paper.

I remember reading that 37signals does all their mockups directly in XHTML/CSS.

Voodoopad. Use tables and links to layout your site very quickly.

I'm a designer, so I always have mocked stuff up in CSS/XHTML in Dreamweaver, plus Photoshop where graphics are necessary.

What do u mean how?? Ruby on Rails :)

Paper and pencil, it just works.

On paper with a pen :)