Model Instruction Plan - data.cteunt.orgdata.cteunt.org/.../9-01-design-principles/09.01-design-principles.pdf · Introduce the four design using the “Design ... Introduce font

IT: Principles of IT: Design & Publications Plan Copyright © Texas Education Agency, 2013. All rights reserved.

1

Lesson Plan

Course Title: Principles of Information Technology

Session Title: Design Principles

Lesson Duration: 6 hours

Performance Objective: Upon completion of this assignment, the student will be able to create a well-designed desktop publishing document that incorporates the four design principles and adheres to proper publishing guidelines for typeface choice.

Specific Objectives:

List and describe characteristics of the four design principles

Define the four design principles

Identify publishing techniques that demonstrate the four design principles

Classify webpage designs according to the design principles demonstrated

List categories of font styles

Describe characteristics of categories of font style

Identify publishing guidelines when choosing font styles

Identify techniques for font formatting for printed and electronic publications

Create desktop publishing documents that incorporate design principles and guidelines for font style

Preparation

TEKS Correlations: 130.272 (c) (3) The student uses emerging technologies to exchange information. The student is expected to

(C) demonstrate effective Internet search strategies, including keywords and Boolean logic using various available search engines;

(H) demonstrate ethical use of Internet and online resources, including citation of source; (7) The student applies word-processing technology. The student is expected to

(A) identify the terminology associated with word-processing software and its functions; (C) edit a variety of text documents using functions such as pagination, appropriate white

space, tab settings, and font style, size, and color; (F) produce desktop publishing documents incorporating both text and graphics such as

business cards, newsletters with mastheads, and advertisement flyers; (11) The student applies design and web publishing techniques. The student is expected to

(C) identify and describe design principles such as contrast, repetition, alignment, and proximity;

(D) identify and describe types and styles of typeface used for publications such as serif and sans serif.


2

Instructor/Trainer

References: Content Developer Knowledge

Instructional Aids:

Design Principles Presentation

Design Principles Notes Organizer

Activity #1 Instruction Sheet and scoring rubric

Font and Typeface in Design Presentation

Font and Typeface in Design Notes Organizer



Design Principles and Font Guidelines Exam

Design Principles and Font Guidelines Exam KEY

Materials Needed:

Copies of Organizers, Instruction Sheets, and Exam

Equipment Needed:

Computer and projector for presentation

Computers with Internet access for individual student use

Desktop Publishing software

Learner

Have students browse through printed documents (such as newspapers, magazines, flyer advertisements, etc) and choose one that they think is “good” and one they think is “bad”. Have students bring their documents to class the next day.

Introduction

MI Introduction (LSI Quadrant I):

SAY, “Have you ever been flipping through a magazine and saw a ‘dumb’ advertisement? Not necessarily because of what it said, but maybe just because of the way it looked at first glance?” SAY, “Have you ever been flipping through a magazine and saw a ‘cool’ advertisement? Not necessarily because of what it said, but maybe just because of the way it looked at first glance?” SAY, “Have you ever wondered what made that advertisement ‘dumb’ or what made it ‘cool’?” Ask a few of the students to stand up and show off the documents they brought to demonstrate their idea of “good” and “bad”. Ask them to name at least one thing that makes it good or bad in their opinion. Optional: Have two students make lists on the board of the things the students say as being “good” and “bad”.


3

Outline

MI Outline (LSI Quadrant II): Instructor Notes:

I. Students list the four design principles (slide 3)

II. Students define the four design principles (slides 4-7)

III. Students list characteristics of and identify

publishing techniques that demonstrate the four design principles (slides 8-17)

Introduce the four design principles using the “Design Principles Presentation”. Speaker notes are provided to aid the instructor with content. Hand out the Design Principles Notes Organizer (1) per student to aid them in note taking during your presentation. Encourage the students to comment and discuss the issues on each slide.

Activity #1: Also listed in guided practice below IV. Students classify webpage designs according

to the design principles demonstrated

Use slide 19 of the “Design Principles Presentation” to explain Activity #1, or hand out the Activity #1 Instructions and scoring rubric document.

V. Students list categories of font styles (slide 3

of Font and Typeface Presentation)

VI. Students describe characteristics of font style categories (slides 4-7)

VII. Students identify publishing guidelines when choosing font styles (slides 8-11)

VIII. Students identify font formatting techniques for

printed and electronic publications (slides 12-16)

Introduce font guidelines using the “Font and Typeface Presentation”. Speaker notes are provided to aid the instructor with content. Hand out the Font and Typeface Notes Organizer (1) per student to aid them in note taking during your presentation. Encourage the students to comment and discuss the issues on each slide.

Activity #2: Also listed in guided practice below

Use slide 20 of the Font and Typeface Presentation to explain Activity #2, or hand out the Activity #2 Instructions and scoring rubric document.


4

Activity #3: Also listed in Independent Practice below IX. Students create desktop publishing documents

that incorporate design principles and font style guidelines

Instructor should demonstrate how to use the word processing program or the desktop publishing program to create documents incorporating text and graphics. Hand out the Activity #3 instructions and scoring rubric document. Review the instructions for the assignment and the grading criteria.

Application

MI Guided Practice (LSI Quadrant III):

Activity #1 Use slide 19 of the Design Principles Presentation to explain Activity #1 or handout the Activity #1 Instructions and scoring rubric document. Students will use the Internet to locate web pages that represent the four design principles. They will create a document with screen snapshots of the web pages and justify why they classified that webpage as representative of that design principle. As students browse the Internet and create their documents, instructor should walk around to offer feedback and reteach concepts to individuals as needed. Activity #2 Use slide 20 of the Font and Typeface Presentation to explain Activity #2, or hand out the Activity #2 Instructions and scoring rubric document. Students will edit the document created in Activity #1 by identifying the categories of font style(s) used on the web pages displayed in the screen snapshots. As students edit their documents, instructor should walk around to offer feedback and reteach concepts to individuals as needed.

MI Independent Practice (LSI Quadrant III):

Activity #3 Students create desktop publishing documents that represent the four design principles as well as adhere to the font guidelines.

Summary


5

MI Review (LSI Quadrants I and IV):

In pairs, have students write down the lists of items from the Introductory activity and categorize the “good” and “bad” by placing them into groups according to the design principles or font guidelines. Ask different students to share some of their thoughts with the class.

Evaluation

MI Informal Assessment (LSI Quadrant III):

Discussion comments during introduction and presentations of design principles and font guidelines Guided practice activities

MI Formal Assessment (LSI Quadrant III, IV):

Activity #3: Creation of desktop publishing documents. Use scoring rubrics to grade. EXAM: Questions over the design principles and font guidelines

Extension

MI Extension/Enrichment (LSI Quadrant IV):

Have students locate a poorly designed yellow pages ad from the phone book and use a word processing program or desktop publishing program to redesign the ad so that it adheres to all four design principles as well as the font style guidelines.


6

Icon MI Teaching Strategies Personal Development

Strategies

Verbal/ Linguistic

Lecture, discussion, journal writing, cooperative learning, word origins

Reading, highlighting, outlining, teaching others, reciting information

Logical/ Mathematical

Problem solving, number games, critical thinking, classifying and organizing, Socratic questioning

Organizing material logically, explaining things sequentially, finding patterns, developing systems, outlining, charting, graphing, analyzing information

Visual/Spatial

Mind-mapping, reflective time, graphic organizers, color-coding systems, drawings, designs, video, DVD, charts, maps

Developing graphic organizers, mind-mapping, charting, graphing, organizing with color, mental imagery (drawing in the mind’s eye)

Musical/ Rhythmic

Use music, compose songs or raps, use musical language or metaphors

Creating rhythms out of words, creating rhythms with instruments, playing an instrument, putting words to existing songs

Bodily/ Kinesthetic

Use manipulatives, hand signals, pantomime, real life situations, puzzles and board games, activities, role-playing, action problems

Moving while learning, pacing while reciting, acting out scripts of material, designing games, moving fingers under words while reading

Intrapersonal

Reflective teaching, interviews, reflective listening, KWL charts

Reflecting on personal meaning of information, studying in quiet settings, imagining experiments, visualizing information, journaling

Interpersonal

Cooperative learning, role-playing, group brainstorming, cross-cultural interactions

Studying in a group, discussing information, using flash cards with other, teaching others

Naturalist

Natural objects as manipulatives and as background for learning

Connecting with nature, forming study groups with like-minded people

Existentialist

Socratic questions, real life situations, global problems/questions

Considering personal relationship to larger context


7

Design Principles Notes Organizer A. List the four design principles in the first column of the table below.

B. Define each design principle in the second column of the table below.

C. Contrast: to be effective, it needs to be _______________. Can be demonstrated

using _______________ , _______________ , _______________ ,

_______________ .

D. Two colors that create the strongest contrast are _______________ and

_______________.

Design Principle

Definition

A method of design which ____________________ the differences between ____________________ that are ___________________; it purposely brings out differences to set things in ________________.

Repetition A method of design which purposely ___________________ elements or aspects of elements ___________________ the same ___________________.

A method of design which uses _______________ properties to determine the optimal _______________ of objects or _______________ of objects.

Proximity A method of design which uses spatial properties to purposely place _______________ items _______________.


8

E. Besides color, font can be changed in these ways to create contrast:

_______________ , _______________ , _______________ .

F. Repetition: items must have obvious _______________. Can be demonstrated

using _______________ , _______________ , ______________________ .

G. Using images for repetition: Using an exact copy of a clip art image, even

_______________ creates unity. Using different images but with a common

theme is _______________ .

H. Alignment: Items must have obvious spatial _______________ . Needs to be

visually noted instantly to be effective. All items should significantly

_______________ the purpose of the publication. Element placement should

never be _______________ .

I. Alignment: Can be demonstrated using object _______________ , text

_______________ , line spacing and object size.

J. Proximity: Provides ___________________ for the viewer. All elements are

supportive of main purpose. Elements are then divided into subgroups. Items

related to each subtopic should be spatially grouped ___________________ in

an arrangement.

K. Can be demonstrated using ________________ , _______________ , Objects or

Alignment.


9

Design Principles Activity #1 Instructions:

1. Using the Internet, navigate to various websites that demonstrate use of the four design principles.

2. Place a copy of the screen snapshot of that webpage into a word processing document. a. Resize the snapshot if needed.

3. Above the snapshot, place a label to identify the design principle represented by that page. 4. Beneath the snapshot, create a textbox.

a. The textbox should contain text that displays the definition of the design principle listed.

b. Include an explanation of how the snapshot represents that principle.

5. Save your document in your student folder as “Design Evaluation”.

Your document will be graded according to the following criteria:

TECHNICAL 9-10 Points 6-8 Points 4-5 Points 0-3 Points Awarded

Screen snapshots are displayed accurately

All 4 displayed, resized, easy to

read

All 4 displayed, size or

readability not optimal

Fewer than 4 displayed, size or readability not optimal

None displayed

Screen snapshots are labeled correctly for design principle

All 4 labeled correctly

2-3 labeled correctly

1 labeled correctly

None labeled correctly

Justification for contrast is correct

Thorough explanation

Adequate explanation

Minimal explanation

Slight explanation

Justification for repetition is correct



Minimal explanation

Slight explanation

Justification for alignment is correct



Minimal explanation

Slight explanation

Justification for proximity is correct



Minimal explanation

Slight explanation

Overall format/ appearance SUPERIOR SUITABLE MEDIOCRE INADEQUATE

TOTAL POSSIBLE POINTS: 70

Your Grade

(total points awarded)


10

Font and Typeface Notes Organizer A. List the four font categories in the first column of the table below.

B. Define each design principle in the second column of the table below.

C. Sketch an example of a letter for that font category in the third column of the table

below.

D. While serif font is a good choice for _______________ publications, some say it is

easier to read in paragraph format due to the serifs on the bottom of the letters

creating an unseen connection, but giving the reader a visual

_______________ to follow when reading.

E. However, because of the _______________ in the tips, you should never choose

two different font styles within this category for the same _______________ of

Font Category

Definition Example

Serif

There are _____________ decorative ___________ at the end of the _______________ for each _______________.

There is a(n) _______________ of short _______________ tips at the end of the ____________________ for each letter.

The letters appear to be handwritten.

Ornamental

The letters have a _______________ style that sets it apart, having a(n) _________________ design element _______________ into the lettering.


11

your publication. It gives the reader a sense of choppiness and

_______________ good reading flow.

F. Some viewers believe that _______________ font is easier to view

_______________ than serif; however, if information is printed from the site, it

still needs to be easily read in printed format.

G. Ornamental fonts are also called “_______________” fonts due to their unique

decorativeness. They are used _______________ and for the sake of

decoration. You should never choose a decorative font to type a

_______________ of information. Use them only for main _______________ or

a(n) _______________ getter.

H. Rule of thumb in deciding formatting options: Do not choose two

_______________ font styles from the _______________ category; it

_______________ rather than contrasts.

I. You should never use _______________ or _______________ category fonts for

paragraph text because it is far too difficult to read.

J. To create _______________ without changing the font style choice, try using all

_______________ for a heading, but you should never use that for a full

_______________ of text.

K. Or you could change the _______________ of an object to create contrast.


12

Font & Typeface Guidelines Activity #2 Instructions:

1. Open the document created in Activity #1. 2. Analyze the text/font shown on the webpage screen snapshot. 3. Next to each snapshot, create a textbox.

a. List the number of categories of font displayed on each of the pages. b. List the name of category of font displayed on each of the pages.

4. Save the changes to your document. Print or send an electronic copy according to your instructor’s directions.

Your document will be graded according to the following criteria:

TECHNICAL 9-10 Points 6-8 Points 4-5 Points 0-3 Points Awarded

Number of font categories displayed

Font Category Count given for all 4

images is correct

Font Category Count given for

3 images is correct

Font Category Count given for

2 images is correct

Font Category Count given for 0-1 images is

correct

List of font categories displayed

Font Category List given for all 4

images is correct

Font Category List given for 3

images is correct

Font Category List given for 2

images is correct

Font Category List given for 0-

1 images is correct

Overall format/ appearance SUPERIOR SUITABLE MEDIOCRE INADEQUATE


Your Grade

(total points awarded)


13

Design Principles Activity #3 Instructions:

1. Using a word processing program or desktop publishing program, design the following items.

2. As you design each item, be sure to incorporate the four design principles and follow the font guidelines learned.

3. Design a business card for yourself to include the following: a. Size: 2in X 3.5in (can be portrait or landscape) b. First and last name, job title, name of business or company, phone number of

business, address of business, at least one image, and at least one drawing object.

c. Save this document to your student folder as BusinessCard.

4. Flyer advertisement to include the following: a. Announce a “Day after Thanksgiving Day” sale. b. Size of flyer: 8.5in X 5.5in (can be portrait or landscape) c. Name, address, phone number, and website of store having the sale. d. Dates and times of sale and hours of operation for the store. e. List some of the items on sale with their original price, percentage off, or

marked down price. f. Offer a coupon or extra incentive to get customers to just come in and browse. g. Include 3 images and 2 drawing objects. h. Save this document to your student folder as ThanksgivingAd.

5. Two page newsletter to include the following:

a. Size: 8.5in X 11in b. Name, address, phone number, and website address of your school displayed

in a masthead across the top of all columns on first page. c. Must format for at least 2 columns of text on both pages. d. Minimum of 4 graphics/images with captions to include

i. your school mascot ii. a student, teacher, or administrator iii. a campus event

e. Minimum of 5 different articles/stories within the newsletter. Articles may be about sports events, club meetings, fundraisers, career fairs, student of the week, teacher of the year, etc.

f. Each article must have a title and relevant text. Text should be in complete sentences.

g. Demonstrate at least 2 drop caps within the article text. h. Justify the text within the columns. i. Include page numbers. j. Save this document to your student folder as SchoolNews.


14

6. Create a new word processing document and save it to your student folder as DesignExplained.

a. Create a title for the page. b. Create three headings for Business Card, Flyer Advertisement, and

Newsletter. c. Beneath each heading, list Contrast, Repetition, Alignment, Proximity, and

Font guidelines. d. Beneath each design principle, list the ways in which you incorporated each

principle into the design of your publications. e. Beneath the font guidelines, list the guidelines you adhered to while designing

your publications.

7. Create a new word processing document and save it to your student folder as DesignCover.

a. Design a cover page to properly present your publications. b. Be sure to include a title, page border, student first and last name, date, and

course name.

8. Print items 3-6 in color.

9. Print item 7 in color and double side the printing so that the second page prints on the back side of the first page. (Be sure that the second page does not print upside down. The text on each side should point up towards the same edge of the sheet of paper.)

10. Organize them in this order: DesignCover, DesignExplained, BusinessCard, ThanksgivingAd, SchoolNews.

11. Compile them into a presentation such as a three-brad report folder, single-ring holder, or sliding-bar report cover.

You will receive 3 separate grades for this assignment. Your publications will be graded according to the criteria on the attached rubrics.


15

Design Principles Activity #3 – Scoring Rubric

GRADE #1 – Includes overall presentation, cover sheet, and design explanation

TECHNICAL 13-15 Points 9-12 Points 5-8 Points 0-4 Points TOTAL POINTS

EARNED

OVERALL APPEARANCE & ORGANIZATION

SUPERIOR SUITABLE MEDIOCRE INADEQUATE

DESIGN EXPLAINED -CONTRAST

Explanation thorough &

includes elements in all 3 publications

Explanation thorough & includes elements in at least

2 publications

Explanation adequate & includes

elements in all 3 publications


elements in fewer than 3 publications

DESIGN EXPLAINED -REPETITION




2 publications





DESIGN EXPLAINED -ALIGNMENT




2 publications





DESIGN EXPLAINED -PROXIMITY




2 publications





FONT GUIDELINES EXPLAINED




2 publications



Explanation adequate & includes elements in f than 3

publications


Your Grade (total points awarded)


16

Design Principles Activity #3 – Scoring Rubric GRADE #2 – Includes Business Card and Thanksgiving Sale Advertisement


EARNED

OVERALL APPEARANCE SUPERIOR SUITABLE MEDIOCRE INADEQUATE

SIZE & COLOR OF CARD & FLYER

Size is correct & Printed in color

Size is incorrect & Printed in color

Size is correct NOT Printed in color

Size is incorrect NOT Printed in color

COLOR CHOICES IN CARD & FLYER


BUSINESS CARD Contains all

required elements Contains most

required elements Contains few

required elements Contains random

elements

BUSINESS CARD DESIGN PRINCIPLES DEMONTRATED


BUSINESS CARD FONT GUIDELINES FOLLOWED


ADVERTISEMENT Contains all required text

elements

Contains most required text

elements

Contains few required text

elements

Contains random text elements

ADVERTISEMENT Contains all

required graphic elements

Contains most required graphic

elements

Contains few required graphic

elements

Contains random graphic elements

ADVERTISEMENT DESIGN PRINCIPLES DEMONTRATED


ADVERTISEMENT FONT GUIDELINES FOLLOWED





17

Design Principles Activity #3 – Scoring Rubric

GRADE #3 – Includes Newsletter


OVERALL APPEARANCE MIN. 2 COLUMNS & 2 PGS


PRINTING: SIZE, COLOR & DOUBLE SIDED

Printed: correct size, in color,

double sided, top edges match

Printed: correct size, in color,

double sided, 2nd

page upside-

down

Printed: double sided

Printed: NOT double sided

COLOR CHOICES IN NEWSLETTER


MASTHEAD, GRAPHICS, & CAPTIONS

Contains all required elements

Contains most required elements

Contains few required elements

Contains random elements

5 ARTICLES: TITLE & TEXT CONTENT


5 ARTICLES: GRAMMAR & SPELLING


DROP CAPS, TEXT ALIGNMENT, & PAGE NUMBERS


CONTRAST & REPETITION DEMONSTRATED


ALIGNMENT & PROXIMITY DEMONTRATED


FONT GUIDELINES FOLLOWED





18

NAME: __________________________________

DESIGN PRINCIPLES AND FONT GUIDELINES EXAM

Multiple Choice Instructions: Fill in blank preceding each question, using the letters A-D to represent which answer choice is best for the given question.

1. Repetition is

A Choosing the different font styles within the same category B Purposely duplicating elements or aspects of elements within the same

document C Alignment of clipart to appear behind the text D Using an ornamental font style for title text 2. Which of the following creates a sense of conflict in printed design?

A Using an ornamental font style for title text B All of these C Choosing the same font style for the entire publication D Choosing different font styles within the same category 3. The four basic design principles are

A Repetition, Proximity, Contrast, Arrangement B Repetition, Choice of Font style, Paste options, Alignment C Proximity, Alignment, Repetition, Contrast D Color choices, Realistic images, Approximation, Printing options 4. Alignment can be demonstrated using which of the following methods?

A text direction B line spacing C all of these D element rotation 5. Acceptable ways to create contrast using text are

A Bold, size variations, color variations, shading behind text B All of these C Alignment of clipart to appear behind the text D Using a gradient or pattern as a background fill on a textbox

6. A design method in which spatial properties are used to determine the optimal


19

placement of objects or groups of objects is

A Proximity B Approximation C Arrangement D Alignment 7. Which of the following font categories should you choose for body text of a

webpage?

A Script B Sans Serif C Ornamental D Serif 8. Which of the following font categories should you avoid when creating long

paragraphs of text?

A Script and Ornamental B Serif and Sans Serif C Only Script D Only Ornamental 9. Which text choice below would be the best for keying a sentence you want to get

noticed?

A Using all capital letters B Changing each word to be a different color C Highlighting the text in bright yellow D Using bold 10

. A method of design that uses spatial properties to purposely place related items together is

A Proximity B Approximation C Arrangement D Alignment

Matching Instructions: Fill in column A below, using the letters A-D to name the font category represented in the given questions.

A Serif B Sans Serif C Script D Ornamental

11. Letters that appear to be handwritten

12. This category is sometimes called “decorative”

13. Letters having short decorative tips at the end of each stroke


20

14. This font style category is…


16. Letters that incorporate a common artistic design element



19. Letters that do NOT have short decorative tips at the end of each stroke


5 PTS – BONUS Explain and give an example of using contrast in design. _______________________________________________________________________ _______________________________________________________________________ _______________________________________________________________________ _______________________________________________________________________ _______________________________________________________________________ _______________________________________________________________________


21

NAME:_________________________________

DESIGN PRINCIPLES AND FONT GUIDELINES EXAM KEY

Multiple Choice Instructions: Fill in blank preceding each question, using the letters A-D to represent which answer choice is best for the given question.

B 1. Repetition is

A Choosing the different font styles within the same category B Purposely duplicating elements or aspects of elements within the same

document C Alignment of clipart to appear behind the text D Using an Ornamental font style for title text

D 2. Which of the following creates a sense of conflict in printed design?

A Using an ornamental font style for title text B All of these C Choosing the same font style for the entire publication D Choosing different font styles within the same category

C 3. The four basic design principles are

A Repetition, Proximity, Contrast, Arrangement B Repetition, Choice of Font style, Paste options, Alignment C Proximity, Alignment, Repetition, Contrast D Color choices, Realistic images, Approximation, Printing options

C 4. Alignment can be demonstrated using which of the following methods?

A text direction B line spacing C all of these D element rotation

A 5. Acceptable ways to create contrast using text are

A Bold, size variations, color variations, shading behind text B All of these C Alignment of clipart to appear behind the text D Using a gradient or pattern as a background fill on a textbox


22

D 6. A design method in which spatial properties are used to determine the optimal

placement of objects or groups of objects is


B 7. Which of the following font categories should you choose for body text of a webpage?

A Script B Sans Serif C Ornamental D Serif

A 8. Which of the following font categories should you avoid when creating long paragraphs of text?

A Script and Ornamental B Serif and Sans Serif C Only Script D Only Ornamental

D 9. Which text choice below would be the best for keying a sentence you want to get noticed?

A Using all capital letters B Changing each word to be a different color C Highlighting the text in bright yellow D Using bold

A 10.

A method of design which uses spatial properties to purposely place related items together is



23

Matching Instructions: Fill in column A below, using the letters A-D to name the font category represented in the given questions.

A Serif B Sans Serif C Script D Ornamental

C 11. Letters that appear to be handwritten

D 12. This category is sometimes called “decorative”

A 13. Letters having short decorative tips at the end of each stroke

B 14. This font style category is

A 15. This font style category is

D 16. Letters that incorporate a common artistic design element

C 17. This font style category is

D 18. This font style category is

B 19. Letters that do NOT have short decorative tips at the end of each stroke

C 20. This font style category is

5 PTS – BONUS Explain and give an example of using contrast in design.

Purposely emphasizing the differences in elements or objects. Example: setting the title font on a page to be bold, several point sizes larger than body text, and aligned center.

Documents

Model Instruction Plan - data.cteunt.orgdata.cteunt.org/.../9-01-design-principles/09.01-design-principles.pdf · Introduce the four design using the “Design ... Introduce font