Web Design Workflow Made Easy

John Tabita
Tweet

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.

Free book: Jump Start HTML5 Basics

Grab a free copy of one our latest ebooks! Packed with hints and tips on HTML5's most powerful new features.

  • AnggaRifandi

    Planning is really important especially if we’re involved in big project with remote team.

    Hope one day SitePoint’s team will release how big company like Google or Microsoft design their workflow :D.

  • Nicher

    Very Informative and useful to my specific small business.

  • Anonymous

    Thanks, this check list make it easier for me to keep track of all steps involved in the design process.

  • Lisa Wise / Blue Iris Graphics

    This article rocks – what fabulous information! Thank you for sharing….

  • Anonymous

    Now we are seeing a blurring of the graphic design and build phases with the adoption of UX and responsive web design. Prototyping can be introduced.

  • Anonymous

    With responsive design and so many viewing contexts, one needs to start first with the content and a content plan, delineating content types and elements, THEN get into the visual design. Lorem ipsum-based design no longer cuts it with dynamic content.

  • Anonymous

    John, thank you for sharing this workflow!

    I was pleased to find your article. Especially, because I’m a big fan of workflows and currently I’m developing a tool http://casual.pm/ which helps visualize and manage project workflows. It works exactly as you’ve described here: helps you design flow of your tasks, then execute them with your team and reuse in future projects.

    I’d really appreciate if you take a look on it.

    Nick, Casual.pm