Brad Paiva
6/17/08
ART 35 Web Design I
Instructor: Jill Carrico
jcarrico11@mail.bristol.mass.edu
Week 4 – Design Document Part 2 -- Content/Organization for Web Site
I. Content/Functionality for the web site:
Using the information and analysis from your first worksheet, create a list of content elements. List all content you are considering, including text (narrative, descriptive, persuasive? Annotated links list? Quotes? Testimonials? Interview? Etc.), images (photos, illustrations, diagrams etc.), interactive (mailto links, forms, i.e sign-up form, questionnaire etc.)
1. Text
a. Recipes for/with product
b. Weight loss and nutritional tips involving product
c. Testimonials from satisfied customers
2. Images
a. photos of families sitting down to breakfast with product
b. Illustrations/diagrams of food pyramid and where product fits in said pyramid
c. stock photos of people outdoors kayaking/mountain climbing/overall exercising
3. Interactive elements
a. kitchen theme (links disguised as egg timers, clocks, pots, pans, bowls, spoons, ect.)
b. "speedy" theme (collage of mixed objects such as clocks, backpacks, cars, buses, suitcases, ect as links to different pages.)
c. "messy" theme (dorm setting with dirty socks, trash, books, ect. leading to different pages; a microwave with a golden aura shining from inside In a dimly lit room as a splash page.
II. Organization for the web site:
Use index cards or post-it notes to organize your content list and define the basis for your flowchart (site's structure).
1) Begin by writing each element of the content list on a separate index card. Spread the cards out on a big table (or the floor) and organize them into groups. Try organizing them in different ways. When you are satisfied with how you have grouped things, come up with a name (title) for each group. In coming up with this group, or category names, try to be as descriptive as possible without being verbose (try to use just 1 or 2 word names).
2) Then type a list that includes the name of each group (underlined) followed by the contents within it. Example:
Wild Animals Domestic Animals Careers
lions cats zookeeper
tigers dogs veterinarian
bears fish lion-tamer
Once you've decided on (and typed up) the final groupings and names, use them as the basis for defining the major sections of the site and the names of each section. This is the basis for your site structure (flowchart) A well-designed structure makes it easy to define a navigation system, and a well-thought-out navigation system and organizational structure make designing page layouts and templates more effective.
III. Metaphor exploration for the web site:
This exercise may help you refine your vision of the site's structure. A good metaphor can help users understand how to use and navigate the site. You may end up combining the best parts of several metaphors or you may end up deciding not to use any metaphors. You need to end up with a typed list with at least one item under each of the 3 categories below:
1) Organizational metaphor - this type relies on the existing structure of a group, system or organization. For ex. a site selling groceres may use a metaphor of a supermarket where products are grouped logically by type (canned vegetables, dairy products, frozen meanls etc.)
2) Functional metaphor - this type relates tasks you can do on the site with tasks you can do in another environment. Ex., Photoshop uses a lot of functional metaphors, such as "cut" and "paste" - as if you were using real-world scissors and glue.
3) Visual metaphor - this type is based on common graphic elements familiar to most people in our culture. Ex. a music site that allows users to play songs, may use the traditional "start", "stop" and "pause" icons found on CD players.
The overall site may not be explainable as a metaphor, but perhaps the navigation system (or smaller subsets of the site) can be. However, you should end up with a rationale for your site structure, based on metaphor or based on audience research.
IV. Create a hierarchical map of the site for the web site:
1) The major sections you decided upon earlier are the "roots" of a site structure listing. Fit them to your rationale or metaphor. Then map out the organization of each section with items from II. Organizational list. As you go deeper into the site, indent the lower levels. Begin to focus on the smaller parts of the site.
Ex. Domestic Animals
1. Cats
1.1. Different breeds
1.2. Caring for your cat
1.3. History of the cat
1.4. Legends about cats
1.4.1 Egyptian cat worship
1.4.2 Witches familiars
2. Dogs
2.1. Different breeds
2.2. Caring for your dog
2.3. History of the dog
2.4. Man's best friend
2.4.1 Seeing eye dogs
2.4.2 Police dogs
FYI -- DUE WEEK 5: (2) Visualize this list by creating a flowchart (see sample flow chart handout) Draw a diagram showing how the elements of the site can be grouped, and how they link or relate to one another.
Cream of Wheat
1. Right
1.1Contact info
1.2 Microwave Directions
1.3 Conventional directions
2. Left
2.1 Different flavors
3. Top
3.1 Logo
4. Bottom
4.1 Logo
4.2 Barcode
5. Front
5.1 Vitamin Teaser
5.2 Logo
5.3 NET WT.
6. Back
6.1 Vitamin Facts
6.2 Nutritional Facts
6.3 Ingredients