At the simplest level you require just a pen, a piece of paper and a bit of imagination. Fortunately there are some more high-tech yet still quite light tools available that offer some nice benefits. In this post I'm going to discuss some of these tools in more detail.
Besides "pen and paper" I'm going to cover iMockups, Balsamiq and FlairBuilder. iMockups is available only for iPad while the latter two are meant to be used on your desktop computer. I'll also discuss some other alternatives briefly.
Pen and Paper
|"Pen and Paper" by LucasTheExperience|
Traditional media has its downsides of course. It's pretty hard to share your creations. You'll need some kind of a camera or a scanner to get the creations digitized and online. There's also no undo. Life would be too easy if there was one.
Despite these drawbacks I believe pen and paper still work well at least for the initial concepts. After that you can always go digital if you feel like it. If the concept has been designed just for your consumption only, there might be no reason to go digital at all.
|Sample output. Flickr.|
The application complements traditional tools well. Once you've nailed the basic concept on the paper, it's relatively easy to redraw it using the app and continue to develop it further in a more formal manner. It is possible to share the work easily simply by emailing it either as a project file (requires the app), pdf, bmml (Balsamiq format) or as a zip containing jpgs.
I think the app would be a lot better if they made it possible to define some kind of a "master" layer that remains behind each defined screen automatically. That would make it easier to share common elements between views. I would also appreciate freeform sketching related functionality (separate sketch layer?).
|Balsamiq Screenshot by ZhangYining|
They're apparently developing a cloud-based version of the solution. This should make it easier to collaborate over the web. They're entering a crowded space given there are at least a few services like this out there already. I'll get into these in a bit.
|FlairBuilder output. Flickr.|
There are a set of tools that go way further in some ways that the ones discussed. Of these I would like to mention Jumpchart, ProtoShare and InVision in particular. These applications move wireframe development to the web (cloud!). This makes it easier to collaborate with your team. It may also allow new ways to develop projects to emerge.
I'm particularly enticed by the approach used by ProtoShare. You can start out with a low-fi version and then iterate it with your client till you end up with a high fidelity result. I also like the fact that you have access to actual markup and styling. This can be a particularly powerful feature.
I touched just the tip of an iceberg in this post. You might want to check out the "Ultimate Guide to Website Wireframing" for a more comprehensive discussion on the subject. You'll find more alternatives there. I'm really curious to hear about what tools you use by the way!
The method and application you should use depends always on your situation. If you are planning something just for yourself, pen and paper will probably do just fine. If you need to collaborate on a higher level, you might find particularly the new cloud based solutions interesting.
I think we'll see more and more solutions that bridge wireframing, prototyping and actual development work in a more concrete manner. Applications such as ProtoShare already do this to some extent. It looks like it's an exciting time to be a web developer.