Name: ______________________________ Class: _________________________

MULTIMEDIA AND WEBPAGE DESIGNMULTIMEDIA AND WEBPAGE DESIGN1.00 UNDERSTAND DESIGN1.00 UNDERSTAND DESIGN

1.011.01 UNDERSTAND TYPOGRPAHY, MULTIUSE DESIGN PRINCIPLESUNDERSTAND TYPOGRPAHY, MULTIUSE DESIGN PRINCIPLES AND ELEMENTSAND ELEMENTS

What impact do typography concepts have on the effectiveness of multimedia design? How do you effectively apply design principles and elements to multimedia design?

No. Assignment Due Date Grade Notes

1 1.01 Typography Graphic Organizer/Notes

2 1.01 Typeface Classifications

3 1.01 Font Usability and Readability

4 1.01 Guided Practice: Kerning, Leading & Tracking

5 1.01 Independent Practice: Song Lyrics

6 1.01 FBLA Dress Code/ Peer Review

7 1.01 Wanted Poster

8 1.01 Multiuse Design Elements Group Activity

9 1.01 Quiz A

10 1.01 Quiz B

11 Objective 1.0 Weebly ( Vocabulary/Artifact/Reflection)

12 1.01 Typography Test in Elements

13 1.01 Typographical Logo in Adobe Illustrator

14 1.01 In Depth with Color Activity

1.01 Vocabulary:TypefaceSerifSans SerifOrnamentalScriptSymbolFontMonospacedProportionalFont ChoiceVisual HierarchyTarget AudienceLeadingKerningTrackingLinesSpaceShapesFormMassTexture

ColorCalming ColorsExciting ColorsNeutral ColorsColor HarmonyComplementaryAnalogous ColorsMonochromatic ColorsRGBHexadecimalsCMYKColor MatchingHueValueTintShadeSaturationBalanceContrastUnity/HarmonyScale/Proportion

Dominance/ EmphasisGridsRule of ThirdsOptical CenterZ-PatternSystems Approach

BD10 Multimedia and Webpage Design Summer 2014 Page 1

1.01 Typography Graphic OrganizerDirections: Fill in the table below as you view the 1.01 Typography PowerPoint

Term Definition What it looks like

(You may draw a visual representation of the typeface or enter a typeface example.)

SERIF

SANS SERIF

ORNAMENTAL

SCRIPT

SYMBOL

FONT

MONOSPACED

PROPORTIONAL

BD10 Multimedia and Webpage Design Summer 2014 Page 2

1.01 Typeface Classifications

Directions: Classify each typeface by its category (Serif, Sans Serif, Ornamental, Script, Symbol)

Typeface Category

1. Cambria

2. Arial

3. French Script NT

4. Baskerville Old Face

5. Verdana

6. Broadway

7.

8. Chiller

9. Lucida handwriting

10. Century Schoolbook

Directions: Classify the typeface as monospaced (M) or proportional (P).

Font M or P?

11. Is the Cambria typeface proportional or Monospaced?

12. Is the Consolas typeface proportional or monospaced?

13. Is the Century Gothic typeface proportional or monospaced?

14. Is the OCR Extended typeface proportional or monospaced?

15. Is the Lucida Bright typeface proportional or monospaced?

BD10 Multimedia and Webpage Design Summer 2014 Page 3

1.01 Font Usability & Readability Directions: Classify whether the following examples reflect effective or ineffective use of typography concepts by placing a check mark in the appropriate column.

Example Effective Ineffective

Caution!

CasualAnn’s BridalsALTHOUGH FONTS ARE OFTEN CLASSIFIED BY TYPOGRAPHICAL FEATURES, THEY CAN ALSO BE DESCRIBED AS HAVING MORE HUMAN-LIKE PERSONALITIES. THE APPEARANCE OF THE FONT (REGARDLESS OF WHAT THE WORDS SAY) CONVEYS A CERTAIN MOOD AND FEEL WHICH CAN ALTER THE EFFECTIVENESS OF YOUR DOCUMENT.

Happy Birthday!

ImportantSale ends Friday!Haunted TrailLayout, for both print and screen, is one of the most important aspects of graphic design. Designs must be carefully controlled in a way that is enticing and is easy for all to access.

BD10 Multimedia and Webpage Design Summer 2014 Page 4

BD10 Multimedia and Webpage Design Summer 2014 Page 5

1.01 Guided Practice: Kerning, Leading, TrackingDirections: As your teacher guides you through the procedures, practice kerning, leading, and tracking in the following passages. Take notes as necessary to help you with future assignments.

Adjust the leading in the following passage to fill the text within the box.

Adjust the tracking in the following passage to fill the text within the box.

Change the kerning between the “P” and the “r” in the word “Prompt” to make the text more visually appealing.

Be Prompt1.01 Independent Practice: Song Lyrics Assignment

BD10 Multimedia and Webpage Design Summer 2014 Page 6

The policies included in this policy manual were developed during the past 20-plus years of Star River Adventures’ operation. All employees are expected to read, understand, and follow these policies as they pertain to their particular job assignments. Please review this manual on a regular basis to refresh your memory concerning its contents. THIS POLICY MANUAL IS NOT A CONTRACT. You are an employee “at will.” Keep in mind that this is a fluid document and will change. As changes are made, they will be posted on the company Web site and on the staff bulletin boards. The manual is reviewed and reprinted in its entirety on an annual basis.

The policies included in this policy manual were developed during the past 20-plus years of Star River Adventures’ operation. All employees are expected to read, understand, and follow these policies as they pertain to their particular job assignments. Please review this manual on a regular basis to refresh your memory concerning its contents. THIS POLICY MANUAL IS NOT A CONTRACT. You are an employee “at will.” Keep in mind that this is a fluid document and will change. As changes are made, they will be posted on the company Web site and on the staff bulletin boards. The manual is reviewed and reprinted in its entirety on an annual basis.

1. Using the Internet, look up the lyrics to your favorite song or lines of your favorite poem. The song or poem’s content must be appropriate for school.

2. Paste the lines into a blank Microsoft Word or Publisher document. 3. Change the text throughout the song or poem to demonstrate a correct understanding of the

following terms: Serif Sans Serif Script Ornamental Leading Kerning Tracking Monospaced Proportional

4. Label the use of each of the following terms above. (Tip: You may insert text boxes with arrows or the Comment feature.)

5. You will be graded based on the following rubric:

Task Points AwardedAll typography terms are correctly demonstrated 45 pts. (5 pts. Per term)Comments correctly identify & define the term 45 pts.(5 pts. Per term)Comments correctly identify the font used 5 pts.Content is appropriate and in good taste 5 pts.Total/Comments:

BD10 Multimedia and Webpage Design Summer 2014 Page 7

1.01 FBLA Dress Code Assignment Directions: The following text will be distributed to FBLA members and advisors across the state on the FBLA Website. Currently, the text is not formatted in a way that is meaningful to the target audience.

1. Format the following text so that it meets usability and readability guidelines for typography. You may use the 1.01 Typography Usability and Readability PowerPoint to help you format this text.

2. Save the file according to teacher instructions.3. Complete the Peer Review handout.

<Beginning of Text>

FBLA Dress CodeFBLA members and advisers should develop an awareness of the image one’s appearance projects. The purpose of the dress code is to uphold the professional image of the association and its members and to prepare students for the business world.Appropriate attire is required for all attendees—advisers, members, and guests—at all general sessions, competitive events, regional meetings, workshops, and other activities unless otherwise stated in the conference program. Conference name badges are part of this dress code and must be worn for all conference functions. For safety reasons, do not wear name badges when touring.Professional attire acceptable for official FBLA-PBL activities includes:

MalesBusiness suit with collared shirt, and necktie (shirts must be tucked in/belts must be worn if pants have loops)Sport coat, dress slacks, collared shirt and necktie Dress slacks, collared shirt, and necktieBusiness suit or sport coat with dress slacks and banded collar shirtSweater or sweater vest, collared shirt with necktie, and dress slacksDress socks and dress shoes (no white socks)Dress socks and dress Doc Marten style shoes (Not sandals, boots, or other shoes with heavy soles)

FemalesBusiness suit with blouse or sweater, sleeveless suit is appropriate (shirts must be tucked in/belts must be worn if pants have loops)Business pantsuit with blouse or sweaterSkirt or dress slacks with buttoned-up blouse or sweater Business dressCapris or gauchos with coordinating jacket/suit, worn below the knee, with nylonsDress shoesNylons when wearing skirts and dresses

Inappropriate attire, for both men and women, includes:Jewelry in visible body piercing, other than earsHair dyed an unnatural colorCargo pocket or zip-off pantsJean-style khaki pants, capris or skirt, or other pants or skirts with pockets sewn on the outsideDenim, canvas, flannel, or chambray fabric Backless, see-through, tight-fitting, spaghetti strapped, strapless, or low-cut blouses/tops/dressesDress t-shirts (Sweaters and blouses are only appropriate)Clothing that shows any midriff skinSkirts shorter than 2 inches above the kneeT-shirts, spandex, tank tops, bathing suitsBlouses that are not buttoned appropriatelySandals, flip flops, athletic shoes, work shoes, hiking boots, bare feet, or over-the-knee bootsAthletic wear--including sneakersHats or flannel clothingBolo tiesVisible foundation garments

CLARIFICATION: Many women’s two-piece suits are currently designed so that they do not require a blouse. Therefore, this will be accepted. In addition, sling-back shoes , open-toe shoes, and sleeveless dresses/suits are accepted.

Business casual attire acceptable for official FBLA-PBL activities includes:

Males

Dress slacks, collared shirt, no necktie necessary (shirts must be tucked in/belts must be worn if pants have loops)Polo shirts with the FBLA-PBL logo on it are acceptableSweaters would be acceptableDress socks and dress shoes (no white socks)

FemalesDress slacks or skirt, blouse or sweater (shirts must be tucked in/belts must be worn if pants have loops)Polo shirts with the FBLA-PBL logo on it are acceptableDress shoes with stockings (if wearing a skirt)Inappropriate attire would include anything listed above, particularly jean-style khaki or corduroy pants/skirts with pockets sewn on the outside.

<End of text>

1.01 FBLA Dress Code Peer ReviewDirections: Partner with a classmate and complete the following peer review of the FBLA Dress Code Assignment.

Typography Considerations Effective Ineffective Suggestions for Improvement

Font choice conveys a meaning or personality that matches the purpose of the design

Font choice gives visual clues about the order text should be read; Evidence of visual hierarchy

Font choices limited to 2 or 3 fonts

Font choices consider the target audience

Font style and size are appropriate for the intended output

Evidence of font spacing (kerning, leading, and/or tracking) to improve readability

1.01 “WANTED” POSTER ASSIGNMENTObjective: To practice effective use of typefaces in the development of a flyer. Scenario:No one has seen you in weeks. Your job is to design a “wanted” or “missing person” poster to help the community locate you.

What the poster should contain: Your mug shot Your first and last name. (The name you like to be called.) Last seen in ________________.(your home town) Last seen with _________________. (your closest friend(s)) What were you wearing when you were last seen? (your favorite attire) Might be found hanging around ____________. (List 4-5 places that will help me know

your hobbies, interests and/or favorites. For example, if you like to read, your poster might indicate you’d be found at Books-a-Million. If you like sweet tea, your poster might indicate you’d be found at Bojangle’s.)

What are 2-3 notable qualities that you have? (examples include a good friend, a good son, hard worker, trustworthy, etc.)

May be trying to escape to the ____________ area. (Fill in the blank with your favorite vacation spot or a place where you would desire to take a vacation.)

If found, what should the reward be?

This assignment should be fun. Use your creativity with fonts, font size, and color, keeping in mind the most effective uses of fonts that we have discussed in this objective.

Grading Rubric:Requirements Met Not MetIncludes all required informationDemonstrates creativity Demonstrates effective use of typefacesDoes not exceed one pageMechanics (No spelling/grammatical errors)Comments/Final Grade:

1.01 Multiuse Design Elements Group Activity

Directions: Students will work in groups of 2-3 to create a poster with samples of the following design elements. Students will be required to present their posters to the class and aid the class in understanding effective use of the design element.

1. Line Group Assignment: Select one example of each line description below from magazines, periodicals, newspapers, brochures, flyers, and other publications.

Straight Line

Curved Line

Lines that organize

Lines that connect

Lines that create movement

Lines that create emotion

Lines that provide texture

Lines that frame

Cut and paste the examples on your poster board and write a brief caption below each example describing the line and how the line enhances the message of the publication.

2. Shapes Group Assignment: Select two examples of each shape from the list below from magazines, periodicals, newspapers, brochures, flyers, and other publications.

Geometric

Organic

Abstract

Cut and paste the examples on your poster board and write a brief caption below each example describing the shape and how it enhances the message of the publication.

3. Mass Group Assignment: Select 6 total examples of mass from the list below from magazines, periodicals, newspapers, brochures, flyers, and other publications.

Mass that is large (3)

Mass that is heavier/darker (3)

Cut and paste the examples on your poster board and write a brief caption below each example describing the mass and how the mass affects the publication.

4. Texture Group Assignment: Select five different examples of texture from magazines, periodicals, newspapers, brochures, flyers, and other publications.

Background texture

Texture applied to text

Texture applied to shapes

Synthetic texture, such as denim, leather, fur

Environmental texture, such as grass, water, earth

Cut and paste the examples on your poster board and write a brief caption below each example describing the texture and how the texture affects the publication.

5. Color Group Assignment: Select one example of each color concept from the list below from magazines, periodicals, newspapers, brochures, flyers, and other publications.

Cool Colors

Warm Colors

Neutral Colors

Complementary Color Scheme

Analogous Color Scheme

Monochromatic Color Scheme

Cut and paste the examples on your poster board and write a brief caption below each example describing the color and how the use of color affects the publication.

6. Form Group Assignment: Select 3 examples of 3-D form from the list below from magazines, periodicals, newspapers, brochures, flyers, and other publications.

Form created by shadows (3 examples)

Form created by gradient or color transition (3 examples)

Cut and paste the examples on your poster board and write a brief caption below each example describing the form and how it enhances the publication.

7. Space Group Assignment: Select 3 examples of space from the list below from magazines, periodicals, newspapers, brochures, flyers, and other publications.

Positive Space (3 examples)

Negative Space (3 examples)

Cut and paste the examples on your poster board and write a brief caption below each example describing the space and how it enhances the publication.

1.01 Multiuse Design Elements Group Activity RubricCategory Mastery (3 pts.) Developing (2 pts.) Not mastered (1 pt.)

Main Idea Poster has a clear title which gives specific information about the main idea of the poster.

Poster has a title that gives little information about the main idea of the poster. 

Poster is missing a title.

Effectiveness of Poster Poster gives others a thorough understanding of the design element.

Poster gives others examples of the design element but does not explain how the element enhances the design.

Poster gives others limited understanding of the design element.

Accuracy of Poster Poster depicts the design element with complete accuracy

Poster depicts the design element with some accuracy.

Poster depicts the design element with limited accuracy.

Quality The poster is exceptionally creative and attractive in terms of graphics, design, layout, and neatness.

The poster is acceptably creative and attractive in terms of graphics, design, layout, and neatness, however fairly disorganized.

The poster lacks creativity and attractiveness in terms of graphics, design, layout, and neatness, and is distractingly disorganized or very poorly designed.

Mechanics No errors in grammar or spelling

1-2 errors in grammar of spelling

3 or more errors in grammar or spelling

Presentation All students in the group demonstrated a considerable amount of knowledge and understanding.

Some students in the group demonstrated a considerable amount of knowledge and understanding

Students in the group did not demonstrate their knowledge and understanding.

Grade/Comments Points out of 18: _________

1.01 Design Critique Activity

Directions: The first thing that most people do when they look at a design is say "I like it" or "I don't like it." However, our statements and guesses need to be more educated. An educated discussion about a design is called a "Critique." Using the design assigned to you by your teacher, complete the following design critique.

I. Collect Information:A. Who is the target audience?B. What is the goal or purpose of the design?C. What type of design is it? (advertisement, flyer, cover, etc.)D. Does the design appeal to the target audience? Does the design achieve the intended goal?

II. Analysis. This is where you use your knowledge of typography, and elements and principles of design. Tell what you see, not what you think.

A. Describe the designer’s use of typography. B. Describe the designer’s use of the elements of design. C. Describe the designer’s use of the principles of design.D. Describe the designer’s use of color. E. Describe the designer’s use of grids, z-pattern, and/or optical center?

III. Interpretation. Tell what you think.A. What does the spread mean to you personally? B. Does the designer evoke any emotion from you? C. Can you make any connections to the design?

IV. Judgment Time. By now, you should be able to give some educated reasons why you like or do not like a design. Back up what you say based on your knowledge of typography, design elements, and design principles. Do not allow your criticism to outweigh your positive comments. It’s “ok” to like the design, but you must justify your answer.

A. What do you think about this layout? Is it successful or not? B. Did the designer use what you have learned about design effectively? C. What would you change?

V. Final Thoughts and Future Development. Discuss some of the layout’s strong points that you’d like to use in your designs in the future. Example: “Use of a (color, lines) in this layout is appealing, and I definitely think I would repeat this in future assignments.”

1.01 The Systems ApproachDirections: Planning is an important part of the design process. You may use the following as a planning tool to help you through the design process.

Collect Information

1. Who is the target audience? 2. What is the goal or purpose of the design?3. What are the technical requirements?

a. What end product(s) or document(s) are required? b. What is the appropriate page size?c. Are there any required colors or logos?

4. What is the deadline?

Develop a Plan

1. Will this design project be completed individually or as a team? 2. If teams are used, what are the roles and deadlines for each team member?

Brainstorm

1. Find inspiration in books, magazines, museums, and unwinding (taking walks, having fun, etc.)2. Research similar or competing designs3. Sketch out ideas

Experiment

Develop at least 2 different mockups or prototypes of the design to present to the client. These 2 designs do not have to be completely different. There can simply be a change in colors, fonts, or graphics.

Proofread

Proofread with a partner. Correct spelling and/or grammatical errors.

Revise

1. Meet with the client. Be open to suggestions for improvement.2. Revise the design to meet the client’s needs.