Is Seeing Believing?

The art of visual rhetoric

Chapter 5

Puan Azura NMC102

 Introduction

Visual design is an important as text in

persuasive Web sites.

Web design relies on creating a consistent

and coherent look-and-feel.

IMPORTANT!!!
Text and visual don’t exist separately
in Web content
Ex: Visual Design
 Visual Language

What is visual language?

(according to Robert Horn)
“Visual languages is defined as the tight coupling of
words, images, and shapes into a unified
communication unit.”
 Visual Language

What is tight coupling?

“You cannot remove the words or the
images or the shapes from a piece of visual
language without destroying or radically
diminishing the meaning a reader can
obtain from it.”
 Visual Language

You want to ensure drive-thru reader will stop long

enough to find out what the site has to offer.

According to Patrick Lynch:

“A long lasting forms of group identity must be
ritualized and symbolized, with tittles, graphics,
customs and other visual and functional evidence of
social cohesion and purpose.”
 Visual Language

You must also consider the quality

of graphic on the Web sites.

Low quality graphics has the same adverse

effect on credibility such as text
presentation that has typos, grammatical
mistakes, spacing inconsistencies, and
spelling errors.
The Web Design Challenge

1. Trial and error learning

2. Functionality vs. Aesthetic appeal
3. Constantly changing technologies
4. User/client needs

This lead to
constant experimentation with no or right
answers
 Advantages of
Fusing Graphics with Words

1. User will be able to see clearer relationship and

structure among the data compare with the
text-only situation.
2. Easier to detect patterns (visual phenomena),
which is virtually impossible in the field of text.
3. Graphics are much easier to remember compare
with text.
4. Graphics store longer in viewers’ memory.
 What is an Image?

“A representation of the external form

of a person or thing in art.”

Images fall into one of three categories:

Image as Icon

Image as Index

Image as Symbol
 What is an Image?

An image is iconic if it bears a similarity or

resemblance to what we already know or
conceive about an object
 What is an Image?

The indexical image is recognizable not

because of any similarity to an object or
person but because we understand the
relationship between the image and the
concept that it stands for
What is an Image?
 What is an Image?

• The image has no visual or conceptual

connection to an object or person
• An individual needs to be culturally educated
to understand the image due to its context.
 What do We Really See?

Ability to see is innate, BUT

each user reacts to graphics differently.

WHY?
What we see as individuals varies significantly
because of our individual needs and experiences.
 What do We Really See?

Look at the image

What do you see?

How many of you

see the dolphins?
 What do We Really See?

According to Ann Marie Barry each perception of

images involves four elements:

Visual stimuli

A gut-level reaction

Reactions based on our current needs

The ingoing development of mental templates on our past

experiences and memories
The Gestalt Principles

Figure-ground
segregation

Proximity

Similarity

Continuity

Closure
 The Gestalt Principles
1. Figure-ground segregation

Principle 1
We always perceive visual object against a background, without
existing background we wouldn’t be able to perceive an object
 The Gestalt Principles
1. Figure-ground segregation

The Basecamp homepage has a bunch of graphics, text, forms, and other
information. And because of the figure-ground principle, you can
immediately tell that you should focus on the content in the white
foreground areas.
 The Gestalt Principles
1. Figure-ground segregation

Principle 2 - Area
When two figure overlaps we see the smaller as the figure with
the larger as the background.
 The Gestalt Principles
1. Figure-ground segregation

Principle 2 – Area

AngelList uses the figure-ground principle in two ways below. First, the text
and logo on the left side of the page are clearly the figure sitting on top of the
background image. Second, the white text in the menu on the right stands on
top of the black background.
 The Gestalt Principles

2. Proximity
things that are close together appear to be
more related than things that are spaced
farther apart.
 The Gestalt Principles

2. Proximity

The nearness of each image and its corresponding text

communicates that they’re related to one another.
 The Gestalt Principles
3. Similarity

states that when things appear to be similar to each other we

group them together. And we also tend to think they have the
same function.
 The Gestalt Principles
3. Similarity

GitHub uses the similarity principle in two ways on the page below.
First, they use it to distinguish different sections. You can immediately tell
that the grey section at the top serves a different purpose than the black
section, which is also separate from and different than the blue section.
Second, they also use the color blue to distinguish links from regular text,
and to communicate that all blue text shares a common function.
 The Gestalt Principles
4. Continuity

states that elements that are arranged on a line or

curve are perceived to be more related than elements
not on the line or curve.
 The Gestalt Principles
3. Continuity

Sprig uses it to explain the three step process to use their app.
 The Gestalt Principles
5. Closure

states that when we look at a complex arrangement of visual

elements, we tend to look for a single, recognizable pattern.
 The Gestalt Principles
5. Closure

The closure principle is the effective uses of ways in web design

 The Gestalt Principles
As Barry says:
“The Gestalt principles are
hard-wired into our brains”

This means when a Web site design violates

these principle, it adversely affects what the
site is trying to communicate.

Knowing Gestalt principles help you to

understand why you react to a visual in a
negative way
The Gestalt Principles
 The Image Act
The use of images in
all forms of media are increasing.

Designer believe that viewers need to be

more critically aware of how and why
images are produced, and the way they
affect us,
emotionally and cognitively.
 The Image Act

There are two types of image acts:

1. Demand
–When participant in an image looks directly at the viewer
–A visual form of direct address
 The Image Act

There are two types of image acts:

2. Offer
–When the participant looks elsewhere
–Either outside the picture or at another participant in the
image
 Social Distance

Every one of us has a personal space

around our bodies.

The distance between individual called PROXEMICS

In visual media, personal space is determined by how

the producer uses:
• Close-up
• Medium shot
• Long shots
… of the participant
 Social Distance
According to theory of proxemics,
we can “feel” personal space in images.

• Intimate distance – head and face

• Close personal distance – head and shoulder
• Far personal distance – waist up
• Close social distance – whole figure
• Far social distance – whole figure with space around
it
• Public distance – torsos of several people

Relationship between viewer and participant in the image

is an imaginary relation
Social Distance

Intimate distance
Social Distance

Close personal distance

Social Distance

Far personal distance

Social Distance

Close social distance

Social Distance

Far social distance

Social Distance

Public distance
 Perspective and Angles
What is perspective?
Perspective allow the object in the picture to be
glorify/bigger/longer or vice versa.

Ant-eye vs Bird-eye view

Horizontal Angles and Involvement

Horizontal angle use to manipulate the frontal

view of an object so the we see it directly
facing us or at an oblique angle at us

• The frontal view creates involvement

• The oblique view creates detachment
Horizontal Angles and Involvement

The frontal view creates involvement

“What you see here is our world, something we are

involved with.”
Horizontal Angles and Involvement

The oblique view creates detachment

“What you see here is not part of our world; it is their

world, something we are not involved with”
 Vertical Angles and Power

Vertical angles portray power among people in

the image and between the viewer and the
people in the image.

• Vertical angle among participant within an

image
• Vertical angle between participant in the
image and the viewer
Vertical Angles and Power

Vertical angle among participant within an image

Vertical Angles and Power

Vertical angle between participant in the image and the viewer