Illustrated Plan for a Web Design Project

Published on Mar 18th, 2011 by

Illustrated Plan for a Web Design Project

It’s admirable how this illustration of the average web design project plan condenses the essentials. It shows the common sequence, level of involvement, milestones, priorities and phases of all in one infographic. A source of inspiration and a good reference to base a template on.

Read on for my comments and the full size plan.

a comprehensive web project plan illustration in vivid colors, showing several weeks with associated generic milestones, indiation of importance and involvement is shown by varied size in elements of the illustration

The plan doesn’t show iterations which is often the case in smaller web projects, certainly if the back-end isn’t too complex you won’t be going back to a previous phase.

I find planning for iterations quite important so when constraints allow it, I make room for iterations at least inside the content, design and development phases respectively. If you’re adding buffer to your estimations, you’re already kind of doing this but it’s better to make it explicit. My guess is that they probably left the iteration part out of the illustration to keep it more coherent.

Also interesting to notice in the illustration is that they put the content phase before the design and development phase. Putting content first is not only smart, it’s the only way to do this kind of project properly. I’ve seen many projects where people insisted they wanted to do this the other way around, building the pretty box first and trying to fix stuff in it afterwards; bad order, costs a lot more too. And that’s a shame.

The infographic in full size … (right click on the links, save as … to download):
JPEG format Web Design Project Plan in JPEG


PDF format Web Design Project Plan in PDF


As an avid fan of visual communication I tip my hat to the fine people at Simple Square who made this, they specialize in portfolio website design.

I’m archiving this as inspiration for future project planning templates.

Latest Comments (12)

PPM Community – Programme and Project Management Community Blogs

[…] An Illustrated Plan for a Web Design Project […]

January 11, 2012 13:59 Reply

Journeyman PM

[…] An Illustrated Plan for a Web Design Project […]

February 1, 2012 13:17 Reply

Mounir Ajam

Nice work and it was timely for us since we are in the middle of redesigning our website. The concept of sequence and phases also matches our own PM Methodology (CAM2P)

May 30, 2012 16:01 Reply


Great visual of the process. Clients would love this brief overview showing project steps, milestones, and their own involvement. Thanks for the post!

October 29, 2012 20:43 Reply


Cheers Caitlin, glad you like it.

October 30 2012 08:51 am

Sabrina Leslie

Thank you so very much, this was a great help.

December 27, 2012 02:42 Reply


You're welcome!

December 27 2012 09:56 am


[…] an illustrated plan for a web design project […]

June 29, 2013 20:49 Reply

Kathryn Kolencik

This was AWEsome! I’m taking a very basic PM class and I almost fell out of my seat when I saw this timeline. I made one for my own project, citing you, of course. Thanks!

July 1, 2013 07:12 Reply


This is fantastic! I was trying to imagine where I’d put “CMS Implementation” Once the wireframes are complete, you should have enough information to start making templates.

August 18, 2013 05:53 Reply

website project plan templateFree Business Template | Free Business Template

[…] Illustrated Plan for a Web Design Project […]

November 7, 2016 04:12 Reply

Post a Comment

Posting your comment...

Subscribe to these comment via email

Social Widgets powered by