Visual Literacy

5/26/2018 Visual Literacy

1/54

Introduction to Visual Literacy Principles

Presented by the Department of Instructional Technology.


2/54

Objectives

Participants will understand the basic theory behind visual literacy

principles. (Basic Visual Elements)

Participants will understand what colors work best with each otherfor readability.

Participants will understand what colors can trigger different

human emotions as used in advertising and education.

Participants will know various layout/interface designs and

techniques used on websites and in print that increasecomprehension of material.


3/54

What is Visual Literacy?

Visual literacy as defined by the International Visual Literacy Association

is "a group of vision competencies a human being can develop by

seeing and at the same time having and integrating other sensory

experiences. The development of these competencies is fundamental tonormal human learning. When developed, they enable a visually literate

person to discriminate and interpret the visual actions, objects, and/or

symbols, natural or man-made, that are encountered in the

environment. Through the creative use of these competencies, we are

able to communicate with others. Through the appreciative use of these

competencies, we are able to comprehend and enjoy the masterworksof visual communications".


4/54

Interesting Facts

In the United States, the average teenager spends 22,000 hours

watching television by the time he or she graduates from high

school.

Humans process images an amazing 60,000 times faster than text.According to Time magazine, the vocabulary of the average 14-

year-old dropped from 25,000 words in 1950 to only 10,000 words

in 1999.

What is the emotional response of people aged 50 and older to

photos in the brownish (sepia) tint? Do today's teenagers have the

same reaction?


5/54

Dales Cone

Edgar Dale described a model for looking at the degree of

abstraction of different types of learning experiences. The

more concrete the experience, the more it actively involves

students.


6/54

Basic Visual Elements

The fundamentals of all visualcommunication are its basicelements; the compositionalsource for all kinds of visualmaterials, messages, objectsand experiences.


7/54


Dot

Dots direct the viewers attention to aspecific point.

Provides instant harmonyor stress to aspecific visual element.

Think of the sun throughout years ofhumanity. The sun has beenthought of throughout many culturesas a god bringing warmth andharmony.

TV and computer screens use dots to makeimages.

MovieIndian Jones and the Temple of Doom,Paramount Pictures, 1984.
http://localhost/var/www/apps/conversion/tmp/scratch_2/indy.movhttp://localhost/var/www/apps/conversion/tmp/scratch_2/indy.mov


8/54

Basic Visual Elements (Dot continued)

Dots can suggest:

Motion

Depth Perception

Direction


9/54


Line

Just as the horizon of an

open outdoor space

provides balance andorientation, a horizontal

line creates a strong

sense of equilibrium in a

composition.


10/54

Basic Visual Elements (Line continued)

In contrast, diagonal lines

create visual stress and

attract the eye. This stress

creates a point of heightenedinterest in a composition and

often can be used to imply

movement.


11/54


Shape

How we perceiveeveryday objects oftenbegins with the mostbasic geometric shapes.

As children, we learnedwhat a circle, a square, atriangle etc was.

Shapes give us afoundation in which tograsp more complexshapes. Almost like abase language for morecomplex shapes.


12/54

Basic Visual Elements (Shapes continued)

Shape (Curves)

Curves allow our eyes to

roam giving us that same

sense of continuity weseem to get from the sun.

They seem calm, pacific,

assured, sensuously

relaxed, and optimistic.


13/54


Shape (Square)

The square: seen as dull,

straight forward, honest,

lacking imagination(though not always), and

stable.


14/54


Shape (Triangle)

The triangle is seen as

action, agitation, conflict,

tension, and aspiration. Themost famous triangles, are

probably the Pyramids of

Egypt. The pointed, sharp,

and jagged edges suggest

anguish, danger, and

antagonism; by associationwith fire, splinters, thorns,

arrowheads.


15/54


Practical use in advertising.

Advertisers use shapes to defineand market their products.

Categorizing humans in the formof perfume.

Square bottle- Stands forhonesty and stability- acommon stereotype for menin our society.

Curvy, Circular, or Triangularperfume bottles for women.Signifying excitement, risk,and challenge.

True or not, thesetechniques are used.


16/54


Texture

Feeling with our eyes.

Seeing a texture can

often times give us afeeling or sensation as if

we are touching with our

eyes.


17/54


Motion

Blurring


18/54


Another example of blurring

Mona Lisa, Da Vinci,

1503-1506

Blurring the sides of themouth give a feeling of

motion as to whether she

is smiling or frowning.

This technique is used

often to make the viewer

decide.


19/54


Another form of motion is to

twist or shift the weight of a

figure implying that it is in

motion.The feeling of imbalance tells

the viewer that they are in the

process of moving.


20/54


Depth

We can distinguish the

size of objects through

other objects.


21/54

Color

Color

Color sets the mood for

the message you are

trying to convey. Color has a profound

effect on audiences

whether it be a consumer

or educational viewer.

Take into consideration

how many childrens toys

are marketed with bright

colors or why health

products are usually

associated with nature.


22/54

Colors

A chemical message is sentto your adrenal medulla andreleases the hormoneepinephrine.

Causes you to breathe morerapidly, increases your bloodpressure, pulse rate,heartbeat and your flow ofadrenaline.

The color red is connected

with the feeling of excitementand high energy. Red


23/54

Colors

High energy- seen asenergetic, youthful, andcreate a feeling of movement.

Fun and exciting but riskier touse than red because theyare perceived as faddish.

Often used in cosmetics andperfumes because pink is askin tone that is seen ashealthy.

Pink


24/54

Colors

A high arousal color mostlyassociated with autumn andthe sunset.

The hottest of all colors.

Seen as playful, happy, andchildlike.

Children between 3 & 6 tendto be attracted to the colororange.

Orange


25/54

Colors

In every society, yellow isequated with the splendorand heat of the sun.

Warmth, imagination,enlightenment.

Cheerful, mellow and soft totouch.

Mixed with black makes ittoxic- its association withbees and exotic snakesmakes it an edgycombination. Yellow


26/54

Colors

Earth color associated withhome, substance, andstability.

Connected with the earth,(clay, roots, dirt, coffee,leather)

Causes a positive responsehowever some viewers maythink of it as dirty.

Brown


27/54

Colors

Dependable, cool, calm.

The ocean and the sky.Maybe the two most constantthings on the earth.

Gives the viewer a sense ofreliability, trustworthiness,committed, inspiringconfidence.

Ideal for websites. Example..Look at some Bank websites.

Most of them use the colorblue for dependability. Blue


28/54

Colors

Gives the viewer a refreshingand healing feeling.

Association with nature.

Forests, the grass, plants,and spring.

Green


29/54

Colors

A complex color preferred byvery creative and eccentrictypes.

Sensual and elegant.

Many meanings dependingon the background andculture of the viewer.

Mysterious.

Attention getter.

Futuristic.May be best used with newerideas or products. Purple


30/54

Colors

Associated with time andantiquity.

Ancient monuments, temples,and buildings.

Timeless.

Solid, and eduring.

Neutrals


31/54

Colors

Seen as pure and bright.

Purity and simplicity.

Works best as a contrast to

other colors.

White


32/54

Colors

Seen as strong and classic.

Mysterious.

Elegant.

Associated with mourninghowever that attitude hasgiven way to sophistication.

Black limos, leather jackets,black ties, polished granite.

A very powerful color.

Black


33/54

Designing Layouts

Two main factors to consider when designing an interface.

Who is your audience?

What is the context in which your presentation/instruction will

be used?


34/54

Designing Layouts

Audience

Who your audience is will dictate how you design your layout.

You may need to pay close attention to the language,colors, and layout for different people, cultures, and literacylevel.

Small children may react better to a bright colored layout.

Adult audiences may find a instruction/presentation with tothe point facts and relevant pictures to be useful.


35/54

Designing Layouts

Context of the presentation/instruction.

Questions you may ask yourself before designing and

instruction.

Where will my audience be using my instruction? School?Home? Outside? All?

What type of medium should I develop this instruction on?

Computer? Paper based? CD-ROM? Web site? Video?

All?

Will they be using a computer? How fast is my users

computer?


36/54

Designing Layouts

Starting the design process

Draw out your

instruction/presentation

onto a storyboard orflowchart so you can

better visualize what and

how your presentation will

look and work.


37/54

Designing Layouts

Contrasting colors for better

readability.

Keep it simple.

As a general rule, using alight background with a

dark text is the best way

to ensure optimum

readability.


38/54

Designing Layouts

Contrasting colors for better

readability.

A black background with

white text is also effective. Any two colors that highly

contrast each other will

work.


39/54

Designing Layouts

Serif fonts- mostly used for

print based materials such

as flyers and technical

manuals.

Sans-Serif fonts are easier

to read on screens that are

being projected or on web

pages.

NEVER USE CAPS

Serif Sans-Serif

Times New

Roman Arial

Garamond Verdana

Georgia Tahoma


40/54

Designing Layouts

Rule of thirds

Mentally divide the screen

or area into a sort of Tic

Tac Toe box. Place your images in the

intersected areas of the

lines.


41/54

Designing Layouts

Rule of thirds

Your viewers will typically

scan their eyes from left

to right top to bottom.(Just like they are

reading).

Other cultures may read

from right to left or bottom

to top.


42/54

Designing Layouts

Sometimes to ensure

everyone understands your

message, it may be

necessary to label your

pictures.

Websites need to be

accessible to all people so

tags need to be used.


43/54

Designing Layouts

Animations are seen as

distracting to your audience.

Avoid animations unless

they are important to yourinstruction or presentation.


44/54

Designing Layouts

What not to do

http://www.ocf.berkeley.edu/~chenj/brucelee/brucelee.html
http://www.ocf.berkeley.edu/~chenj/brucelee/brucelee.htmlhttp://www.ocf.berkeley.edu/~chenj/brucelee/brucelee.html


45/54

Designing Layouts

Dont do this it will turn your

viewers off right away!!!!!!


46/54

Designing Layouts

Too many pictures that have nothing to do with

your presentation is not an effective way to design

your layout.


47/54

Designing Layouts

Dont do this it will turn your viewers off right away!!!!!!

This is a really ugly design

The contrast of these colors are not a very good pair.

This would be a good color to use sparingly if we had a presentation about

Barbie dolls.

If I sold bubble gum, I might want to use this color.

Pink and Yellow is a bad layout decision.

Your audience will generally be turned off by this color and you will not be

taken seriously.

If you are reading this, I am surprised because of the horrible layout. I really dont know why you are still reading this.

There is too much text on this screen.

You generally want to keep it to a maximum of 3-4 bulleted sentences.

This much text could be split up into 3 or 4 slides.


48/54

Designing Layouts

What not to do

Do not use bright text on bright backgrounds.

Do not use lots of pictures on one page unless it is relevant.

Do not use animations unless it is relevant. Do not make it difficult for your user to navigate.

Do not use CAPS.

http://www.ocf.berkeley.edu/~chenj/brucelee/brucelee.html
http://www.ocf.berkeley.edu/~chenj/brucelee/brucelee.htmlhttp://www.ocf.berkeley.edu/~chenj/brucelee/brucelee.html


49/54

Designing Layouts

What to do

Keep it simple

Always keep your audience in mind.

Use colors that appeal to your audience. Be consistent

If using a navigation scheme, make the navigation buttonseasy to understand.

Use pictures that are relevant to your presentation/instruction.

Avoid animations or other distracting elements.

Use the Rule of Thirds


50/54

Designing Layouts

Examples of good design.

Viewers eyes below.


51/54

Designing Layouts



52/54

Designing Layouts



53/54

Summary

Visual techniques can be used to engage your audience in a richer

experience.

Colors play a key role in design because they set the mood.

Always design your instruction/presentation to the audience whowill view it.

Consider the context in which your design will be used.


54/54

Sources

Eiseman, Leatrice. 2000. Pantone Guide to Communicating with

Color. Cincinnati OH, F&W Publications.

Satran, Amy; Kristof, Ray. Creating & Communicating with New

Media. Mountain View CA, Adobe Press.http://www.fsu.edu/~ids/fac2002/lesson_delivery.htm

http://www.ascd.org/cms/index.cfm?TheViewID=1205
http://www.fsu.edu/~ids/fac2002/lesson_delivery.htmhttp://www.ascd.org/cms/index.cfm?TheViewID=1205http://www.ascd.org/cms/index.cfm?TheViewID=1205http://www.fsu.edu/~ids/fac2002/lesson_delivery.htm

Documents

Visual Literacy