AOIT Web Design s2

AOIT Web Design

Lesson 7 Planning an Effective Website

AOIT Web Design

Lesson 7

Planning an Effective Website

Student Resources

Resource / Description
Student Resource 7.1 / Worksheet: Exploring Site Maps
Student Resource 7.2 / Assignment: Exploring Wireframes and Content Placement
Student Resource 7.3 / Worksheet: Defining Format for Wireframe Terms
Student Resource 7.4 / Culminating Project Work: Creating Site Maps
Student Resource 7.5 / Culminating Project Work: Creating Wireframes

Student Resource 7.1

Worksheet: Exploring Site Maps

Student Names:______Date:______

Directions: With your partner, open the first two links below and explore the websites by using the site map. Then respond to the questions and prompts in the chart below. After you have completed the chart, look at the third link to explore other types of site maps. Be prepared to share with your class which style of site map you prefer and why.

Online Computer Library Center (OCLC): http://www.oclc.org/sitemap/default.htm

Huge Domains: http://www.hugedomains.com/sitemap.cfm

Content and Structure: http://webaim.org/techniques/sitetools/

Questions and Prompts / OCLC / Huge Domains
What style is the site map: textual or graphical?
Find the FAQ (or Q&A) link on each site map. Describe the path you followed to find this link.
Click the logo in the upper left corner. Then, without using the back button, find the site map again. Describe the path you followed to find this link.
Rate the site maps on their ease of use: 1 = difficult to use, 5 = easy to use.
Rate the site maps on their visual appeal: 1 = not appealing, 5 = very appealing.

Student Resource 7.2

Assignment: Exploring Wireframes and Content Placement

Directions: Review the sample wireframe below for www.netflix.com. Then select a web page from the list below, and, on a separate sheet of paper, create a wireframe of that page using only a pencil and a ruler. Include only text, lines, and simple shapes to depict the layout and main components of the page. Indicate the navigational structure, menu style, graphic/media areas, content placement, global links, and interactions. You do not need to sketch any subpages.

· http://www.nytimes.com/

· http://www.oracle.com/

· http://www.ebay.com/

· http://www.barnesandnoble.com/

· http://www.discovery.com/

· http://www.usa.gov/

Student Resource 7.3

Worksheet: Defining Format for Wireframe Terms

Student Names:______Date:______

Directions: This guide will help you understand wireframe terms and why each component is important in the creation of a wireframe. In the chart below, first enter a category for each term. In the next column, list characteristics of the term as you would see in a dictionary definition.

Term / Category / Characteristics
A jump menu is a
A multi-tier menu is a
A navigation bar is a
A page footer is a
A page header is a
Text-only navigation is a
A tree-style menu is a

Student Resource 7.4

Culminating Project Work: Creating Site Maps

Directions: As part of your culminating project, devise a site map for your client’s website based on the knowledge you gained in the previous activities and your client’s intake form. Use this procedure to create your site map.

1. First, list ALL of the website’s content.

2. Start the information design by categorizing the content into specific pages.

3. Create a box to represent each page.

4. Create a navigational scheme by categorizing the boxes and placing them in the proper hierarchy.

5. Draw lines connecting the boxes to represent the flow of the information.

Make sure your site map meets the following assessment criteria:

· The site map contains all of the pages in the website (10 maximum for this project), with a title and brief description of each page.

· The site map begins at the home page and shows a correct navigational scheme for all subpages.

· The site map contains links to global pages such as contact information, “About,” news, search, etc.

· The site map accurately integrates the client’s functional needs into the design.

· The site map is neat, clear, presentable, and professional.

Student Resource 7.5

Culminating Project Work: Creating Wireframes

Directions: As part of your culminating project, you will be devising wireframes for your client’s website based on the knowledge you gained in the previous activities and your client’s intake form. Use this procedure to create your wireframe.

1. Sketch simple shapes and lines to designate the main components of each page (navigation, content areas, graphic/media areas, logo).

2. Illustrate the content hierarchy with sample headers, titles, body text, etc.

3. Divide and label the navigation area to illustrate the specific links and menu style.

4. Add other elements such as global pages, login areas, search boxes, site map, etc.

5. On subpages indicate any other navigation tools such as snail trails, button changes, etc.

6. Add labels and side notes to provide further description for each area (e.g., label logo with a number and add a side note indicating that it always links to the home page).

Make sure your wireframes meet the following assessment criteria:

· The wireframes are text and simple line diagrams only, and depict the general page layout for at least one page of each level (home, secondary, tertiary, etc.).

· The wireframes indicate the general placement and quantity of interactive elements, media/graphics, content areas, and links.

· The wireframes indicate the menu style (tree-style, multi-tier, drop-down, pop-up, flyout, etc.), as well as button style.

· The wireframes indicate how to navigate home, how to determine the current location, and how to access the site map.

· The wireframes contain links to global pages such as contact information, “About,” news, search, etc.

· The wireframes accurately integrate the client’s functional needs into the design.

· The wireframes display the placement of the company’s title, logo, and important graphic images.

· The wireframes are neat, clear, presentable, and professional.