My Web Design Work Flow


I’m always interested to hear other web designers work flow processes and the tools that help them along the way. I had the pleasure of meeting a few of my Twitter friends at FOWA last week and it’s sometimes inspiring to hear alternative methods or ways of approaching work that you may not have thought of before. For instance, Andy Clarke who likes to ring me up for random chats sometimes, has told me that he uses Keynote for wire framing websites. A use perhaps unthought of by the masses.

So I thought I’d run you through my work flow process and what tools I use along the way. I’d certainly be interested to hear other peoples too.

At the very start of a project when an enquiry comes in I always gather all the information I can about the new project, whether this be by email (Apple Mail App) or by telephone, I want to get the most specific information I can and jot it down. I always provide a ballpark figure on the project first, before any formal proposals are drawn up, just a simple email stating roughly how much the project, based on the brief so far, will cost and what is included in that cost (such as hosting, cms integration, the cms itself). This is something I’ve only been doing the past couple of years but ultimately can save you many wasted hours on long formal proposals just to be told at the end of it “Right, well my budget was around £200 for the whole site” – which can be quite common.

Once I’ve sussed out that the ballpark figure is ok – I then draw up a proposal template that I have saved in Adobe Indesign. This has pre-written paragraphs for every eventuality that a client could need, I simply swap the parts relevant to the client to their details and any specific needs for their project can be added onto any of the pre-written paragraphs. Although this took a good day to get right and is constantly being tweaked, it’s well worth it to save hours in the future. At the end of each section I put a total cost for that section so that they can see exactly how their budget is being spent. I also ensure I split the web design concept cost from the web development cost so that should they have not provided enough design brief, and come back to you after you’ve gone away and designed the site only to say “Well, I was thinking it would be more along the lines of insert very specific design brief here that makes you scratch your head and think, why didn’t you bloody provide me with this in the first place” – you can simply point out the website concept cost and explain that will need to be charged again. It’s much easier than having the whole thing bundled in one and then trying to backtrack and explain exactly how much of their budget is going on the initial concept designs.

Page 2 of my proposal I put my terms and conditions, Page 3 I detail very clearly exactly what I need to get started on their project, I always take a deposit of 25% of the total cost + any software costs such as Expression Engine, outright – that way, I’m never likely to be out of pocket should they jet off into the sunset.

I then bundle all this up as a nice PDF document and pop it over to the client. They always look awesome when they go out and give you and the client a great reference point for the future.

As far as design and development goes, I’m probably about to get my knuckles wrapped for what I’m about to say, I’m a big fan of Adobe Creative Suite. When I start wire framing a website,  which I’ve only started doing recently – and to be honest, I’m not sure whether it actually helps the client or me more – that’s perhaps another topic. I use Fireworks. Once this has been approved I move onto Photoshop and use a hybrid process of straight to xhtml/css or pure jpg flat concepts (nb. Andy Clarke has written a great article on presenting static visuals to clients) depending on the site/client.

For web development I use Dreamweaver – but, for nothing more than a text editor really, it’s what I’ve used since 1998 to build websites, although granted back then, I let the tables do all the work and it more than likely outputted very messy code, but hey, we’ve all got to start somewhere – it’s just what I’m used to. I’ve tried Coda, I just can’t get up to speed with it, I’ve tried Coda with Transmit and found that even more cumbersome so always end up back in Dreamweaver.

Other bits and bobs I couldn’t do without are Adium, for instant messaging, Twitterific, Things and good ol’Skype. I use iCal to keep track of meetings and events, personal and work, and MobileMe to sync some work up with the studio. I also use Skitch, Typeset and an app I couldn’t do without that comes with every mac, Digital Color Meter. For printed brochures/materials I use indesign and Illustrator.

I’m still looking for a better mac address book. For some reason I’m not a fan at all of the present one.

If anyone else has some great apps you think I’m missing or if you want to know more about my work process, I’d love to hear from you.