Lesson 1

By now you should be comfortable using the Web Interaction Model as a means for describing the complex dynamics that occur during a Web transaction. But who enables these dynamics? How does a Web site get built? This module focus shifts to the Web design process by introducing you to the Website Development Process Model, a framework for overseeing the successful design and development of a Web site project. Although it is not the only model for website development, it is one that can help you understand how a design team can plan and account for the complexities of a Web site development project.
You will probably recognize a lot of the terminology used by this process model. As with so many aspects of the Web, the development process is constantly changing, and changing at a rate faster than new language can be invented. So, the terminology is a hybrid of terms from various fields, including

1. advertising,
2. marketing,
3. software development, and
4. publishing.

The terms in this course reflect current usage by Web development professionals.

By the end of this module, you will be able to:

1. Define the six phases of the Web site development process
2. Define the key elements of the process
3. Define the role categories and how they are associated with specific jobs
4. Describe how specific tasks are organized
5. Describe how activities map to achieving specific objectives

The next lesson defines the six phases of the Web site development process.

Designers have been using grids for alignment and content organization since the early days of graphic design, and grid systems have become a useful tool for web designers as well.
A grid is an invisible foundation that divides the page into equal units that can be used to determine where columns, headlines, images, and so on, should fall. Sticking to grid units not only ensures that your content will be proportional, but it can make design decisions go more quickly. Many CSS grid frameworks have emerged to help streamline the design and development process. Perhaps the most well known is the 960 Grid System (960.gs), which divides a 960-pixel-wide page into either 12- or 16-column units.

1. Blueprint (www.blueprintcss.org) and
2. BlueTrip (bluetrip.org)

are based on similar fixed-width grids.
With the emergence of mobile, we are beginning to see responsive grid systems, including

1. the 1140 CSS Grid (cssgrid.net),
2. Skeleton (getskeleton.com), and
3. Bootstrap from Twitter (twitter.github.com/bootstrap).

This is a short reference of the CSS frameworks available as of this writing, and this list is the tip of the iceberg.
Conduct a web search to find the latest CSS Frameworks. Using a framework requires solid HTML, Javascript and CSS comprehension, but once you have a solid understanding, they may save you time. The downside is that the code tends to be more bloated than when designed from scratch, and you may be downloading more files than necessary. For this reason, some designers use frameworks to speed up the design process but create custom code for the final site production.