Using Technology to Develop Graphic and Visual Literacy

1. Using Technology to Develop Graphic and Visual Literacy By William J. Velmont

2. To be visually literate… “Students need to interpret other people’s nonverbal messages” “Learn to construct effective visuals to help them convey their ideas to others” Approaches to visual literacy Input strategies – helping learners decode visuals through practicing visual analysis Output strategies – helping to encode or “write” visuals by expressing themselves and communicating with others What is Visual and Graphic Literacy?

3. The dot The line Shape and dimension Direction Value Hue and saturation Texture Scale Basic Visual Elements

4. Online Resources for Visual Literacy • Reading Online www.readingonline.org • Some History of Visual Literacy www.asu.edu/lib/archives/vlhist.htm • Visual Literacy www.people.memphis.edu/~kjob/wbi/VisualLiteracy.html

5. Why is it important to develop graphic and visual literacy? • Students live in a mediacentric world • Their language includes audio, video, graphics, photographs, and animation, not just words • Important for them to understand that images they encounter influence their thinking – on purpose

6. Refers to knowing how to interpret and create in the various mass communications media Not just books Each medium has its own conventions and has developed over time Art Music Radio Television Movies and videos Video games Online newspapers and magazines What is Media Literacy?

7. Seeing-Thinking Activities • Students improve visual literacy by examining images to identify objects and make predictions based on the evidence • They can predict story outcomes and predict events in wordless picture stories • Balanced Literacy Program

8. Simple STA’s • Composed of line drawings, illustrations, or photos • Mostly primary-level, but you can use age-appropriate material • Example: Revealing a flower in stages

9. Single-Frame STAs • Give students opportunity to examine illustrations or photos that contain complex information • Students can draw their own illustrations after being presented with one picture. Ask, “what is going on here?” without identifying any objects in the picture • Encourages students to use their own ideas and draw from own experiences to describe what they think is happening

10. Alternate-ending STAs • Adults take for granted stories can have multiple outcomes. • These activities graphically demonstrate this to students • Example in article: The Paper Bag Story

11. Multiple-frame STAs • Wordless picture books can be used or you can create your own • You can select six or eight frames from the same comic strip over a period of time to piece together a story • Gives the students the opportunity to make predictions and observations over a period of time • Pause between presenting graphics in order to elicit maximum responses

12. Example of Single-frame STA • Delete words at bottom and present picture to students

13. E-materials and Related Activities to Enhance Visual Literacy • Art web sites contain styles the students can discuss and emulate • The students can create their own art for projects, such as clipart • Cartoons and comic strips can be used, as in STA example, to enhance comprehension • Cartoons and comics can be used to examine illustrations for subtle visual clues • Can be used for discussions on artist’s technique as well • Political cartoons and historical cartoons can be used for upper-level classes

14. Student Design of Web Pages, Web Sites, and Reports • Teachers can encourage students to create web sites of their personal work • Multiple elements should be included on the student’s web site

15. Elements to include on the web site • The name of the web site • The colors of text, background, or other elements on page • The type sizes and font style they will use • The graphics such as photographs and logos • The graphic elements such as dots or lines • The animation, sound, and video elements they want to include • Contact information

16. Resources to Help Students Create Web Sites • Designing School Web Sites to Deliver www.fno.org/webdesign.html • Fundamentals of Web Design www.eserver.org/design • The Top 10 Mistakes in Web Design www.useit.com/alerbox/9605.html

17. Web Design Guidelines • Balance – Gives equilibrium to a web page, making the reader feel comfortable while viewing it. Either symmetrical or asymmetrical • Emphasis – Emphasizing a portion of a visual makes it stand out and gives it more importance • Harmony – Various parts of the web page must relate to one another • Movement – You can create the illusion of movement by repeating an image, changing a shape, using diagonal lines or curves, etc.

18. Web Design Guidelines • Perspective – Students can create feeling of depth by changing the size of graphics and changing their positions to one another on the page • Unity – This helps all of the graphic elements to “work together.” This results from creating well-organized images, choosing similar shapes or patterns, using space, or selecting common backgrounds on which you place other objects • Variety – Variety adds interest or novelty to a page. Contrasts in elements, size changes, point of view, and changing angles can all add variety

19. Layout Considerations • Use frames and tables • Make title of web page easy to read and easy to use • Describe the purpose of the web site in the first few inches on the top • Have a logical order to the placement of objects

20. Layout Considerations • Avoid visual clutter • Use left-hand justification because it tends to give order to a page • Using spacing, lines, borders and background colors to unify objects • Keep graphics small • Keep the screen’s width useable for most computers

21. Typographics to think about… • Use readable fonts • Use no more than four variations of a font • Give each style and a purpose • Avoid using underlining • Use 12- or 14- point type

22. Good luck creating your web site!