2. Lesson Overview
In this lesson, you will learn:
1. How shape and line apply to Web design
3. Guiding Questions
1. Does a square or rectangular shape
have any particular meaning to you?
2. How about a triangle?
3. What meaning does a circle have?
4. Shape
1. Organizational use
Hold concept and ideas
Divide the site
2. Give meaning
Rectangles
Circles
Closedfigures
3-dimensional
5. Rectangles
Commonly used to:
Organize information
Focus attention
Commonly used in:
Advertisements
Text blocks
6. Circles
Have a somewhat different meaning
Circles can be used to:
Focus attention
Create a sense of harmony or unity
Show a process
7. 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.
8. 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
9. 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
10. 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
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.
