WIT 2003

Advanced Web Design
Tasks | Teaching guide | Resources

Introduction

In this module you will organize, design, and implement a complete web site. HTML files are provided for you so that you can focus on design issues rather than content. You will supply the organization, the navigation, and the overall look of the site. This will allow you to experiment with implementation issues that you might later want to use in your curriculum web.

The site you will design is a web site of recipes. There are 49 recipes provided, some with accompanying photographs. Each recipe is in an HTML file with minimal formatting; your task is to meld these files together into a coherent, well-designed web site. Along the way you will learn about various design issues and discover how to implement the decisions you make. Take a peek at the list of the recipes you'll be working with.

Tasks

0. Before you begin
   Read chapter 5 of Curriculum Webs: A Practical Guide to Weaving the Web into Teaching and Learning. This chapter covers the design of effective web sites.
   
   
1. Download the files you will be working with
   Here is a file of recipes:

   Mac users click here to download (.sit file)
   PC users click here to download (.zip file)

   The computer's software should automatically create a folder for you called "recipes" that contains 70 files. One is a listing of the names of all the recipes (recipeIndex.html) ; 49 of them are html files with one recipe per file (recipe1.html, recipe2.html, etc.); the other 20 are photographs of the various recipes (recipe3.jpg, etc.).
   
   Help: If the file does not automatically uncompress into a folder called "recipes", then start up Stuffit Expander (Mac) and open the file recipes.sit, or start up WinZip (PC) and open the file recipes.zip.
   Can't find the recipes folder? Check your browser's preferences to see where downloads go. Or do a search for "recipes" (use "find" or "sherlock" on a Mac, "find" on a PC). Move the recipes folder to your work area.
   
   
2. Organize your web site
   Learn about the organization of web sites.
   Decide how the recipes in your web site should be organized. Will there be more than one way to access a recipe? By ingredient? By cuisine (Mexican, Italian, Chinese, etc.)? By course (hors d'oeuvre, salad, entree, dessert, etc.)?
   
   
3. Plan your navigation scheme
   Learn about navigation designs.
   Design a navigation scheme for your recipe web site. It should reflect the organization of the site. Think about how easy or difficult it will be for the user to find useful information (for example, a list of recipes that fit the criteria the user is looking for). Will there be a link to every recipe from every page? Consider how easy or difficult it will be for you, as the site's webmaster, to add new recipes. What changes will have to be made to the navigation scheme for each additional recipe?
   
   
4. Choose a "look and feel"
   Learn about user interface issues.
   Choose a "look" for the site. Think about basing it on an appropriate metaphor or theme. Obvious metaphors for this exercise are a cookbook or your grandma's recipe file. You might use graphic symbols or certain colors to indicate different ethnic cuisines, courses, or ingredients.
   
   Checklist: here is a checklist of design considerations that you should adhere to.
   
   
5. Examine existing sites
   Optional activity: Look at at existing web sites. Here are some starting points; you probably have some sites in mind that are already your favorites (or least favorites). Choose three well-designed and three poorly-designed web sites and discuss them with your fellow participants.
   
   Required activity: Look at the two sample completed recipe web sites, focusing on the user interface. What do you like and dislike about the sites?

   Example 1: from grandma's kitchen
   Example 2: recipes for today's kitchen

   
   
6. Implement your design decisions
   Using the files you downloaded in the recipes folder, implement all the design decisions you made in steps 2-4.
   
   Template: consider using a template to implement your consistent look and feel. Apply the template to each file. (See the Dreamweaver module for more about Templates). Both example 1 and example 2 used templates to apply formatting to each of the recipe HTML pages.
   
   Frames vs tables: many web designers use either frames or tables to lay out their web pages. Example 1 uses frames to separate the navigation bar from the recipes; example 2 uses a table to separate the navigation elements from the content of each recipe. Pages 86-87 and pages 109-111 in Curriculum Webs cover this in more detail. You can also see the WIT 2003 Dreamweaver module for how to insert tables using Dreamweaver and how to implement frames.
   
   Jump Menu: a popular navigation method is the jump menu. The navigation in Example 2 is implemented using jump menus. To find out how to implement a jump menu in Dreamweaver, click here.
   
   
7. Assess the success of your site design
   Apply the WIT web site rubric (available in your WIT 2003 Handouts book and here) to your site. Modify your design so that it receives an excellent in all categories.