8 Essential Steps of Handling Web Design Projects

So, you have a shiny new client. Time to start a new project with them. What to do? What are the first steps? Do you jump right into the job after an OK email - does that have the legal weight as a contract? There are many things you must do to get the project rolling until you get paid: From a services contract to the final payment.

In this article, I take you through the steps to do so. One friendly reminder, you can add your own steps here, these are the steps I usually follow and have been doing so for the last few years as a freelancer.

8 Essential Steps of Handling Web Design Projects

1. Getting it Inked: The Contract

The first step I take for every project is this one. In a contract you must go through topics such as:

Getting it Inked: The Contract
Image credit: julishannon

  • Project Description, Revisions and Layout: What is the client hiring you to do. And if possible, make stages out of it. This will give you and your client an easy guide to get the next items done. It's very important that you also have a number of revisions specified here. Designs can go back and forth countless times.
  • Payments: You can set up a payment schedule for the client (first use of the stages/phases). Most of the time I've found that if you present new clients with this option, the finance part of the meetings are much more relaxed than usual (Extra tip: Always ask for an advance, no matter who the client is).
  • Copyrights and ownership: Who will own the artwork created for this project and stock purchasing (fonts, photography, vector, PSD and theme or web template purchases).
  • Date and Time schedule: Set up milestones (second use of the stages) and final delivery date. As in most of my web projects, I've found that the final delivery date is never the one we've intended with the client. From missing it a day to launching the site two weeks ahead of schedule. Sometimes I take the blame, but sometimes it's the client’s fault: So, make sure in the contract there's a clause that can give you a couple of extra days or weeks if you miss the deadline.
  • Final Proofing and Claims: Here's where the safety for you lies. Getting a signature or digital signature on the Final Proofing before you go live. This will save you headaches in case something was misspelled on the site, a code was wrong or anything at all. The client must feel confident and safe with you too. So, there's usually a 7 to 10 day claims period regarding defects or something not working correctly.
  • Project Cancellation: This is another safety net in case the project gets canceled. You need to cover your back regarding the time you've put into the project too.

There are many resources online on Creative/Web Developing contracts, but these topics are a must. Some of the contracts that you can go through as an example for your own are:

2. The Feared Briefs

There are many reasons why the briefs are overlooked by some designers and developers, the most common one is that it takes too long for the clients to fill them, so the designers usually go ahead with the project - Blind. First, you need to create your own Design Brief.This will be your guide to all of your projects.

The Feared Briefs
Image credit: snagt

It's not always easy to get inside the client’s head, and this will be your life buoy. It can be a very small brief, but with the right questions it will save you and the client time. This short but thorough brief will help you be able to set the tone of the project. You can fill it in in person with your client or over the phone:

  • Technical Specifics: Dimensions, alignment and type of width. Also make sure to ask about hosting, domains and if you are going to be the one uploading the final version of the site. I've had clients that would rather let their IT team do it since they know their way though the servers.
  • Content: Site tree and text (asked for it to be supplied in digital form), usually an Excel file does the work perfectly. Also the imagery used by the client (logos, icons, photography that they have the rights to use for the site) and all existing marketing materials (if possible also in digital format) so you can get the idea how they have managed the company communication and image in the past.
  • Creative and Marketing: Target audience, perception of the brand and the desired perception, style and tone of the design. Along with this, differences between their brand and the competitors brands and sites. Colors desired on the site and some sites of inspiration and reference from the client.

Here are some examples of Briefs you can look at as examples to write your own. The most important thing, is get all the relevant information that you can from your client:

3. Contract and Brief... Now what?

Well, go over the site map, brief and start brainstorming. It's important that you set up meetings or conference calls with your client, so they know how you are progressing.

Contract
Image credit: Dan Eriksson

If you keep your client out of the loop the first weeks, you will give them reason to be constantly asking you how things are going. If you are reachable during the process, the client will trust you even more.

4. Sending Invoices within the Payment Schedule

One thing I've done before is send some invoices a little late. If the invoice date is the 10th day of every month for 6 months, then that day make sure you send it over. It can happen that you forget that day, and that day turns into a week. For this, I've found that a calendar reminder (was using iCal at first) or an 'invoicing app' can be of great help. My personal choice is Billings: it can handle multiple currencies and set up recurring invoice reminders per project.

Sending Invoices within the Payment Schedule

Some projects are not fixed price but charged per hour. Invoicing applications are useful to keep track of the time on each project and how you price it. If you don't have an invoicing app, make sure to search for some. They are made to make your life easier (and make you a happy designer).

5. Half-way Through the Project

So here you are. The point where most of the hard work is done and now it's more tweaking than creating. Here is where the back and forth of the content begins. It's very important to set up at least one meeting with your client to make sure everything is on track.

Since you have the site tree and content in place, you need to start tweaking the little things, the details that matter to the final user.

Half-way Through the Project

This will be a good time to start beta-testing the browser with some lucky few. Important too, make sure that the testers are using different systems and browsers: Windows, Mac, Linux, Internet Explorer, Firefox, Safari and Chrome to name a few. You can check out Adobe Browser Lab, an all-in-one site that lets you test drive a site providing the exact renderings of the site on different browsers. Adobe Browser Lab is part of Adobe CS Live, a service that comes with the new Creative Suite 5 or you can buy the subscription as a standalone product.

6. Release Candidate Testing

When the site is ready and you feel that it can go live, test it out with your client: Page by page. I've found that this is much easier if you tell your client to take some time and browse and read thoroughly, in his/her own time - not during a designer/client meeting.

Release Candidate Testing
Image credit: hermannyin

This is because the client can do it over a couple of days or a weekend, and really unplug from the office to do so. If your client does it in a hurry, there will be a few claims - some even after the time frame stipulated on the contract.

7. Uploading the Final Version and Final Invoicing

Since designing and coding a site is not something you would normally do within a week, the fact that you send out several invoices throughout the project makes it perfect to help you as a time setting for the project.

Final Invoice
Image credit: greenspan2424

After the final revision is done, the final payment await, but your work is not done.

8. Maintenance and Follow-up Services

Offer your maintenance services tour client's site: from keeping the code up to date to updating product pictures. This will make it easier for your client to make changes on the site. Make sure to explain to the client that after the final version of the Web Project is updated, any major changes on design and content will have to be quoted and treated as a new project. I've done it before under the same project and sometimes we ended up with a different site altogether.

Maintenance
Image credit: Nikon-Itis

Don't make that same mistake! Depending on the client and project, you'll be able to determine if the follow up date should be a couple of weeks or months. Is this a client that will be updating its site information and products every other week? Or is it a business that won't be changing the services that they offer as often so it will be alright to call them after a few months?

There are many things that can help you get through a project, but the most important one is discipline. Try to keep the distractions to a minimum and you'll be getting projects in and out in no time! What do you do as a workflow when you have new clients or projects?

A Free Client and Web Project Brief Template

I have many briefs, that I use depending on the client and project I use. This is the one that I'm often using, and constantly tweaking it. I've taken reference of so many others around the web and keep on doing so. There's always an extra question you can ask to make your job easier!

Client and Web-Project Brief Template

Click the button below to download it!