Evans and Thomas Chapters 4 & 5

andWilliams & TollettChapters 6, 7 & 8

By Annisa LiuPRWR 625: Layout Design and Production

In this presentation...• I'm presenting on five chapters and

have asked multiple questions throughout. Some are supposed to be somewhat fun, and it's not expected that you answer all of them.

• The questions listed throughout the presentation are also listed at the end of the presentation.

Evans and Thomas: Chapter 4

Typography in Design

• "Using type effectively requires an understanding of its communication and visual properties" (117).

• Type can satisfy several design objectives at once by serving as text to read and also a means of adding expression to a message.

Typographic Nomenclature

Typographic nomenclature can be divided into two categories:

• Terms that identify type and typographic forms

• Terms associated with sizing and adjusting type (118)

Terms That Identify Type and Typographic Forms

• Typeface—The design of a single set of letterforms, numerals, and punctuation marks unified by consistent visual properties.

• Type style—Modifications in a typeface that create design variety while maintaining the visual character of the typeface.

• Type family—A range of style variations based on a single typeface design.

• Type font—A complete set of letterforms (uppercase and lowercase), numerals, and punctuation marks in a particular typeface that allows for typesetting by keystroke on a computer or other means of typographic composition.

• Letterform—The particular style and form of each individual letter in an alphabet.

• Character—Individual letterforms, numerals, punctuation marks, or other units that are part of a font (118).

Example of Type Style The title of Stephen King's

novel-turned-film "Thinner" exemplifies type style through the type variation of both weight (light, medium, bold) and width (condensed or extended).

Can you think of other movie or book titles that alter standard type to fit the theme of the story?

Terms Associated with Sizing and Adjusting

Type• Point size—A unit for measuring the height of type and vertical distance between lines of type.

• Line length—Horizontal length of a line of type, traditionally measured in picas but also in inches.

• Leading—The amount of space between lines of type, measured in points. The term is derived from metal type where strips of lead were inserted between lines of type (Alternative terms: line spacing, interline spacing).

• Letterspacing—The distance between characters in a word or number and between words and punctuation in a line of type.

119-120

Type falls into two basic categories:

• Text typefaces—Used where legibility is an issue, typically, for small print and long passages of text.

• Display typefaces—Used where projecting a mood or attitude is important, typically, for names, logos, titles, and other short passages of text (125).

Typefaces• Typefaces can convey period looks or an ethnic

or cultural feeling. They can express a broad range of moods.o Example: This font, Japanese Brush, is made to resemble

Japanese calligraphy. • Many fonts have an "attitude" which can

enhance the message you're trying to convey. o Example: This font, Curlz MT, uses playful

swirls to give the type an upbeat and happy appearance.

• "Type can be altered to express an attitude or concept. It can be configured to suggest an image or shape" (131).

A Fun Activity!The typefaces used in metal band logos

are oftentimes so elaborate that they are no longer legible.

1. See if you can discern the names of the following metal bands (answers will be at the end of the presentation).

2. What themes are integrated into each typeface, and how does it affect the message?

What?

Huh?

Come again?

Say What?

Other Typeface Classifications

Other typeface classifications traditionally relied on to help organize typefaces:

• Old style, transitional, and modern—these style categories

refer specifically to serif typefaces and reflect modifications that have taken place over time from the original Roman or old style letterforms.

• Script—These typefaces most resemble handwriting and run the gamut from elegant to casual.

• Egyptian/slab serif—These typefaces (also called square serifs) are characterized by heavy, slablike serifs.

• Decorative—Many typefaces, by default, fall into this category. Most are highly stylized and suitable for display use (128)

Type as Design• Type works as a design element when utilized in

design composition. It should be considered just as thoughtfully as shape, line, color, and texture.

• "Therefore, all of the principles that guide decision making in a design composition also apply to typography" (133).

• The principles of hierarchy, unity and variety, proportion, balance, and scale should still dictate how to style type, what typefaces to use, and what size and color the type should be.

Type AlignmentType Alignment: Arranging type so that it conforms to a grid

requires aligning it to the imaginary axis that form the grid structure.

The definition sounds kind of confusing until you recognize that you use these arrangements frequently in Microsoft Word

• Flush left/ragged right

• Flush right/ragged left

• Justified

• Centered–139

Chapter 5: Imagery in Design

• Photographs are considered the most credible type of imagery. However, they can be altered through:

• Cropping: Removing portions of the photograph that detract/distract from the viewers attention from its central focus.

• Outlining/Silhouetting: Isolating a subject from its background.o "This technique may be your only option if

the photograph is poorly composed or the background is so distracting it needs to be entirely removed" (151).

IllustrationsWhile photographs can provide a reliable

visual for audiences, illustrations have benefits that photographs do not.

• Photographs do not have the "expressive quality" of illustrations, so the mood cannot be enhanced.

• "Illustrations can also help an audience visualize something that can’t be seen or better understand something that’s complex" (157). o Imagine trying to visualize which state ends

where on a satellite map!

Sources for ImageryRoyalty-free collectionsPro: Inexpensive Con: Generic and available for anyone to use.

Stock AgenciesPro: Agencies grant limited use rightsCon: Available to anyone willing to payCommissionedPro: Yields and original pieceCon: Higher costFound ImageryPro: Free and original!

Graphic ReductionGraphic Reduction: "Taking an image down to its simplest form

while preserving its ability to be recognized" (161).

Accomplished by:• Describing the contours of an image with an outline• Converting the basic form of an object to a silhouette or simple

shape• Interpreting shadowed contours of a form into a series of shapes• Using a combination of these methods.

A stencil is a perfect example of Graphic Reduction!

LogosLogo: "whatever symbol a company uses

to identify its brand in the marketplace" (166)

Logotype: "a distinctive, typographic treatment of a company name" (166)

Many companies use both:

Logos"Because logos often appear on apparel labels, in

newspaper ads, and in other situations where there is little control over the size and color of its reproduction, their design is typically clean and simple so they can be easily recognized and understood regardless of scale or color" (166).

You were asked last week to give an example of a logo. Would the logo you chose still be effective if the size or color were affected?

Williams and Tollett Chapter 6: Logos

• Many logos consist of only type. Businesses that want a "solid, dependable, no-nonsense" (90) corporate look prefer this kind of logo:

• Or, combine two different typefaces to create an appealing logo.o The key is to use contrasting typefaces.

LogosSometimes logos will have their

letterforms interact with each other, adding visual interest, by "tweaking a letterform out of the ordinary" (94).

• The examples below use an illustrative technique.

LogosTo spruce up your logo, use illustrative

elements like:

• Symbols• Clip Art• Illustrations

Chapter 7: Business cards, letterhead, and

envelopesBusiness Cards

• A standard-sized business card is 3 ½ x 2 inches.

• You should not make the card any larger because it will not fit inside of a wallet.

• If you must have a larger card, design it so that it folds into a standard 3 ½ x 2.

Business CardsExamples of typical business card

design:• It is okay to have empty corners• It is okay not to center the layout• It is okay not to use all caps• It is okay to use a typeface other than

Helvetica (Arial) or Times• It is okay to use type smaller than 12

point• It is okay to use one large graphic

image instead of two small ones stuck in the corners (104)

Business CardsSo you don't think business cards are

important?

Patrick Bateman from American Psycho begs to differ...

https://www.youtube.com/watch?v=2Ux3vncNNLg

"My God, he even has a watermark..."

Considering what we have learned, which business card do you think is

better?

Letterhead and Envelopes

The numbers typically found on a letterhead or business card are:

• Office number - (T)(P)(V)• Cell number - (C)• Fax number - (F)• Address• Zip Code

Because there are so many numbers typically used, choose a typeface with oldstyle numbers for a more aesthetically pleasing look!

LetterheadThings to keep in mind when creating

letterhead:

• Be conscious of where the body of a letter will appear on the stationary.

• Don’t be afraid to use small type or graphic elements.

• Don’t be afraid to use large type or graphic elements.

• Don’t be afraid to place elements in “unusual” positions.

• Don’t be afraid to fill the writing space with an image.

(109-117)

Does my company's letterhead, envelope and business card conform to the lessons in our readings?

Chapter 8: Invoices and Forms

The secret to good forms:

• Alignment: Lack of alignment is the single biggest feature that makes a form appear unclear to the user

• Contrast: To help direct the user through the form

• Proximity: To keep groups of related pieces of information together

• Repetition: To tie it all together

(122)

Invoices and FormsTo make forms even clearer, especially those with many lines of

data, use a color tint on alternating lines (130).

The lines themselves can be something other than plain black! You can use:

Thin lines __________________Thicker gray lines _________________Dotted lines

............................................Dashed lines --------------------------------Thicker, lightly colored lines _________________Boxes around the field

Questions• Slide 6: "Can you think of other movie or book titles that alter

standard type to fit the theme of the story?"• Slide 10:

o See if you can discern the names of the following metal bands (answers will be listed on the final slide).

o What themes are integrated into each typeface, and how does it affect the message?

• Slide 23: You were asked last week to give an example of a logo. Would the logo you chose still be effective if the size or color were affected?

• Slide 30: Considering what we have learned, which business card do you think is better?

• Slide 31: Does my company's letterhead, envelope and business card conform to the lessons in our readings?

Band Names1. Beastial Summoning

2. Enslaved

3. Nokturnal Mortum

4. Katharsis

SourcesAll Slides:

Evans, Poppy, and Mark Thomas. “Chapter 4: Typography in design.” In Exploring the Elements of Design. 2nd ed. Clifton Park, NY: Thomas/Delmar Learning, 2008. 117-145.

Evans, Poppy, and Mark Thomas. “Chapter 6: Imagery in Design.” In Exploring the Elements of Design. 2nd ed. Clifton Park, NY: Thomas/Delmar Learning, 2008. 146-179.

Williams, Robin, and John Tollett. “Chapter 6: Logos.” In Robin Williams Design Workshop. 2nd ed. Berkely, Calif.: Peachpit Press, 2007. 87-102.

Williams, Robin, and John Tollett. “Chapter 7: Business cards, letterhead, and envelopes.” In Robin Williams Design Workshop. 2nd ed. Berkely, Calif.: Peachpit Press, 2007. 103-120.

Williams, Robin, and John Tollett. “Chapter 8: Invoices and Forms.” In Robin Williams Design Workshop. 2nd ed. Berkely, Calif.: Peachpit Press, 2007. 121-132.

Image SourcesSlide 6: Thinner [Online] Available:

http://www.imdb.com/title/tt0117894/?ref_=fn_al_tt_1

Slides 11-14: 31 illegible black metal band logos [Online] Available: http://www.nme.com/photos/31-illegible-black-metal-band-logos/289103/1/1

Slide 17: Text Manipulation [Online] Available: http://www.txshl.org/word1.cfm

Slide 21: royalcrusty. (2008, February 20) Stencil kid Before After [Online] Available: http://royalcrusty.deviantart.com/art/Stencil-kid-Before-After-77915622

Slide 22: Fruit of the Loom [Online] Available: http://logos.wikia.com/wiki/Fruit_of_the_Loom

Image Sources Continued

Slide 23: Fruit Loops Box [Online] Available: http://www.miltontrainworks.com/MTW/services/KCC/ Subway Logo [Online] Available: http://www.logostage.com/logo/subway/#.US2jG_Iv9Co

Slide 24: Cloudtimes. (2012, February 7) New Look Sony Unveils Smartphones [Online] Available: http://cloudtimes.org/2012/02/27/new-look-sony-unveils-smartphones/

Slide 26: Hoffman, Scott. red-bull-logo [Online] Available: http://www.motocross.com/features/red-bull-and-outdoor-motocross-partner/attachment/red-bull-logo/

Slide 29: Murray, Paul. American Psycho Business Card Scene [Online] Available: https://www.youtube.com/watch?v=2Ux3vncNNLg

Slide 30: Alyx. Movie Review: American Psycho (2000) [Online] Available: http://horrorfanzine.com/american-psycho-movie-review/