1. Elements of Design Line Colour Texture Size Shape Space Value
Typography
Media

4. How Type Functions Personalities of type achieve different effects
Consider: formal vs. informal fonts
Consider: decorative vs. plain fonts
Consider….
Personality and effect of font choice
Impact on author’s credibility
Appropriateness for context, form, purpose, central idea, and audience of document
Text is so highly visual that its visual nature and power are often overlooked. However, it is important that designers understand how type functions and what it does before making decisions about the use of a particular font.
Each typeface has a personality, whether it is formal or informal, and each can achieve a particular effect. It’s important to remember that not all fonts are appropriate for every situation simply by the nature of their personality. <ADVANCE TO NEXT SLIDE>

5. Example: Font Personalities
In this example, you can look at the font choice and focus on the font without being distracted by the meaning of the text.
We can see different personalities, and levels of formality emerging simply with these four choices.
Font number 1 and number 4 are san-serif fonts, meaning they are plain and do not have any decorations or finishing strokes on the letters.
Fonts 2 and 3 are serif fonts, meaning that they are more decorative and have additional strokes, or feet, on the letters.
Consider the personalities of each of these fonts and the situations in which they would be appropriate. Serif fonts tend to be more formal while san-serif fonts are less formal. In a few minutes, we’ll look at examples of when these fonts would be appropriate or not. <ADVANCE TO NEXT SLIDE>

6. Font Choice Example 1 This makes sense…
The example shown here lists 4 separate phrases in the same fonts as in the example you saw earlier. Instead of only seeing the font, you can consider the choice of font in context with the message being conveyed.
The first two phrases—”Operating Instruction” and “Dear Mrs. Smith” do not, at first glance, appear to have any cultural associations. This is intentional as the fonts are nondescript and commonly used.
However, in looking at “Medieval History,” you will notice that the font looks like our cultural conception of Medieval script. The font choice for “Bigfoot Captured!” fits what we are used to seeing on Supermarket tabloids. It’s loud and bold, indicating an announcement of incredible news.
Look through magazines, at billboard advertisements, and other documents to see how fonts are used and to get a feel for cultural associations of various fonts. <ADVANCE TO NEXT SLIDE>
This makes sense…

7. Font Choice Example 2 This makes NO sense…
This next example on the right shows the same fonts but different phrases, and cultural associations are ignored. The font choices may not be most appropriate considering the context of the phrases.
For example, “In deepest sympathy” may seem cold and impersonal if the phrase, in this particular typeface, were on the front of a sympathy card.
The font choice for “Lafayette Teen Center” may be appropriate in some contexts, unless the context is a promotional publication aimed at teens. It doesn’t work to grab attention or evoke excitement, whereas a different font, one more “youthful” in appearance, would work best.
The font choices for “Chemistry Lab Report” and “Museum of Natural History” are also inappropriate given their cultural associations.
<HERE, THE FACILITATOR CAN ASK THE PARTICIPANTS WHY THE LAST TWO FONT CHOICES DO NOT WORK.> <ADVANCE TO NEXT SLIDE>
This makes NO sense…

8. Headline vs. Body Text
Headlines should be bigger, bolder and boom-boom-pow-ier!
Body text should be smaller, simpler, and easier to read for extended periods of time!
In choosing appropriate fonts or typefaces, designers must also consider the function of the text, whether it is a headline or whether it is body text. The type of text influences which font may be appropriate.
In addition, sustained readability is an issue to consider when choosing a font face. Not all fonts lend themselves to sustained reading. In other words, what may work for headline text may not work for body text because a person’s eyes cannot read a particular font face when it is smaller and when the text is longer, as with most body text.
<ADVANCE TO NEXT SLIDE>

9. Example… What’s wrong with this picture?
The example on top shows a script font in what appears to be a title, or headline—”Lunch Menu.” The font choice seems appropriate. It’s eye catching, evokes a sense of formality, and the font is isolated to that one phrase.
What happens when that font extends to other text, as in the example on the bottom? Sustained readability becomes an issue, and it’s virtually impossible for anyone to read pages and pages of text in this font without getting eyestrain. Fonts like Times New Roman or Arial are more appropriate choices for body text because they are comfortable to read. <ADVANCE TO NEXT SLIDE>

10. The Four Basic Principles
Contrast
Repetition
Alignment
Proximity
More information about the 4 Principles:
C –
R –
A –
P –
…Of design, darling

12. Contrast Avoid elements on the page that are merely similar.
If the elements (type, headings, color, size, line thickness, shape, space, etc.) are not exactly the same, then make them very different.

13. Contrast is often the most important visual element on the page, and is often used to draw attention to a focal point.

14. Contrast Example 1

15. Contrast Example 2 

16. Growth is up 2.6 percent! ….Boooooo Due to… Increased Productivity
Focus on Sales and Revenue
Fewer Troubles with Rats
Ending of Seven Years’ Bad Luck
Miracle-Gro
Rationale: This is slide 1 of my contrast example. You can see that it is useful for explaining business grown, but ultimately is boring and homogenous, lacking in contrast.
….Boooooo

17. Growth is up 2.6 Percent! Due to… ….Ahhhhhhhh Increased Productivity
Focus on Sales and Revenue
Fewer Troubles with Rats
Ending of Seven Years’ Bad Luck
Miracle-Gro
Rationale: This slide is much more dynamic (meaning that it contains a variety of elements), and its appearance stresses the amount of growth and unifies the means of growth in a list that is all of a different style than the top headline. To do this, I switched the headline to bold, increased the size, and took out the “Why?” at the top of the list to let the list speak for itself. For good contrast, be sure that you 1) Don’t fear drastic changes, and 2) Don’t overdo it. This slide recognizes that the audience has limited focus. In fact, this slide is already pushing it in terms of the amount of information the audience can be expected to take in. Don’t make the audience’s eye tired. When in doubt, keep the design basic.
….Ahhhhhhhh

18. Repetition Repeat visual elements of the design throughout the piece.
You can repeat color, shape, texture, spatial relationships, line thicknesses, sizes, etc.

19. Repetition
This helps develop the organization and strengthens the unity and readability.
Ex. Use the same colour of background throughout, and if one title is bolded, bold all others.

20. Repetition Example 1

21. Repetition Example 2 

22. Typical Resume

23. Improved Resume

24. Alignment
Nothing should be placed on the page at ransom – every element must have a purpose.
Every element should have some visual connection with another element on the page.
Align elements on vertical hard edges, usually on the left side.

25. Alignment Example 1
Yes, this is good.

26. Alignment Example 2 

27. Repeated items… …should become headings

28. Like so (and note alignment of numbers)

29. Alignment Example 3
Alignment

30. Proximity
Items relating to each other should be grouped close together.
When several items are in close proximity to each other, they become one visual unit rather than several separate units.
This helps organize info & reduce clutter.

31. Proximity
Items that are not related to each other should not be in close proximity.
The closeness or lack of closeness indicates the relationship.
Elements that are intellectually connected should be visually connected.

32. Proximity Example 1
NO!
YAS! 

33. Proximity Example 2
NO!
NO! 

34. YAAAAAS!

35. Which is better and WHY? Consider all the CRAP we just talked about:
Contrast
Repetition
Alignment
Proximity

36. A?Before

37. B?Before
Chamber City After

38. A?Before
Ancient City Before

39. B?Before
Ancient City After

40. Construction Network After
A?Before
Construction Network After

41. Construction Network Before
B?Before
Construction Network Before

42. A?Before
Galeria Before

43. B?Before
Galeria After

44. to Sum up Our Crappy Conversation
Final Examples
to Sum up Our Crappy Conversation 

45. Proximity

46. Alignment

47. Repetition

48. Contrast

49. Common Design Offenses
Large Images (result in large load times)
Long lines of text that require scrolling (limit to words)
Broken hyperlinks (cause user rage)
Lack of contrast (everything is one colour, size, etc.)
Bright and hideous backgrounds (make it tough to read)
Lack of consistency (constant contrast)
Too many graphics (get distracting)
Oversized pages (results in too much scrolling)

50. A Random Rant about ALL CAPS 

51. AVOID ALL CAPS
ALL CAPS ARE HARD FOR PEOPLE TO READ B/C THERE’S NO SHAPE TO THEM
Mixed-case sentences have redundant shape coding that make them easier to read.

52. AVOID ALL CAPS ALL CAPS HAVE NO SHAPE CODING
Mixed-case sentences have redundant shape coding
Ascenders
Descenders

53. AVOID ALL CAPS
ALL CAPS TAKES UP MORE SPACE, FORCING YOU TO USE A SMALLER FONT TO PUT THE SAME AMOUNT OF INFORMATION
(If you don’t believe me, this sentence has just the same number of letters as the previous one.)