Although I’ve been programming for the web since 1999, I’ve only been doing website design for the past year. I was handed the Adobe creative suite for the web, so that is the software package I based my workflow on. As much as I like FOSS (free open source software), I think Adobe products just do the job a little bit better than their free alternatives. So, here are the programs in particular that I use in my web design workflow:

1. Fireworks
2. Photoshop
3. Dreamweaver

If you want FOSS alternatives to these programs, here is what I would suggest (although I haven’t tested them with this particular workflow, so YMMV):

1. Xara Xtreme
2. GIMP
3. Kompozer (or your favorite text editor…Vim anyone?)

Now, I also use Flash for animations and interactive content, but I like to use this in limited amounts and am going to try in the future to use more AJAX instead. If anyone has any AJAX toolkit recommendations, I would love to hear them.

OK, now that you know the programs I use, here is a brief overview of my workflow using these applications:

1. I begin with fireworks and lay out the entire page. If I know all of the content that will go on the website to begin with, I’ll lay out every page in the site as it makes it easier when visualize when turning the pages into code.
2. Once everything has been laid out and I’ve settled on the final design, I open up dreamweaver and use one of their page layout templates to get started. This just gives you a basic framework for the HTML and CSS of the page to get things started. I typically used fixed size layouts in either one or two columns (you should only use the number of columns that will be present on the entire site, not on an individual page). I’ll get the basic layout of the site (based on my fireworks design) set up in HTML and CSS (rarely using the actual WYSIWYG editor in dreamweaver).
3. As I set up the site in dreamweaver, I also cut out images from fireworks to use on the website by copying and pasting them into photoshop. Then, I’ll save these images for the web as their appropriate type (PNG, JPEG, etc…).
4. Once the site is all built as static HTML and CSS with the images from the original fireworks design, I’ll take this code and merge it with a default wordpress or drupal template. Then, I’ll fill in the rest of the content for each page in the appropriate content manager.

That’s it in a nutshell. I will be diving a little deeper into each of the steps of this workflow as well as giving you a few design tips that I’ve picked up in future posts.