Introduction to Visual Literacy Principles Presented by the

Introduction to Visual Literacy Principles Presented by the Department of Instructional Technology At Sauk Valley Community College – Dixon, IL.

Objectives Participants will understand the basic theory behind visual literacy principles. (Basic Visual Elements) Participants will understand what colors work best with each other for 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 increase comprehension of material.

What is Visual Literacy? Visual literacy as defined by the International Visual Literacy Association as "a group of vision competencies a human being can develop by seeing and at the same time having and integrating other sensory experiences…”

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?

Dale’s 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.

Basic Visual Elements The fundamentals of all visual communication are its basic elements; the compositional source for all kinds of visual materials, messages, objects and experiences.

Basic Visual Elements Dot • Dots direct the viewers attention to a specific point. • Provides instant harmony or stress to a specific visual element. • Think of the sun throughout years of humanity. The sun has been thought of throughout many cultures as a god bringing warmth and harmony. TV and computer screens use dots to make images. Movie Indian Jones and the Temple of Doom, Paramount Pictures, 1984.

Basic Visual Elements (Dot continued) Dots can suggest: • Motion • Depth Perception • Direction

Basic Visual Elements Line • Just as the horizon of an open outdoor space provides balance and orientation, a horizontal line creates a strong sense of equilibrium in a composition.

Basic Visual Elements (Line continued) In contrast, diagonal lines create visual stress and attract the eye. This stress creates a point of heightened interest in a composition and often can be used to imply movement.

Basic Visual Elements Shape • How we perceive everyday objects often begins with the most basic geometric shapes. • As children, we learned what a circle, a square, a triangle etc was. • Shapes give us a foundation in which to grasp more complex shapes. Almost like a base language for more complex shapes.

Basic Visual Elements (Shapes continued) Shape (Curves) • Curves allow our eyes to roam giving us that same sense of continuity we seem to get from the sun. • They seem calm, pacific, assured, sensuously relaxed, and optimistic.

Basic Visual Elements (Shapes continued) Shape (Square) • The square: seen as dull, straight forward, honest, lacking imagination (though not always), and stable.

Basic Visual Elements (Shapes continued) Shape (Triangle) • The triangle is seen as action, agitation, conflict, tension, and aspiration. The most famous triangles, are probably the Pyramids of Egypt. The pointed, sharp, and jagged edges suggest anguish, danger, and antagonism; by association with fire, splinters, thorns, arrowheads.

Basic Visual Elements (Shapes continued) Practical use in advertising. • Advertisers use shapes to define and market their products. • Categorizing humans in the form of perfume. • Square bottle- Stands for honesty and stability- a common stereotype for men in our society. • Curvy, Circular, or Triangular perfume bottles for women. Signifying excitement, risk, and challenge. • True or not, these techniques are used.

Basic Visual Elements Texture • Feeling with our eyes. • Seeing a texture can often times give us a feeling or sensation as if we are touching with our eyes.

Basic Visual Elements Motion • Blurring

Basic Visual Elements Another example of blurring • Mona Lisa, Da Vinci, 1503 -1506 • Blurring the sides of the mouth give a feeling of motion as to whether she is smiling or frowning. • This technique is used often to make the viewer decide.

Basic Visual Elements 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.

Basic Visual Elements Depth • We can distinguish the size of objects through other objects.

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 children’s toys are marketed with bright colors or why health products are usually associated with nature.

Colors A chemical message is sent to your adrenal medulla and releases the hormone epinephrine. Causes you to breathe more rapidly, increases your blood pressure, pulse rate, heartbeat and your flow of adrenaline. The color red is connected with the feeling of excitement and high energy. Red

Colors High energy- seen as energetic, youthful, and create a feeling of movement. Fun and exciting but riskier to use than red because they are perceived as faddish. Often used in cosmetics and perfumes because pink is a skin tone that is seen as healthy. Pink

Colors A high arousal color mostly associated with autumn and the sunset. The hottest of all colors. Seen as playful, happy, and childlike. Children between 3 & 6 tend to be attracted to the color orange. Orange

Colors In every society, yellow is equated with the splendor and heat of the sun. Warmth, imagination, enlightenment. Cheerful, mellow and soft to touch. Mixed with black makes it toxic- it’s association with bees and exotic snakes makes it an edgy combination. Yellow

Colors Earth color associated with home, substance, and stability. Connected with the earth, (clay, roots, dirt, coffee, leather) Causes a positive response however some viewers may think of it as dirty. Brown

Colors Dependable, cool, calm. The ocean and the sky. Maybe the two most constant things on the earth. Gives the viewer a sense of reliability, trustworthiness, committed, inspiring confidence. Ideal for websites. Example. . Look at some Bank websites. Most of them use the color blue for dependability. Blue

Colors Gives the viewer a refreshing and healing feeling. Association with nature. Forests, the grass, plants, and spring. Green

Colors A complex color preferred by very creative and eccentric types. Sensual and elegant. Many meanings depending on the background and culture of the viewer. Mysterious. Attention getter. Futuristic. May be best used with newer ideas or products. Purple

Colors Associated with time and antiquity. Ancient monuments, temples, and buildings. Timeless. Solid, and eduring. Neutrals

Colors Seen as pure and bright. Purity and simplicity. Works best as a contrast to other colors. White

Colors Seen as strong and classic. Mysterious. Elegant. Associated with mourning however that attitude has given way to sophistication. Black limos, leather jackets, black ties, polished granite. A very powerful color. Black

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?

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 literacy level. • Small children may react better to a bright colored layout. • Adult audiences may find a instruction/presentation with to the point facts and relevant pictures to be useful.

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 user’s computer?

Designing Layouts Starting the design process • Draw out your instruction/presentation onto a storyboard or flowchart so you can better visualize what and how your presentation will look and work.

Designing Layouts Contrasting colors for better readability. Keep it simple. • As a general rule, using a light background with a dark text is the best way to ensure optimum readability.

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.

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

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.

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.

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 <alt> tags need to be used.

Designing Layouts Animations are seen as distracting to your audience. Avoid animations unless they are important to your instruction or presentation.

Designing Layouts What not to do http: //www. ocf. berkeley. edu/~chenj/brucelee. html

Designing Layouts Don’t do this… it will turn your viewers off right away……!!!!!!

Designing Layouts Too many pictures that have nothing to do with your presentation is not an effective way to design your layout.

Designing Layouts Don’t 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 don’t 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.

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. html

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 buttons easy to understand. • Use pictures that are relevant to your presentation/instruction. • Avoid animations or other distracting elements. • Use the Rule of Thirds

Designing Layouts Examples of good design. • Viewers eyes below.

Designing Layouts Examples of good design.

Designing Layouts Examples of good design.

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 who will view it. Consider the context in which your design will be used.

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/fac 2002/lesson_delivery. htm http: //www. ascd. org/cms/index. cfm? The. View. ID=1205