2. Type and Image

3. Gestalt theory

6. German term, roughly translates as The whole is greater than the sum of its parts

7. Gestalt theory German term, roughly translates as The whole is greater than the sum of its parts In this case, the “arranged” dots communicate a meaning beyond simply saying “dots”. They connote a further meaning

8. How this relates to design A communication designer’s “dots” are used to connote a meaning beyond the obvious Our “dots” are photography illustration copywriting type layout colour etc

9. How this relates to design Denotative meaning vs connotative meaning

10. How this relates to design Denotative meaning vs connotative meaning Denotation: direct meaning of a word, sign (symbol) or image

11. How this relates to design Denotative meaning vs connotative meaning Denotation: direct meaning of a word, sign (symbol) or image Connotation: a second level of meaning added to the first

14. How this relates to design Communication designers manipulate this “play” between denotation and connotation to add meaning to a whole, to infuse the “dots” with power

15. How this relates to design The first and most powerful way we do this is through type and image and the relationship between the two. Let’s look at how.

16. Does this communicate a message?

17. Does this communicate a message? Will people read it?

18. Does this communicate a message? Will people read it? Will they be motivated to read it if they don’t have to? Does this communicate a message?

19. Does this communicate a message? Will people read it? Will they be motivated to read it if they don’t have to? What real role does good typography have in communicating message?

20. Does this communicate a message? Will people read it? Will they be motivated to read it if they don’t have to? What real role does good typography have in communicating message? What role does image have with the message?

21. So... if the goal is to communicate a message to people who require the information, then good typography can only make the message clearer, easier to read. There is no inherent need to “design” the type on the page. Readership will not be affected.

22. So... if the goal is to communicate a message to people who require the information, then good typography can only make the message clearer, easier to read. There is no inherent need to “design” the type on the page. Readership will not be affected. Connotative meaning… image can connote the relative “seriousness” of the content

24. Zoo Newsletter Does this communicate a message?

25. Zoo Newsletter Does this communicate a message? Are people any more like to read it?

26. Zoo Newsletter Does this communicate a message? Are people any more likely to read it? Why?

27. Zoo Newsletter Does this communicate a message? Are people any more like to read it? Why? What real role does image have in communicating message?

28. Zoo Newsletter Does this communicate a message? Are people any more like to read it? Why? What real role does image have in communicating message? gives an immediate sense of content

29. So... if the goal is to communicate a message to people who are only passively interested in the message, then image can attract them to read, typography can maintain their interest by making it easy to read.

30. So... if the goal is to communicate a message to people who are only passively interested in the message, then image can attract them to read, typography can maintain their interest by making it easy to read. Connotative meaning… the zoo is a fun place, come and see it

31. But what is our most difficult and yet our most common audience for virtually any design?

32. someone who doesn’t care about our message and really doesn’t want to read it.

33. someone who doesn’t care about our message and really doesn’t want to read it. For them, our goal is to first command attention usually with a connotative message (ie the “hook”), and then keep it long enough to get them to read something, a denotative message (ie the “text”).

34. Getting attention is often the easiest, certainly the most fun as a designer/advertiser

37. The point

38. On its own, - the photo simply denotes a scarred man

39. The point On its own, - the photo simply denotes a scarred man - the type denotes something obvious

40. The point On its own, - the photo simply denotes a scarred man - the type denotes something obvious Together, the connotative meaning is a powerful anti drinking and driving message

41. So How do we do this

42. Type alone Effective use of design elements… and principles… to get eye into page

43. Images alone can be very powerful, dramatic

44. but open to interpretation (or misinterpretation) on its own, the image is ambiguous, type adds meaning

46. So type and image together are often more powerful than either alone

47. text can add detail where images catch interest

48. can add a punchline to a funny image

49. can add a punchline to a funny image connotation: Volkswagen is as solid and dependable as a mule

50. But in order to work, the relationship between type and image in crucial. They need to belong together, to seem harmonious so message is consistent.

51. a few examples how are type/image interconnected? how does each enhance the message of the other? What is the connotative meaning?

58. Final Result when there are sufficient relationships between text/image, they can be seen as one complete “whole”

59. Final Result when there are sufficient relationships between text/image, they can be seen as one complete “whole” one element (type or image) can’t exist without the other--both rely interdependently on the other to communicate one complete message.

60. A good test, can I remove one or the other without affecting either the design or the meaning?

66. How do we integrate type?

67. Many theories/philosophies

68. Image and type can be connected through Separation Fusion Fragmentation Inversion From Fragmented relationships Type, Image, Message: A Graphic Design Layout Workshop By Nancy Skolos and Tom Wedell

69. Separation

70. Layering –Type superimposed, but distinct from image

71. Separation Border or Frame –Type contained outside image

72. Separation Windows (Compartments ) –Image and type in separate areas

73. Fusion Text and image more strongly connected

74. Fusion Optical Effect –Connected with perspective or other optical effect

75. Fusion Shared Surface or Texture –Type and image woven together into surface

76. Fusion Motion or Gesture –Both are affected by an implied force (movement) or gesture

77. Fragmentation Type and image disturb/disrupt each other

78. Fragmentation Irregularities –Elements are torn/divided

79. Fragmentation Displacement –Graphic element and type seem frozen, almost as if one frame of animation

80. Fragmentation Interruption –Type and image intrude upon each other

81. Fragmentation Exaggeration –Actions amplified through scale, colour, complexity

82. Inversion Type and image exchange roles

83. Inversion Hyper-realism –Type photographed or otherwise seamlessly part of image

84. Inversion Building Blocks –Image constructed with letters

85. Inversion Frames –Letters become frames for images

86. Summary Many techniques to relate type to image We’ve looked at a few. Generally least useful is Separation, ie putting type in border or frame Others more difficult to work with but much more creative results.

87. Sample Start with a photo (maybe)

88. Sample Add some type

89. Sample Different ideas

90. Sample Hate it? Start over with another idea for type

91. Sample The final combines elements from all three concepts (in reality there would be dozens of these trials)