While I'm quite terrible at design (I'm a coder, if anything at all), when I do end up designing websites, the first step is sitting back and figuring out what I really want: what kind of content will go there, who's the expected audience, what are my priorities (display speed, download size, bling, you name it).

Once I have that down, it's a lot easier to figure out a design. It's either pen & paper, but I can't recall the last time I actually drew a design on paper (I'm even worse at hand drawing than I am at design), or I fire up a tool I can make a mockup with: gimp, inkscape, dia - either works, and it depends on how detailed or how quick I want the mockup.

Once that's done, I convert it into HTML + CSS, and sprinkle it with javascript magic if so need be.

Meanwhile, since I do design iterations in bursts, more than likely, I will have the backend code ready aswell, and I will only need to convert the mockup to a template, and done.

One thing I used to obsess over when I did freelance web design was getting the design perfect. Every site had to be a work of art...just the right size buttons, just the right radius on the round corners, just the right opacity for a drop shadow. Then I realized that for the most part, users don't care. If they did, there wouldn't be so many people using Internet Explorer. And the search engines really don't care (...yet). More important than having a pretty design is having useful and relevant content.

Now that I realize that, I take a utilitarian approach to design. As long as the design is clean and the information is presented logically, I don't really stress over design. These days I use a lot of templates from ThemeForest.net, or quickie templates my team in the Philippines can do in about 3 hours for about $12.

When designing something from scratch, my process goes from a bit of sketch on graph paper to a Photoshop mockup. I'll let that stew for a day or so and tweak it here and there, maybe share with some friends for feedback, and then start coding it. I generally put all of the main elements into a structure and use FireBug to push things around to where I like them!

For redesigns of existing sites, it's more an exercise of rearranging elements that are already there so I -may- go into Photoshop and see what I come up with or I might just go straight into FireBug and move things around to get a general sense of where I want to go with it. This is especially helpful for proposing (quick) design changes to a client.

I'm a newbie and have been designing from the code up. I'm starting to design pages now from a blank sheet with red pen and I agree with you, it seems to allow for more options.

I try to do everything at once. It doesn't end well, so there should be plenty I can learn from in here.