The Elements of Design: Shape and Line LESSON 3 Module 3: Designing for Communication The Elements of Design: Shape and Line

Lesson Overview In this lesson, you will learn: How shape and line apply to Web design Lesson 3 Overview

Guiding Questions Does a square or rectangular shape have any particular meaning to you? How about a triangle? What meaning does a circle have? Use the guiding questions as a class starter, allowing the students time to answer the questions in their journal. Discuss student answers to the questions. The questions could open a discussion for the review of perception, as the questions ask about the students’ perceptions of a square and a circle.

Design Analysis Project Take some class time to give each student a copy of the rubric for the Design Analysis Project rubric (T.3.1_3_4_5_6.R_Design) 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 Analysis Project, students will need to take the Web site that they have chosen and critically analyze each of the 5 Design principles 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. The classroom teacher should take some time now to set their expectations as to what is meant by critical analysis and justification paper (i.e., length, style, etc.). At this point, the classroom teacher should also set a due date for the project. A suggestion for a due date would be the day of Lesson 6.

Shape Organizational use: Hold concept and ideas Divide the site Give meaning: Rectangles Circles Closed figures 3-dimensional Discuss shape. Shapes serve two purposes when used in Web design. This first is that shapes can be used to organize a site. Similar ideas and concepts can be contained within a shape. Shapes can also divide the site into sections. The second way that shapes can be used is to give meaning to the site. Think back to the guiding question at the beginning of class. What does the use of a rectangle and a circle mean to you? Shapes can be closed or 3-dimensional.

Rectangles Commonly used to: Organizes information Focuses attention Advertisements Text The most common use of shape in Web design is the rectangle. Rectangles are used to organize information by providing a container for it, showing importance, and focusing the viewer’s attention. If you look at a Web site containing advertisements, you will find that advertisements most generally use rectangles to surround their information and separate one ad from another. You might even try tracing a line around the text on a Web site. You will find that the figure resembles that of a rectangle. The use of space between paragraphs helps to create this shape and helps to define and organize the information.

Circles Have a somewhat different meaning: Can focus attention Can create a sense of harmony or unity Can show a process When circles are used in Web design, they tend to have a different meaning. While circles can be used to focus attention, they can also be used to create a sense of harmony, unity, and to show a process.

Buttons Rectangles Circles Both separate the button from the rest of the site Navigation buttons are also common uses for shapes. Many Web sites use a form of a rectangle for the navigational buttons, but some sites will use circles for this tool. Both designs help to define the button as an area separate from the rest of the site.

Lines Have similar use to that of shape Provide separation Provide organization Can be curved The use of the line is very similar to that of shape. A line can be used to provide separation from one part of the Web site to another providing organization to the site. Lines do not have to be straight. Lines can be curved depending on how they are used in the site.

Lines Create progression or process Show movement of an object through a system Create motion or action Show direction of an object (cartoon figure) Lines can be used to show progression or motion in a Web site. As beginning Web developers, most of you will not be able to create animated figures in your site. Through the use of lines, you can create a similar effect. Think about how a cartoonist creates the effect of movement.

Lines Form connections between parts of the site Hyperlinks combine line with color Caution against the use of underlining for information that isn’t a hyperlink Lines can also be used to link or make connections between two or more parts of a Web site. When lines are used to link or make connections between parts of a Website, it can be done by simply connecting two shapes with a line drawn between them. This connection helps the viewer to see the connection of the information. A line can also be used to alert the viewer to a hyperlink. The normal way to alert the viewer to a hyperlink is to combine the use of underlining and color. When a viewer sees a word or group of words that are a different color than the surrounding text and underlined, they expect clicking on these words will take them to another site or section of the same site. Caution should be taken in using underlining in other areas of the Web site. Finding underlined words or groups of words that aren’t hyperlinks can be frustrating for the viewer.

Assignment Use the selected Web site Analyze it according to the use of line Analyze the use of shape Write a justification for each Discuss the assignment as listed above. Students should be given time in class to complete work on the Design 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.

Lesson Review What are the best uses of shape and line in Web design? This is the last slide of the presentation.