1) Typography the Style, Arrangement, and Appearance of Text

Course / BD10 Multimedia and Webpage Design / Unit A / Multimedia and Graphic Design
Essential Standard / 1.00 / B2 / 20% / Understand design.
Indicator / 1.01 / B2 / 10% / Understand typography, multiuse design principles and elements.
Essential
Questions / ·  What impact do typography concepts have on the effectiveness of multimedia design?
·  How do you effectively apply design principles and elements to multimedia design?

UNPACKED CONTENT

1)  Typography – the style, arrangement, and appearance of text

a)  Typeface – the basic design of a character

b)  Typeface Categories

i.)  Serif – the characters have serifs or strokes on the tips

1)  Easier to read in large bodies of printed text

2)  Examples

a)  Courier

b)  Times New Roman

ii.)  Sans Serif – “sans” is French for without, so the characters do not have serifs or strokes on the tips

1)  Easier to read on digital displays such as Smart Boards and monitors

2)  Examples

a)  Arial

b)  Verdana

iii.)  Ornamental – artsy typefaces; known for their elaborate features and unique design

1)  Designed to catch the eye

2)  Should be used sparingly

3)  Should never be used in body text

4)  Typically displayed in large point sizes

5)  Great for banners, initial caps, and headlines

6)  Examples

a)  Algerian

b)  Bauhaus

iv.)  Script – the characters appear to have been written by hand

1)  Should never be keyed in all caps

2)  Can convey a formal or casual mood

3)  Examples

a)  Brush Script - Formal

b)  Kristen ITC - Casual

v.)  Symbol - uses decorative pictures or symbols instead of characters

1)  Allows the user to use a symbol to convey the message without importing a graphic

2)  Can be used for fun or for musical and mathematical symbols

3)  Examples

a)  Webdings

b)  Wingdings

c)  Font – a specific size, weight, and style applied to a character. Examples include: Arial, 14 pt., bold and Times New Roman, 12 pt., italic, shadow

d)  Typeface Spacing Categories

i.)  Monospaced – all characters receive an equal amount of horizontal space regardless of the size of the character.

1)  Harder to read than proportional fonts

2)  Provide an advantage in math and programming languages because the spacebar can be used to align characters in monospaced

ii.)  Proportional – all characters receive a different amount of horizontal space based on the size of the character.

1)  Easier to read in body text

2)  Disadvantage - the spacebar cannot be used for alignment because the characters do not all have the same amount of horizontal space. Must use tabs for alignment.

2)  Usability and Readability Considerations – Font choice has an impact on a design’s effectiveness

a)  Font choice should convey the meaning or personality that matches the purpose of the design

i.)  Examples:

a)  Sympathy Card – Script

b)  Flyer Heading – Ornamental

b)  Font choice should give visual clues about the order text should be read

i.)  Visual Hierarchy - an arrangement of text in a graduated series to help readers scan and know where to enter and exit the text

a)  Create hierarchy through changes in weight, scale, positioning, color, tone, spacing, or font

b)  Examples:

1)  Main headings larger than subheadings

2)  Using bold, italics, and color for emphasis

3)  Most important information at the top of a web page

c)  Font choice should be limited to 2 or 3 fonts

i.)  Too many font choices can be distracting

ii.)  Do not mix 2 fonts from the same category

a)  Example: Times New Roman for a heading and Palatino for a subheading; 2 serif fonts

d)  Consider the target audience

i.)  Examples:

a)  Young readers need fonts that accurately display letters. The lowercase “a” in Arial is not displayed the way young readers learn to write the letter “a” making the font difficult to read

b)  Clearview font for highway signs – drivers need fonts that can be read at a distance

e)  Consider the medium – Test the typeface to see if it is legible for the intended output, whether digital or in print

i.)  Test the Size – the vertical height of a character

a)  Suggested body text for print is 10-12 points

b)  Suggested body text for the web is 15-25 pixels

ii.)  Test the Style – bold, italic, fill color, stroke color, shadow, small caps

a)  Use to add emphasis or improve readability

iii.)  Test the Spacing

a)  Leading – vertical spacing between of lines of text

b)  Kerning – horizontal spacing between pairs of letters

c)  Tracking – horizontal spacing between all the characters in a large block of text.

3)  Multiuse Design Elements

a)  Lines – used to organize information, simulate movement, lead the eyes and enhance a design.

b)  Space

i.)  Positive Space – length, width, and depth of objects

ii.)  Negative Space – “white space”; the distance between objects; gives a design breathing room

iii.)  Example: Two shapes on a page are positive space. The space between them is negative space.

c)  Shapes – 2-deminsional space; used to enhance a publication.

i.)  Geometric – square, triangle, circle

ii.)  Organic – natural or man-made objects such as leaves, trees, and cars

d)  Form – 3-dimensional space added to objects by the addition of shadows, tone, or color transitions

i.)  Example: Shadows on computer screen windows give the illusion that they are floating in 3-D space even though the design is 2-D.

e)  Mass – the size or amount of space taken up by an element.

f)  Texture – used to convey a “visual” sense of feel.

g)  Color - can be used to evoke emotion

i.)  Color theory

a)  Color themes can be used to set a tone or mood for the publication.

b)  Color themes:

1)  Calming colors – cool colors (blue, green and violet)

2)  Exciting colors – warm colors (red, orange and yellow)

3)  Neutral colors - beige, ivory, taupe, black, gray, and white

ii.)  Color Harmony – a visually pleasing arrangement of colors

a)  Color palette – a chart used to choose colors

iii.)  Color Schemes

a)  Complementary color scheme – any 2 colors directly opposite each other on the color wheel

b)  Analogous color scheme - any three colors which are side by side on a 12 part color wheel

c)  Monochromatic scheme - uses variations in lightness and saturation of a single color.

iv.)  Color Modes

a)  On Monitors – colors are created by mixing varying degrees of red, green and blue light.

1)  Referred to as RGB (red, green, blue)

2)  Expressed as hexadecimals

3)  Additive color

b)  On Printers - in the four-color printing process, color is created by layering cyan, magenta, yellow and black ink.

1)  Referred to as CMYK (cyan, magenta, yellow and black)

2)  Expressed as percentages

3)  Subtractive color

c)  Color Matching – the process of matching the colors produced on the computer screen to the colors that can be printed on paper using ink to ensure the printed publication looks as much like the on-screen publication as possible.

v.)  Color Terms

a)  Hue – a color

b)  Value – the brightness of a color

c)  Tint – a hue plus white

d)  Shade – a hue plus black

e)  Saturation - the amount of the hue used; a color’s intensity

4)  Multiuse Design Principles

a)  Balance – determined by how elements are arranged

i.)  Symmetrical – elements of the design are centered or evenly divided horizontally and vertically on a page.

ii.)  Asymmetrical – off-center alignment created with an odd or mismatched number of elements.

iii.)  Radial – elements radiate or swirl out from a center point.

b)  Contrast – emphasizing the difference between two elements

i.)  Creates interest and excitement

ii.)  Examples: red and white, squares and circles, rough and smooth textures

c)  Unity/Harmony – All of the design elements are consistent with each other in shape, style and color and consistent with the overall message

i.)  Helps the reader understand the whole message

ii.)  Can be achieved through repetition/consistency

iii.)  Examples:

1)  Using consistent font scheme or repeated shape throughout

2)  Using lines to connect

3)  Placement of related objects near each other (Example: Picture with caption)

d)  Scale/Proportion – the relationships between the sizes of various elements

i.)  Creates visual impact and aids readability

ii.)  Examples:

1)  Headline larger than body text

2)  Exaggerating the size of a design element to make a point

e)  Dominance/Emphasis – the first element the eye sees; the focal point

i.)  Gets the viewer’s attention

ii.)  Assures the viewer starts in the correct order

iii.)  Examples

1)  Splash of color

2)  Shocking image or text

5)  Multiuse Design Compositions

a)  Grids – visually dividing the layout into columns and/or rows

b)  Rule of Thirds - visually dividing the page into thirds vertically and horizontally and placing the most important element along a line or where the lines intersect

c)  Optical Center - the spot that the eye sees when it first encounters a page. It is slightly above and to the right of the mathematical center of the page.

d)  Z-pattern – the visual path the eye follows when looking at a printed page.

6)  The Systems Approach - The process of a design project that involves preliminary research and collaborative planning before design can begin.

a)  Advantages

i.)  Work is done more efficiently

ii.)  Keeps the project organized

iii.)  Ensures alignment to customer’s goals and expectations.

b)  Steps:

i.)  Collect Information - Interview the client and/or use a pre-set questionnaire

1)  Who is the target audience?

a)  Age

b)  Gender

c)  Geographic location

d)  Cultural considerations

2)  What are the goals of the design?

a)  To sell, inform, entertain, educate

b)  Formal or informal

3)  What are the technical requirements?

a)  Documents required – flyer, business card, advertisement, web site, etc.

b)  Page Size

c)  Required colors

d)  Copies needed

4)  What are the budget and deadlines?

ii.)  Develop a Plan - For a business this might include a written proposal, a price quote, a customer contract, the development of a design team, and a detailed action plan

iii.)  Brainstorm

1)  Find inspiration in books, magazines, museums, and unwinding (taking walks, having fun, etc.)

2)  Research similar or competing designs

3)  Sketch out ideas

iv.)  Experiment – keeping the original goal in mind, experiment with a few different design options to show the client

v.)  Proofread – proofread with a partner or have others on the development team proofread the design to make sure it is free from spelling and grammatical errors

vi.)  Revise – collaborate with the client for feedback and revise the design if necessary