Planning a Web Site

1
Planning a Web Site

• Measure twice, cut once

2
Shewhart Cycle

• Plan the site
• Do create the site
• Check for proper function and validity.
• Act on areas that need improvement
• Plan improvement methods
• Do make those improvements
• check for function and validity
• Act on areas that need improvement

Plan
Do
Act
Check
3
Plan

• Ask yourself
• What is the purpose of my web site?
• Who will visit my web site?
• What, if any, services will the site provide?
• How will the site look?
• What will the structure of the site be?

4
Purpose/Goal

• Your web site should have a purpose.
• To provide information about brain stem research.
• To share photos of your vacation to Alaska.
• To socialize with others who also enjoy making
  clothes out of postage stamps.
• If something you are doing does not meet the
  purpose of the web site, it should not be
  included.

5
Who Will Visit?

• Knowing who will visit your site will help in
  design.
• Sites that target a wide audience, must be
  designed to work on different browsers and be
  easy to navigate by all kinds of people.

6
Target Audience

• A computer game review site.
• Young audience with new computers and browsers.
• Lots of graphics
• Flash animation
• Embedded audio

• Site listing local garage sale info
• Adults with kids and or 40 years old.
• Older computers, or new budget computers
• Few graphics for fast downloads

7
Services Offered

• What services will users get from your web site?
• information
• newsletter
• games

8
Appearance

• What colors should be used?
• What typefaces should be used?
• How should the average page be organized?

9
Folder Structure

• Plan the major areas of your site
• Each area has its own folder
• Our class web site has folders for
• images
• PowerPoint files
• sample files

10
Storyboarding

• A storyboard is a flowchart that shows how the
  different web pages of a web site are
  interconnected.
• Storyboards help
• Determine how deep pages are. A user shouldnt
  have to click more than three times to get to any
  page.
• Avoid dead links and orphan pagespages that
  cant be accessed from another page.

11
Sample Storyboardfor Movie Review Site
This flowchart lists only the page titles and the
filenames. It is helpful to also include a brief
description of the page and a list of keywords
identifying the page. You can create usable
flowcharts using MS Office programs or, use
programs made for that purpose Inspiration and
Visio are two popular flowcharting applications.
12
Design Grid

• Plan the layout of individual pages.
• Most pages will have the same basic structure.
• Very important when using tables as a design tool.

13
Log Details

• Make notes of things you do for your web site and
  keep them in a folder near your desk.
• What fonts and font sizes are you using?
• What colors are being used?