8/8/2019 Visual Literacy and Visual Design
1/25
VISUAL LITERACYVISUAL LITERACY
ANDANDVISUAL DESIGNVISUAL DESIGN
8/8/2019 Visual Literacy and Visual Design
2/25
WHAT ARE VISUALS?
VisualsVisuals are materialsthathaveaneffectontheare materialsthathaveaneffectonthesense ofsight. Thesearecommunication devicessense ofsight. Thesearecommunication devicesthatserveasconcretereferentsto thespoken orthatserveasconcretereferentsto thespoken orwritten word.written word.
Sight 83 %
Smell 4%
Taste 1%
Touch 2%
Hearing10 %
8/8/2019 Visual Literacy and Visual Design
3/25
USES OF VISUALS
3. Oftencomplicated informationand thoseideasthatare difficultto remembercan besimplified usingappropriatevisuals
4.Visualscanhelpthelearners understandcertainconcepts better.
2.Visuals can help motivate students to
learn by attracting and maintaining theirattention.
1.Visuals can help the learners to rememberthe original ideas.
8/8/2019 Visual Literacy and Visual Design
4/25
DECODING
-- includesreadingvisualsaccurately, understandingincludesreadingvisualsaccurately, understanding
and relatingtheelements ofavisual, beingableand relatingtheelements ofavisual, beingableto translatefrom visualto verbaland viceversa,to translatefrom visualto verbaland viceversa,and appreciatingtheaesthetics ofvisual.and appreciatingtheaesthetics ofvisual.
-- ability to write orencodevisualsasatoolforability to write orencodevisualsasatoolforcommunication.itincludes usingthetools ofcommunication.itincludes usingthetools of
visual mediato communicateeffectively withvisual mediato communicateeffectively withothersand express onesselfthroughvisuals.othersand express onesselfthroughvisuals.
ENCODING
8/8/2019 Visual Literacy and Visual Design
5/25
VISUAL LITERACYVISUAL LITERACY
theability to read,interpret, and understandtheability to read,interpret, and understandinformationpresented inpictorial orgraphicinformationpresented inpictorial orgraphicimagesimages
agroup ofcompetenciesthatallowshumanstodiscriminateand interpretthevisibleaction,objects, and/orsymbols, natural orconstructed,thatthey encounterintheenvironment
an organizingforceinpromoting understanding,retention, and recall ofso many academicconceptswith whichstudents mustcontend
8/8/2019 Visual Literacy and Visual Design
6/25
the active reconstruction of past visualexperience with incoming visual messages to
obtain meaning with the emphasis on the actionby the learner to create recognition
is a learned ability to interpret visual messagesaccurately and to create such messages
8/8/2019 Visual Literacy and Visual Design
7/25
VISUAL DESIGNVISUAL DESIGN
Four Basic Goals of Visual DesignFour Basic Goals of Visual Design
Ensurelegibility ofwordsand picturesin yourEnsurelegibility ofwordsand picturesin yourvisualvisual
Reducetheeffortneeded ininterpretingReducetheeffortneeded ininterpretingmessagemessage
Increaseactiveengagementofviewer withIncreaseactiveengagementofviewer withmessagemessage
Focusattention onthe mostimportantparts ofFocusattention onthe mostimportantparts ofmessagemessage
8/8/2019 Visual Literacy and Visual Design
8/25
Letteringstyle (fonttype)Letteringstyle (fonttype) TherearetwoTherearetwotypes offont, serifand santypes offont, serifand san--serif. Forserif. For
instructionalpurposes, asaninstructionalpurposes, asan--serifletteringserifletteringstylessuchas Arial, orsimpleserifstylelikestylessuchas Arial, orsimpleserifstylelikeTimes New Romanisrecommended. ItisTimes New Romanisrecommended. Itis
also acceptableto usetheserifstyleinthealso acceptableto usetheserifstyleinthemaintext, and serifand sanmaintext, and serifand san--serifforserifforheadings. Avoid usingfancy font stylesheadings. Avoid usingfancy font styleswhichare difficultto read.whichare difficultto read.
Considerations in Designing Visuals
1. Elements
8/8/2019 Visual Literacy and Visual Design
9/25
ExampleExample
TechnologyTechnology SanSan--seriffontsseriffonts TechnologyTechnology Fonts withserifsFonts withserifs
TechnologyTechnology ScriptfontsScriptfonts
TechnologyTechnology Crazy fontsCrazy fonts
SS TECHNOLOGYTECHNOLOGY Old English FontsOld English Fonts
8/8/2019 Visual Literacy and Visual Design
10/25
Number of lettering stylesNumber of lettering styles -- Keepthisto noKeepthisto no
morethantwo inany static display (chart,morethantwo inany static display (chart,bulletin board) oraseries ofrelated visualsbulletin board) oraseries ofrelated visuals
(setoftransparencies orcomputerpresentation(setoftransparencies orcomputerpresentation
slides), and makesurethatthetwo fonttypesslides), and makesurethatthetwo fonttypesharmonize witheach other. Ifvariations ofaharmonize witheach other. Ifvariations ofa
particularfont(i.e., bold, italics, underline,particularfont(i.e., bold, italics, underline,
differentsizes)areto be used, keepitto adifferentsizes)areto be used, keepitto a
maximum offourvariations.maximum offourvariations.
8/8/2019 Visual Literacy and Visual Design
11/25
Use of capitalsUse of capitals -- Shortheadlines ortitles ofnoShortheadlines ortitles ofno
morethansix words may be writteninallmorethansix words may be writteninall
capitals (uppercase). However, foranythingcapitals (uppercase). However, foranything
longerthanthat, bestlegibility isachieved bylongerthanthat, bestlegibility isachieved by
usinglowercaseletteringforall words,usinglowercaseletteringforall words,
addingcapitals only wherenormally required.addingcapitals only wherenormally required.
8/8/2019 Visual Literacy and Visual Design
12/25
LetteringcolorLetteringcolor -- Contrastlettering withtheContrastlettering withthebackground. This makesthe wordseasy tobackground. This makesthe wordseasy toseeand read. Thiscontrastingtechniqueisseeand read. Thiscontrastingtechniqueisalso useful when you wantto emphasizealso useful when you wantto emphasize
certaininformationin yourvisual.certaininformationin yourvisual.
LetteringsizeLetteringsize -- ChoosealetteringsizethatChoosealetteringsizethatallowsgood visibility even by thestudentallowsgood visibility even by thestudentseated rightatthe back oftheclassroom.seated rightatthe back oftheclassroom.
8/8/2019 Visual Literacy and Visual Design
13/25
Spacing betweenlettersSpacing betweenletters -- Ifyou are usingaIfyou are usingacomputerto generatethetext, itwillcomputerto generatethetext, itwill
automatically spacethelettersinevery word.automatically spacethelettersinevery word.However, ifyou need to spacethelettersHowever, ifyou need to spacethelettersyourself, you should spacethem opticallyyourself, you should spacethem opticallyratherthan mechanicallyratherthan mechanically..
ExampleExample
T E A C HT E A C H Mechanical SpacingMechanical Spacing
TEACHTEACH Optical SpacingOptical Spacing
8/8/2019 Visual Literacy and Visual Design
14/25
Spacing betweenlinesSpacing betweenlines Iflines oftextareIflines oftextaretoo closetogether, they tend to be blur outattoo closetogether, they tend to be blur outata distance, whilelinestoo farapartwillseema distance, whilelinestoo farapartwillseemdisjoint. Iftheparagraph oftextiscomputerdisjoint. Iftheparagraph oftextiscomputer--generated, a onegenerated, a one--aa--halflinespacing may behalflinespacing may be
the bestchoice.the bestchoice.
Number oflinesNumber oflines This depends onthetypeThis depends onthetypeand purpose ofvisual. Asaguideline, limitand purpose ofvisual. Asaguideline, limiteachlines oftext, concisely phrased andeachlines oftext, concisely phrased andwithintheconfines ofone mainidea.withintheconfines ofone mainidea.
8/8/2019 Visual Literacy and Visual Design
15/25
AlignmentofelementsAlignmentofelements Usethisto showUsethisto showclearvisualrelationships betweenthe mainclearvisualrelationships betweenthe mainelementsinthevisual. Alignrelated elementselementsinthevisual. Alignrelated elements
alongthesamehorizontal orverticallines.alongthesamehorizontal orverticallines.
ShapeShape Thevisualand verbalelementscanThevisualand verbalelementscan
also bearranged inashapethatisfamiliartoalso bearranged inashapethatisfamiliartothestudents. Examplecircle, triangle, andthestudents. Examplecircle, triangle, and
rectangle.rectangle.
2. PATTERN2. PATTERN
8/8/2019 Visual Literacy and Visual Design
16/25
BalanceBalance--A sense ofbalanceisachievedA sense ofbalanceisachieved
whenthe `weight' oftheelementsinawhenthe `weight' oftheelementsinavisualisequally distributed oneachside ofvisualisequally distributed oneachside of
itsvertical orhorizontalaxis.itsvertical orhorizontalaxis.
StyleStyle-- Choosea designstyle whichChoosea designstyle whichmatches youraudience. Butasfarasmatches youraudience. Butasfaras
possible, choosean uncluttered primarypossible, choosean uncluttered primary--color designstyleratherthan onefilledcolor designstyleratherthan onefilled
withcompleximagery.withcompleximagery.
8/8/2019 Visual Literacy and Visual Design
17/25
ColorschemeColorscheme -- SelectcolorsthatproduceSelectcolorsthatproduce
harmony ratherthanannoyance. You mayharmony ratherthanannoyance. You maychooseto usecomplementary colors (colorschooseto usecomplementary colors (colorsthatlie directly opposite onthecolor wheel,thatlie directly opposite onthecolor wheel,e.g., rede.g., red--green, bluegreen, blue--orange, yelloworange, yellow--violet),violet),butmakesurethatthey arenotofthesamebutmakesurethatthey arenotofthesameintensity orelse dissonanceinstead ofintensity orelse dissonanceinstead ofharmony may result. Analogouscolorse.g.harmony may result. Analogouscolorse.g.
blueand green usually form pleasingblueand green usually form pleasingharmoniouscombinations.harmoniouscombinations.
8/8/2019 Visual Literacy and Visual Design
18/25
ColorappealColorappeal -- Considerthe `emotional'impactConsiderthe `emotional'impact
ofcolorsin yourchoice. Blue ,greenand violetofcolorsin yourchoice. Blue ,greenand violet
areconsidered `cool'colors, whilered andareconsidered `cool'colors, whilered and
orangearetermed `warm'colors. Specifically,orangearetermed `warm'colors. Specifically,red means danger oraction, orangered means danger oraction, orange warmthwarmth
orenergy, blueorenergy, blue-- aloofness orclarity, greenaloofness orclarity, green
freshness orrestfulness, violetfreshness orrestfulness, violet--depression,depression,yellowyellow -- cheerfulness.cheerfulness.
8/8/2019 Visual Literacy and Visual Design
19/25
3. ARRANGEMENT3. ARRANGEMENT
Once you haveestablished the underlyingOnce you haveestablished the underlyingpattern ofyourvisual you willneed topattern ofyourvisual you willneed to
arrangetheelements withinthepattern.arrangetheelements withinthepattern.
You can use theprinciple ofYou can use theprinciple ofproximityproximity byby
placingrelated elementsclosetogether,placingrelated elementsclosetogether,
and unrelated itemsfarand unrelated itemsfar
apart.apart.
8/8/2019 Visual Literacy and Visual Design
20/25
DirectionalDirectionalsuch as arrows, are devicesforsuch as arrows, are devicesfordirecting theviewer's attention toaparticulardirecting theviewer's attention toaparticular
partof thevisual, or to`read' thevisual in apartof thevisual, or to`read' thevisual in a
particularsequence.Otherexamplesforparticularsequence.Otherexamplesfordirecting attention are boldingof text, useofdirecting attention are boldingof text, useof
bullets, changeofsize, useofa contrastingbullets, changeofsize, useofa contrasting
coloror aspecialplacementofan itemcoloror aspecialplacementofan item
8/8/2019 Visual Literacy and Visual Design
21/25
VISUAL DESIGN ISSUES IN COMPUTERVISUAL DESIGN ISSUES IN COMPUTER--BASED PRESENTATIONBASED PRESENTATION
Visual EffectsVisual EffectsTextand graphicanimationsTextand graphicanimationsTransitionaleffectsTransitionaleffects
Use ofColorUse ofColor
ColorguidelinesColorguidelines
BackgroundBackground Graphs & TextGraphs & Text HighlightsHighlights
WhiteWhite Dark blueDark blue Red, orangeRed, orange
LightgrayLightgray Blue, green, blackBlue, green, black RedRed
BlueBlue Lightyellow, whiteLightyellow, white Yellow, redYellow, red
LightblueLightblue Dark blue, dark greenDark blue, dark green Red, orangeRed, orange
LightyellowLightyellow Violet, brownViolet, brown RedRed
8/8/2019 Visual Literacy and Visual Design
22/25
Basic GuidelinesBasic Guidelines
Dosfor ComputerDosfor Computer--based presentationbased presentation Do uselandscapeDo uselandscape Do usesanDo usesan--seriftypes offontsseriftypes offonts
Do leaveextraspace betweenparagraphDo leaveextraspace betweenparagraph Do useleft justificationDo useleft justification Do usegraphicsto focus onanimportantDo usegraphicsto focus onanimportant
areaarea
8/8/2019 Visual Literacy and Visual Design
23/25
Do considerthe use ofgraphics, animationsDo considerthe use ofgraphics, animations
and video clips whenitis difficultto describeand video clips whenitis difficultto describesomethingverbally.somethingverbally.
Do haveplenty ofempty space onascreen.Do haveplenty ofempty space onascreen.
Do eliminate distracting backgrounds.Do eliminate distracting backgrounds.
Do haveconsistency inthe design.Do haveconsistency inthe design.
8/8/2019 Visual Literacy and Visual Design
24/25
Don'tsDon'tsforcomputerforcomputer--based presentationbased presentation
Don't use `portrait' (tall)orientation.Don't use `portrait' (tall)orientation. Don'tput toomuchinformationononeDon'tput toomuchinformationonone
screen display.screen display.
Don't use toomuchor toolittlehighlighting.Don't use toomuchor toolittlehighlighting. Don't use decorativeclipart toconfuse theDon't use decorativeclipart toconfuse the
messagemessage
Dont usepoorquality originals scanningDont usepoorquality originals scanningpicturespictures
Don't mix toomany fonts.Don't mix toomany fonts.
8/8/2019 Visual Literacy and Visual Design
25/25
Don'tuseallcapitalletters.Don'tuseallcapitalletters.
Don'tsplitwordsattheend ofaline orDon'tsplitwordsattheend ofaline orhyphenatethem.hyphenatethem.
Don'tbreak asentenceacrossscreens.Don'tbreak asentenceacrossscreens.orientation.orientation.
Don'tusegraphics, animations oraudioDon'tusegraphics, animations oraudiowithoutagood purpose.withoutagood purpose.
Don'tusespecialvisualeffects (suchasDon'tusespecialvisualeffects (suchasflyingletters, words or objects) withoutflyingletters, words or objects) withoutgood reason.good reason.
Don'tusetoo many colors on onescreen.Don'tusetoo many colors on onescreen.