Visual Literacy and Visual Design

8/8/2019 Visual Literacy and Visual Design

1/25

VISUAL LITERACYVISUAL LITERACY

ANDANDVISUAL DESIGNVISUAL 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 %


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.


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


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


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


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/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


9/25

ExampleExample

TechnologyTechnology SanSan--seriffontsseriffonts TechnologyTechnology Fonts withserifsFonts withserifs

TechnologyTechnology ScriptfontsScriptfonts

TechnologyTechnology Crazy fontsCrazy fonts

SS TECHNOLOGYTECHNOLOGY Old English FontsOld English Fonts


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.


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.


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.


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


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.


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


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.


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.


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.


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.


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


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


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


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.


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.


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.

Documents

Visual Literacy and Visual Design