Web Design Workflow Made Easy

Share this article

In my web career, I’ve gone from managing a few complex projects at a time, to juggling a large number of smaller ones. Selling your services and fulfilling that service both require a systematic process to getting things done.

When I ran my web business, we built higher-end custom sites, so it was rare to have more than three or four in process during a given month. Today, with 40+ reps on the street selling our products, we see that many arrive on a daily basis.

Whether you manage one or 100 projects a month, you need a process. With complex design and development jobs, no two are the same. The key is identifying the aspects all projects have in common. These are known as milestones.

For example, regardless how simple or complex a custom build was, every project we undertook required preparation, planning, graphic design, HTML coding, and final client review/approval. Once we recognized this, it was simple to create milestones and develop a workflow. Here’s what we came up with:

Preparation Phase

  1. Gather client content
  2. Register domain
  3. Deploy client extranet

Planning Phase

  1. Write project plan
  2. Create site blueprint
  3. Establish project timeline

Graphic Design Phase

  1. Find stock images
  2. Create site design mockup
  3. Post mockup on extranet for client review
  4. Revise mockup based on client’s input
  5. Obtain final approval on design

Build Phase

  1. Review client content
  2. Slice mockup into images
  3. Create master HTML template page
  4. Create CSS stylesheet
  5. Test and tweak page in supported browsers
  6. Create additional pages from master HTML template and add client content to each
  7. Build and test contact form

Review Phase

  1. Submit site for client review
  2. Revise as needed
  3. Obtain final client approval

Not every site required back-end programing, but when it did, the “Programming Phase” would occur after the “Build Phase.”

Managing a greater number of less complex projects (with more people involved) requires a different set of milestones. Today, my department’s workflow looks like so:

Pre-Production

  1. Register domain
  2. Create (physical) job folder
  3. Enter job into Production spreadsheet
  4. Place folder in queue to await production

Preparation

  1. Choose a template
  2. Set-up local folder and project files
  3. Find stock images, if necessary; or download client files from CD
  4. Create hosting and FTP account
  5. Submit intake form to copywriting department
  6. Assign project to in-house or outside team member

Production

  1. Obtain website copy from copywriting department
  2. Create pages from template and add client content to each
  3. Embed map, if appropriate, and customer video
  4. Set up and test contact form
  5. Add title tags, META description and keyword tags to each page
  6. Point domain to host servers
  7. Create Google Analytics account
  8. Create and submit XML Sitemap

Approval

  1. Contact client for review
  2. Submit revisions to designer
  3. Contact client for final approval
  4. File job folder

Having a workflow with established milestones allows you to take project management to the next level—tracking the status of each job at any given moment. Next week, I’ll give you some tools to do just that.

John TabitaJohn Tabita
View Author

Former owner and partner of web firm Jenesis Technologies, John is currently Director of Digital Strategy at Haines Local Search, a company providing local search marketing solutions to SMBs, including print and Internet Yellow Pages, web design, and local SEO. When not working or spending time with his family, John offers great sales and marketing advice on his blog, Small Business Marketing Sucks. When not working or spending time with his family, John offers great sales and marketing advice on his blog, Small Business Marketing Sucks.

Share this article
Read Next
Get the freshest news and resources for developers, designers and digital creators in your inbox each week