Teaching Guide for Advanced Web Design
Tasks | Teaching guide | Resources

Aim

The goal of Web Site Design is to teach WIT participants to create a web site with a consistent overall site structure, easy-to-use navigation elements, and a consistent user interface. The contents of the web site that the participant will create in this lesson is provided here, allowing the participant to focus solely on design issues.

Rationale

What makes a web site easy to navigate? What are the design principles behind easily-navigated web sites? This unit will help teachers apply the principles of good web site design in creating well-organized, easy-to-navigate web sites. A well-designed web site is a good way for teachers to introduce their students to the World Wide Web and to present curriculum to their students.

Subject Matter

The creation, by participants, of a well-designed web site. The content of this web site is provided in this lesson.

Audience

This unit is for anyone wishing to create easy-to-use web sites, particularly classroom teachers who are creating web sites to incorporate into their daily curriculum.

Prerequisites

Participants should be experienced web surfers, and should have a have a working knowledge of web page editing software such as Dreamweaver. Participants might find it useful to have access to and knowledge of a graphics editing program such as Adobe Photoshop.

Instructional Plan

1. Participants learn principles of web site organization, navigation, and user interface from readings, examination of existing web sites, and class discussion. The readings include online articles and sections of Curriculum Webs.
2. Participants learn and/or review use of their web page editor to implement frames, templates and jump menus. Step-by-step instructions are provided for Dreamweaver.
3. Participants create a web site using good navigation principles. The files for the site, a collection of recipes for cooking, are provided; the participant's task is to organize the site and create a consistent user interface (the "look-and-feel") and a navigation scheme for it. Two completed sites are used as examples.
4. Participants assess their web site designs using the web site evaluation rubric created for WIT.

Suggested Method of Presentation
Note on timing of module: Step 0 (reading) should be done as homework before beginning the module. Steps 1-4 can be spread over one to two days, depending on whether the mentor decides to do the optional web site evaluation activity in step 4. Without the optional activity these steps should take two to three hours; the optional activity adds another hour and a half. Step 5, implementation of the web site, will take most of one class session and should occur on the next day, allowing participants to think about their designs overnight. Assessment (step 6) can occur at the end of that class, or can be done the next day.

0. Before beginning the module, mentors should encourage their students to read chapter 5 of Curriculum Webs. This chapter covers the design of effective web sites. The chapter is ten pages long and can be read as homework.
1. Mentors who present the Advanced Web Design module should have their students read the introduction page of the module. This page outlines the tasks the students will perform. (15 minutes)
2. Mentors should then provide an overview of the module's activity and help their students download the necessary files (recipes.sit for Mac users, recipes.zip for PC users). (15 minutes)
3. Students then read about organization of web sites, navigation schemes, and user interface issues ("look-and-feel"). Mentors should encourage their students to envision a design for their recipe web site as they read. (1-2 hours)
4. Mentors should then lead a class discussion of the above web design issues. (30 minutes to 2 hours)
   Optional activity: Web Site Evaluation
   • Groups of students examine existing web sites, focusing solely on their navigation schemes and look-and-feel (not on their content). Starting points for this exercise are provided.
   • Have each group find three examples of excellent web sites and three examples of poorly-organized web sites. They can make a simple web page with links to these sites for easy access.
   • Each group then presents their findings to their classmates, with accompanying class discussion.
   Students can now look at the two sample completed recipe web sites in light of what they have learned about user interface issues (example 1, example 2).
5. Students then individually (or in very small groups) decide on an organization and a navigation scheme, and design a thematic look-and-feel for a web site of recipes for cooking. They then implement their designs. (2-4 hours)
6. Mentors then have their students evaluate their designs using a rubric. (***link here)
   The critique could take place individually, in small groups, or in the class as a whole. (15 minutes each)

Materials Needed 

Participants will each need a computer with a web browser and web page editing software such as Dreamweaver, Internet access to connect to online resources, and a copy of Curriculum Webs. Graphics editing software such as Adobe Photoshop is optional.

Assessment

At the completion of this module participants will assess their completed recipe web sites using the web site evaluation form created for WIT. (link here***)

Evaluation

To evaluate this module, use the Feedback form. (link here***)