Elements of Design

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

4. How Type Functions • Personalitiesof 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

5. Example: Font Personalities

6. Font Choice Example 1 This makes sense…

7. Font Choice Example 2 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!

9. Example… What’s wrong with this picture?

10. The Four Basic Principles • Contrast • Repetition • Alignment • Proximity …Of design, darling

12. Contrast • Avoid elements on the page that are merelysimilar. • 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! Due to… • Increased Productivity • Focus on Sales and Revenue • Fewer Troubles with Rats • Ending of Seven Years’ Bad Luck • Miracle-Gro ….Boooooo

17. Growth is up 2.6 Percent! Due to… • Increased Productivity • Focus on Sales and Revenue • Fewer Troubles with Rats • Ending of Seven Years’ Bad Luck • Miracle-Gro ….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. TypicalResume

23. ImprovedResume

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. A?Before Construction Network After

41. B?Before Construction Network Before

42. A?Before Galeria Before

43. B?Before Galeria After

44. 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 12-20 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 