Ms. Bloomfield's Design Document for Class Website

Purpose

The purpose of this website is that it will serve as a communication tool and information hub for the two middle school choir courses I teach. Most of the content found on the website will come from my teaching documents. The content provided will include classroom procedures and guidelines, course handbook, performance information and calendar, and grading specifics for a project-based learning classroom. Through this website, students will also have the opportunity to find links to additional practice opportunities supporting our classroom vocabulary and links to recordings of our repertoire.

Audience

The target audience for this site are students enrolled in my courses and their parents or guardians. Parents or guardians may want to check the performance schedule, reference the course handbook, see what their students are learning, or may seek contact information to find answers for their additional questions or concerns. Students may want to check the site for additional practice opportunities such as links for recordings of their voice part, vocabulary help, and questions about course expectations and grading procedures.

Use Cases

Use Case #1

At the beginning of the school year, I pass out a handbook with all of the course information. This handbook applies throughout the year although sometimes with paper sources, the information gets lost or misplaced. I currently do not have a website outlining my courses so this would act as a digital version of the handbook along with other helpful information. Parents will use this website as a source of information and communication.They can find this information on the "Course Information" page.

Use Case #2

Students can visit this website for additional practice opportunities relating to course content, specifically vocabulary. Links to interactive vocabulary games will be included and organized within our WOW Words (Words of the Week) categories. Links to recordings of repertoire that we are currently learning will be included. Some students take their music home to rehearse their voice part so the links will benefit their individual practice. Sometimes we also sing music that is in a foreign language or is multi-cultural so any translations could be included. They can find this information on the "Practice" page.

Use Case #3

The website will include a form used to collect data because it will have an opportunity for parents to ask any course questions to the teacher. A link to my email address will be provided and parents can contact the teacher with course, performance, or grading questions or concerns. This information will be located at the bottom on each page including the home page for ease of access.

Needs Assessment

Four students and parents shared their thoughts through a questionnaire on what content would support the purpose of this site, what features are not helpful, and how this site would benefit a classroom. Surveyed students and parents want to see focused content information, explanation of courses, and extra opportunities for the students. This population was surveyed because they would be example visitors to the site.

Questions asked to the group:

What type of information would you find helpful and useful on a class website?

Focused content information
Description of Class Objectives
Instructional Videos and Performance Recordings
Student Expectations

What practice tools or instructional materials would be helpful and supportive of our classroom?

Interactive games incorporating content
Other groups singing the same music as us

How many times a week would you, as a parent or student, visit a class website?

Average response were three or more times a week, which emphasizes the importance of creating this site.

What items or features are not helpful in a class website?

Site navigation is too complex and information is difficult to find.
Not updated information or non-working hyperlinks
Vague overview of purposeful course learning objectives

Five Reference Websites

These sites are examples of good and/or bad artifacts that are considering for the final design.

For a navigation, this website provides the navagation style that is most widely used for a class website. Here is an example of good navigation.
For a simple layout, this page will be similar because it has an aligned banner and tabs at the top for easy navigation of material. It also highlights certain features of the site with images and bold tabs.
For an avoid layout, this website is in a blog format, doesn't provide tabs to easily find information as one must search their topic in the search box on the right side, and the colors and patterns used are large and overstimulating visually.
For a content style, this site will not be similar to mine because it lacks images relating to content, amount of material on the page, and organization of content as it is more in blog format; an avoid content style example.
For preferred color scheme, the color on this website represents the school colors for banner, font and background that I would like to use.

Content

Based on the responses of the members and other educators, I have chosen to include the following content areas:

Course Information: Will include the course handbook, course descriptions, and description of expectations and classroom guidelines.
Calendar: Will include performance dates for the school year. Printable version included.
Practice: Will include additional practice opportunities including links to recordings and interactive vocabulary games.
Grading Specifics: Will include pbl grading categories and grading criteria.

Presentation of Information/Rational of Organization

The web site will be hierarchical in nature because I have a central subject with supporting pages.

To provide a consistent look and feel across all pages and to give my website fluidity, all pages will contain/use:

The same banner logo at the top of each page.
A heading just below the top horizontal navigation that will provide the Page Name
Same navigation conventions
Same heading formats and colors all
Contact information at the bottom of each page
Link back to the home page

The home page

It will be laid out in a table format.
It will provide links to the main sections.
It will also contain a welcome statement, music quote, and featured photo.
Links to main sections at the bottom of the page

All subsequent pages will provide horizontal navigation text across the top of the page.

Audience will have access to the navigation at all times.
I plan to keep the pages under three screen lengths.

The following details the content of the proposed pages:

Course Information Page

A course description will be shared.
A copy of the choir handbook will link to a printer friendly version.

Calendar Page

It will show a yearly calendar with marked performance dates for the school year.
The calendar will link to a printer friendly version on a separate web page.

Practice Page

It will include links to recordings of current repertoire for additional student practice.
There will be a list of links that introduces the content focus areas, with each focus area linking to its own page.

Grading Specifics Page

It will share choir grading procedures within a project based learning classroom.

Media

The banner logo will be a graphic that I create using Photoshop. All other images used will be photos taken to represent the items being discussed. These will include a featured photo on the home page, and images that relate to content on other pages. All images will be optimized for web use and credit will be given to the photographer. I intend to include this statement below each image, "Photo courtesy of name." I may use photos from a free stock photo website, Pexels. I'll include a footer statement such as "All images used in this site are original. Any further use of these images is prohibited without permission from the photographer" if I am taking the photographs. A similar footer statement will be included if images are from other sources making sure appropriate copyright procedures are followed.

Color Scheme and Rationale

Since this page will be a classroom website, the color scheme is based on the school colors. Background will be grey and text will be red or black. Headings will also be black with the text inside as white, in order to emphasize the text.

Examples of the colors being used on the website include the follow: