Everybody does things differently. When it comes to designing web applications, there is no single Right way to do things (though there are many Wrong ways). This is the first in a series of how I design an application.

John Gruber coined a great phrase, "Ronco Spray-on Usability" when referring to the practice of treating the UI work as something that can be applied at any point, typically the end. This is how crummy designs happens. If you've ever found yourself thinking did they put ANY effort into this at all? this is probably how it went down.

If you do not put forth a significant amount of thinking about your design, and not just at the beginning, it will be being sub-standard at best, and abysmal at worst. That doesn't mean you need to spend all of your project time thinking about the design, work in baby steps.

The 37Signals guys state that you should do the UI first, before coding, and I tend to agree. Perhaps the biggest benefit of this approach is that it keeps you from avoidable work. Say you thought you needed to sort an array of objects on different properties. But, while making the UI, you realized this was unnecessary. You just saved yourself the time that would have spent writing, debugging, and testing that feature.

The opposite can happen as well. In the process of designing the UI, it may become apparent that two previously separated components need to be more tightly integrated. This may create more work, but pays off by improving the user's experience. And ultimately, it saves you the time of implementing the incorrect model, then going back and changing it. Additionally, it is far cheaper to make corrections earlier in a design than later.

In order to marshal my thoughts about a design, I'll make simple lists detailing what will be on the page before drawing anything or opening an editor. If the page contains a basic CRUD form, I'll quickly jot down the needed fields, if only to keep from forgetting one when it comes time to write the code.

I prefer using a pen and paper, though a basic text-editor is fine too. I like paper here because mucking around is easier; I can scribble tiny notes next to my points, or cross things off. The key though is to keep it as simple as possible, so that it is easy to throw away. If you immediately dive into Photoshop or Visual Studio, you can become too attached to a bad design. A piece of paper or a .txt file is of no consequence and can be thrown out with only 15 minutes of lost time.

Once you have some basic ideas ready to go, it is time to proceed to the next step, The Sketch.