Making Web Mockups

A picture is worth 1000 words, right? In the world of web-based product development, this is just as true as anywhere else. I find that making a picture of a web-based product concept always helps identify the holes in the thinking, corner cases, and other what-if scenarios that are worthy of a discussion.

How do you make a mockup of your idea? It depends where your idea is in the process. Imagine you just thought of the latest and greatest new product concept that is going to help open new lines of business for your company. You might need to do a little more thinking before it's time to make a formal mockup. Or at least start with sketching out some flows at a high level - keeping in mind:

Who is the user? (And how many different users are there?) You probably don't need to get into a detailed persona exercise, but at least identify a brief description of what this person does with respect to your product and maybe their title or any other demographic information that's relevant.
What is the user's problem, or what does she/he want to achieve? Spell out the user's top goals one by one. Most of these should be something like, it's too hard to do X today so we want to make X simple. Or the user's boss is telling him to do something and he needs to do it.
How many steps does it take for the user do to this in a web page? Think about all the things he needs to do. Is it a wizard or is it a single interface where he can go off and do tasks asynchronously?

Once you have the basis of this kind of understanding, you should feel free to start sketching. Throw something on paper, and move it around until you feel like it expresses your ideas. Some PMs I know love to draw on paper, others feel more comfortable in the structured environment of a computerized drawing program. Some programs I recommend are:

PowerPoint: A generation of PowerPoint users has now learned that it's difficult to stuff lots of information on a PowerPoint slide. For mockups, I think this is a good thing. You should keep your mockups as clean and simple as you want your final web product to look.
Balsamiq: Actually, I haven't started using this myself, but many PMs swear by it.

One thing I can't stress enough is remembering the corner cases: what does the product look like the very first time someone uses it? How will they know what to do that first time? What if there's no data in their blank accounts? On the other hand, what does it look like for avid users with lots of data? How does it present the data - in a paginated way, or search-driven way? Be sure to mock up all three cases: the zero case, the middle-of-the-road case, and the avid user case.