GETTING ORGANIZED

1
GETTING ORGANIZED
Web Sites ? Goal Statements Flowcharts
Storyboards

• Al Fichera, M.A.A.

2
WHY GOAL STATEMENTS?

• Goal Statements will help you
• Design the Site
• Organize the Content
• Write the pages
• And most importantly, helps you resist the urge
  to obscure your content with extra information

Goal Statements
3
NEW GOAL STATEMENT

• First you'll need a Goal Statement for your new
  Web Site.
• Not unlike a mission statement from a firm or
  company.

Goal Statements
4
SOME BASIC GOAL STATEMENTS

• What is it to be about?
• What is the purpose of the site?
• What does it include? Be specific.
• Who will be it's target audience? Narrow down and
  be specific to age, gender, etc.
• Connection speed to the Internet? High-bandwidth
  speed , or slower.

Goal Statements
5
SETTING YOUR GOALS

• What do you want people to be able to accomplish
  on your Web site?
• Will your readers be looking for some particular
  information?
• Will they start at your home page and then wander
  aimlessly about?

Goal Statements
6
WHAT ARE YOUR CLIENTS GOALS?

• Learn your clients goals for the Web site.
• Your ideas and the clients ideas for the site
  might not be the same.
• So there goes a lot of work!

Goal Statements
7
LIST THE POINTS

• List all the points to be covered in the Web
  site.
• Dont worry about the order yet.
• Dont worry about the navigation just yet.
• The point list will be used to create your
  flowchart.

Goal Statements
8
STUDENT HOME PAGES or MID-TERM

• What will you put on your HOME PAGE (index.html)
  or MID-TERM Project for this term?
• The Home page is the starting point for the rest
  of the site, consider what sort of information
  youre going to put there.
• Perhaps a general summary of whats to come.
• Or, perhaps a list of links to other topics, such
  as your homework.

Goal Statements
9
WHAT TYPE OF GRAPHICS

• What type of Graphics will you use on HOME PAGE
  (index.html) or MID-TERM Project for this term?
• Determine the style of graphic navigation buttons
  you may use.
• What kind of graphic images will be necessary to
  complete the thought?

Goal Statements
10
REVIEW YOUR GOALS

• When designing the framework of your Web site
• Keep your goals in mind, and
• Be sure not to obscure them with unnecessary
  extra information or content.
• Once your goals are stated, you'll need to create
  your Flowchart to organize the site.

Goal Statements
11
ORGANIZING THE CONTENT

• Your points will be placed into CATEGORIES by
  content.
• You will need to build ACCESS to these
  categories.
• That means you will need to build ROUTES to these
  categories.

Flowcharts
12
FLOW CHARTING

• This is the backbone of the Web site and is
  really independent of what the real Web site will
  look like.
• You will organize the contents here.
• Build the access to this content.
• Create the route access for the navigation.

Flowcharts Categories
13
FLOWCHART FROM THE POINT LIST

• Review the List of topics you want covered in
  this site.
• If one topic is too large, break it up into
  subtopics.
• Too many topics? Try to group into a general
  topic heading.
• Try to group together related bits of information.

Flowcharts Categories
14
GRASPING THE FLOWCHART CONCEPT

• Picture that the Home page is really a very large
  building.
• The Categories could be the different floors that
  make up the building.
• The Sub-categories could be the different rooms
  that make up each floor of the building.
• Navigation is like the stairs or elevators that
  make access easy to each floor and room of the
  building.

Flowcharts Categories
15
FLOWCHART CONCEPTS

• A Flowchart will resemble an organ-izational
  chart with the main page acting like the manager
  and the secondary pages as categories with
  subordinate pages.

Flowcharts Categories
16
FLOWCHART TOOLS AVAILABLE

• In Microsoft Office the Drawing toolbar has a
  selection of Flowcharting tools under the
  AutoShapes menu.

17
DESIGNING FOR A COMPANY

• If you are designing a Web site for a company,
  what kind of topics might be needed for a
  Company's Web site?
• Job openings
• Actual location
• Technical white papers available online
• Products or services rendered.

Flowcharts Categories
18
DESIGN A SHOPPING CATALOG

• What kind of topics might be needed for a
  Shopping Catalog Web site?
• Browse items for sale
• Sort by name or price
• An order page

Flowcharts Categories
19
ORGANIZATION AND NAVIGATION

• Your Main or Home page will be linked to all your
  Secondary pages.
• RULE In any given secondary page in your Web
  site must have a link back to your home page.

HOME
CAT 1
CAT 2
CAT 3
Flowcharts Access
20
ORGANIZATION AND NAVIGATION

• Do you have several categories of content, with
  categories that might be linked to each other?
• RULE In any given page in Category One, must
  have a link to Category Two if they are linked.
  And the reverse is true as well.
• Example on the next page.

Flowcharts Access
21
CATEGORY CROSS LINKAGE
22
FIND THEIR WAY AROUND

• How will your visitors find their way through the
  content on the site?
• How will your readers know their location within
  your site?
• How will they find their way back to a known
  position?

Flowcharts Routes
23
PRIMARY NAVIGATIONAL STYLES

• What are the primary forms of navigation between
  Web pages?
• Links for Forward, Back, Up, Down, or Home all
  fall under the category of primary navigation.
• However, you should investigate which
  navigational structure would best serve your Web
  site.

Flowcharts Routes
24
NAVIGATION STUCTURES

• There are several navigational structures that
  you can choose from.
• Hierarchal
• Linear
• Linear with Branch Alternatives
• Linear and Hierarchal
• Web Style

Flowcharts Routes
25
HIERARCHICAL STRUCTURES

• Easy and Logical to use.
• Feature Menus of topics and sub-topics.
• Users easily know their position in the structure.

Flowcharts Routes
26
LINEAR STRUCTURES

• Feature Sequential Organization.
• Links move from one page to the next. (Forward,
  Back and Home.)
• A very rigid structure with very limited freedom
  to explore.
• Best for Step-by-Step instruction.

Flowcharts Routes
27
LINEAR WITH BRANCH ALTERNATIVES

• Can soften the rigidity of linear structures with
  slight deviations in path.
• A sub-topic can send the reader back or to the
  next logical step.

Flowcharts Routes
28
LINEAR AND HIERARCHICAL

• Works well if the user has appropriate clues
  regarding context and position within the
  document.
• RULE Do not allow forward and back links
  across hierarchical boundaries.
• You should provide more context in the link text,
  e.g., describe where the user is moving on to.

Flowcharts Routes
29
WEB STYLE

• Avoid using this free-flowing alternative to
  navigation.
• Promotes aimless wandering through content.
• For our purposes in this course, it would be
  inappropriate to use.

Flowcharts Routes
30
ALTERNATIVE FORMS OF NAVIGATION

• What alternative forms of Navigation are you
  going to provide?
• Some Web sites contain extra information to the
  main content, such as a Glossary of Terms, an
  Alphabetical Index of Contents, or a Credit Page.
• How will you link these to the main Doc?

Flowcharts Routes
31
STORYBOARDING

• Storyboarding is the process of creating a rough
  outline and sketch of what your Web site will
  look like before you actually write any pages.
  Including
• Which topics go on which pages.
• The primary Hypertext links.
• Some conceptual idea of what sort of graphics
  youll be using and where they will go.

Storyboards
32
STORYBOARDING

• When presenting your storyboard there are several
  things to consider.
• Try to approximate the size of the screen in your
  drawing, for instance, if using a 640 x 480 or
  800 x 600 format then make your drawing fit the
  43 ratio on the page.

Storyboards
33
STORYBOARDING

• Inside the Border drawn to ratio, place sketches
  of text, image and buttons used if any.
• At the bottom of the page in about one paragraph
  describe the content of the page drawn above.

Storyboards
34
MID-TERM ASSIGNMENT TO TURN-IN

• Create your Flowchart on one page. You may use
  Microsoft Office to create the Flowchart.
• Place your Storyboard on an 8.5 by 11 inch piece
  of paper in Landscape mode, one for each page in
  the Web site.
• Label each page as to its placement in the total
  Web site structure.
• Include a small paragraph as to its content.

35
BIBLIOGRAPHY

• Lemay, Laura, Teach Yourself Web Publishing with
  HTML 4, Sams Publishing, Indianapolis, IN, 1999
  (1231 pages).
• Williams, and Tollett, The Non-Designers Web
  Book, Peachpit Press, Berkeley, CA, 1998 (288
  pages).
• Teague, Jason Cranford, DHTML for the World Wide
  Web, Peachpit Press, Berkeley, CA, 1998 (248
  pages).
• Vodnik, Sasha, Dynamic HTML, Course Technology,
  Cambridge, Mass., 1998 (7 tutorials).
• Lin, Forest, Short Course in HTML, Scott/Jones
  Inc., Publishers, El Granada, CA, 1999 (236
  pages).
• Rouyer, Jeff, Dynamic HTML Web Magic, New Riders,
  Macmillan Computer Publishing, Indianapolis, IN,
  1998 (296 pages, includes CD).
• Ibañez, Ardith, and Natalie Zee, HTML Web Magic,
  Hayden Books, Indianapolis, IN, 1997 (230 pages,
  includes CD).
• Sinclair, and Callister, JAVA Web Magic, Hayden
  Books, Indianapolis, IN, 1997 (224 pages,
  includes CD).