Top Banner

of 25

Visual Literacy and Visual Design

Apr 10, 2018

Download

Documents

Welcome message from author
This document is posted to help you gain knowledge. Please leave a comment to let me know what you think about it! Share it to your friends and learn new things together.
Transcript
  • 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.