Share!

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! Click the link below to download it!

Client and Web-Project Brief Template: Download (.zip) - 34kbs

Advertise with us

Author

Kitty Florido is a graphic designer and photographer from Guatemala. She is the creative mind behind Design Backslash, one of the two foodies at The Foodies' Kitchen and loves traveling.

  • http://azzcatdesign.com Catherine Azzarello

    Thanks, Kitty. I like your Brief. Will be tweaking mine again, too. Work-in-progress! ;-)

  • http://claytoncorreia.com Clayton Correia

    Good post. I'm going to have to check out Billings.

    One thing I've recently done is added a content deadline for clients in my contract. I make sure that clients understand that if they don't for the content for the site done on a specific day I have to move onto another project.

    It has helped a lot for keeping things moving on the client end of things.

    • http://azzcatdesign.com Catherine Azzarello

      I use Billings, too. But it's not easy to style for proposals, etc. I now use WP Bids for proposal delivery. I set up my Blueprints in Billings, and copy/paste them to my WP Bids template. Send client the URL link and we're off!.

      WP Bids is a new WordPress theme that serves as a proposal application. I wrote about it last week: http://azzcatdesign.com/blog/web-design/wordpress-the-app

      • http://www.designbackslash.com Kitty

        Catherine,
        I decided to go with Billings for the proposals too so I can keep perfect track of everything. I didn't know about WPBids! It looks clean, straightforward and with the contract attached at the end. Will take a closer look to it! Thanks for the suggestion. That was a great review, thanks for the link!

  • http://www.designbackslash.com Kitty

    Catherine,
    Glad you liked it. And yes, it's always a work in progress- custom made for each client and project!

    Clayton,
    That's a great tip! Will take that into consideration. Sometimes projects stall because of lack of communication between the client and the designer/web developer. I tested out several Finance apps, but Billings was the winner for me. Specially for the integration with the address book, functionality overall and killer graphics :)

  • http://www.myintervals.com John

    I've heard a lot of great things about Billings from other Mac-based designers I went to school with. You really can't go wrong with it. However, if your team is working on multiple platforms it may be wise to check out a web-based time tracking / invoicing app. I would highly recommend taking a look at Intervals, which was built by web designers and developers who've spent a lot of time in the trenches.

  • http://www.myintervals.com John

    One thing I forgot, feel free to download our free web design and development contract. We've made it available as a PDF for anyone who wants it. Tweak it all you'd like and use it for your business. It's been vetted by 300 client projects so it's a pretty solid contract, and we want you to have it.

    Download it here:
    http://www.myintervals.com/blog/2009/02/10/steal-this-web-design-and-development-time-and-materials-maintenance-contract-template/

    • http://www.designbackslash.com Kitty

      Hi John! Thanks for that tight contract and the suggestion for Intervals, I'll check it out! Since I'm a one girl business, I'm ok with Billings, but this will def work for designer firms that have more than one person doing invoicing.

  • Jessie

    Nice read and it's really helpful especially I'm very new to all these contract and brief stuff. It will be good to safe guard myself with all these and not let clients take too much advantages of me. Will be making use of it.

    Thanks for sharing kitty, really appreciate it.

  • http://None Ari

    Very well written and informative. Great tips. Thank you for taking a dry subject and giving it life.

  • http://www.shekhardesigner.com $hekh@r

    Wow articles. helped me alot.

  • http://www.vinodsobale.com vinod

    Nice.

  • http://www.websolpk.com imran khan

    Thank you so much!! for the bundle of information..

    Learned alot..

  • http://matmacquarrie.ca Mat MacQuarrie

    What a handy post for any web designer to have. Nothing quite like having a project checklist to optimize productivity and insure smooth progress. Thanks Kitty :)

    Cheers,
    Mat

  • http://www.designbackslash.com Kitty

    Let me know what other topics would you like me to write about. I though this list would be helpful to all the designers starting to get their hands dirty on freelancing.

    Jessie, it's very important how you set up a pace with the clients regarding communications, billings and feedback. Glad I could help!

    Mat, glad you enjoyed it. It was a fun topic to write about!

  • http://www.davidairey.com David Airey

    Good of you to mention my posts, Kitty. Thanks very much.

    • http://www.designbackslash.com Kitty

      David, your knowledge is very much welcomed in my office! Thanks for having all available to everyone!

  • http://www.chorng.com chorng

    this article is definitely helpful, like especially the point 4. cheers!

  • Pam

    Awesome tips!

    Oh, I never knew that handling a web design project need so many initial steps and preparation. I always think that these type of work are bothersome and never really care much about it. (That's why I'm always on the losing end). I guess "fail to plan is to plan to fail" really works here. I think I should adopted this steps from you.

    Kitty, thanks for sharing!

  • Mike

    Your article is good, very useful for me, We are all looking for part time and home based jobs.

  • http://www.designbackslash.com Kitty

    Chorng, Glad you liked it.

    Pam, it's mostly a fail/repeat/success cycle for me. I grew up to these steps organically throughout the years and thought I'd share! Let me know what other topics you'd like me to cover!

  • Larry Pollic

    Great article dear! Very well written and thorough and I am sure it will be helpful to me when I finally find the spare time to do so home business lol. I have bookmarked this baby and plan to refer to it often, thanks gorgeous!

  • http://www.opacitydesign.com Chris Hayward

    You should try http://www.protoshare.com. Not a shameless plug, we use these guys for planning all of our websites and it has been an amazing tool.

  • http://think256.com/ Eli Gundry

    This article is beautiful. This site is beautiful. If this site was a woman, I would kiss it. I'll do this site one better: RSS subscription. *Subscribed*

    On a more serious note, part 6 killed it for me. Nothing bothers me more than a client only taking a passing interest in the quality of their site. Thank you so much for putting in to words what has been on my mind for what seems like forever. I'll be sure to make a point of this to every client I work from now on.

    • http://www.designbackslash.com Kitty

      Eli,

      I've found that making the client feel comfortable and making it his/her time to evaluate one last time the site before it launches, makes it so much better at the end. Make sure you schedule that meeting before the weekend, so you can say, you can check it online and let me know what you think next week... Something to make them feel comfortable, and also let them know that you'll check the site too: typos and little things... the client needs to know that you are willing to go that extra mile for them. Works every time! :)

  • http://www.facingpages.com.br Camila

    This article is great. I just found you guys out on the web, congrats, you do a fantastic work! =D

  • tepalastroy

    Awesome website