When I was teaching web design at a local college many of my new students asked me, first thing, if they should buy Dreamweaver. Often this happened during a phone call before the first class even started.

Before I address that question, I’d like to bring up a couple of common misconceptions at work here. The first, and more obvious one, is that you need a top of the line program to make a small website. The second is that most of “web design” work is done with a web design program. It isn’t.

Jim, a professional illustrator with whom I have worked, sent me an email yesterday, asking if I would be interested in collaborating on a website for a client of his. He sent me the URL of the client’s existing site.

Obviously, I looked at the site. So, to start with, I’ve used Mail and Camino. I called Jim and during our conversation took down some notes in TextEdit. Then, after he and I talked, I set up a new client in Address Book, which I linked to in my time-billing and invoicing application, iBiz. I also scheduled two tentative dates for the three of us to meet. iCal to the rescue.

Assuming that the meeting turns out well, I will spend time with an Excel spreadsheet, estimating my bid. Then I’ll use a Word boilerplate to write it. Provided the bid is accepted, there will be more boilerplate contracts and agreements to customize and print. Add Print Utility to the program list.

What does all this have to do with web design? This is the way an independent designer spends most of the day.

Before the first line of HTML is written there will be a lot more writing in both Mail and Word, or maybe the client will want to send me text in Microsoft Works. MacLinkPlus will have to convert that for me if she can’t figure out how to Save As with Rich Text Format. Don’t laugh. That is not an uncommon occurrence, Mac or PC. I have to keep a copy of Appleworks on my computer for the same reason.

Still dealing with words, I often get copy submitted as printed documents and have to use ReadIris OCR software to turn them into something I can use.

We’re still not even close to HTML. The longest phase of any project is where we gather content. There are photos, text, illustrations, logos, and possibly media files to collect and create. This is where the real work is concentrated. As much as 50-60% of any project can be involved in the content creation and gathering phase. If you are doing your own website, it will probably be more.

None of my students ever believed me when I told them this in the first class. By the end of the quarter they were sick of writing.

If you want your site to be optimized for search engine placement there is a fair bit of research to do too. The site Jim and I discussed won’t need it as it is mostly about putting an online calendar up for walk-in customers. But if you plan to reach a non-local market you will be back working a lot with your web browser. And if you really want to get a handle on SEO, you will benefit from a dedicated program like Advanced Web Ranking, which is good for both keyword research and page effectiveness tracking.

And we are still in the planning phase. I like OmniGraffle for creating the site structure diagram(s). Do plan your site structure before you start. If you have more than a few pages it makes everything much easier. I use OmniGraffle for wireframes, (a fancy word for determining what goes where on a page) too.

I strongly believe that form follows function and I want to lay a page out for function, flow and format before I start thinking about what the actual design will be. I take both my document structure and first layout draft from my wireframe. If different sections of the site need different structure, I’ll find that out before designing, which can save a lot of time later.

Now we start with Dreamweaver, right? Not yet. I do a page mockup of each design for the site in Photoshop. As with all the programs I mention, I’m not saying that this is the only or even best option. It’s just what I’m most comfortable with.

By now, I’ve also spent some time working with the Finder, setting up a site folder with appropriate sub folders. I have a folder for Photoshop layered files, a folder for site notes, a folder for unprocessed photos and another for text documents. More and more often, I need a media folder too.

Then I set up the folder that will actually hold the site documents: HTML, images, JavaScript, style sheets, Flash or other media. That folder structure needs to mirror the final site directory. Web servers call folders directories. It’s a Unix/Linux thing. If I’m going to use a content management system, the files will have to live within the CMS’s directory structure.

With this project, Jim will do most of the design work and send me either Photoshop or Illustrator files. I’ll slice them up for the images I’ll need for the pages and place them in my site folders before I write the first line of code. If I design my own sites, that’s more time in Photoshop. I’ll also use Photoshop to sample page colors and write those down in a notes page.

Now, finally, it’s time to create the web pages. As I’ve gotten away from table based designs, I’ve also gotten away from Dreamweaver as my primary web design tool. I imagine that’s true for most designers who prefer CSS. Until the latest version came out, Dreamweaver actually got in the way for CSS based work.

My primary design tools are skEdit for the HTML and StyleMaster for the CSS.

Since this site will probably end up in Website Baker, a CMS, I’ll create a couple of templates, variations on a theme. If I were doing a static web site I would import the templates into Dreamweaver to add content. Dreamweaver is fine for managing a site and adding text and media to the designs I create with StyleMaster. And using Dreamweaver templates handles some of the separation of design and content that a content management system does on the server.

I’m imagining that out of the entire project, I’ll spend 4-5 hours actually creating web pages on this site. If the client is happy using the same design on each page it will be closer to 3. That’s my average time turning a Photoshop design into a HTML/CSS document. If she wants JavaSript or Flash elements, that’s another step I won’t do with Dreamweaver.

It might take another hour to stuff the design into a Website Baker template and test it. If she wants every page unique, it will obviously take more time. Most people don’t. Since I do this often, I’ll be a lot faster than someone doing only one site. But that relative difference in time will extend through the entire project. Percentage of time in each phase will be similar.

Next step is getting the site to the server. My favorite file transfer program is Yummy FTP. Depending on how large the site is, upload might take some time but that process is mostly automatic, start it and let the program do the work.

For my own sites or those I maintain for non-profits, most of my time is spent writing. For that I use TextWrangler. With the addition of a plugin, Markdown, I don’t even need an HTML editor to format my text 99% of the time, Markdown with its simple markup, will write the HTML for me, much, much more quickly than I could format it using a web design program like Dreamweaver.

So, for a typical project, I’ll spend maybe 25% of my time actually doing “web design.” At least 50% is spent writing. The other 25% is image editing and project management. Flash is a totally different animal and needs its own discussion. This is billable hours I’m talking about. There is also a bunch of time spent communicating with the client that isn’t billable. And all this time doesn’t count regular business chores that can take easily half of an independent’s working life.

So, as as professional web designer I average less than 9 hours a week, doing “web design.”

Oh, don’t buy Dreamweaver for your business site unless your business is web design.

Possibly related:

This entry was posted on Wednesday, March 29th, 2006 at 12:44 am and is filed under Best Practices. You can follow any responses to this entry through the RSS 2.0 feed. You can leave a response, or trackback from your own site.