Get Real Step by Step

Brainstorm

Come up with ideas.

Paper sketches

Sketches are quick, dirty, and cheap and that's exactly how you want to start out. Draw stuff. Scrawl stuff. Boxes, circles, lines. Get your ideas out of your head and onto paper. The goal at this point should be to convert concepts into rough interface designs. This step is all about experimentation. There are no wrong answers.

(I've never understood how, let alone why, to make brainstorming and sketches separate steps.)

Create HTML screens

Make an html version of that feature (or section or flow, if it's more appropriate). Get something real posted so everyone can see what it looks like on screen.

Don't write any programming code yet. Just build a mock-up in html and css. Implementation comes later.

Code it

When the mock-up looks good and demonstrates enough of the necessary functionality, go ahead and plug in the programming code.

During this whole process remember to stay flexible and expect multiple iterations.

From 37Signals' Getting Real: "From Idea to Implementation"

At Agaric Design Collective we usually do functionality first and looks later (for any particular feature– we always get the overall design of the site in place before all the features are added).

I don't know what the advantage of this approach is, but I like it because I'm a programmer: make the designers get started first!