Home > Articles > Cisco Certification > Cisco Networking Academy Program: Web Design Pre-Production Process

Cisco Networking Academy Program: Web Design Pre-Production Process

Chapter Description

A majority of web projects are developed in three phases: Pre-Production, Production, and Post-Production. Each phase has many interim stages, and some stages overlap others. This chapter provides a sample approach of the steps involved in a typical pre-production phase.

File Management

During the web-development process, you will be receiving a great deal of resource material in many different forms. Taking the time to organize it pays off in the long run.

After you collect all the hard data from the client, such as text documents, photographs, CDs, and digital files, assemble everything in one place so that you can evaluate it. After you select the images and text you want to use, isolate them from the rest. Do not discard or return the unused data, you might change your mind and need it later.

Sometimes a client, for reasons of intellectual property or security, might want all the materials to be returned, including the digital files. You should honor this request without hesitation, assuming that you have agreed to this at the beginning of the project. It is then incumbent upon the client to resupply you with the materials if the site is to be updated. Other media, such as photographs and videotapes, should be returned to the client when the website is complete. A form listing the items should accompany the materials when they are returned to the client. This form is discussed in Chapter 11. Make sure the client signs the form acknowledging receipt of the items. This way there can be no confusion as to the whereabouts of the items.

Much of the information that you receive will already be in digital form on ZIP disks, CDs, DVDs, or other digital media. It is important to keep all of your data accessible and well protected. Create a system in which to categorize the digital files in folders and subfolders. Ultimately, when uploaded to the web, the number of folders will consist of the bare minimum, but in the pre-production and production phases, you might want a more elaborate filing system so that you know exactly where every file is at all times.

Managing your files lets you track and distribute an expanding catalog of images, text, sounds, and movies. File management lets you determine how and where the files are stored and makes them easily distributable. Designers can organize files at their own workstations as needed. Larger, more complex workgroups, however, invariably face the problem of how to organize these files in a system that works for everybody.

Start with a general client folder at the top of the hierarchy, as shown in Figure 4-5. Every piece of data that is acquired should immediately be placed in the client folder. Create subfolders for text, images, and other materials including contracts, schedules, and budget documents. When creating web pages, you will copy or move these files into one or two specific folders so that they are ready to upload to the server's FTP site.

Figure 4-5Figure 4-5 File Management Directory Structure

Backup Process

As you work, continually back up your files to multiple disks. Having multiple copies of the files on different disks ensures that your files are preserved in the event of a system or hardware failure. Because web files and images are relatively small, you can back up your files to any stable read/write media, such as CDs, ZIP disks, Jazz disks, or an external hard drive. Do not use floppy disks. They are not stable and do not hold enough data to enable you to maintain the organized structure of your directory. CDs, on the other hand, are stable, relatively indestructible, and inexpensive. They are a great way of archiving data and designs for many years.

Media Assets Conversion

Provide your client with a list of acceptable digital formats up front. If the client is not able to provide the acceptable formats, you need to convert the material. If documented in the contract, you need to bill the time spent performing media conversion. Table 4-2 shows conversion tools and digital formats for some analog sources you are likely to encounter.

Table 4-2 Converting Analog Source to Digital Form

Analog Source

Conversion Tool

Digital Form

Brochure text

OCR scanner

Text document

Paper photo


Image file


Transparency scanner

Image file

Audio tape

Digital audio recorder/sound card

Audio file

Video tape

Digital video recorder/video card

Video file

Text documents can be converted either by transcribing in word-processing software, such as Word Perfect or Microsoft Word, or scanned by using Optical Character Recognition (OCR) software such as Omnipage.

Video can be converted to a digital format and edited using a video card and video editing software such as Adobe Premiere. Sound can be converted with a sound card and a program such as SoundEdit Pro.

Media files will be converted to other source file types in order to be accessible by HTML browsers. Project files developed in a WYSIWYG editor are the primary files for the web page. Media files that include image files (GIF, JPEG, and PNG) and video files (MOV, AVI and MPEG) are embedded within these pages, and appear as graphics, animations, and videos. Some WYSIWYG editors, such as Adobe GoLive, support native files (e.g., PSD, AI, and LIV).

Filenaming Conventions

Files saved to the web must have the proper extension to reflect their format. The initial web page, the home page, is almost always named index.html (or index.htm, index.asp, and so on). Additional pages that are linked to the home page must have the extension .html in order for it to be read by a browser. Image, sound, and video files always have the three-character extension of their particular format, such as .gif, .jpg, or .mpg.

In the past, some browsers could only read lowercase letters. Recent browser versions can read characters of either case. Still, the convention is to name all files in lowercase letters. It is important that no spaces are used in the naming of files.

To make file searches or reviews of the site directory structure easier, name the files according to a filenaming convention key. This key is a list of abbreviations that are used in the filenames to describe the file content. Common filenames include terms such as bg for background or pg for page. Another way to characterize the file content is by the file position on the page by using top, bottom, left, right, main, side, or footer within the filename.

The following are filenaming conventions that you should follow:

  • Home page is named index.html, index.htm, index.asp, and so on.

  • Web pages have the extensions .html or .htm.

  • Use lowercase letters for filenames.

  • Files are named after the filenaming convention key.

6. Basic Project Management Concepts and Vocabulary | Next Section Previous Section