I see posts on forums that I troll around at asking what the web design process should be. It’s often from newcomers in the business (usually those people I rant about who do work for little to no money) who have no real clue about being a web designer but decide to throw their hats into the ring anyway. I decided to review my process and share it for others and hopefully get some tips that I’m missing out on.

1. Talking to the Client

It all begins with the client. If there isn’t good communication from both parties at the beginning then the whole project is going to be like chasing your tail. It’s important to do what I call “The Client Discovery Session.” That’s a fancy way of saying, “Find out what the client wants, what they expect, etc.” If after you’ve gotten beyond that point and the client wants to hire me, I proceed to the next step, “Getting that Conctract Signed.”

2. Get that Contract Signed

Contract, you ask? Yes, a contract. If you’re working without a contract you’re asking for trouble. Not only does a contract protect the designer but it also protects the client. It outlines the expectations of the project, the delivery and payment schedules as well as copyright issues among other things. So if you don’t have a contract, get one and then get it signed.

3. Getting Paid Upfront

That’s right, I expect to get paid a percentage of the project upfront before beginning any work. This protects me from getting shafted for doing work then not getting paid for that work and it should also make the client feel better about the project because they have a recourse if the designer their working with doesn’t deliver. Unfortunately you hear client horror stories all the time that they work with a designer and then they never complete a project. The first question I always ask is, “Did you have a contract?” Often the answer is no.

4. Navigational Wireframes

A navigational wireframe is a very basic layout of the sites’ navigation—usually made up of gray boxes and text. In most cases there are no design elements in place at this point. It’s specifically there to show the flow of navigation and to get that hammered out before any design begins.

5. Navigational Wireframe Revisions

Pretty self-explanatory, the client comes back with any changes and then those changes are made. A newer version of the Wireframe is sent back to the client for them to sign-off on.

6. Design Concepts

I usually offer 3 design concepts for the client to choose from. This includes one concept for the home page and one for an interior page. I know, that’s really 6 but I like to count things differently. I do all design concepts in Photoshop. I never begin coding the site until a concept has been nailed down; it’s a waste of time for the most part. There’s one exception to this and that is if there is an element that cannot be represented without doing a quick CSS/XHTML mock-up. This is where the discussions with the client comes in and hopefully as the designer, you’ve listened well and are able to deliver without too many revisions. Speaking of revisions…

7. Design Concept Revisions

Any revisions the client may want are done at this stage.

8. Preparing Materials for Development

This is where I’ll take the final approved design and start slicing and dicing. I save all the images I’ll need for the site and optimize them in Fireworks. I feel Fireworks does at better job at compressing files for the web than Photoshop but that’s just a personal preference. I also begin setting up the server environment at this stage. Creating folders, installing any kind of web applications if applicable, etc.

9. CSS Coding/Creation

Next I begin creating my CSS file. Usually my CSS will be almost completed before I begin any XHTML coding.

10. XHTML Coding

Finally, I begin coding the site. I’ll also fine-tune my CSS file at this stage as well.

11. Site Testing

Before sending the finished product to the client, I will do site testing myself. I’ll make sure all the CSS/XHTML code is valid, make certain all links work, files to be downloaded are actually on the server, etc. After I’ve completed testing the site myself and 99.99% sure everything is working as it should, I send it off to the client to look over. Sometimes they will find things I’ve missed and there may also be changes they want to text, simple layout changes, etc.

12. Coded Site Revisions

I touched on this in the above step but often a client will see the “finalized” site and request small changes, which are done at this point.

13. Getting Paid… Again.

Once the client signs off and says they are happy with the completed product, I’ll invoice for the final amount due. This will often come around the same time as testing but it needed a place in the list.

14. Releasing the Site

After I’ve received the final payment, I provide the clients with all files they need and make the site live.

15. Deposit Funds and Eat a Donut

After I’ve completed the first 14 steps, I carry myself to the bank, deposit the funds and celebrate with a donut. You can replace this step with whatever celebratory event you’d like.

Hopefully this list will be beneficial to newbies, clients and professional designers alike. I find it important to have a consistent process for each project—it makes me more efficient and that is better for the client.