A Web site is made up of many elements from existing print products
to original audio, video, and animation. Each site has its own
set of requirements and services but as with any successful complex
experiment, there is a logical progression of tasks that blend
all the elements into a final distilled compound. Web site development
is no different. The final site is only as good as the process
that created it.
The Innovative Publication's process draws from the entertainment
industry's paradigm of pre-production, production, and post-production
and the software development life cycle.
Tasks may be concurrent such as programming online services and
HTML coding. Or they may be ongoing, such as quality control.
So join us for a walk-through of our Web process. We'll help
you find success in an exciting, challenging, and evolving industry.
Someone has the idea to create a Web site. The first question
to ask is "why"? Are you creating a site because your competitors
are on-line? Is the site an Intranet for employees or an Extranet
for partners? Do you actually have something of value to say?
For your site to score points, you must determine what the site
needs to accomplish. Your goals should be measurable and behavior-based
from the visitor's standpoint.
Who is your site intended to reach? How old? Gender? Educational
background? Socioeconomic level? Ethnic background? Language?
Expectations? Computer literacy?
Download times are critical so how are your visitors connecting
to the Web? Modem, ISDN, or T1? Corporate or at-home visitors?
Domestic or international? Low-end resolution of 640 x 480 with
256 colors or higher?
What building blocks go into your site? How long will each task
take? How much will the site cost? Who is going to do the work?
Planning is crucial--if you fail to plan, you're planning to fail.
What information is your Web site providing? How is it organized?
What services? What do you have and what needs to be developed.
An inventory list with the status is created, which will serve
as a checklist in the Quality Control and Testing Stages.
The flowchart is a visual outline of the information. Each level
or link represents a screen and/or control that must be created.
This "map" is essential for the production phase.
Your visitors need to know where they are in cyberspace. How do
they know what information is available and where to find it?
Your screens are the graphic and verbal directions. X always marks
The flowchart is the map, and the navigation is the landmarks.
Remember the shortest path between two points is a straight line.
This stage determines the overall design concept for the site.
The concept should be based upon what will appeal to your target
audience to meet the site's goals. The concept lays the groundwork
for the theme and the site design.
The visual theme or style is determined by the content, the audience,
and goals. The best theme is one that ties into the content to
provide an integrated message on the world's stage.
At this step, the interface controls (how the visitor interacts
with the computer screen) are designed. Each piece contributes
to the final integrated visual information design.
The site design starts with the home page and moves to the subordinate
or child pages. The technical considerations are the limitations
and set the level of effort. Never design for yourself or your
organization. Design is the visual message for your visitors.
The storyboards are the blueprints for your site. These rough
sketches tell your story and bring together all the elements with
Creating Prototype Screens
The prototype screens are the site coming to life and provide
the foundation for production. These prototypes are your first
experiment in using your creation.
At this step the content is addressed. Even existing material
needs to be rewritten and reorganized for an electronic medium.
What is effective in print is ineffective in cyberspace.
All words, including the interfaces, are edited for clarity, grammar,
and consistency. Remember, shorter is better. No one likes to
scroll. Avoid jargon and use simple English.
Shooting New Images
The inventory developed when planning the site content and the
storyboards is used to determine what new images are needed. Plan
the who, what, where, when, and how much, then schedule the photo
shoot. Make sure you secure ownership or rights for electronic
Final illustrations, graphics, buttons, and icons are created
using the prototype screens as a guide. A number of software tools
are available but don't discount traditional art methods.
Existing photographs, illustrations, and graphics are digitized
for use on the Web. Electronically generated art as well as digitized
art must be prepped. Start with high-quality files, such as TIFF
images, and archive the originals.
Animation can be a simple animated GIF image to complex Shockwave/Flash
products or 3D Virtual Reality tours. Complex animations require
their own storyboards and production process. They should never
prevent accessibility to information.
The images are optimized for use on the Web to decrease files
sizes and improve download times. The number of colors, palettes,
resolution, format, and size are addressed. The final files are
converted to GIF or JPG (JPEG) formats.
The HTML files are the heart of the site. They contain the instructions
to display the graphics, provide the line information, and call
the programs or CGI scripts. Web authoring softwares, such as
FrontPage and NetObjects Fusion, or ASCII-editing programs, such
as NotePad, TextPad, or HomeSite, are common tools used to code.
Recording and Digitizing Audio
The edited scripts (or a composer, if using music) are used to
plan the who, what, where, when, and how much. Then the recording
session is scheduled. The original tape or electronic file should
be the highest quality possible to allow for compression. Don't
forget about releases, permissions, and ownership rights for the
All the art, sound, animation, and text files are brought together
into their appropriate subdirectories (folders). File naming conventions
are checked against the plans. From here the final working site
Programming provides the on-line services and functionality of
a Web site. This task follows a software development life cycle
separate from the Web process. Select your programming language
to work under multiple browsers.
Databases provide massive amounts of information in an easily
maintained format. Design your interfaces for user friendliness.
As with programming, integrating databases follows a software
development life cycle apart from the Web process. Common tools
are Perl, Cold Fusion, and Active Server Pages.
Software enhancements can be on the server level or the visitor's
browser. Multiple plug-ins are available, such as Shockwave/Flash,
Real Audio/Real Video, and Adobe Acrobat. Make sure you provide
an easy means for your visitors to download what is needed.
Every word on the screen is proofread and checked for consistency
of formatting. In addition the proofreader reviews all audio files
against the edited scripts.
Quality control is ongoing throughout the process. This final
step checks the overall content, functionality, and usability
of the site. The flowchart, storyboards, and other planning documents
are invaluable when checking the site.
Testing and Debugging
The final site is tested on multiple computers, monitors, platforms,
and browsers. Try to "break" it and then fix the problems that
arise. Anticipate how the visitor may use and misuse the site.
Upload to Server
The big moment has arrived. All the files are transferred to their
final home, ready to serve the public. Make sure directory structures
are the same and that file names are correct. Watch for case sensitive
file names and the use of HTM or HTML extensions.
The original files, including audio, art, programming source code,
and text, are archived for future revisions. In addition an ongoing
backup process needs to be implemented at the server level in
the event of a hardware failure.
Don't forget to submit your new site to the search engines. Web
surfers can't visit if they can't find you. Your HTML files should
use META tags correctly and contain accurate key words and descriptions.
Web sites must be maintained regularly, adding new information
and deleting old information. Set up a schedule and assign tasks
Congratulations! Your site is a success, and you survived the
challenge. But could the inevitable problems inherent to Web site
development have been avoided? At Innovative Publications we have
found that nine times out of ten the problems are with the process
and not the people.