Introduction > web development cycle

Many students find it helpful to read an overview of how the class works and learn what their role will be in the Web construction process. This class can be divided into 4 phases which I refer to as the "Web Development Cycle".

  1. Planning (8 weeks)
  2. Production (4-6 weeks)
  3. Testing (2 weeks)
  4. Handoff (1 week)

The planning phase begins when we meet as a class to discuss the course schedule, review the clients, and discuss the team roles. There are 5 roles on a Web team:

  • Project Manager,
  • Designer
  • Content Developer
  • Programmer
  • This semester we welcome the Interactive Media students who may assume the roles of "Interactive Media Developers".

All teams will have the first 3 team members but some teams may not need an Interactive Media Developer or a Programmer.

Students select clients they would like to work for and identify the jobs they would be willing to accept. The instructor sends out an email announcing that the teams have been assigned. The Project Manager sends out a welcome email and begins to gather everyone's schedule and contact information. For the first few weeks the Project Manager will initiate and lead most team discussions, As the team gets to know each other communication will flow freely between all team members.

Next the team develops a list of questions they need answered by the client in order to draw up a plan for the site. All team members contribute and review the questions but the Project Manager is responsible for beginning the process and editing and distributing the final questions. The Project Manager contacts the client and sets up the first client meeting where the client provides answers to the team questions, and contact information is exchanged.

The team stresses the need for the client to provide the site content. In fact some of this content may be provided at the first meeting. In most cases the team may need subsequent meetings to gather all of the content.

Based on the client information and the site content each member of the team begins to prepare the Web Proposal. The Project Manager writes up a strategic brief, creates a timeline, work chart and bid.

The Designer begins to design "comps" for the home page and second level pages. These Photoshop documents are not working Web pages, simply pictures of what the pages will eventually, look like. The Designer also prepares the Creative Brief.

The Content Developers create a storyboard, list of deliverables, production standards and places all the content in the shell site. A shell site is defined as a web site which has the content displayed on all the pages which will eventually make up the site, but does not look like the finished product. The pages are plain white pages, with black text, and blue links. After producing these documents the Content Developer reviews them with the Designer and Project Manager to assure they are accurate.

The Programmer investigates the Web server capabilities, develops a plan for the scripts they will modify or build, and creates the Technical Brief. Depending on the needs of the client the programmer may also create a new database or convert an existing one to use with their Web scripts.

The Multimedia Developer gathers video, audio, or raw materials for a Flash presentation and working with the designer develops "mock ups" or "comps" for their elements of the site. They also create an "Interactive Media" Brief which describes what they will produce for the site, and explains how they intend to produce it.

Although all members of the team contribute to the Web Proposal the Project Manager is responsible for compiling the Web Proposal, printing it out, and presenting it to the client.

The Project Manager also creates the Project Web site which displays web page copies of all the items found in the Web Proposal as well as links to the "comps", shell site, actual site as it is developed, and testing results. The team, client and instructor can use the project site as a resource to keep track of how the project is progressing and what they need to do.

Once the Web proposal is shown to the instructor and approved by the client we can move from the planning to the production phase of the class. The content is finalized and reviewed by the client based on the content of the shell site.

Meanwhile the designer and client are working together to develop mock ups which represent the look and feel of the site. After receiving client approval the Designer converts the Photoshop "comp" into HTML, CSS and Web images which are used to build a sample second level page. The pages may also use Server Side Includes, or Dreamweaver library items. The designer creates one sample second level page written in HTML/CSS which we call the "template" page. They also create a template explanation that explains how to make all the other second level pages by using the original template as a pattern. The Designer, Instructor, and Content Developers meet to go over the second level HTML code and the template explanation.

The Content Developers take the template and start making each page of the site. They use the design from the template page and the content from the shell site. As they work on each page they upload it to the development site and then contact the Designer so they can approve the final look of the pages. The Designer and Content Developers work together to resolve any problems or unexpected issues.

The Designer creates the index.html page and if a splash page is used they will create that page as well.

The Interactive Media Developer creates the Flash elements or videos which are inserted into the site.

The Programmer makes any form pages or Web pages which are created from their Web Scripts, They use the designers template to make sure their pages match the other pages at the site.

Now the project moves into the testing phase. The completed site is tested in 4 ways:

1. Classmate testing done by the Content Developer
2. Client testing done by the Designer
3. Typical User testing done by the Project Manager
4. Hardware and Software testing done by the Programmer or Interactive Media Developer.

If HTML errors or typos are found they are corrected, however major design changes or content revisions cannot be implemented at this stage.

Finally the site is prepared for handoff. All the web pages, web images, scripts, PDF files, and flash animations are placed in a folder on a CD (compact disc). These files are provided by the content developers. The Photoshop documents used to create the pages are cleaned up by the designer and also burned to the CD. Finally a client manual is written up by either the CDs or the PM. This document is intended to help the client understand what they have been given and how they can make minor revisions to the pages. The client and instructor each receive a copy of the CD which is prepared by the Project Manager.

We all get together to show off the sites and celebrate our hard work.