Everyone has their own process by which they design and develop websites, and often it will vary slightly or even largly with each client. But for those new to webdesign or just wanting to see how others do it, this is how we at mikehub.net design our sites.

1. Get briefed

A client will always want a quote before deciding whether they go with you or someone else. But to do this you need some information. Unfortunately some clients assume that an e-mail saying "Quote me for business site, 5 pages" will get them an accurate quote. This is not the case. Here are some things we look out for:
  • client's objective/point of the site
  • what exists, i.e. logos, corporate identities, designs
  • what content is wanted on what pages
  • type of navigation/site structure
  • must some or all of the content be editable by the client (Content Management System)
  • are other administrative backends needed
  • timeframe
  • client's budget
  • existing domain and/or hosting and features (PHP, MySQL, etc.)
With this information you can now create a relatively accurate and detailed quote. Important things to include in the quote are: a synopsis of the site, approximate number of pages, special features (CMS, flash, blog, gallery, etc.), hosting details if required, and a breakdown of how the final figure is derived, i.e. if you work on an hourly rate just put down X hours at Y/hour.

Also important in the quote is to have a few sentences covering the legal stuff, that its non-binding for the client, that if they accept it they must pay a deposit (if you choose, and specify the percentage) and that any major changes to the brief will affect the total cost. If you want to be absolutely sure leave a space for the client to sign so you have their written consent (apart from an e-mail).

2. Get Designing

While you're waiting for your deposit you can start working on some designs. Usually client's are trustworthy enough to not have to worry too much about the deposit being there before doing anything, in fact if you get going and deliver some results quickly they will be more inclined to pay you your deposit punctually.

So off the design process. We use Adobe's Photoshop, as most webdesigners do, and start with a 960px wide design. Now you will do this however you do, we will wireframe with a pen and paper for a few minutes, usually already having something stuck in our heads, maybe even skip the wireframing, and then just start out in Photoshop.
You will realize that as you go along you will notice you change things to how you planned, add new tweaks and eventually will come out with a nice design. This is great, however your client will probably want some choice. This is the tricky part. After developing a design you really like you must know come up with two or three alternatives, at least one of which can be the same design with a different set-up (vertical instead of horizontal navigation for instance, and some other minor changes).

In the end you will likely have one or two designs you really like and the rest you're just sending along for the client to choose from. IMPORTANT: While you might not like the other two designs, make sure they look professional and good nontheless, as you want your work to appear consistent and not rushed. Your client might even prefer that design to your favourite.

Once your client has found a design they like and maybe you have adapted it once or twice more you can go on to step 3.

3. Get coding

Now you have your design it's time to break up that Photoshop document and put it back together with HTML.You are now creating a mock-up for your client to actually look at in their browse, click the looping links and maybe see the flash in action.
Again, you will do this according to your process, we usually start with the structure of the site from the top and work inwards, create the whole site as a wireframe, coding the CSS in parallel and then add the header, nav, content and footer as we go along.

This is another important adaption phase, as you will run into trouble where you can't take things over from your Photoshop design directly and have to work around problems and find new solutions. Just create a homepage for now, point all the links to it so clicking won't kill the browser but not go anywhere either. And make sure it works in Internet Explorer as well!

This is when the client will usually give the last nod to the design and you go to step 4.

4. Get buzzing

This step will usually take the longest and can be extremely frustrating. Usually the client will provide the content, and oftent his can take a while. So while you wait for that just get going anyway.

Just copy and paste your hompage code to the new pages and then adapt, it, create all the links and point them in the right direction. Create the contact form and if necessary get going on the CMS. Luckily for us webdesigners that part is pretty much independent of our clients.

This step is where you will be changing a line of code, saving and uploading, then changing a line of code, saving and uploading (after you've created the pages that is), making sure the images all align properly, the text is free of typos and so on.

5. Get tested

Actually don't get tested but rather get the site tested. Sit down and spend half an hour clicking through every single link, filling out the contact form, testing the success page, the error messages, the CMS, look at the site in IE, Firefox, Safari on PC and Safari on Mac, Opera, Chrome and IE6 (using one of those simulator sites, or the real deal if you have it somewhere on an old PC). This is the phase where you fix the small layout bugs in your CSS and would probably remember to add all those Alpha-Channel PNG fixes to your stylesheet if you haven't done so yet.

Everything working? Great! Now send off the link to your client and wait to hear back from them.

6. Get it published

Your client e-mailed you back or called you or however you communicate, and said the site is great and they want it up immediately!

Perfect! For you this means:

  • Make sure you don't upload the index page yet, keep that placeholder there for now.
  • upload all the image directories
  • make sure all the internal references are correct (images, databases, links)
  • go through the pages all quickly (except the index) to check its all functioning
  • NOW overwrite the placeholder with the index and BOOM! you're live.

7. Monitor , adjust and update and invoice

Yeah ok, I didn't have any "Get.." phrase for this one. Now you will write your invoice, check the website every few hours to a. enjoy your work and b. make sure it's still there, make some adjustments as your client finds some errors in their text or you find an incompatibility, and update when the company adds a new employee to their staff page or change their address.

Mission accomplished, congratulations! Don't forget to ask for a testimony and referals to the client's affiliates in need of a website.

Fellow webdesigners, I'm sure you do it differently in some way or other or would like to add something. Please do so in the comments!

Mike