My Web Design Work Flow

gravatar
By Sarah
 · 
October 12, 2008
 · 
5 min read
Dock

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.

Comments
My work Flow is usually quite good with regards to the Web design itself, i find my time is strained doing link building and article writing, plus i always hit a writers block. It’s Frustrating sometimes.
Damien
hey, sistah…thanks for all the industry info and tips articles here on the blog (pretty much reading them all this week)…i just switched to coda and its pretty fun…i have been looking at it on and off for a couple of years and was not really stoked, but i did the trial last month then couldn’t go back to my old workflow when it ended…i think the difference is that i am doing mostly WordPress instead of static code now…so the workflow apps list went from taco html edit, safari, ff, transmit, fireworks (for images) to mamp, coda, fireworks, ff, and occasionally balsamiq/napkee…so far so good…rock on, peace and love from the land of j^pan (any plans for supporting yen/¥/jpy in olive?)
Hey Sarah,
I see that you’re using Skitch and one of folks here mentioned Basecamp so I thought you’d like to check out Freshlog:
It’s like Skitch with the ability to create Basecamp Messages and Todo list items WITH screenshots and a list of other supported issue trackers, check out the screencast:
What about the current Address Book do you not like? If you give some examples of things you’d like to do, but find difficult, perhaps I can suggest a more appropriate tool?
Glad to hear someone else out there is using Fireworks. For all its faults, I find it perfect for web design!
Also, I’d love to see a copy of your pdf proposal — I’m currently trying to set up something similar, but don’t quite know where to start. Seeing an example would really help!
[…] inspiration for this post came from Sarah Parmenter’s post, My Design Workflow, and Ryan Taylor’s post, Web Design Workflow […]
It’s great to see how other designers work Sarah, thanks for sharing.
I used Dreamweaver until recently when I converted to a Mac and now I’m on Coda, mainly because there seems to be a lot of buzz around Coda, but I quite miss Dreamweaver.
Transmit, CocoaMySQL, MAMP and Parallels (for IE testing) would be a few other apps I use. And I quite like TextMate when it comes to Ruby on Rails.
Nice post Sarah, I’ve lost count of the amount of times I’ve written a proposal only to be then told the budget they have which is nowhere near my quote – glad to hear I’m not the only one that has experienced this.
Interesting post Sarah. You’ve inspired me to write my own blog. 🙂
I’ve always had this unhealthy obsession of discovering other designer’s behind-the-scenes process as well and it’s great to know that I’m not the only one that develops this curiosity.
For starters, I’m not a fan of occupying my dock with all frequently used applications, so instead I resort to utilizing a fantastic application launcher called Sapiens. For development, my weapon of choice is BBedit and anything involving imagery, our trusty Photoshop.
Sarah – interesting that you provide a ‘rough’ price first and then a formal proposal after. I too have lost a fair amount of hours doing quotes for people who just instantly baulk at the price.
However, if your rough price is say £2,000 – but when you look it it a bit more closely it’s more like £2,500 – how do you justify to the client that the rough price has gone up? Don’t you find clients a bit suspicious of that?
Hey Sarah, cool blog.
I have two design processes, one for sites and another for apps. For a site, I design it in Photoshop, get the client to sign off on it, then convert it to XHTML and CSS using Aptana. For an app, I go back to good old fashioned paperware designs. I find it’s the best way to map a process. For web apps, the client is usually more concerned with how it works then how it looks, so there’s less of an emphasis on the graphic design.
I’ve recently started to use version control on all my projects. With Aptana I can commit straight to version control from within the editor, and then using Hudson, a continuous build system which monitors the source code repository it rebuilds the test site each time there’s a new commit.
Setting it all up was a little tricky, but I’d highly recommend it. Now that it’s all up and running, it’s dead simple to revert to a previous version or undo a new set of changes because the client changed their mind (which happens a lot).
Here’s a couple of links to some useful resources for setting it up.
Aptana Studio – really great alternative to Dreamweaver (especially if you used it as a glorified text editor, like I did)
Subversion – Awesome version control software. Used best as a hosted service, so you can access it from anywhere.
Hudson – A continuous integration system that can be used to monitor your svn repositories and upload any changes to an ftp site. Very handy!
This stuff comes into it’s own when you start to work on projects with other people. You’ll never need to worry about overwriting someone else’s code again.
FYI, I’m not affiliated with any of these sites in any way.
I’m a big fan of Photoshop for mocking up. I tend to find Fireworks is great when it comes to slicing and dicing into workable, codable parts (afterwards), but there are just somethings you can’t do in the big F, especially when it comes to colour control. There are also one or two little things I just can’t grasp about the interface too, but that’s probably just me being inept. That said, the text control drives me insane – is it just my mac, or is it definitely not possible to skip to a font by pressing the first character of it’s name?
Like Sulcalibur, I start with pen and pads, then fire up PS, export and create variations of elements in in fireworks then export, and finally handwrite the code in Dreamweaver. I do know people who say they would never employ anyone who still codes in Dreamweaver, but I agree with you, Coda just isn’t as comfortable to drive. DWs Ctrl + T is just too valuable to my workflow…
For client management I probably spend too much time writing out completely custom proposals, though I do ensure my email trail is comprehensive and make sure everything significant is agreed in writing rather than on quick phone conversations and Skype calls. I’ve got invoicing down to tee – a combination of Billings and my own invoicing app. I run bigger projects using ProjectPier which isn’t as neat as BaseCamp, but it does what I need.
Things, BluePhoneElite, Parallels, iCal, Transmit, Address Book, SugarSync and Data Guardian are my other key work apps, and I should probably go back and rewrite my a-bit-outdated personal ‘Essentials’ article to include them all someday (https://justbeyondthebridge.co.uk/blog/2007/02/23/macbook-essentials/).
It’s interesting to see other peoples’ workflows -with this sort of thing with you always end up picking up something worthwhile you’d not though of before… hmm… wireframing in keynote…
Thanks for the tip on separating the design concept cost from the development in the proposal – wish I had done that with my last client!
No paper sketches in your workflow? I find I need the freedom of (small) sketches to try out different ideas. Then I tend to go to CSS/XHTML for layout & typography, take a screenshot of that and use it as a background “guide” layer in Photoshop.
For me, TextMate and FireFTP are all I need for editing and uploading. You didn’t mention IE testing — the bane of my existence. For that I use IETester (for which I have to run VMWare Fusion on my Mac to have Windows XP available.)
Other things I can’t live without: OmniOutliner for brainstorming, Things for keeping track of short term todos, Illustrator for logo design, Jquery for making my sites cooler and more fun to code, SVN for keeping me from losing things, Twitter for keeping up with the cool kids, iChat for talking to my business partner, Firefox and all its nifty add-ons (Firebug, Web Developer, MeasureIt, Screen grab, Dummy Lipsum, LinkChecker) so I never fire up Dreamweaver anymore…
I find Crimson Editor great for coding HTML/CSS – it’s lightweight and , and have recently started using Inkscape for design – as useful as it is, I dislike layered artwork!
As you say, good to see how other designers work.
My main call is good old pen and paper. I use this ancient technology for most of my ground work. I have folders for each client to in a filing cabinet right next to my desk, so if anything happens I pull it straight out and have all the reference material needed.
I also have a sheet of questions and gaps to fill in the answers for when I get any phone calls. This stops me umming and arrring and sounding like a tool.
I have a few apps and techniques that if I remember and get time I’ll post them up.
Dor
Nice work flow summary. It’s indeed very interesting to hear other web designer’s work flows since it’s a job most people find learning by themselves.
I don’t use fireworks instead of photoshop since photoshop can do exactly the same as fireworks and beyond. So I see no point in using both.As a “task manager” I use iCal as a calender and as a to do list app as well. I find it very easy to have both things in one app. Adium is indeed a very handy app as well.
I have been working with Dreamweaver for about 2 years now and found it the best text editor since it had web view and code view very well organized. And like you, I used it as a text editor only. Unfortunately, lately Dreamweaver has been a bad boy to me and was working really slow. So I had to move to Smultron ( https://tuppis.com/smultron/ ) – a really simple and powerful text editor which really focuses me in the code which also works amazingly great with FTP files etc. Another reason I moved to such text editor was since I wanted to write every single letter myself (for the practice’s sake). Dreamweaver on the other hand completes my code and usually makes a very messy code as well.
So if one day you’re tired of Dreamweaver, I highly recommend you try Smultron.
Anyways, that’s my voice,
liked reading the article.

Leave a replyReply to