The Elements of Design: The Elements of Design: Texture and TypographyTexture and Typography

Module 3: Designing for Communication

LESSON 7LESSON 7LESSON 7LESSON 7

Module 3: Designing for Communication

LESSON 7LESSON 7LESSON 7LESSON 7

Lesson Overview

In this lesson, you will: Explore the uses of texture and typography as they apply to Web design

Module 3: Designing for Communication

LESSON 7LESSON 7LESSON 7LESSON 7

Guiding Questions How do you show emotion when using a font on the computer screen?

Module 3: Designing for Communication

LESSON 7LESSON 7LESSON 7LESSON 7

Texture Creating the illusion of depth or three dimensions on a flat surface

Lines Shadows Color to highlight

Module 3: Designing for Communication

LESSON 7LESSON 7LESSON 7LESSON 7

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 isn’t flat

Module 3: Designing for Communication

LESSON 7LESSON 7LESSON 7LESSON 7

Using Shadows to Create Texture Make an object appear to be raised off the surface

Text Buttons Image outlines

Module 3: Designing for Communication

LESSON 7LESSON 7LESSON 7LESSON 7

Using Texture as a Background Can add visual appeal Can be distracting if used incorrectly Place elements, such as text and objects, inside a shape

Module 3: Designing for Communication

LESSON 7LESSON 7LESSON 7LESSON 7

Typography The use of font

Style Emphasis Size Color

Module 3: Designing for Communication

LESSON 7LESSON 7LESSON 7LESSON 7

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

Module 3: Designing for Communication

LESSON 7LESSON 7LESSON 7LESSON 7

Style Decorative

Script font (Blackadder)Historic or elegant lookDifficult to read in longer portions of text

Symbol Font (Webdings) Symbols for letters

Secret codes

Module 3: Designing for Communication

LESSON 7LESSON 7LESSON 7LESSON 7

Emphasis Types

BoldItalicColor

Size Be consistent with use Avoid using underlining

Module 3: Designing for Communication

LESSON 7LESSON 7LESSON 7LESSON 7

Size 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

8 pt

12 pt

20 pt

36 pt

48 pt

60 pt

Module 3: Designing for Communication

LESSON 7LESSON 7LESSON 7LESSON 7

Typography Sends a Message Some styles have emotion or a feeling attached to them

Decorative – historic or elegant Capital letters – anger or shouting

Emerging Technologies – neither historical nor elegant

QUIET NAP TIME – doesn’t show anger and doesn’t need to be shouted

Module 3: Designing for Communication

LESSON 7LESSON 7LESSON 7LESSON 7

Assignment Use the Web site you have chosen

Analyze it according to the standards of texture Analyze it according to the standards of typography Begin writing your justification for each Finish any others that you may need to complete

Module 3: Designing for Communication

LESSON 7LESSON 7LESSON 7LESSON 7

Lesson Review How does the use of texture and typography apply to Web design?