Communication:
The End Result of Web Design

Syllabus

Teacher:  Susan Boone 
e-mail:sboone@houstonisd.org

Click on today's date to access assignment

 

  

November 08

 

November 3

Warm-up: Answer ONE of these as a new POST to your BLOG. 

Have you ever said something that was interpreted incorrectly by another person? Why do people sometimes misunderstand things that we say? (Point out that body language, intonation, and the receiver’s mood all play a part in how the message is received.) Has someone read an e-mail message from you and gotten the wrong idea from your e-mail message? (Sarcasm is not easily understood in e-mail. A person might read more into the message than what was intended and the message is misunderstood.)

What does the color red mean to you and what does it mean to other cultures? (The color red, as well as other colors, can have multiple meanings such as love, evil, or anger. The color red in China symbolizes good luck.)

PowerPoint Presentation -- check your email account for a copy of this presentation.

Discuss the topics for this module:

  • The basic mechanics of the human eye; How does the eye work and what part does it play during communication?

  • How the human brain processes the information that is received from the eye.

  • The basics of design elements and how they relate to Web design.

  • How design principles are used in a Web design.

Follow Up/HW: 
Students will find five Web sites which will demonstrate their understanding of using Web sites to address differing audiences. The five Web sites will fall into two categories, age and locality appropriateness. Through the examination of these sites, students will learn how different designers address these issues in their sites.

Create a Word document and save it as websites.doc to your temp folder. Find websites for each of the five categories listed below.

  • A Web site targeted toward small children ages 5–12.

  • A Web site targeted toward teens ages 13–19.

  • A Web site targeting a local audience.

  • A Web site targeting a national audience.

  • A Web site targeting a worldwide audience

Record the audiences, title, URL, and purpose for each. Save the file as websites.doc to your temp folder.

November 4

Objective:
Students will: List the parts of the eye and describe the function of each part.
Describe the visible spectrum.
Analyze how color sensitivity can affect Web design.

warm-up:

BLOG entry-- When you look at something, how do you know what you are seeing? What process does your body go through to identify the object? (Create an appropriate title) -- 5 minutes.

Learning Activities or Tasks

Students will fill out a diagram labeling the parts of the human eye as a study guide and take notes on the information presented during the class. Practice 'Building an Eye'. Build an Eye - http://dsc.discovery.com/tv/human-body/explorer/explorer.html

Label the following parts:

Cones – nerve cells found on the retina used to process all color that comes into the eye. Cones are most sensitive to the colors red, green, and blue.
Cornea – the clear outer layer of the eye.
Iris – the muscle around the eye that controls the opening and closing of the pupil.
Lens – the part of the eye that allows for focusing of the light that has entered the eye.
Optic nerve – the nerve which connects the retina to the brain.
Pupil – the black center of the eye that controls the amount of light that enters the eye.
Retina – the back of the eye which receives the light and is covered with two types of nerve cells called rods and cones.
Rods – nerve cells found on the retina used in low light situations and process light that is white, black, and gray. Rods are also used to perceive distinctions between light and dark, as well as changes in shape and movement.

Students view a video in which a cow’s eye is dissected. A cow’s eye closely resembles that of a human eye, only larger, and therefore the individual parts are more easily viewed.

http://www.exploratorium.edu/learning_studio/cow_eye/index.html

Follow-up/HW:
Additional Activities (homework or enrichment)
The Blind Spot - http://faculty.washington.edu/chudler/chvision.html

November 5/6

Learning Objectives

Students will:

  • Explain the function of pigment.

  • Describe the function performed by the optic nerve.

  • Explain what happens in the four main types of color blindness.

warm-up --Create a new post to your Web Mastering BLOG. Answer the following question using the Module 3 Resource Packet for guidance.

What makes a certain wave length bounce off an object? What makes grass green? And blood red?

Activitites: PowerPoint 3--Vision part 2-- (check email for your copy)

Explore Web resources concerned with color blindness.

  • Discuss pigment. Pigment is what gives an object a certain color.

  • Discuss focus. As the light travels through the eye, it is the job of the lens to focus the light.

  • Use the applet found at the Schools for Champions site (see link to Simulated Optics Experiments in the Resources section). Students should experiment with them to see how light is changed as it travels through the lens.

  • If the lens focuses the light in front of the retina, short-sightedness or myopia occurs. If the lens focuses the light behind the retina, long-sightedness (hypermetropia) occurs.

  • Astigmatism occurs when the curvature of the lens is not exactly round.

  • is a condition that comes on with age.

  • Discuss color deficiency. Color deficiency is the inability for the cones to detect certain colors and is commonly known as color blindness

    • Trichromacy is normal sightedness.

    • Dichromacy where the individual can see two of the three main colors (red, green, and blue

      • Individuals with protanopia have difficulty seeing red

      • Individuals with deutanopia have trouble seeing greens

      • individuals with tritanopia have difficulty with blues

    • Monochromacy is a rare form of color blindness where the individual only sees in blacks and whites.

Follow-up/HW:

Students should use the last Web site in the PowerPoint presentation to choose a color that they think would be best suited for the background of a Web site and a text color.

If you hover over the color, you will see the hexidecimal code. Choose a background and a text color.

Visit http://www.visibone.com/colorlab/ and choose the two colors that you decided on using the link above. How do they clook?

The students must write a short justification of their choices. Add this justification to the blog posting at the beginning of class. (Go to POST, edit POST, and choose the one you titled at the beginning of class.

Resources and Web Links

Cow Eye Dissection site (for magnifying lens demo) - http://www.exploratorium.edu/learning_studio/cow_eye/experimenting.html
Simulated Optics Experiments -
http://www.school-for-champions.com/science/experiments/simopticslens.htm
The Blind Spot (experiment to find your blind spot) - http://faculty.washington.edu/chudler/chvision.html
Color Vision (Color Deficiency and Web design) -
http://www.iamcal.com/toys/colors
Color Blindness Tests -
http://colorvisiontesting.com/ishihara.htm and
http://colorvisiontesting.com/online%20test.htm
What do color deficient people see? - http://colorvisiontesting.com/what%20colorblind%20people%20see.htm
Web Design and Color Deficiency -
http://www.iamcal.com/toys/colors

November 7

Objectives:

Students will:

  • Explain what happens to information as it is processed in the brain.

  • List strategies to help with memory retention.

  • Apply information about memory to Web design.

warm-up: Answer the following questions in a new BLOG posts. Answer in complete sentences rather than writing the question.

What is your earliest childhood memory? What things do you recall about your memory?

Activities: PowerPoint - Lesson 4 has been emailed to you. Review

Introduce the three types of memory: sensory, short-term (or working) memory, and long-term memory. Explain that each has a distinct purpose which will be discussed in the lesson.

Short-term or working memory allows you to remember 7 ± 2 items for a short period of time. If we are able to chunk information together we are able to remember more items.

Storing memories in long-term memory involves a process called encoding.

Fitts’ Law deals with how quickly our mind can process information.

How can this information be applied to Web design?

If a designer wants information from a site to be remembered, then the designer will want to include repetition of the concept in the site. This repetition could come from allowing the viewer to use multiple senses while viewing the site (auditory and sight). Chunking information and trying to connect the information with prior knowledge will improve memory of the information in the site.

Resources and Web Links

Sites not listed in the PowerPoint presentation:

Quizstar -- Designing for Communication

November 10

Objectives:   

  • explore the use of color as it applies to Web design

  • explore the uses of shape and line as they apply to Web design

  • explore the uses of texture and typography as they apply to Web design.

  • explain how to use movement in a Web site

warm-up: READ pages 7 – 10 in Module 3 packet.  (Sent to your email last week)

Activities: PowerPoint - Lesson 5, 6, 7, and 8 has been emailed to you.

  1. Explain how to use complementary colors to create contrast.
     Describe the use of RGB and HEX in Web design.

  2. Design Project, students will need to take the Web site that they have chosen and critically analyze each of the five design elements in the Web site. The title of the Web site, as well as the URL, must be provided at the top of the justification paper.

  3. Lines can be used to show movement or motion in a Web site.

  4. Discuss texture with the students. Texture is the use of design techniques to create the illusion of depth on a flat surface.

  5. Natural eye movement—When a Web page is viewed, there is a natural movement of the eye through the page. This movement makes the shape of an F on the page. Our eyes will naturally look at the top left-hand side of a Web page because we are taught to read from left to right, top to bottom

Handout – Web Site Evaluation

Directions for notes:  Folder a piece of notebook paper to create two columns.  The left column should be about two inches and the right column the rest of the page.
In the left column, write one of the design elements.  (see objective…the first one should be color).  Describe or define in your own words how this element pertains to web design.
In the right column, use the PowerPoint show OR the packet to list 3-5 main ideas that you should know regarding this element and web design.

Access this website:  http://www.randomwebsite.net/
Go to a ‘random web site’.  Close the frame at the top.

In the right column of your notes, record the title and URL of the random web site.
State specifics for each of the design elements used in the site and a brief description of what the site looks like.

Using the RUBRIC from class, evaluate the design element being used for this web site.
In your notes (right hand column) state WHY you evaluated the site the way you did.

Time to Make Some Choices

Color Families

Color Codes

Use Color Codes to find the Color Family

Color Families

Color Codes

Use Color Codes to find the Color Family

November 11

Objective: 

  • explore the principles of balance and proximity as they apply to Web design.
  • explore the principles of repetition and unity as they apply to Web design.

Activities:  

Principles Assessment project – back of handout from Monday
Balance is the distribution of items. In a Web page, balance is the distribution of such things as text, images, and navigation

There are three types of balance that can be achieved on a Web page: symmetrical, asymmetrical, and radial.

Another way to achieve balance is through alignment. Alignment is the orientation of text. There are four types of alignment, two of which create a sense of balance. The four types of alignment are left, right, centered, and justified.

Proximity is the measure of distance between things and can be used to send a message.
White space and proximity are also parts of the Gestalt Theory, which states that the whole is greater than the sum of the parts.

Repetition helps the brain move information from short-term memory to long-term memory.

Proximity can be used to bring ideas and concepts together. Repetition can be used to provide the unity between different pages of the Web site.

Activities:

Access this website:  http://www.randomwebsite.net/
Go to a ‘random web site’.  Close the frame at the top.
Work in pairs to choose THREE random websites. 

Use the Principles Analysis Rubric to assess these sites. 

On a separate sheet of paper, list the title and URL for each website.  Write a brief explanation of each design principle assessed and WHY you chose the evaluation number (1-10) you did.  Evaluate each of the three websites for EACH of the principles. 

 

Materials:  Principles Rubric, PowerPoint 9 & 10 (check gmail)

Follow Up/HW: Complete Rubrics prior to class on Friday.


 

     

 

Home | Info | Calendar | HISD | Academics | Staff | Classes
This page was last modified on Tuesday, November 11, 2008 .
Mail comments to Susan Boone
©Houston Independent School District

Nov. 3 November 4 November 5 & 6 November 7 November 11 November 11