The Principles of Design: Movement LESSON 7 Module 3: Designing for Communication The Principles of Design: Movement

Lesson Overview In this lesson, you will: Explore the principle of movement on a Web site. Lesson 7 Overview

Guiding Question How can you create the illusion of movement with text? Use the guiding question as a class starter, allowing the students time to answer the question. Discuss student answers to the question.

Movement Natural eye movement Designer created 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.

Natural Eye Movement 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 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. Our eyes will naturally look at the top left-hand side of a Web site because we are taught to read from left to right, top to bottom. Next, the eye moves across the page to the end of the line of text. Once it has reached the end of the line, the eye may not necessarily go to the next line. Instead it may return to the left side of the page, move down, and start across the page of text again. Once this line of text is complete, the eye will then move back to the left side of the page and follow the line of text down to the bottom. Other variations on this eye movement are movement in the shape of an E or inverted L shape.

Natural Eye Movement F-shaped pattern for reading content: http://www.useit.com/alertbox/reading_pattern.html 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 Eye movement created through the use of shapes 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.

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! 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.

Principles Analysis Project Take some class time to give each student a copy of the rubric for the Principles Analysis Project (T.3.7_8_9_10.R_Principles.doc) and go over the expectations of the project. The students will be expected to use the rubric to guide them through the project. For the Principles Project, students will need to take the Web site that they have chosen and critically analyze each of the 5 Principles of Design 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. Be sure to define the classroom teacher’s expectations as to what critically analyze means and what the justification paper should contain.

Assignment Use the Web site that you selected Analyze it according to the principles of movement Begin writing your justification 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.

Lesson Review Describe the principles of movement as it applies to Web design. This is the last slide of the presentation.