1. The Elements of Design: Texture and Typography
LESSON 5
Module 3: Designing for Communication
The Elements of Design: Texture and Typography

2. Lesson Overview In this lesson, you will:
Explore the uses of texture and typography inWeb design
Lesson 5 Overview

3. Guiding Question How does the style of text convey emotion?
Use the guiding question as a class starter, allowing the students time to answer the question in their journal. Discuss student answers to the question.

4. Texture
Creating the illusion of depth or three dimensions on a flat surface
Lines
Shadows
Color to highlight
Discuss texture with the students. Texture is the use of certain design techniques to create the illusion of depth on a flat surface. Texture creates the appearance of 3-dimensions in objects on a flat surface. This effect can be achieved through the use of lines, shadows, or color.

5. Using Lines for Texture
Detail lines in hand-drawn images
Veins on leaves
Grain lines on a piece of wood
Hair or fur on an animal
Illusion that object is not flat
Lines can be used to create texture by showing details in objects. The designer can choose to add lines to show texture in hand-drawn images such as veins of a leaf, detail line in a piece of wood or the detail of hair or fur on an animal. These detail lines suggest that the surface of the object isn’t flat, but as it occurs in natural life.

6. Using Shadows to Create Texture
Make an object appear to be raised off the surface
Text
Buttons
Image outlines
Shadows can be used to create an illusion that an object is raised above the surface. If the object is raised above the surface with a light shining on it a shadow will appear. By adding a shadow to text or other object, the designer is trying to create this illusion. Shadows can be added to text, buttons, or image outlines. (Note: The images on the left are the same as those on the right only the ones on the right have shadows added to them.)

7. Using Texture as a Background
Can add visual appeal
Place elements, such as text and objects, inside a solid colored shape
Can be distracting if used incorrectly
Texture can also be added to the background of a Web site. A textured background can add some visual interest to the site, but used the wrong way, can be distracting. When using a textured background, the designer should think about placing text and other elements on the site inside of a shape to help to make the contrast between the elements and the textured background. The next two slides will demonstrate this idea.

8. Typography The use of font Style – Showcard Gothic Emphasis – Bold
Size – 32pt
Color – Red
Typography refers to the design of the fonts. Typography involves choices concerning font style, emphasis, size, and color.

9. Style Serif font Small strokes at the end of letters
Useful in printed material
Times New Roman
Sans-serif font
Drops the strokes at the end of letters
Useful in electronic material
Arial
Font style is a description of how the letters in the font are shaped. The commonly used styles are serif and sans-serif. Serif font uses small strokes at the ends of letters. Serif font is the style of font that you most often see in printed material. This font is easier for the eye to read in longer passages of print material. Sans-serif font does not use the strokes at the end of the letters and can commonly be found in electronic material. Sans-serif font makes longer passages easier to read on monitors.

10. Script font (Blackadder)
Style
Decorative
Script font (Blackadder)
Historic or elegant look
Difficult to read in longer portions of text
Symbol Font (Webdings)
Symbols for letters or words
Symbols for letters
Secret codes
A third type of font style is called decorative font. Decorative font has an elegant look of script or replaces letters with symbols similar to those that might be used in secret codes. Script font is commonly used to add a historic or elegant look to a font, while symbol font is rarely used in Web site development. Script font should be used sparingly as it can be difficult to read in large portions of text. The symbols under the text lines for the symbol font are the same messages as the line above in Webdings font.

11. Size Bold Italic Color Emphasis Types Be consistent with use
Avoid underlining
A way to call attention to a word or a portion of your text is by using emphasis. Examples of emphasis include boldfacing, italics, or changing the color of the text. When using emphasis, you need to be consistent in your use within the site. If you choose to boldface important words or concepts in your site, then always use boldfacing for this purpose. This will cause less confusion with your viewer. You should also be careful in combining emphasis techniques. Many sites will use underlining to create emphasis for words or concepts. As we learned in the last lesson, viewers expect underlining to mean a hyperlink.

12. 60 pt 48 pt 36 pt Size 20 pt Measured by points Point = 1/72 inch
Sizes for Web design
12 points or 14 points
10 points or lower: hard to read
16 points or higher: used for headings
Size is another dimension of typography. In typography, size is measured by a method called a point. A point is 1/72 of an inch. In Web design, it is customary to use font sizes of 12 pt or 14 pt. Font sizes below 10 pt are difficult to read and font sizes above 14 pt should be reserved for headings.
The use of larger font sizes for headings is another way a Web designer can organize the site. When looking at a Web site, the viewer is sometimes looking for a specific piece of information. By using headings to organize a site, the designer makes this method of quickly finding information much easier.

13. Emerging Technologies – message is neither historical nor elegant
Typography Sends a Message
Some styles communicate an emotion or a feeling
Decorative – historic or elegant
Capital letters – anger or shouting
Emerging Technologies – message is neither historical nor elegant
QUIET NAP TIME – message doesn’t show anger and doesn’t need to be shouted
The use of typography can also send a message with your text. Many font styles attach with them a certain feeling or idea. We talked about how script fonts have a historic or elegant feel with them. If this type of font is used with text that doesn’t match the feel created by the font style, a mixed message can be sent. Using all capital letters sends a message of emotion. When all capital letters are being used, a message of anger or shouting may be sent to the viewer. How will a viewer of a site feel if all the information in a site is capitalized (longer blocks of text in all capitals is also difficult to read).

14. Assignment
Use the Web site you selected for the Design Analysis Project
Analyze it according to good design guidelines for texture
Analyze it according to good design guidelines for typography
Begin writing your justification for each
Finish analyzing any other design elements that you may need to complete
Discuss the assignment as listed above. Students should be given time in class to complete work on the Design Analysis Project 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.

15. Lesson Review
How does the use of texture and typography apply to Web design?
This is the last slide of the presentation.