type and image gestalt theory german term, roughly translates as the whole is greater than the sum...

Type and Image

Gestalt theory

Gestalt theory

German term, roughly translates asThe whole is greater than the sum of

its parts

Gestalt theory

German term, roughly translates asThe 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

How this relates to design

• A communication designer’s “dots” are used to connote a meaning beyond the obvious

• Our “dots” arephotographyillustrationcopywritingtypelayoutcolouretc


Denotative meaning vs connotative meaning



Denotation: direct meaning of a word, sign (symbol) or image



Denotation: direct meaning of a word, sign (symbol) or image

Connotation: a second level of meaning added to the first


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


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.

Does this communicate a message?


Will people read it?



Will they be motivated to read it if they don’t

have to?





have to?

What real role does good typography have

in communicating message?




have to?

What real role does good typography have

in communicating message?

What role does image have with the

message?

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.

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

Zoo Newsletter


Zoo Newsletter


Are people any more like to read it?

Zoo Newsletter


Are people any more likely to read it?

Why?

Zoo Newsletter



Why?

What real role does image have in communicating message?

Zoo Newsletter



Why?

What real role does image have in communicating message?

gives an immediate sense of content

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.

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

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

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

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”).

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

The point

The point

On its own, - the photo simply denotes a scarred

man

The point


man- the type denotes something

obvious

The point


man- the type denotes something obviousTogether, the connotative meaning is

a powerful anti drinking and driving message

So How do we do this

Type alone

Effective use of design elements…and principles…

to get eye into page

Images alonecan be very powerful, dramatic

but open to interpretation (or misinterpretation)

on its own, the image is ambiguous, type adds meaning

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

text can add detail where images catch interest

can add a punchline to a funny image

can add a punchline to a funny image

connotation:Volkswagen is as solid and dependable as a mule

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.

a few examples

how are type/image interconnected?

how does each enhance the message of the other?

What is the connotative meaning?

Final Result

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

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.

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

How do we integrate type?

Many theories/philosophies

Image and type can be connected through

• Separation• Fusion• Fragmentation• Inversion

From Fragmented relationshipsType, Image, Message: A Graphic Design Layout Workshop

By Nancy Skolos and Tom Wedell

Separation

SeparationLayering– Type

superimposed, but distinct from image

SeparationBorder or

Frame– Type

contained outside image

SeparationWindows

(Compartments)

– Image and type in separate areas

FusionText and image

more strongly connected

FusionOptical Effect– Connected

with perspective or other optical effect

FusionShared Surface

or Texture– Type and

image woven together into surface

FusionMotion or

Gesture– Both are

affected by an implied force (movement) or gesture

FragmentationType and

image disturb/disrupt each other

FragmentationIrregularities– Elements are

torn/divided

FragmentationDisplacement– Graphic

element and type seem frozen, almost as if one frame of animation

FragmentationInterruption– Type and

image intrude upon each other

FragmentationExaggeration– Actions

amplified through scale, colour, complexity

InversionType and

image exchange roles

InversionHyper-realism– Type

photographed or otherwise seamlessly part of image

InversionBuilding Blocks– Image

constructed with letters

InversionFrames– Letters

become frames for images

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.

Sample

• Start with a photo (maybe)

Sample

• Add some type

Sample

• Different ideas

Sample

• Hate it? Start over with another idea for type

Sample

• The final combines elements from all three concepts

• (in reality there would be dozens of these trials)

type and image gestalt theory german term, roughly translates as the whole is greater than the sum...

Documents