WEB105 » The Core Process

In order to stay organized and productive, you should break your web project into manageable phases of work.

Phase One: Defining the Project

Defining the project is the most intensive of the five phases.

A) Discovery

Discovery is the sub-phase where you begin to understand the client, the project and needs of the users via:

  • Client Survey – analyze the client, their industry and scope of the project
  • Technical Specifications – analyze back-end programming, technical and application needs
  • Maintenance Survey – discuss the future of the project after launch
  • Client (user) Specifications – analyze audience capabilities
  • User Profile – analyze the client’s audience in terms of demographics and informational needs

B) Clarification

Clarification is the sub-phase where you deliver your terms of the project to the client via:

  • Communication Brief – clarify goals and terms to the client
  • Task Estimate – set the price of the project according to the tasks involved
  • Schedule – outline the time line of the project with deliverable dates

C) Planning

Planning is the sub-phase where you start getting things together by assigning your project team and setting up staging areas.

Phase Two: Developing the site structure

Analyzing and addressing site structure is the first phase in creating a successful website.

A) Content View

In order to create good and relevant content, you will need to audit existing content and create an outline for text and images.

B) Site View

By addressing how the content of the site should be organized, we can show the client our proposed site structure via a sitemap of the site.

C) Page View

We must address the informational layout of content on each page via page wireframes for all template pages.

Phase Three: Visual Design

Your website is a product and is about and the user. Therefore, we need to remember that our concepts need to interact with technology and that our website is something that actually gets used.

A) Creating

After reviewing our site goals, we need to develop visual design concepts that are solution orientated and aesthetically pleasing

B) Confirming

Once our visual design has been approved, we need to confirm the design with a working HTML protosite.

Phase Four: Production & Quality Assurance

Here is where you put all of the pieces together that you have designed, planned and gathered. Oh… yeah… and make sure it works.

A) Prepping

Before handing the design off to the production team, we need to readdress the original expectations and scope of the project, establish guidelines and set up our file structure.

B) Building

Now is the time to finally build our website by slicing & optimizing graphics, using clear standardized HTML code, light scripting and finally populating our pages with the content we probably do not have yet.

*Assuming that we are building a static site

C) Testing

By creating and implementing a Quality Assurance plan, we can make sure our site works like we had hoped.

Phase Five: Launch & Maintenance

Launch should not be the end—it is a transition into a entirely new workflow for the post-launch content.

A) Delivery

If you are going to be delivering this site to a maintenance team you will need to complete a production style guide. You should also track and archive documents for your team and then conduct a post-mortem meeting—what went wrong?

B) Launch

Pull the switch, register the site with search engines and announce the live site for public viewing.

C) Maintenance

Hopefully you have made a good impression with your client and you will be updating the site from here on out—MONEY!

Example Case Studies:

This portion of the Premium Design Works website is written by Mike Sinkula for the Web Design & Development students at Seattle Central College and the Human Centered Design & Engineering students at the University of Washington.


  1. David Norris says:

    I’m not a student anymore, but this page has been helpful for me in reviewing my web design project plan. I would suggest adding information architecture to phase 1, It is a crucial step that a lot of people don’t understand. Sean’s link As a number of good ideas on that topic, and I have also written about it several times on my blog:

  2. timurtek says:

    here is the web application files for client – maintenance – tech survey forms. It’s jquery/ajax and a little bit of PHP.

    link: http://timurtek.com/snippets/form.zip


Leave a Comment:

Don't forget to get your Globally Recognized Avatar.