1. Graphic Design The “look & feel”

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. Sep 3, Fall 2004CS 445515 Agenda: The Role of Graphic Design Principles of Graphic Design Animation/Rollovers Typography Color Icons

16. Sep 3, Fall 2004CS 445516 Role of Graphic Design The “look and feel” portion of an interface: What someone initially encounters

17. Sep 3, Fall 2004CS 445517 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

18. Sep 3, Fall 2004CS 445518 Role of Graphic Design The “look and feel” portion of an interface: What someone initially encounters Sets a framework for understanding content

19. Sep 3, Fall 2004CS 445519 Role of Graphic Design The “look and feel” portion of an interface: What someone initially encounters Sets a framework for understanding content

20. Sep 3, Fall 2004CS 445520 Role of Graphic Design The “look and feel” portion of an interface: What someone initially encounters Sets a framework for understanding content

21. Sep 3, Fall 2004CS 445521 Role of Graphic Design The “look and feel” portion of an interface: What someone initially encounters Sets a framework for understanding content

22. Sep 3, Fall 2004CS 445522 Role of Graphic Design The “look and feel” portion of an interface: What someone initially encounters Sets a framework for understanding content

23. Sep 3, Fall 2004CS 445523 Role of Graphic Design The “look and feel” portion of an interface: What someone initially encounters Sets a framework for understanding content

24. Sep 3, Fall 2004CS 445524 Agenda: The Role of Graphic Design Principles of Graphic Design Animation/Rollovers Typography Color Icons

25. Sep 3, Fall 2004CS 445525 Principles of Graphic Design Concept/Metaphor Hierarchy Clarity Consistency Alignment Proximity Contrast

26. Sep 3, Fall 2004CS 445526 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.

27. Sep 3, Fall 2004CS 445527 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

28. Sep 3, Fall 2004CS 445528 Principles: Hierarchy What are the relative “levels” of importance? What should the user see first? Second?

29. Sep 3, Fall 2004CS 445529 Principles: Hierarchy What are the relative “levels” of importance?

30. Sep 3, Fall 2004CS 445530 Principles: Hierarchy.

31. Sep 3, Fall 2004CS 445531 Principles: Clarity Every element in an interface should have a reason for being there Make that reason clear! Less is more

32. Sep 3, Fall 2004CS 445532 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

33. Sep 3, Fall 2004CS 445533 Principles: Clarity White space

34. Sep 3, Fall 2004CS 445534 Principles: Clarity White space

35. Sep 3, Fall 2004CS 445535 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!

36. Sep 3, Fall 2004CS 445536 Principles: Alignment Western world Start from top left Allows eye to parse display more easily

37. Sep 3, Fall 2004CS 445537 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

38. Sep 3, Fall 2004CS 445538 Principles: Alignment Grids - use them

39. Sep 3, Fall 2004CS 445539 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

40. Sep 3, Fall 2004CS 445540 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 some new text

41. Sep 3, Fall 2004CS 445541 Principles: Proximity Items close together appear to have a relationship Large distance implies -- no relationship Time

42. Sep 3, Fall 2004CS 445542 Principles: Proximity Items close together appear to have a relationship Large distance implies -- no relationship Time

43. Sep 3, Fall 2004CS 445543 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

44. Sep 3, Fall 2004CS 445544 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

45. Sep 3, Fall 2004CS 445545 Agenda: The Role of Graphic Design Principles of Graphic Design Animation/Rollovers Typography Color Icons

46. Sep 3, Fall 2004CS 445546 Animation/Rollovers Blinking Good for grabbing attention, but easily becomes obnoxious; use very sparingly Reverse video, bold Good for making something stand out

47. Sep 3, Fall 2004CS 445547 Agenda: The Role of Graphic Design Principles of Graphic Design Animation/Rollovers Typography Color Icons

48. Sep 3, Fall 2004CS 445548 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

49. Sep 3, Fall 2004CS 445549 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

50. Sep 3, Fall 2004CS 445550 Typography Characters and symbols should be easily noticeable and distinguishable AVOID HEAVY USE OF ALL UPPERCASE Studies have found that: mixed case promotes fastest reading and that 55 characters per line is optimal

51. Sep 3, Fall 2004CS 445551 Agenda: The Role of Graphic Design Principles of Graphic Design Animation/Rollovers Typography Color Icons

52. Sep 3, Fall 2004CS 445552 Color Attributes Hue native color, pigment Saturation relative purity, brightness, or intensity of a color Value lightness or darkness of a color

53. Sep 3, Fall 2004CS 445553 Color Use it for a purpose, not to just add some color in

54. Sep 3, Fall 2004CS 445554 Color Guidelines Display color images on black background Avoid brown and green as background colors Be sure foreground colors contrast (in both brightness and hue) with background colors

55. Sep 3, Fall 2004CS 445555 Color Guidelines Use color sparingly--Design in b/w then add color where appropriate Use color to draw attention, communicate organization, to indicate status, to establish relationships Avoid using color in non-task related ways (experiment coming next)

56. Sep 3, Fall 2004CS 445556 How many small rectangles

57. Sep 3, Fall 2004CS 445557 How many small rectangles

58. Sep 3, Fall 2004CS 445558 How many small ovals

59. Sep 3, Fall 2004CS 445559 How many small ovals

60. Sep 3, Fall 2004CS 445560 Find the R

61. Sep 3, Fall 2004CS 445561 Find the... V R Z M F G Q J C T D W A P

62. Sep 3, Fall 2004CS 445562 Find the T

63. Sep 3, Fall 2004CS 445563 Find the... V R Z M F G Q J C T D W A P

64. Sep 3, Fall 2004CS 445564 Color Guidelines Color is good for supporting search Do not use color without another redundant cue Color-blindness Monochrome monitors Redundant coding enhances performance Be consistent with color associations from jobs and cultures

65. Sep 3, Fall 2004CS 445565 Color Guidelines Limit coding to 8 distinct colors (4 better) Avoid using saturated blues for text or small, thin lines Use color on b/w or gray, or b/w on color To express difference, use high contrast colors (and vice versa) Make sure colors do not “vibrate”

66. Sep 3, Fall 2004CS 445566 Color Palette Example of Color hierarchy

67. Sep 3, Fall 2004CS 445567 Color Associations Red hot, warning, aggression, love Pink female, cute, cotton candy Orange autumn, warm, Halloween, Cell phone Yellow happy, caution, joy Brown warm, fall, dirt, earth Green lush, pastoral, envy Purple royal, sophisticated, Barney Culturally specific, contextually specific

68. Sep 3, Fall 2004CS 445568 Color Palettes/Suites Designers often pick a palette of 4 or 5 colors Variations of 2 colors Monochromatic (variations of 1 color) Southwestern (culturally evocative)

69. Sep 3, Fall 2004CS 445569 Agenda: The Role of Graphic Design Principles of Graphic Design Animation/Rollovers Typography Color Icons

70. Sep 3, Fall 2004CS 445570 Icon Design Relies on drawing ability -- hire someone to do it (here are standards and ways to critique icon design) Avoid meaningless, gratuitous use of icons Too many icons quickly become illegible

71. Sep 3, Fall 2004CS 445571 Icon Design Represent object or action in a familiar and recognizable manner

72. Sep 3, Fall 2004CS 445572 Icon Design Represent object or action in a familiar and recognizable manner

73. Sep 3, Fall 2004CS 445573 Icon Design Represent object or action in a familiar and recognizable manner

74. Sep 3, Fall 2004CS 445574 Icon Legibility Limit number of different icons Make icon stand out from background Ensure that a singly selected icon is clearly visible when surrounded by unselected ones

75. Sep 3, Fall 2004CS 445575 Icon Legibility Settlers III

76. Sep 3, Fall 2004CS 445576 Icon Legibility Make each icon distinctive (legible) but Make icons harmonious members of icon family Avoid excessive detail Accompany with names (though it shouldn’t be necessary)

77. Sep 3, Fall 2004CS 445577 Icon Design Is the symbolic aspect of the icon meaningful?

78. Sep 3, Fall 2004CS 445578 Icon Design Is the symbolic aspect of the icon meaningful?

79. Sep 3, Fall 2004CS 445579 Icon Design Is the symbolic aspect of the icon meaningful?

80. Sep 3, Fall 2004CS 445580 Icon Design Meaning is ASCRIBED to icons -- they don’t have an essential, measurable “essence.”

81. Sep 3, Fall 2004CS 445581 Role of Graphic Design in HCI The “look and feel” portion of an interface: What someone initially encounters Sets a framework for understanding content

82. Sep 3, Fall 2004CS 445582 Role of Graphic Design in HCI The “look and feel” portion of an interface: What someone initially encounters Sets a framework for understanding content

83. Sep 3, Fall 2004CS 445583 Role of Graphic Design in HCI The “look and feel” portion of an interface: What someone initially encounters Sets a framework for understanding content

84. Sep 3, Fall 2004CS 445584 Graphic Design Like any design job, there must be a logic to the visual design The logic drives Color scheme Materials choices Lighting style Fonts etc.

85. Sep 3, Fall 2004CS 445585 Eacmples - WarCraft II 2 Teams: Orcs & Humans Each team has unique biology: Collection of Team physiques Unique means of living Unique culture

86. Sep 3, Fall 2004CS 445586 WarCraft II Culture manifests itself: What they eat How they work How they live How they kill How they die How they live: Choice of building materials Choice of fighting styles

87. Sep 3, Fall 2004CS 445587 WarCraft II How Orcs live & eat Hog farms How humans Grain farms

88. Sep 3, Fall 2004CS 445588 WarCraft II Orcs do war with offensive spells Humans have defensive spells

89. Sep 3, Fall 2004CS 445589 WarCraft II Orc People Green Horns Orc Buildings Bone Leather Dark Cast Iron

90. Sep 3, Fall 2004CS 445590 WarCraft II Human People “Flesh tone” humans Silver armor Human buildings Light wood Light-colored metal (roofs, etc)

91. Sep 3, Fall 2004CS 445591 WarCraft II Invading Orc Town

92. Sep 3, Fall 2004CS 445592 Examples Invading human town

93. Sep 3, Fall 2004CS 445593 WarCraft II

94. Sep 3, Fall 2004CS 445594 WarCraft II

95. Sep 3, Fall 2004CS 445595 WarCraft II Problems This stark contrast causes problems Why are Orcs chopping wood? Why is the Orc woodshed a big, hollow log? Violates the Orc bone-and-leather look On the sea, similar problems These problems arise because of game play

96. Sep 3, Fall 2004CS 445596 Example: Age of Empires/Kings Logic: Numerous historical civilizations do battle Each civilization specializes Special force elements Special resource-gathering Special Wonders-of-the-world

97. Sep 3, Fall 2004CS 445597 Age of Empires/Kings Historical building style Historical costume

98. Sep 3, Fall 2004CS 445598 Celts

99. Sep 3, Fall 2004CS 445599 Celts

100. Sep 3, Fall 2004CS 4455100 Vikings

101. Sep 3, Fall 2004CS 4455101 Vikings

102. Sep 3, Fall 2004CS 4455102 China

103. Sep 3, Fall 2004CS 4455103 China

104. Sep 3, Fall 2004CS 4455104 Persia

105. Sep 3, Fall 2004CS 4455105 Turks

106. Sep 3, Fall 2004CS 4455106 Turks

107. Sep 3, Fall 2004CS 4455107 Byzantium

108. Sep 3, Fall 2004CS 4455108 Age of Kings Problems Tough to recognize foreign buildings Tough to recognize own buildings Where’s my stables? All Castles look very similar