2. LESSON OVERVIEW
• In this lesson, you will:
• Explore the principle of movement on a Web site.
3. GUIDING QUESTION
• How can you create the illusion of movement with
text?
• Answer this by creating a new thread in the discussion
forum; title it Movement
4. MOVEMENT
• Movement in a Web site can be created in two
ways.
• The first type of movement is the natural movement of the
eye as someone views the site.
• The second type of movement is one that is purposely
created by the designer.
5. NATURAL EYE MOVEMENT
• When a Web site is viewed, there is a natural
movement of the eye through the site.
• This movement makes the shape of an F on the
page.
• Starts at the top left of the page
• Moves left to right
• Returns to the left side of the page
• Moves down the left side of the page
• Moves left to right
• Returns to the left side of the page
• Moves down the left side of the page
6. NATURAL EYE MOVEMENT
• Use this link below to view the results of studies on
eye movement on Internet pages.
• This information points out the areas that a Web
designer should pay special attention to in a site as
those areas will be the ones most often seen.
• F-shaped pattern for reading content
7. DESIGNER CREATED MOVEMENT
• A Web designer can attempt to change the natural
eye movement through the use of shapes.
• By using shapes in a repetitive and progressively smaller size,
the viewer’s eye is drawn to another section of the site.
• The designer may also choose to use arrows or lines to
create the same effect.
8. DESIGNER CREATED MOVEMENT
• Creates a hierarchy of information
• A ranking of the importance of things
• Changes the natural eye movement to cause the
viewer to take notice of other areas of the page.
Viewer reactions:
• This is important!
• Check it out!
9. LESSON REVIEW
• You should be able to:
• Describe the principles of movement as it applies to Web
design.
10. ASSIGNMENT
• Use the Web site that you selected
• Analyze it according to the principles of movement
• Begin writing your justification
Notes de l'éditeur
Lesson 7 Overview
Use the guiding question as a class starter, allowing the students time to answer the question. Discuss student answers to the question.
Movement in a Web site can be created in two ways. The first type of movement is the natural movement of the eye as someone views the site. The second type of movement is one that is purposely created by the designer.
Use this Internet link to show the results of studies on eye movement on Internet pages. This information points out the areas that a Web designer should pay special attention to in a site as those areas will be the ones most often seen. Have a discussion with the class on the implications of this information.
Designer created movement—A Web designer can attempt to change the natural eye movement through the use of shapes. By using shapes in a repetitive and progressively smaller size, the viewer’s eye is drawn to another section of the site. The designer may also choose to use arrows or lines to create the same effect.
When movement is created by the designer, a hierarchy is put in place on the site. Hierarchy is ranking things by their importance. By creating eye movement toward a specific spot on the site, the designer is saying that this information is important. Check this out.
This is the last slide of the presentation.
Discuss the assignment as listed above. Students should be given time in class to complete work on the Principles Assessment task. This gives the classroom teacher time to evaluate the level of student understanding of the assignment and to make changes or clarifications as needed. Remind students of the due date for the assignment.