My Website Design Workflow
January 27th, 2009 (Culture, Web)
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:
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):
- Xara Xtreme
- GIMP
- Kompozer (or your favorite text editor…Vim anyone?). Matt Brett’s barebone CSS files are a good CSS/XHMTL starting point.
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:
- 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.
- 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).
- 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…).
- 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.
Update: I was asked the question about how specifically to export images from Fireworks. Here is a little more detail on the matter. I don’t typically export from fireworks as I don’t like the code it produces. Here is my process for getting the images themselves out of fireworks:
- Think about which images are background (repeatable) and which are static images. Think also about which need transparency and which do not (to think about ie6 compatibility issues)
- Select the image you want to export (make sure you set the optimize settings to something that will work for you – I use png 24)
- Copy the selection
- If it does not have/need transparency, paste directly into a new photoshop document and edit to size and then save for web and devices.
- If it does need transparency, paste into a new fireworks file, save and then open in photoshop (otherwise photoshop will replace the transparency with a background color – at least in CS3).
Once all of the images are saved into their proper formats, I build the HTML/CSS with a notepad editor – see this post for an update on the text editor I am now using instead of Dreamweaver.
I LOVE the new design of the website–it looks really professional. plus, I love how you’ve included some of your other work–it’s impressive!!!!