In the traditional “waterfall” model of system development, each phase must be completed before a subsequent phase can commence. Although web development is not generally as straightforward as this diagram makes it look, we still need to understand each phase individually before we can understand how they fit together for a web design project.
Feasibility
- Purpose
Deciding whether a web site is needed, or whether an existing web as interviewing the organization’s site needs modification. If “yes” determining rough costs and benefits.
- Principal Tools
Fact-gathering techniques such as interviewing the organization’s management and proposed visitors.
Cost-benefit analysis that ascertains whether the benefits are worth the associated costs.
Analysis
- Purpose
Determining the purpose, target audience, and proposed content and functionality for the entire site. In short, deciding what is needed.
- Principal Tools
Fact-gathering techniques.
Cost-benefit analysis.
Preliminary site architecture models.
Design
- Purpose
Designing a site (both organizationally and visually) that fulfills the requirements determined in the analysis phase. In short, creating a “how” that provides the “what” from the analysis phase.
- Principal Tools
Site architecture models.
HTML, CSS, JavaScript, and integrated web development environments (such as Adobe Dreamweaver) for site prototyping.
Image editors such as Adobe Photoshop or Fireworks for creating site graphics.
Construction and Testing
- Purpose
Building and testing the web site. (Note that construction and testing can’t be separated into independent phases, since testing should begin as soon as the first few lines of code are written. That way, problems are identified early in the process, rather than at the end when the entire site might end up needing major modifications to correct those problems.)
- Principal Tools
HTML, CSS, JavaScript, and integrated web development environments (such as Adobe Dreamweaver) for site prototyping.
Image editors such as Adobe Photoshop or Fireworks for creating site graphics.
Accessibility validators.
Live testing with prospective visitors.
Launch
- Purpose
Uploading the site to the server, performing final site-wide tests, and bringing the site live.
- Principal Tools
FTP or its equivalent.
Maintenance
- Purpose
Repairing, upgrading, and overhauling the system as necessary.
- Principal Tools
All of the tools mentioned in the prior phases.
Yes, we do still follow the waterfall model for the high-level process of web design; most of the overall site analysis and design is indeed done before much construction begins. But the construction and testing phase also includes tasks normally included in the independent analysis and design phases. This is because much of the analysis and design for individual pages is deferred until the construction and testing phase for those pages, since every page has unique requirements that often can’t be ascertained until it’s under construction.
The result is that each page requires its own miniature life cycle.
Each page is represented by a concentric circle, and each page progresses through its own analysis, design, and construction and testing phases. Now, all of the phases are tightly coupled with all of the other phases. Thus, to put a fine technical sheen on it, building a web site is iterative and recursive instead of rigidly sequential.
The iterative nature of web site construction also means that sometimes we need to revisit a page that we thought we had already completed. As a result, we often move backward, not just forward. For instance, several pages might be so closely related that none of them can be finalized until all of them are finalized, as would be the case with the multiple pages of a shopping-cart application. All in all, creating a web site is indeed a spiraling, reiterative process.
Translations
Dutch (language by Johanne Teerink)
Serbo-Croatian (language by Anja Skrba)
There have been 4 comments | Subscribe to Comments | Jump to Form »
Brian Cray
Really good article here. I always appreciate articles that take a strategic approach to website design. Cheers!
Mert TOL
@ Brian Cray :
Thank you Brian, I’m glad to you liked this article. See you around!
Sindhoo
You done great job. Its really very helpful thanks a lot.
Anthony
Im taking a project development class and I came across this article, all I got to say is…THANK YOU. This has helped me understand the Waterfall model a whole lot more. It gives more insight on the more important stuff reguarding the model. Thanks.