Cisco Networking Academy Program: Web Design Pre-Production Process

Date: May 24, 2002 By Alexandra Holmes. Sample Chapter is provided courtesy of Cisco Press.
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.

Objectives

Upon completion of this chapter, you will be able to complete tasks related to the following:

  • Defining a project
  • Interviewing a client
  • Assessing a client's needs
  • Developing a proposal
  • Reviewing available media
  • Organizing files
  • Anticipating production milestones

Introduction

A majority of web projects are developed in three phases:

  1. Pre-Production Phase—This phase includes making initial contact with your client, assessing the client's needs, and developing ideas to best present the client to the world. During the pre-production phase, you determine a budget and schedule, collect and organize the functional requirements of the website, configure a project flow chart, develop a proposal, and sign a contract with the client. This phase is covered in this chapter.

  2. Production Phase—After the proposal to your client is accepted, you are ready to begin the production phase. In this phase, you create the assets for the website and then assemble them. With the extensive planning in the pre-production phase, the production phase should flow smoothly with a minimum of backtracking or unnecessary work. The production phase is covered in Chapters 5-9.

  3. Post-Production Phase—The final aspect of website development is the post-production phase, which involves testing the site, making it live, and advertising it. Chapter 10, "Assembly, Testing, and Optimization," and Chapter 11, "Implementation and Hosting," covers this phase.

Each phase has many interim stages, and some stages overlap others. The entire web design process is continually evolving.

This chapter provides a sample approach of the steps involved in a typical pre-production phase. Depending on the details of a particular website project, these steps might be changed or replaced. How you handle each part of the pre-production phase impacts the final design for the website. Overall, keep in mind that successful planning during the pre-production phase is key to the successful completion of a well designed website.

Getting the Project

Every project begins with contact with the client. In this section, you learn what steps need to be taken in the pre-production phase to have the client choose you for the project. First, you learn how best to work with the client, establish a main client contact, prepare for the initial meeting, and run a brainstorming session. After you assess the client's needs and generate ideas, you need to determine the audience, the scope of the project, and the competition. You then must consider time and budget constraints. Finally, you create a proposal and, if all goes well, negotiate a contract with the client.

Working with the Client

Your ability to help clients freely express their concerns affects the quality of the information you receive. Every client is different. Some might depend on you to tell them what they need. Others might be interested in participating fully in the process. Clients might have specific ideas about the site that they want you to implement.

You need to determine what will best serve the client's interests based on your own experience. Be clear and sincere about your opinions and be prepared to explain the reasons for your opinions.

Here are a few tips that can help you work with your clients:

  1. Research and prepare for your meeting—As with anything, be prepared. Research as much as you can about your prospective client before the initial meeting. Some clients expect you to lead the discussion, so you should have an agenda ready that outlines the goals for the meeting.

  2. Explain the design process—Detail the process of creating a website from its pre-production phase through its post-production phase. Specify when input from the client will be required.

  3. Define your boundaries—From the beginning of the process, define the boundaries of your client's participation in the process. If you feel the client's ideas are off the wall, provide a rationale to illustrate that it would be in their best interest to go with another idea.

  4. Know your client's business—Frequently, a client might be unable to articulate the specifics of their business. Ask questions and guide the client to give you the information you need. If necessary, interview others associated with the business to gather the information.

  5. Be prepared to listen—Try not to interrupt your client. The time you spend listening to your client gives you a better understanding of the client's business and the client's needs and expectations. It also shows the client that you are interested in serving their needs.

  6. Do not be afraid to admit that you do not know—Answer questions honestly. If you do not know something, say so. You can offer to research the information and produce it at a later date; otherwise, you might find yourself making promises you will be held accountable for later. If you cannot meet a particular need of the client, recommend someone who can.

  7. Demonstrate your services and abilities—Show the client what you can do for him. Give a brief presentation of past successful projects. Demonstrate how your web design solved a problem or met the objective of another client. Assemble a media kit that provides a list of your services, URLs of clients, and your potential to serve the client.

  8. Show enthusiasm and professionalism—If you show clients that you are enthusiastic about projects, they are more inclined to believe that you will work hard on producing the best website for them. You also need to convey to clients that you are serious about this project.

  9. Be prepared to answer questions—The client might seek further information about your services. Provide that information as soon as possible.

Main Client Contact Identification

When working for a client as an independent vendor, identify to whom you will be ultimately responsible. This person will serve as your main client contact. If you are freelancing for a small company, this person could be the owner or manager. In a large company, it might be someone in middle management. If there is a web development team, find out which member holds the authority to approve and sign-off on your work. Working with an individual, as opposed to a group, is essential. It is far more difficult for a group to reach a consensus about the merits of a website. Having one person who has the authority to approve your work will greatly facilitate the process.

Work closely with your contact person so that you can receive direct feedback. Communicating directly avoids misunderstandings, which can result in additional and unnecessary work. A main client contact is important in keeping the development process running smoothly and on schedule.

Initial Meeting

A critical point in the web-design process is the initial meeting between the web designer and the client. This is where the designer assesses the client's needs. Addressing these needs should be the primary concern of the web designer throughout the design process. This meeting sets the tone for future communication with the client. It is recommended that you are confident, sincere, and enthusiastic. Be prepared to take notes and to direct the conversation, but also to listen carefully to your client.

Professional web development is rarely a solo operation. It is usually a team effort and your client is the most important player. Open and candid communication is essential. Engage in a robust dialog to gather all the information you need. Focus on establishing the goals of the project and understanding your client's expectations.

By the time the initial meeting is concluded, you need to have a good idea of what the client expects to accomplish by publishing a website. Take the time to get as much information as possible during the interview.

The following are good questions to ask during the initial interview:

  • What is your business?

  • Do you currently have a website?

  • If so, what do you like and dislike about it? Why do you want a new one?

  • Which websites do you admire? Who are your competitors? What do you like or dislike about their websites?

  • What is the primary intent of the website?

  • What are the short and long term goals of the website?

  • What do you want your website to say about your business?

  • What products or services are you offering to the world?

  • Which other websites will you be linked to?

  • How much information does the website need to provide?

  • Do you have an established brand identity? If so, is it necessary that it be used on the website?

  • What resources are currently available? (e.g., photographs, copy, logos, marketing collateral, and so on)

  • What are the key sections of your site?

  • How often to you plan to update the content on the final website?

  • Who is your intended audience?

  • How technologically advanced is your audience?

  • What kind of feedback do you need from your audience?

  • Will the website be static or dynamic? (Dynamic websites are integrated with a database. See Chapter 9, "Interactivity," for more information.)

  • Will this site be used in a controlled environment? (e.g., intranet, extranet, packaged CD, and so on)

  • How soon do you need to be online?

  • Have you chosen a service provider?

  • What is your operating budget for this project?

At this point, you must define the purpose of the website. It can be one of the following:

  • Attract new customers

  • Give existing customers an alternate storefront

  • Offer an online catalogue

  • Provide industry information

Make sure that you write down the statement of purpose and keep it visible so that you can refer to it when you create the design and content. It is easy to forget the purpose of the site when you concentrate on the details, such as individual images and navigation buttons. Use the statement of purpose to guide you throughout the design process.

Brainstorming Session

After you define the purpose of the site, start generating ideas for the content and design of the website. A great way to accomplish this task is to brainstorm with your client and other project members.

The purpose of a brainstorming session is to generate ideas that you can use to begin developing a coherent vision of the website. The brainstorming session should be conducted in a comfortable, relaxed atmosphere, and the environment should promote strong communication and trust. The brainstorming session enables the thoughts of the team to flow. Participants can say whatever comes to mind, no matter how absurd or far-fetched it might seem. Later, most of the ideas will be discarded. The best ideas will stand out.

Make sure you include the client in the initial brainstorming session. This is recommended for several reasons: The client feels that you value his ideas and opinions, and most clients want to be involved in the process. The client also sees that you are working hard to find the best solution.

By the end of the brainstorming session, you will have collected many ideas and have an initial list of website features. This is sometimes referred to as a vision statement. It sets definable, measurable goals for the website. For example, the client's goal might be to increase the customer base by 10 percent by offering an alternative storefront.

Audience Definition

How you present yourself usually depends on the intended audience. For example, you might dress differently for a job interview than you would for a casual get-together with your friends. The same is true when you create a website. It is crucial that you understand who the audience is for the website before you begin the production process.

A great website is one that is easily accessed and understood by the majority of its users because its elements are designed with the target audience in mind. For example, an educational website that is intended for children looks and feels differently than a site that is intended to promote elder hostel travel. The target audience is defined by the nature of the client's business. For additional help on determining the audience, check out the competition's websites.

You also need to assess the audience's technical background and equipment because many aspects of the site, from design to functionality, depend on the technical specifications used by the audience. This is a major determinant in the development of a site because you need to know if you will use multimedia, a large number of graphics, and so on. You also need to know what kind of Internet connection the audience will be using (such as dialup/modem, cable, DSL, or T1). Depending on the answer, you must decide if you will use multimedia or an HTML-authoring program and if you'll have many graphical elements. Another important issue is which operating system the audience will be using (for example, Windows 95, 98, 2000, ME; Mac OS 8, 9, X; or Unix). This question determines which operating systems you must concentrate on when testing the website.

The following are questions you can ask the client to determine a customer profile:

  • How do you define your audience?

  • What is the age range of your anticipated audience?

  • What is the ethnic background of your audience?

  • What is the average income of your audience?

  • Is your audience primarily male or female?

  • What are the typical occupations of your audience?

  • Is your audience limited to a particular region or country? Or do you have a global audience?

  • Does your audience have any unique characteristics?

  • Do you anticipate that there will be any disabled users?

  • How often will users be coming to the site?

  • What will users gain from visiting your website?

  • What do you hope to gain from the users' visits?

  • What type of web experience do you anticipate?

  • What kind of Internet connection does your audience have (e.g., dialup/modem, cable, or DSL)? With what target bandwidth do you expect most users to access the site?

  • What are the operating-system specifications within that audience (e.g., Windows 95, 98, 2000, ME; Mac OS 8, 9)?

  • What is the standard hardware used? How old are the computers used by your target audience?

  • What type of resolution do you expect most users to have?

The target audience is a determining factor as to how the visual, verbal, multimedia, and interactive elements are used. You must tailor colors, text, graphics, and interactive elements to your client's brand identity and the target audience. For example, a site created for children will be more media-heavy and have lots of colorful elements, cartoon characters, fun type fonts, and many animated elements. A site for an elder hostel, however, would be more text-heavy, use muted colors, have a more conservative composition, and use large or bold text to make it easier to read. Design the site with the audience in mind, but remember that, for most sites, the audience can be anyone.

Scope Definition

To define the scope of the site, you need to determine how much detail needs to be presented. Figure 4-1 illustrates some of the many factors associated with determining scope. Ask the client what are the most important aspects of the business, the second most important, the third, and so on. This is largely determined by the nature of the business. Is the site for a small family business with a specific focus or a large corporation with several different departments?

Figure 4-1Figure 4-1 Scope Definition

Consider the scope of competitors' sites. Are they focused? Or do they incorporate information that is only remotely related to that particular business? What special features do they have? It is important to reinforce the client's primary objectives by focusing on topics related to the client's business.

Next, envision how best to present this information. Is the client be best served with a simple home page designed to communicate basic information to the public, or does the client require a more complex multiple-page site that offers interactive elements, animations, and response forms?

The customer's time and budget also influence the scope of the project. If the site needs to be up and running in a short amount of time, you need to consider how much you can accomplish in a limited amount of time. If the client has a limited budget, which is usually the case, you might have to reduce the scope of the project to make it affordable.

After you define the scope of the website, you need to determine several critical characteristics of the website project:

  • The website's message

  • How you will present the message

  • The website's tone (such as formal, informal, academic, fun, and so on)

  • Whether the client has existing materials (e.g., logos, images, concept, and so on) or if you need to create everything from the ground up

  • Whether you will be hosting the website

  • Whether you will be maintaining the website after it is posted to the Internet

Competition Survey

It is worthwhile to analyze the websites of similar organizations or businesses. Have the client provide the names of their competition. You can run a web search and analyze the content, design, look, feel, and navigational capabilities of the websites, and then list the items that you like and dislike.

The following questions can help you analyze the websites of competitors:

  • How well is information conveyed?

  • Is that information similar to what will be on your website?

  • Is the site effective in engaging the user?

  • Does the site address the same audience as your website?

  • Are there any unique features?

  • Is the site easy to use?

  • Do the pages download relatively fast?

  • Is the site attractive?

  • What elements should you incorporate into your site?

A website, as with any product, needs to hold up against the products of competitors. Use these sites as a benchmark. Try to make your website better than the competition's. Avoid using material gathered from the competition's websites. Instead, use these sites as a source of inspiration to provide you with a look at how other designers approached similar businesses and problems.

The added benefit of analyzing competitors' sites is that your client will like to hear that you have an active interest in making the site better than his competitors'.

Available Time and Budget

After you have a clear idea of your client's needs and you have determined the scope of the project, you can establish a budget and time line for the project. It is important to be candid with your client as to the fee you require for developing the website. It is equally important that the client knows what to expect from you and when you can deliver each phase.

Be sensitive to the client's budget. Ask the client what they can spend and then realistically assess what you can do within those parameters. Avoid giving too much for too little. Novice designers should undertake an assessment of the going rate in their area.

The customer's needs must be balanced with the time and budget available. If the site needs to be up and running in a short period of time, the scope of the project might have to be limited. If you need to hire others to finish the project within a short time frame, the fee you charge might need to be increased. If you need to discard certain elements to keep the project within the client's time and budget limitations, consider simplifying the site.

You need to calculate how much time you anticipate the job will take based on the project scope. Calculating the time needed to complete each task can be difficult. Try to get these estimates from each design team member. What might take one person x number of hours might take another y number of hours. Be sure to include time spent on redesigns (generally, web designers include estimated time for two redesigns) and changes to text. Some designers who bill as a total amount include two redesigns in their budgets, while stipulating in the contract that any further redesigns will incur an hourly charge on top of the agreed-upon amount.

Determining the final cost requires that you consider all your expenses:

  • You might need to hire subcontractors for their expertise. Acquire estimates from them and any other vendors you might need.

  • Include material and processing costs.

  • Scanning and manually entering content to a digital format is a service that typically is billed above and beyond the initial scope of work. Be sure to have a disclaimer to this effect in your proposal or contract.

At this point, you must determine how you plan to bill the client–—hourly (otherwise known as time-and-materials) or by a total amount. You will find that many clients have a set budget and will want to sign a contract agreement for a total amount. Other clients are in a rush to complete their websites and prefer to pay an hourly rate to save time and money. Ultimately, there is a greater risk to the client if he chooses to pay on a time-and-materials basis because if he is not pleased with the first set of designs, he will have to pay for the second, or maybe even a third round of revisions. On the other hand, if he is pleased with the first set of designs, he ends up saving money in the long run because the process was smooth and efficient.

When you are working with clients on a time-and-materials basis, help consult them on how to keep the total number of hours spent to a minimum. For example, one common snag when creating a website is the time spent making edits to content previously provided by the client. Explain that this is a common problem and that they should thoroughly proofread any and all content before sending it to you to be formatted in HTML.

Educating the client on the process of making changes is important. It is a good idea within the proposal and the contract to have procedures in place for both changes and approvals because changes to both the scope of the project and changes to content after it has been approved will cause a re-estimate of both the schedule and budget.

The Gecko Designs example illustrates the kind of education and procedures necessary to curtail changes affecting the scope, estimate, and time line of the project. This educates the client on the front end as to a web designer's process and how changes affect the development of a site. Clients typically try to add new content to the website continually through its development. If you do not have these kinds of procedures in place, it can be difficult to maintain the integrity of the site and your estimate, unless you are being paid hourly.

Gecko Designs

Schedule A: Project Change Request Policy

A Project Change Request (PCR) form is a document that describes the change requested, the rationale for the change, and the effect the change will have on the project. Clients are required to fill out a PCR form and submit it for review.

The Gecko Design project manager will review the proposed change. The project manager will determine the effect that the implementation of the PCR will have on price, schedule, and other terms and conditions of the original contract. The project manager will then approve or reject the request. If the change is approved, the project manager will sign the PCR. Gecko Designs will invoice the client for any such charges.

Schedule B: Approval Process for Each Stage of Design

The Gecko Design project manager will deliver the material to the client on the dates set in the contract.

The client will need to return the reviewed material by the dates specified in the contract. Failure to review the materials within the time allotted could affect both schedule and project costs.

The client will then consolidate all feedback in written form back to the Gecko Design project manager. The feedback should contain either a letter of approval or a letter of disapproval. In the case of disapproval, the feedback should describe instances where the material does not meet the client's requirements. For each instance of disapproval, the client must specify the criteria required to gain approval.

Gecko Designs will make corrections to the deliverables to meet the client's approval criteria. If, in the judgment of either Gecko Designs or the client, the changes required are beyond the scope of the original Statement of Work, the changes will be handled using the Project Change Request procedure. In this case, the effect of the implementation on price, schedule, and other terms and conditions of the contract will be determined.

You also need to factor in costs if you will be hosting or maintaining the website. Talk with your client about the following issues:

  • Does the client own a web server?
  • Does the client have a hosting service?
  • Does the client want you to host the website?
  • If so, do you have the facilities and time to host the site?

In Chapter 11, you learn about hosting services.

You might be asked to break down the costs so that the client can pay in installments after each phase has been completed. Typically, you can ask for a third of the payment at the beginning of the project, a third after the mock-up has been approved, and a third after final delivery of the website.

There is no set price for a web design project. Research the web design firms in your area to determine the going rate. There are many factors that influence the cost of a web design project:

  • Needs of the client
  • Location of the web design agency
  • Expertise of the web design agency
  • Experience of the web designer
  • Local market

Proposal Development

After you have a good understanding of the client's needs and have formulated the intention of the website's scope and content, incorporate this information into a proposal.

The proposal needs to include a detailed itemization of the website's elements, including a description of the basic functional requirements of the site. In addition, include a budget, target dates, and a creative concept describing how you envision your website will meet the client's needs and expectations. Typically, an initial list of website features and the initial flow chart that illustrates the relationship of the pages to one another are part of the proposal. All parties should clearly understand and agree upon the proposal by signing it.

The proposal should only contain the start and end date of the project. Make sure that you can complete the project by that end date. A more detailed time line is usually developed after the project has been approved, based on the proposal.

Above all, your presentation should be professional. This takes time. You will need to plan the proposal, check for errors, and produce high-quality work. If your proposal looks thrown together at the last minute, it reflects poorly on you as a businessperson.

Contract Negotiation

You will be more successful if you understand the negotiation process. When beginning any type of business relationship with a client or vendor, the project and financial arrangements are usually informally discussed. But it is a good idea to begin formal negotiations over a contract as soon as possible.

After you begin developing a new situation with a client, have an attorney draw up a contract. Give the attorney a description of your goals, what you need to have included, what should not be included, and so on. If your client or vendor submits a contract to you, read it and highlight clauses that bring up questions or concerns.

The following items are important points in a contract negotiation:

  • Whenever possible, be the party that originates the first draft of the contract. It will be more work and expense, but you will know the contract extremely well, and you will have included all of your important requirements.

  • Do-it-yourself or cookie-cutter contracts from a book or software can be challenging because they rarely are developed for your specific situation. If you use a contract template, you might need to adjust it to your needs.

  • Be prepared to have the other party dispute some contract clauses and come back to you with a revision to your draft contract. Ask them to highlight the changes that they made, and then read the contract again to see if any other changes were made. Again, the wisest way to proceed in such situations is to also have an attorney review the revised contract. A change in words or even punctuation might appear meaningless to you but it could in fact be significant.

  • If the other side prepares the first draft, you need to read it carefully. Highlight anything that confuses you or that you do not like and take it to an attorney for review. With an attorney, develop compromise positions to present to the contract's originators that address your issues or concerns.

  • Only sign contracts that you have read completely and understand yourself–—preferably after an attorney has read the contract.

  • When you make a concession in negotiations, ask for one in exchange.

  • Be prepared to walk away from an unfair situation or an unprofitable deal. Knowing your price limits and preferred payment terms in advance can help you determine whether a particular negotiation is going against your wishes. Know your limits beforehand.

  • Do not start negotiations with a final position or best offer. People usually expect some room for negotiation.

  • Avoid automatically dropping price as a first concession. Research has shown that price is not usually the biggest concern. Rather, clients are focused on quality, reliability, and time of delivery. If a price is expressed as being too high, ask what deliverable the client would like to leave out to lower the price.

Many people are not comfortable negotiating a contract. Unless you want to trust that everyone else will operate with your best interests at heart, you need to negotiate or hire someone to do it for you. The best approach to negotiation is to look for a win-win solution, where all parties are satisfied with the outcome and the overall document is fair to all involved.

Unfortunately, some people and some companies, as part of their corporate culture, negotiate for a win-lose solution, where they win and the other party pays a high price in concessions or money. This negotiation strategy is not good for long-term relationships among parties. Most businesses depend on repeat business from satisfied customers. Customers on the wrong end of a win-lose agreement will take their business elsewhere. Research also shows that they will let other business colleagues know of their dissatisfaction.

Contracts describe what will be accomplished, how those tasks will be accomplished, when payments are earned and due, and who owns what. As questions arise between you and your clients during the process, the contract is the ultimate reference for what was intended.

A written contract is more effective than a verbal one for obvious reasons, and writing down your agreements is highly recommended. In general, few business people object to contracts because they know that they usually prevent misunderstandings, and a good fair contract protects all the parties. At a minimum, a web development contract should describe the following:

  • Who has ownership of the website, and when the ownership transfers.

  • What is to be accomplished–—Final project deliverables and completion criteria is also an important factor in the contract because it notes how the developer has fulfilled his obligations.

  • Who is responsible for doing what.

  • The time frame, including deadlines, for each phase.

  • The price and terms of payment.

After the terms and conditions have been agreed upon, both parties should have a clearer understanding about what is going to happen and what is expected of everyone.

The following text refers to contracts in the United States. Other countries might have different laws governing contracts. In addition, contract laws vary from state to state. Always consult a lawyer before signing a contract.

In legal terms, a contract is defined as an agreement among two or more parties who promise to perform a transaction with each other. A contract is comprised of three basic elements. If one of the elements is missing, there is no contract.

  • An offer made by an offeror—The person or entity extending the offer

  • An acceptance made by an offeree—The person or entity accepting the offer

  • Consideration—an exchange of something of value, such as money

  • Oral and written agreements

A contract does not have to be in writing. There is such a thing as a verbal contract, but it is usually much harder to enforce than a written contract.

Some requirements associated with contracts make them enforceable by a court, if the need arises:

  • An enforceable contract must be legal. In other words, all the agreements within the contract must conform to law.

  • Most contracts must be in writing and signed by both parties to be enforceable.

  • Minors cannot participate in enforceable contracts unless there is a legal guardian or cosigner of legal age.

Production Roles

Depending on your role in the web-design process, you need to be familiar with all aspects of the process and with those professionals who specialize in particular aspects of the process. You might start as a web designer, but you might need to learn how to edit audio sooner or later. You might do only web design, but need to communicate with a programmer, and thus need to understand the basics of the job. The responsibilities of the web designer might vary depending on the size and scope of the project and the web-design firm—especially if you are a one-person web-design firm. Not all roles are always necessary for all projects. You could play all the roles at once.

It is rare that any one individual has all the necessary expertise to perform all the tasks associated with the development of a complex website. Because web development can involve many different forms of expertise, it is common practice to work in a group and to hire others to help meet tight deadlines or to perform specialized tasks. Skilled writers, photographers, illustrators, graphic designers, programmers, multimedia artists, and even additional web designers can be employed to complete the project. Roles can include the following:

  • Web designer—The term web designer covers a wide variety of artistic tasks, including the design of the interface and layout; creation of templates, menus, logos, banners, and buttons; typography; development of color scheme; creation and manipulation of images; and sometimes animation and video. In large firms, web designers implement the website design that was created by the creative director. An ideal web designer has an innovative sense of style, a strong understanding of interface design, and a solid foundation in design theory. Some web designers might have a fine art or graphic design degree. They should have a solid foundation in areas such as color theory, design, drawing, layout, and typography. They should also have an understanding of browser and platform capabilities and constraints. Web designers are also expected to have experience working with HTML, WYSIWYG editors, and various graphic applications.

  • Creative director—Large web-design firms generally have creative directors who are responsible for the overall look or appearance of a product. They develop the overall concept of a product. Most creative directors were once graphic or web designers.

  • Web masters—The term web master is often confused with web designer. A web master is someone who maintains an existing website. Some web masters are also web designers. Generally, they are responsible for updating links, updating the site with new content, fixing scripting errors, answering e-mail enquiries, and keeping the web server up and running. Web masters typically have backgrounds in networking, web design, or programming.

  • Audio designer—An audio designer or engineer is responsible for all audio elements of a website, including musical scores, sound effects, and voice-overs. Smaller design firms hire audio designers for projects.

  • Video designer—Similar to the audio designer, the video designer might be an independent contractor that you or your web-design firm hires for individual projects. The video designer creates and edits video clips for websites. They work closely with the audio designer and the art director.

  • Animator—There are people who specialize in creating animations for websites. Some are animators who worked with film and have switched to the web medium. Others were trained as web animators from the start or were graphic designers who learned the specialized tools. Sophisticated animations require knowledge of relevant programming languages and scripts, but most web animations can be created without sophisticated scripting such as Animated GIFs. Most web animations can be created by using an animation tool, such as Macromedia Flash or Adobe LiveMotion. With tools such as these, you can create effective and entertaining animations fairly quickly.

  • Programmers—Programmers can be responsible for coding HTML and creating scripts for the website. The programmer might have experience with CGI scripting, JavaScript, VBScript, SQL, Perl, XML, and Dynamic HTML. Dynamic websites need a programmer who is proficient in one of these programming languages. Involve your programmer in early meetings regarding the definition of the site. The programmer can then make suggestions related to programming issues before the design begins.

  • Technical, copy, and script writers—Writers are responsible for creating and editing the words that are used throughout a product. These include the text that appears on the screen and the words that are spoken in an audio or video clip.

  • Usability expert—This person analyzes designs for ease of use. A usability expert looks at your website, tests it, and determines what you can do to improve the design so that users can get information quickly and easily. Many usability experts are self-employed and can be contracted for various projects. Chapter 6, "User Interface Design," and Chapter 10 discuss the issues of usability and usability testing in detail.

  • Project Manager—A project manager is responsible for all aspects of the project: schedule, budget, production, and all contacts with the client. The project manager also manages all members of the team. Knowledge of all aspects of the web-design process is critical for this person. Project managers are also responsible for hiring capable professionals who can accomplish the necessary tasks within the specified time frame and budget limitations.

Team Structure

Unless you set up your own business and design the entire website from scratch, you will probably be part of a web design team. The size of the team depends on the project and the resources of the web-design firm or company. In large web-design firms or IT departments, there might be many members on the team, each with a specific task. Smaller companies might only have a few people who are responsible for the entire development of the website. Figure 4-2 illustrates how some of the positions discussed earlier might fit into a team's structure. (This diagram is a sample structure and might not reflect what you will encounter in your job.) Remember: None of these titles are set in stone, nor are the relationships between positions. You will find that each company operates differently.

Figure 4.2Figure 4-2 Typical Team Structure

Planning the Website

Now that you have signed a contract with a client, you are ready to plan the website. In this section, you learn what you need to do before production can begin. First, you need to get content and media assets from the client and gather more specific information from the client and other members of the staff. Second, you need to determine how the website will be structured by creating the site's information architecture and flow chart. Lastly, you come up with a content update plan, create a requirements document, and develop a time line to keep on schedule.

Content and Media Assets

After you agree on contractual items with the client, make a list of the resources the client needs to provide to assist you in your work.

The following are examples of material you might need:

  • Company info
  • Tag line(s)
  • Marketing collateral (such as brochures)
  • Stock photography
  • Location, addresses, phone numbers, e-mail addresses
  • Glossary
  • Design elements
  • Copy text
  • Other resources (such as videos, books, articles, CDs)
  • Competitor URLs, related companies' URLs

During the pre-production phase, collect as much material as you can. An abundant amount of material ensures that you will have plenty to choose from. The more information you can get from the client at this point, the more resources you will have at your disposal when designing the site.

Content

If available, gather copy, logos, photographs, illustrations, audio files, and so on, from the client or from sources such as photo or audio CDs, libraries, or the web. Examine the information that you have collected. Decide what content is critical and where it should be placed on the website. Organize the content into cohesive units by subject. Envision how the content will be presented. Determine what portion of the content will be exclusively text and how many images are needed. Will there be additional graphics, tables, frames, or interactive components?

Generally, the client will not be able to provide the formalized content for the website until the final site map is decided upon. You might use these items to help the client organize and complete a site map, but hold off on formatting any content you might find in brochures and other materials until you know for sure that it will be included on the site.

Size

Assess the quantity of information and determine how it will best be distributed throughout the site. The amount of information is crucial to deciding the number of pages, the look and feel, and the navigational options. Streamline the information so that it can be presented efficiently.

Multimedia

If audio or animated multimedia elements are to be included in the site, the designer needs to decide where they will be placed and who will do the multimedia work. Some elements are available on CD, such as audio or video clips. Others will need to be created in software applications. These elements can be used for instruction or entertainment depending on the site's intention. Multimedia elements greatly enhance the website's ability to deliver information and entertainment, but it might add expense for the client and increase download times for the user.

Background Information

While meeting with the client, ask for additional information that might not relate directly to the project, such as marketing collaterals (e.g., brochures, fliers, and television or radio ads). Ask for a tour of the company so that you can be made aware of all of its departments. Ask to meet additional personnel associated with different departments.

Try to investigate further the accessibility requirements of the audience to make sure that they are not overlooked. (The issue of web accessibility is thoroughly discussed in Chapter 7, "Accessibility and Internationalization.") It is also important to determine how traffic analysis is accomplished. This is mostly a service connected to the way the site is hosted. In Chapter 11, you learn more about this. Any information that you collect will aid you in developing a comprehensive understanding of the enterprise.

Static Versus Dynamic Content

Determine if the content will be delivered statically or dynamically. When a web page is requested, the server where the page is stored returns the HTML document to the user's computer and the browser displays it. On a static web page, this is all that happens. The user can interact with the document through clicking available links or a small program (an applet) can be activated, but the document has no capacity to return information that is not preformatted.

On a dynamic web page, the user can make requests (often through a form) for data contained in a database on the server that will be assembled on the fly according to what is requested. For example, the user might want to find out information about the availability of baseball tickets for a particular date. The request is relayed to the server using an intermediary such as an Active Server Page (ASP) script embedded in the page's HTML. The intermediary tells the server what information to return.

If the client wants a dynamic web page, consider hiring someone with expertise in this area. This book does not focus on dynamic websites because it requires extensive knowledge of databases and scripting. However, the basics of dynamic websites are discussed in Chapter 9.

Stakeholder Interviews

Beyond the initial meeting with your client, you might find it necessary to gather more detailed information about the organization or business. Thoroughly investigate the nature of the enterprise that you are representing. If there are multiple departments or areas of specialization, make it a point to interview the individuals who can provide the most detailed perspective. Gather as much information as you can about each component of the business. Conduct as many interviews as necessary to help you understand how they can be best represented on the site.

A stakeholder is someone who has an interest in the website; that is, they will benefit or be represented by it. Stakeholder interviews are conducted to further develop a deeper understanding of the company. Your questions will focus on the more detailed particulars of the business, which the main client contact might not know, such as highly technical aspectsthat only a specialist might be able to articulate.

You might want to ask stakeholders the following list of questions:

  • What aspect of the business does your department handle?

  • How is it related to the company as a whole?

  • What are the technical issues in the scheme of production?

  • How many individuals make up the department?

  • What do you want your website to say about your department?

  • How frequently will your department's information change?

  • What kind of feedback do you need from the site's audience?

  • To what other websites will your department's information be linked?

  • What other websites do you like?

  • What assets are currently available (e.g., photographs, copy, logos, and so on)?

  • What are examples of information that you typically share with coworkers or the public?

Information Architecture

Now that you have considered what you want to put on the website, you need to create the information architecture. It organizes content on a website and determines how a user finds and accesses that information. Information architecture is intended to organize and simplify a website, as shown in Figure 4-3.

Figure 4-3Figure 4-3 Information Architecture

Even if the site you design boasts award-winning visuals, users will go elsewhere if they cannot find what they are looking for quickly and intuitively. Begin the information design process by categorizing and prioritizing the information that you will include in the site. What are the main categories? Weigh the importance of the information to be presented. Without addressing any visual styles, draw outlines and diagrams that show how information is grouped together. For example, product and company information could be grouped together, but perhaps should be kept separate from functions such as search and feedback. Furthermore, think about which groups of information should be given the most prominence on the screen and draw those items larger in your diagrams.

Ideally, a website is structured hierarchically. The main categories are displayed first. From there, subtopics lead the user to an ever-narrowing subject range and eventually to the information they are seeking. This process creates a logical map so that users can easily navigate around the site. It also simplifies the organizational process for the web designers.

The following questions can help you set up a hierarchy for your site on paper:

  • What are the main categories of information that will be included on the website?

  • Are these main categories related in a way so that their order is important?

  • What should users be able to access from any page (home page, shopping cart, search box, contact us, help)?

  • How do you want the user to find each web page? Will they be able to have a menu of the main categories and perhaps a menu of the related subcategory that they are already in available to them on all pages?

  • How should you group similar information?

Categorizing and Prioritizing Content

Before you begin the process of categorizing and prioritizing content, be sure that you have a complete list of all the site content. There is no greater development challenge than to accommodate late-coming information. After you have a list of all the content, create a simple text outline. Look for ways to group all information into about five to seven categories. This is called chunking. Designing an interface to accommodate more than seven major categories is difficult, and you can potentially overload your users with information. After generating a simple text outline, begin to prioritize. Decide which information should be given most prominence on the screen and which information should always be accessible to the user.

Common Information Architecture Mistakes

The process of compiling information for a website involves digging as deeply as you can through client interviews, web research, competition surveys, and data gathering, so that you have choices as to what material is the most current and relevant for the site. This is somewhat of a paradox because an effective website needs to present information quickly and efficiently.

In essence, the process of constructing a website involves reducing a large amount of data into a succinct, cohesive, and streamlined body that best represents the client's needs. This is a serious decision-making process that affects every aspect of the look, feel, and functionality of the site.

For example, in the process of gathering information about the business, the client enthusiastically gives you an animation that their child created in a class at school. Yet the site's intention is to provide an online catalog so that customers can quickly place orders. Unless that animation is relevant to the intention of the site, you should not use it. Politely explain to the client that it is inappropriate content and would interfere with the message that they are trying to convey to customers. Suggest that the child sets up a personal website to showcase the artwork.

Avoid clutter. Websites with irrelevant or redundant information take longer to download, are difficult to understand, and are inefficient to navigate. Use only relevant information.

A common mistake found on many websites is to present all the information with equal emphasis. The viewer is forced to sift through all the information to establish its relevance. Avoid this mistake by emphasizing navigation buttons and labels that clearly lead the visitor to the information they seek.

Another common mistake is to present too much information at one time so that the viewer is barraged with a visual and intellectual tangle. Consider segregating information by page or by area, and lead the visitor through the information in smaller doses.

The following tips can help you avoid common architecture mistakes:

  • Be sure to consult the client on how to get straight to the point.

  • Always keep the web as a medium in mind, paying particular attention to the fact that any page can be the first one that users see.

  • Spend time organizing the site and then stick to your plans.

Site Flow Chart

Just as you would not build a house without a blueprint, you should not build a website without a flow chart. Flow charts are not meant to imply visual directions; they are simply a means of communicating the flow of content through the site. The creation of a flow chart is an excellent process to share with clients so that they too can begin to see and understand the website. An example of a site flow chart is shown in Figure 4-4.

Figure 4-4Figure 4-4 Site Flow Chart

The information hierarchy is illustrated by a flow chart. The information is divided into levels. The first level is for general categories that act as signposts to the next level. The second level is where the topics are more clearly defined and elaborated upon. There are links to the third level where details, specifics, and other related material could be accessed. Additional levels could follow, although it is advisable to avoid unnecessary nesting of pages.

You can generate your flow chart in almost any graphics application, particularly if the program is vector-based. Some HTML editors, such as Adobe GoLive, allow for this. After you create your own language of symbols, the program automatically draws boxes of all shapes, generates text in the boxes, and understands levels of hierarchy and relationships.

Content Update Plan

It is a good idea to consider a content update plan from the beginning. The World Wide Web, being one of the most dynamic publishing mediums, readily lends itself to changes. A content update plan should be developed if the project includes not only setting up a website, but also regular site updates. It should cover which pages or page areas need to be updated, when this should be done, and where the updated content comes from. The plan should outline a delivery schedule for updated content to the web designer to ensure a smooth updating process.

A website for a movie theater, for example, would post its scheduled information weekly. The information should be delivered to the web designer well in advance of the posting deadline to ensure that it can be revised in sufficient time.

Requirements Document

After you develop the information architecture, set up a site flow chart, and assemble a content update plan, the next step is consolidating this information in a requirements document that you can provide to the client for sign-off.

The requirements document is created after the proposal is accepted. This document serves as a laundry list for you to make sure that you have received all the necessary assets and background information and that you have understood the client's needs and goals for developing this website. This list must be provided to the customer for sign-off. This guarantees that both sides are clear about website details that were not covered in the proposal or identifies any subsequent misunderstandings.

A requirements document is a typical project milestone that requires the client's sign-off before actual production can begin.

The requirements document needs to address the following key questions:

  • What does the client need to provide to the designer?
  • What does the designer need to do the job?
  • What will the designer do exactly?
  • What are all the parts and features of the website?

Time Line Development

After having written the requirements document, you need to develop the time line to share with the client.

Determine when the client expects to have the website online. In many cases, the client will tell you that time is of the essence and that they needed the site yesterday. Be prepared to ask for a realistic amount of time to accomplish the task. From this information, develop a time line and a schedule. The completion date is either approximated, by using the project scope as a basis, or determined by a specific deadline date the customer sets. Of course, you need to determine if you will be able to deliver the product by the deadline date.

Almost all clients are in a rush. There are times when they will call up to ask for a project to be executed in a week's time. It is a good plan to have a minimum amount of time in mind for a given deliverable. If you explain, for example, that the minimum amount of time to produce a home page mock-up is a week and a half, be prepared to let them know that it is just not possible to do it sooner, or that you would need to charge a rush fee. Explain that you are going to have to shuffle some current projects around to accommodate them under such a restraining time line. You could also explain that you will have to work overtime, and that a common rush job rate is a markup of 50 percent on your usual hourly charge.

It is important for you to adhere as closely as possible to the scheduled deadlines. Presenting the material on time builds the client's confidence in you as a designer. Be sure to allocate enough time so that you do not become crazed in trying to meet the deadlines. Remember that it is better to ask for more time at the beginning of the job then fail to deliver the work because of impossible circumstances. Your work might suffer in quality if you are trying to cram it into an unreasonable amount of time. Be sure to take into account the fact that you might be serving more than one client at a time.

Develop a time line based on specific milestones in the process. These include the pre-production, the production, and the post-production phases. Also, the time line should outline the due dates for contributions by both you and your client. Including your client in the time line emphasizes that your client is also part of the website development process. It is crucial to point out that a delay on the client's part affects the entire time line. This is a touchy subject. Be realistic. Remember that this is a team effort. If the client is not available for necessary sign-offs or content delivery, it affects your time line and delivery dates. Be sure to inform your client from the beginning that you are dependent on his participation throughout the process.

Table 4-1 is an example of how you can set up a time line for a project.

Table 4-1 Time Line for an Example Project

Task

Completion Date

Start project

November 1

Receive content and media assets

November 3

Create site flow chart

November 6

Create content update plan

November 9

Requirements document completed

November 10

Convert media assets

November 18

Create prototypes

November 26

Meeting with client to discuss prototypes

November 28

Create navigation elements

December 5

Media completed

December 15

Content writing completed

December 23

Assemble website

December 27

Test website

December 30

Modify website

January 3

Test website

January 6

Task

Completion Date

Modify website

January 12

Test for accessibility/validate HTML

January 15

Present website to client for sign-off

January 18

Make final changes

January 21

Upload site

January 25

Test live site

January 25


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

Scanner

Image file

Slides

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.

Basic Project Management Concepts and Vocabulary

A project management scheme is necessary to keep the project on schedule and running smoothly. Also, project management is necessary to ensure a smooth production process when working in a team. Project management consists of organizing and structuring a systematic sequence of activities to most efficiently develop the website. Project management is critical to maintaining a smooth workflow and to prevent tasks from having to be repeated.

To manage a project successfully, you must have a broad overview of the project, its content, and the ultimate goals. You must anticipate the difficulties that could be encountered during the project. You might also need to assign work to various subcontractors and monitor their progress.

The most important aspect of project management is planning. The website's construction needs to be planned and organized into systematic phases. This chapter stresses how important pre-production planning is to the successful implementation of the website. Do not neglect this important stage. Plan thoroughly and include all the details in the plan.

The following are key terms that you might encounter when working on a project:

  • Project—A temporary endeavor undertaken to create a unique product or service. Every project has an end.

  • Process—A routine set of tasks repeated many times over. Project management is a process with four separate stages that are repeated for every project: visualize, plan, implement, close.

  • Task or activity—The lowest level of schedule detail is the work package, where managers can estimate durations, set dependencies (which define a critical path), assign resources, and track progress by recording percent complete, actual dates and duration, and actual hours and cost.

  • Deliverable—The specific output as a result of work carried out, usually based on a clearly defined work breakdown structure. It is the actual result of the project. A project usually has both a final deliverable, which is the output received by the customer who determines success, and interim deliverables, which is the output that is required along the way to achieving the project's final goals.

  • Project milestones—Significant completion points in time (with zero duration) during a project that do not necessarily have a deliverable attached. They communicate status and track progress more effectively.

  • Phase—Group of related tasks designed to achieve a specific milestone and usually an interim deliverable, which adds to the successful delivery of the project's final deliverables.

  • Project team—A temporary organization that is assembled to accomplish a specific objective, such as record and edit video, and which is disbanded when the defined work involved is finished.

  • Exit points—Stages between the production phases where issues that could jeopardize the completion of the project are discussed with the client. The goal is to determine how these issues can be worked out to ensure the successful completion of the project. If either side feels that these issues cannot be worked out, the exit point serves as the ending point of the project.

  • Requirements document—A document that includes the project description in terms of what, where, and when. This document serves as a laundry list for you to make sure that you have received all the necessary assets and background information, and that you have understood the client's needs and goals for developing the website.

Scheduling Tools

The use of software scheduling tools, such as Microsoft Project (MSP), will generally result in better project plans (see Figure 4-6).

Figure 4-6Figure 4-6 Scheduling Tools

The following is an overview of how project-management software can provide help with your project:

  • Scope planning—Developing a written scope statement as the basis for future project decisions.

  • Task or activity definition—Identifying the specific tasks that must be performed to produce the various project deliverables.

  • Task sequencing—Identifying and documenting the interactivity dependencies.

  • Task duration estimating—Estimating the number of work periods that will be needed to complete individual tasks.

  • Schedule development—Analyzing task sequences, task durations, and resource requirements to create the project schedule.

  • Resource planning—Determining what resources (people, equipment, materials) and what quantities of each must be used to perform project tasks.

  • Cost estimating—Developing an estimate of the costs of the resources needed to complete project tasks.

Production Phases

As you have learned, the pre-production phase is the all-important preliminary phase of website development (see Figure 4-7). The pre-production phase includes making initial contact with your client, assessing the client's needs, and developing ideas to best present the client to the world. During the pre-production phase, you determine a budget and schedule, collect and organize the functional requirements of the website, configure a project flow chart, develop a proposal, and sign a contract with the client. When this is accomplished, the production phase can begin (see Figure 4-8).

Figure 4-7Figure 4-7 The Pre-Production Phase

Figure 4-8Figure 4-8 The Production Phase

After the proposal to your client is accepted, you are ready to begin the production phase. With the extensive planning in the pre-production phase, the production phase should flow smoothly, with a minimum of backtracking or unnecessary work. Chapters 5-9 covers this phase.

The final aspect of website development is the post-production phase, which involves testing the site, making it live, and advertising it. See Figure 4-9.

Figure 4-9Figure 4-9 The Post-Production Phase

A site must be thoroughly tested by several individuals to ensure that it is free of errors, broken links, or operational deficiencies. All the text in the site must be proofread. Each element and link should be tested in both Windows and Macintosh platforms using multiple versions of each browser. At this point, feedback from the testing phase will result in the need to make modifications to the website. The site is then uploaded to a server, tested, and retested. Finally, the site's pages are indexed to search engines such as AltaVista, Lycos, or Yahoo!. Other marketing strategies, including banner advertising, link sharing, and cobranding are employed to draw users to the site. Chapters 10 and 11 discuss the post-production phase.

Summary

In this chapter, you learned that several key events happen during pre-production and that each of these events are crucial to the success of the website design. First, the initial interview allows you to get a good understanding of the client's business and what expectations the client has for the website. It is important to listen carefully to the client and to ask many questions. The size and scope of the website is determined by this and subsequent interviews with the client. Next, the brainstorming session takes place. Here, ideas for the website's content and style are generated.

After the brainstorming session, the general look and feel of the website is developed. Then the designer must also determine the information architecture: how the site will be organized and how the user will navigate around the site. Your proposal for the website is then developed and presented to the client. If all goes well, a contract is then negotiated between you and the client.

The pre-production phase is extremely important because it is here that you develop the relationship with your client. A website that does not meet the needs of the client is not a successful website. The knowledge you gain from the interviews with the client and other employees is essential for you to design a website that fits the client's needs. Open communication between you and your client throughout pre-production is vital. Consider the client as part of your design team and include them in discussions and decisions. A site that is organized poorly and difficult to navigate can lose users; this translates to lost revenue for your client. Clients should never lose customers because of a poorly designed website.

Organizing all aspects of this project is critical from the start. A well-executed preproduction phase will save you time and allow you to anticipate problems that could arise during later stages of the project.

Now that you have a firm understanding of the pre-production phase, you are ready to begin production of the website. The time you have spent preparing for production during this phase makes this next phase of the project relatively easy:

  • Gather as much information as you can during the initial meeting with the client.

  • The brainstorming session generates ideas for the website.

  • The most important member of your web design team is your client. Remember: Your client has employed you to design the website to meet his needs.

  • The audience must be determined before you begin the design process.

  • Discuss the scope of the website with the client.

  • Research competitors' sites to gain an understanding of how they are representing themselves on the web.

  • Discuss time and budget constraints with the client.

  • Your proposal should address the client's concerns and demonstrate how you will meet the client's needs.

  • Create a site flow chart to organize the website.

  • Create a content update plan and discuss with the client your role in updating the site.

  • A requirements document lists what the client needs to do and what you will deliver.

  • It is important that you develop a filenaming scheme to manage the files.

  • Always back up your files to several sources.

  • A project management scheme is necessary to keep the project on schedule.

Check Your Understanding

  1. Which of the following are needed before submitting a proposal to the client?
    1. Scope definition
    2. Audience definition
    3. Competition survey
    4. All of the above

  2. When does the web designer assess the needs of the client?
    1. The audience definition
    2. The initial meeting
    3. The proposal
    4. The competition survey

  3. What is the goal of your design for the client's website?
    1. To meet the needs of the client
    2. To create a site using the latest technology
    3. To create a site that is innovative and unusual
    4. To showcase cutting edge GUI design

  4. The organization of content is referred to as information architecture.
    1. True
    2. False

  5. Which development procedure communicates status and tracks progress most effectively?
    1. Interim deliverables
    2. Project team
    3. Project milestones
    4. Scope planning

  6. Which of the following is contained within the requirements document?
    1. List of what you need from the client
    2. Summary of client's intentions and goals
    3. List of what you will do for the client
    4. All of the above

  7. Which document do you present to the client with the concept on how you envision the website meeting the client's needs?
    1. Contract
    2. Proposal
    3. Flow chart
    4. Final website

  8. What is the filenaming convention for image, sound, and video files?
    1. Three character extension
    2. Lowercase
    3. Both A & B
    4. Neither A or B

  9. The production phase uploads the site to the server and tests it.
    1. True
    2. False

  10. What term describes the analysis of activity sequences and durations?
    1. Task sequencing
    2. Schedule development
    3. Resource planning
    4. Scope definition

  11. What is a routine set of tasks repeated many times over?
    1. Process
    2. Project
    3. Phase
    4. Milestones

  12. Before the initial meeting, which of the following must you do?
    1. Research the client's business
    2. Prepare a brief presentation
    3. Prepare an agenda for the meeting
    4. All of the above

  13. What is another term for a database-driven website?
    1. Static
    2. Dynamic
    3. Hard-coded
    4. Intermediary

  14. What term determines how much detail needs to be presented?
    1. Scope
    2. Deliverables
    3. Proposal
    4. Requirements document

  15. You need to look at the competitors' sites as part of determining the scope of the website.
    1. True
    2. False

  16. What phase encompasses the testing of a website so that it is free of errors and is easy to use?
    1. Proposal development
    2. Pre-production phase
    3. Post-production phase
    4. Production phase

  17. The _______ generates ideas for the content and design of the website.
    1. Initial meeting
    2. Proposal meeting
    3. Brainstorming session
    4. Scope definition

  18. You must obtain the client's signature on which of the following documents?
    1. Requirements Document
    2. Proposal
    3. Contract
    4. All of the above

  19. What do you create to determine how a user will navigate and use the interface?
    1. Information architecture
    2. Requirements document
    3. Task sequencing
    4. Scope definition

  20. What is one of the most common file names for the home page on a website?
    1. file.html
    2. home.html
    3. index.html
    4. index.home

Key Terms

Client The person who hires you to create a website.

Web designer The person responsible for designing a website.