1 Ms. Magdalena Galloway wordle.net Literacy  The ability to read and write verbal messages?  What about knowing Shakespeare?  Is knowing how to e-mail part of literacy?  “Language is Power” ? Visual Literacy  Learned ability to see & interpret visuals and to create visual messages  Ability to understand (read) and use (write) images and to think and learn in terms of images.  A Good (Effective) Picture is Worth a Thousand Words! Roles of Visuals in Instruction  Motivate and define  Enhance instructions  Referent for ideas  Recall information  Easier to remember  Simplify and organize  Appeals to Multiple Intelligences  Spatial- Visual  Decode – how we “read” or interpret images (audience’s reception)  Encode – how we create meaning (designer’s intention) Decode Encode ? Visual Literacy Decoding: Determinants of Perception  Stage of visual-spatial development  Culture  Knowledge  Experience Gardner • Piaget • Vygotsky • Bandura • Constructivism2  2-7 years old - The child is not yet able to conceptualize abstractly & needs concrete physical situations.  Prior to age 12, visuals seen as sections  Older children tend to summarize the whole scene and report a conclusion Visual-Spatial Development Gardner • Piaget  Humans are the only species to have created culture  Every human child develops in the context of a culture  Social cognition learning model  culture teaches children both what to think and how to think. Culture • Knowledge • Experience Bandura • Vygotsky  Different cultural groups may perceive visual materials in different ways  Different cultures attach different meanings to items  We construct our own understanding of the world we live in by reflecting on our experiences Culture • Knowledge • Experience Constructivism  Visual Perception  Optical illusion  Double interpretation  Left sphere vs. Right brain sphere  Subliminal message - affecting the mind without conscious awareness Decoding: Interpreting Visuals What Message is Received ? Images from: Photo Clip Art by Hemera Bandura • Social Learning Encoding: Creating Visuals  Learning through modeling  Student creation of visuals  Encourage deeper understanding  Outlet for expression  Creating Slideshows, Multimedia, Hypermedia, Video Production, Web Design, Digital Imaging… Image from: Photo Clip Art by Hemera3 Goals of Visual Design  Ensure legibility - remove obstacles  Reduce effort  Increase active engagement  Focus attention  Simplify the message  Raise aesthetic value Color  Consider color’s cultural associations  http://www.colormatters.com  Complementary/Analogous  http://colorschemedesigner.com  Always test the colors  http://www.colorschemer.com/online.html  Color database  http://pourpre.com/colordb Design Considerations  Visual Literacy  Theoretical Knowledge  Observation  Preferred vs. Effective  Selection of Visuals  Consistency  Functional (enhancing not detracting) Target Audience  Age (developmental stage)  Culture  Experience  Aptitude  Sensitivity to Cultural Interpretation Contrast Alignment Repetition Proximity Contrast! Add interest, highlight & separate the pieces of the message  Can be created by using very different colors, sizes, space, line thickness, shapes, directions, forms…!C4 Color Scheme  Complementary- Directly opposite  Analogous- Next to each other  Varying Intensity BAD EXAMPLE BAD EXAMPLE GOOD EXAMPLE Sans serif vs. serif fonts!Visual literacy!Visual literacy Serif font! Times, Courier, Georgia  Best for large amounts of text in printed media  The thin lines are more difficult to read on projected visuals.5 Sans serif font! Geneva, Helvetica, Arial, Verdana  Best for projected media and large areas of text on a projected display Alignment! Unify and organize  Nothing should be placed arbitrarily  Every element should be aligned with something else on the page  Three kinds of alignment: • Left, center & right A BAD EXAMPLE GOOD EXAMPLE Repetition! Unify and add visual interest  Create consistency by repeating visual elements throughout the design  Makes multi-page design appear to belong to the same document !R6 Proximity! The purpose is to organize  Group related items together  Elements should be intellectually and visually connected P Magdalena Galloway!Room: 407 SEC!Instructor!Phone: (543) 273 -3076!E-mail: [email protected]!BAD EXAMPLE Magdalena Galloway Instructor Room: 407 SEC Phone: (319) 273 -3076 E-mail: [email protected] GOOD EXAMPLE Web Design Considerations Multi-page Docs vs. Web Site • Content is linear • Pages define organization • Reader always see the beginning • Reprint to update • Our eyes use to printed text • Content is nonlinear • Hyperlinks & multiple paths • Reader my not see the opening page • Easy to update anytime • People read slower online How People Read Online Info?  Key points to remember:  We don’t like to wait  We don’t like to scroll  We don’t like to read  Our time is valuable  It’s a big competition out there!7 People Scan For Key Words & Phrases  Make headings, titles & subtitles clear  You are creating a visual hierarchy  Highlight key words  Use bulleted lists  Important points - not long sentences  Split your pages into shorter paragraphs Bad Design Checklist Because it’s easier to learn from mistakes… Check General Usability  It takes more than 4 sec. to load my pages.  It takes more than 4 sec. for someone to understand what my site is about.  Links are difficult to spot.  Links are not clearly labeled.  Every page has a completely different design. My page:  has sound effects and no “off” option  uses underlined text  Only links should be underlined  doesn’t use heading styles (hierarchy)  headings and