Graphic Design

1. Graphic Design The “look & feel” The system of imagery

2. Graphic Design It shares aspects of engineering, but with aesthetic, communicative aspects and consumer appeal.

3. Graphic Design As a practice, it has been around for thousands of years.

4. Graphic Design With the industrial revolution, art and design began to diverge.

5. Graphic Design In the US, it grew into a profession after WWII.

6. Graphic Design It relies on a BALANCE and integration of: & feel

7. Graphic Design Objective: relies on quantitative studies, like usability and legibility measures. Does the “look and feel” work?

8. Graphic Design Subjective: “look and feel” relies on subjective judgement by experts, depends on contextual factors.

9. Graphic Design Subjective: “look and feel” Culture is learned, cultural meanings change, meanings can be multiple. Uniqueness is valued (not programmable).

10. Graphic Design You cannot empirically measure its subjective aspects, but it is rigorous in its own epistemological realm (knowledge base).

11. Graphic Design It is rigorous in its own epistemological realm. 1. Graphic Design experts. vs. 2. Deploying graphic design principles (anybody).

12. Graphic Design So what? Deploying graphic design principles will: - enhance your ability to communicate w/designers & feel

13. Graphic Design Deploying graphic design principles will: - enable you to create more user-friendly interfaces

14. Graphic Design Deploying graphic design principles will: - enhance the knowledge base of HCI, which is increasingly necessary with millions of users

15. Agenda: • The Role of Graphic Design • Principles of Graphic Design • Animation/Rollovers • Typography • Color • Icons IAT 410

16. Role of Graphic Design • The “look and feel” portion of an interface: • What someone initially encounters IAT 410

17. Role of Graphic Design • The “look and feel” portion of an interface: • What someone initially encounters • Sets a framework for understanding content • Conveys an impression, mood IAT 410

18. Role of Graphic Design • The “look and feel” portion of an interface: • What someone initially encounters • Sets a framework for understanding content IAT 410

19. Role of Graphic Design • The “look and feel” portion of an interface: • What someone initially encounters • Sets a framework for understanding content IAT 410

20. Role of Graphic Design • The “look and feel” portion of an interface: • What someone initially encounters • Sets a framework for understanding content IAT 410

21. Role of Graphic Design • The “look and feel” portion of an interface: • What someone initially encounters • Sets a framework for understanding content IAT 410

22. Role of Graphic Design • The “look and feel” portion of an interface: • What someone initially encounters • Sets a framework for understanding content IAT 410

23. Role of Graphic Design • The “look and feel” portion of an interface: • What someone initially encounters • Sets a framework for understanding content IAT 410

24. Agenda: • The Role of Graphic Design • Principles of Graphic Design • Animation/Rollovers • Typography • Color • Icons IAT 410

25. Principles of Graphic Design • Concept/Metaphor • Hierarchy • Clarity • Consistency • Alignment • Proximity • Contrast IAT 410

26. Principles: Concept/Metaphor • Concept: what is the overarching idea that every visual aspect of the interface relates to? (It MUST be relevant) • Metaphor: (Means of “explaining” concept) If you’re building an interface for a grocery application, maybe mimic a person walking through a store with a cart. IAT 410

27. Principles: Concept/Metaphor • Concept: what is the overarching idea that every visual aspect of the interface relates to? (It MUST be relevant) • Apple: accessible, fun, familiar; “for the rest of us” • Metaphor: (Means of “explaining” concept) If you’re building an interface for a grocery application, maybe mimic a person walking through a store with a cart. desktop metaphor IAT 410

28. Principles: Hierarchy • What are the relative “levels” of importance? • What should the user see first? Second? IAT 410

29. Principles: Hierarchy • What are the relative “levels” of importance? IAT 410

30. Principles: Hierarchy • . IAT 410

31. Principles: Clarity • Every element in an interface should have a reason for being there • Make that reason clear! • Less is more IAT 410

32. Principles: Clarity • White space • Leads the eye • Provides symmetry and balance through its use • Strengthens impact of message • Allows eye to rest between elements of activity (increases legibility) • Used to promote simplicity, elegance, refinement IAT 410

33. Principles: Clarity • White space IAT 410

34. Principles: Clarity IAT 410

35. Principles: Clarity • White space IAT 410

36. Principles: Consistency • Be consistent in every aspect: • In layout, color, images, icons, typography, text • Within screen, across screens • Stay within metaphor everywhere • Platform may have a style guide -- follow it! IAT 410

37. Principles: Alignment • Western world • Start from top left • Allows eye to parse display more easily IAT 410

38. Principles: Alignment • Grids • (Hidden) horizontal and vertical lines to help locate window components • Align related things • Group items logically • Minimize number of controls, reduce clutter IAT 410

39. Principles: Alignment • Grids - use them IAT 410

40. Principles: Alignment • Grids • (Hidden) horizontal and vertical lines to help locate window components • Align related things • Group items logically • Minimize number of controls, reduce clutter IAT 410

41. Principles: Alignment • Left, center, or right • Ragged right or justified • Choose one, use it everywhere • Novices often center things • Hard to read! • No definition, calm, very formal • Use only in small quantities Here is somenew text Here issomenew text Here is somenew text IAT 410

42. Principles: Proximity • Items close together appear to have a relationship • Large distance implies -- no relationship Time IAT 410

43. Principles: Proximity • Items close together appear to have a relationship • Large distance implies -- no relationship Time IAT 410

44. Principles: Contrast • Pulls you in • Guides your eyes around the interface • Supports skimming • Take advantage of contrast to guide user through hierarchy of information; add focus; or to energize an interface with “texture” • Can be used to distinguish active control IAT 410

45. Principles: Contrast • Can be used to set off most important item • Allow it to dominate • Ask yourself what is the most important item in the interface, highlight it • Use geometry to help sequencing IAT 410

46. Agenda: • The Role of Graphic Design • Principles of Graphic Design • Animation/Rollovers • Typography • Color • Icons IAT 410

47. Animation/Rollovers • Blinking • Good for grabbing attention, but easily becomes obnoxious; use very sparingly • Reverse video, bold • Good for making something stand out IAT 410

48. Agenda: • The Role of Graphic Design • Principles of Graphic Design • Animation/Rollovers • Typography • Color • Icons IAT 410

49. Typography: White space • White space • Leads the eye • Provides symmetry and balance through its use • Strengthens impact of message • Allows eye to rest between elements of • activity (increases legibility) • Used to promote simplicity, elegance, refinement IAT 410

50. Typography: Hierarchy • How do you lead the user through visual • information (by visual means)? • Some traditional navigation devices (conventions): • Size • Color • Composition (where it is on the rectangle) • Page numbers • Type and Image emphases IAT 410