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.
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.
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.
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.
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.
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 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.
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.
This is the last slide of the presentation.
The Elementsof DesignShape and Line
Lesson Overview In this lesson, you will learn: 1. How shape and line apply to Web design
Guiding Questions1. Does a square or rectangular shape have any particular meaning to you?2. How about a triangle?3. What meaning does a circle have?
Shape1. Organizational use Hold concept and ideas Divide the site2. Give meaning Rectangles Circles Closedfigures 3-dimensional
Rectangles Commonly used to: Organize information Focus attention Commonly used in: Advertisements Text blocks
Circles Have a somewhat different meaning Circles can be used to: Focus attention Create a sense of harmony or unity Show a process
Buttons 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 a similar use to that of shape Lines can: Provide separation Provide organization Can be curved Create progression or process Show movement of an object through a system
Lines Create motion or action Show direction of an object (cartoon figure) Form connections between parts of the site Hyperlinks combine line with color Caution against the use of underlining for information that is not a hyperlink
Assignment Picka web site, other then what you are using for the design project and: 1. Analyze it according to the use of line 2. Analyze the use of shape 3. Write a justification for each
Lesson Review Whatare the best uses of shape and line in Web design?