Download Web Design 3

3
Planning a
Successful Web
Site: Part 1
Web Design,
3rd Edition
Chapter Objectives
 Describe the Web site development planning process
 Complete Step 1: Define the site’s purpose
 Complete Step 2: Identify the site’s target audience
 Complete Step 3: Determine the site’s general
content
 Complete Step 4: Select the site’s structure
Chapter 3: Planning a Successful Web Site: Part 1
2
The Web Site Development
Planning Process
Chapter 3: Planning a Successful Web Site: Part 1
3
More on Web
Step 1: Define the Purpose
 Decide on a topic for the
Web site
 List the goals of the Web
Primary
site
goal
 Determine your
Secondary
objectives
goals
 Purpose statement
written explanation of
overall goals and
specific objectives
utilized to achieve
goals.
objectives
Step 1: Determine Your Goals
 Goals – results of Web site in specific time frame
– Reflect a realistic time frame
 Example in Book – retirement planning web site
– Investing money for retirement
 Goals for one year period
– Promote online awareness of company
– Educate visitors on retirement strategies
– Provide tools and methods for retirement investment
strategies
Step 1: Determine Your Objectives
 Goals – methods utilized to accomplish goals
– Testimonials from satisfied customers
– 20% discount for purchases made in next 30 days
 Example in Book – retirement planner Objectives
–
–
–
–
–
–
Establish credibility of company
Provide sound financial advice
Make available an analysis tool to determine current assets
Provide a method to calculate anticipated retirement needs
Determine strategies to achieve retirement goals
Develop individualized retirement investment plans
Your Turn! (page 72)
Exploring Purpose Statements
1.
2.
3.
Visit the Web Design Chapter 3 Online Companion Web
page scsite.com/web3e/ch3/ and click Dr.
Gourmet, Oakland, and San Jose in the Your Turn links
to review thee Web site purpose statements.
Write down your visitor expectations for the content and
design of each Web site based solely on the information
contained in its purpose statement. Do not look at other
site pages.
Next, review the home page and at least two subsidiary
pages at each site. Is each site's purpose statement
reflected in the site's content and design? If yes, how? If
no, what is missing?
Step 2: Identify the Site’s Target
Audience
More on Web
Define the needs of the audience
– Develop a preliminary audience profile
Chapter 3: Planning a Successful Web Site: Part 1
8
Step 2: Identify the Audience
how old age range
What gender
Educational backgrounds
Careers, income levels, and lifestyles
Where do they live
Step 2: Define the Needs of Your
Audience
What are they expecting to gain from your
Web site
Need quick facts or in-depth explanations
biases
Experienced Web users
International
– Cultural differences, norms, and customs
Step 2: Develop the Audience Profile
limited resources and tight time frame
– Use audience’s top two or three needs
– Continually gather feedback
• Fine-tune and add to audience profile
Step 3: Determine the Site’s
General Content
More on Web
The home page is often the first page a visitor
Who?
sees answered
by
company logo
and name
Should include:
– Who
Where? answered
by links
– What
– Where
Search feature
Chapter 3: Planning a Successful Web Site: Part 1
What?
Answered
by photos
and text
12
Step 3: Determine the Site’s
General Content
Web sites often include multiple subsidiary or
underlying pages
Should include the same elements as its home
page:
– Name
– Logo
– Typeface
– Color scheme
Chapter 3: Planning a Successful Web Site: Part 1
13
Step 3: Determine the Site’s
General Content
Links back to
home page
Logo, company, name typeface, color scheme, and link
placement maintain visual identity with the home page
Chapter 3: Planning a Successful Web Site: Part 1
14
Step 3: Determine the Site’s
General Content
More on Web
A splash page uses images, animation, and
sound to capture visitors’ attention and draw
them into the site
Chapter 3: Planning a Successful Web Site: Part 1
15
Step 3: Determine the Site’s
General Content
Should include value-added content:
– Relative
– Informative
– Timely
– Accurate
– High quality
– Usable
Chapter 3: Planning a Successful Web Site: Part 1
16
Step 3: Determine the Site’s General
Content
Text
– Primary component of a Web site
– Guidelines to consider
•
•
•
•
•
•
Abbreviate text
Chunk information for scannability
Add hyperlinks to explanatory or detailed information
Use active voice / friendly tone
Remove transitional words
Do not use Web clichés
– Use Register online instead of Click here to register
Your Turn! (page 81)
Exploring Purpose Statements
1.
2.
3.
4.
Review the public domain Q & A and then visit the Web Design Chapter
3 Online Companion Web page scsite.com/web3e/ch3/ and click FTC in
the Your Turn links.
Locate the Key Publication section on the FTC Identity Theft page and
open a copy of a PDF publication on identity theft in your browser; print
the publication. (Copy and Paste into Word document the 4 paragraphs
of text you repurpose instead of printing as book says)
Using the guidelines for repurposing text from print publications,
repurpose at least four paragraphs from the printed publication for your
own Web site. As an acknowledgement, cite the source of the
repurposed text in a line below the text.
Submit your repurposed text to your instructor. Be prepared to compare
your repurposed text with the original printed publication text in class.
Step 3: Determine the Site’s
General Content
Images
– After text most commonly included content
element on Web sites (motivate visitors)
– Can personalize and familiarize the unknown
Chapter 3: Planning a Successful Web Site: Part 1
19
Step 3: Determine the Site’s General
Content
Photographs
– Can help deliver a message or prompt an action
– Select high-quality, relevant pictures
Step 3: Determine the Site’s
General Content
Audio
– Low-bandwidth alternative to video
– Vary in both form and intensity
– Incorporate audio into a Web site to personalize a
message, enhance recall, set a mood, or sell a
product or service
• Glowing testimonial from satisfied customer
• Catchy jingle
Chapter 3: Planning a Successful Web Site: Part 1
21
Step 3: Determine the Site’s
General Content
Video
– Video clips incorporate movement and sound
– Extremely large sizes of video
– Choice for designers is to limit size of
downloadable video files or generate streaming
• Downloadable Video – downloaded in its entirety before
it can be heard or seen
• Streaming Video – begins to play as soon as the data
begins to stream or transfer
Chapter 3: Planning a Successful Web Site: Part 1
22
Step 3: Determine the Site’s General
Content
Animations
– Widely used to attract attention and enliven Web
pages
– Adds interest and appeal to Web pages
– Overuse of animations can become distracting and
annoying
– Animated GIF
• Gives the appearance of moving pictures
Step 3: Determine the Site’s General
Content
Multimedia
– Add action, excitement, and interactivity to your
Web site
– Viewers are intrigued and entertained by
multimedia presentations
– Multimedia presentations can be interactive
• Users can participate
• Helper Applications
• Plug-ins – software program allows certain content to
function within the currently viewed Web page
– Adobe acrobat plug-in needed for PDF files
Step 3: Determine the Site’s
General Content
Chapter 3: Planning a Successful Web Site: Part 1
More on Web
25
Step 3: Determine the Site’s
General Content
Dynamically Generated Content
– Served up to your Web site visitor triggered by a
specific event
• Frequently called up from a database
– Active Server Pages – Microsoft ASP. Net
– Scripting languages – Open source PHP
Chapter 3: Planning a Successful Web Site: Part 1
26
Step 3: Determine the Site’s
General Content
Visitors to this site can
dynamically obtain a variety
of information from the
university database
Chapter 3: Planning a Successful Web Site: Part 1
27
Step 3: Determine the Site’s
General Content
Plan an organized file system
– Separate into logical subfolders
• HTML, photographs, audio, and video files
• Create subfolder to place original files
– Word processing files
– Graphics files
• These files will later be transformed into Web-usable
formats
– Regularly create back ups
Chapter 3: Planning a Successful Web Site: Part 1
28
Step 4: Select the Site’s
Structure
Outline your Web Site – serve as a blueprint
and define major navigational paths.
– Use flowchart, storyboard, sticky notes, index
cards, or text outline
• Structure information to achieve Web site’s purpose
– Choose the method that you find most flexible and
comfortable
• Linear / tutorial structure
• Random structure
• Hierarchical structure
Chapter 3: Planning a Successful Web Site: Part 1
29
Linear/Tutorial Structure
Presents information in a specific order
– Historical or chronological order
– Training website
Linear/tutorial structure controls user
navigation by progressing users
through one Web page at a time
Chapter 3: Planning a Successful Web Site: Part 1
30
Random Structure
Presents information without a specific order
Use only for small Web sites
random structure allows visitors
to navigate pages in any
preferred order
Chapter 3: Planning a Successful Web Site: Part 1
31
Hierarchical Structure
 Organizes information
into categories and
subcategories
 Best used in
organizational / topical
Web sites
hierarchical structure organizes
information into categories and
subcategories
Chapter 3: Planning a Successful Web Site: Part 1
32
More on Web
Hierarchical Structure
Chapter 3: Planning a Successful Web Site: Part 1
33
Chapter Summary
 Describe the Web site development planning process
 Complete Step 1: Define the site’s purpose
 Complete Step 2: Identify the site’s target audience
 Complete Step 3: Determine the site’s general
content
 Complete Step 4: Select the site’s structure
Chapter 3: Planning a Successful Web Site: Part 1
34
Case Study # 3
Case Study Page 98
Do steps 1-2 to produce 1 page paper using
Word.
See assignment web page for details.
3
Planning a
Successful Web
Site: Part 1
Web Design,
3rd Edition