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

======
felipe
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?

~~~
theoutlander
MS Groove is pretty decent ....

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

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

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

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

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

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

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

------
danw
Paper and pencil, it just works.

------
ivan
On paper with a pen :)

