Literacy is. What is VL applied to? Visual Literacy (VL) is. Issues in Visual Communication Design Principles for: Web design Print Material 5/12/2014

Transcription

1 Issues in Visual Communication Design Principles for: Web design Print Material Literacy is Literacy usually means the ability to read and write, but it can also refer to the ability to read kinds of signs other than words for example, images or gestures. The proliferation of images in our culture in newspapers and magazines, in advertising, on television, and on the Web makes visual literacy, the ability to read images, a vital skill. -Thibault & Walbert Visual Literacy (VL) is What is VL applied to? Visual literacy is the ability to see, to understand, and ultimately to think, create, and communicate graphically. Generally speaking, the visually literate viewer looks at an image carefully, critically, and with an eye for the intentions of the image s creator. -Thibault & Walbert photographs paintings political cartoons illustrations in books illustrations in newspapers various charts films graphs maps comic books drawings graphic art and more 1

2 How does this apply to you? Just a thought higher-level visual literacy skills require critical thinking, and they are essential to a student s success in any content area in which information is conveyed through visual formats such as charts and maps -Thibault & Walbert If students aren t taught the language of sound and images, shouldn t they be considered as illiterate as if they left college without being able to read or write? - George Lucas Image VL Basics Dot Line Shape Direction Texture Hue Saturation Value Scale Dimension Motion Color 2

3 Dot Line Dot s are what make up all visual elements used within technological media. A dot is a small blop of color on a background of differing color The dot s are used in multiple groups to create letters, pictures, and colors A computer communicates with humans in combined patterns of dots A monitor expresses itself in pixels The number of pixels on the screen is represented by two numbers, for example 1024 x 768 indicates that the monitor screen is 1024 pixels (dots) wide by 768 pixels high Print material is expressed in dots created by a printer that shoots dots of ink on a piece of paper. Used in combinations of dots, color is created. Lines are composed of dots that create a continuous linear repetition Lines can be straight or curved Lines can be composed of any set of repetitious patterns placed in a linear shape A line can be inferred, i.e.- a picture of a road infers a line A line is a dot s visual path across a field Lines can attach two or more points to create a recognizable shape Lines convey motion and direction Shape Direction Shapes are pictorial language The earliest languages were pictorial languages Hieroglyphics, Cuneiform, Chinese We use shapes to guide us through everyday life without benefit of words The use of dot s, lines, and shapes create motion by forcing our eyes to move around the defined space Diagonals are dynamic and imply imbalance and motion The direction of the diagonal implies the direction of the motion Two diagonals together will imply depth or direction on a 3D plane 3

4 Hue Tactile sense are not limited to your sense of touch Your eyes feel texture because your memory remembers how that texture would feel Your brain makes associations between similar textures so that you can feel textures that you may have never experience before ROY G. BIV The colors of the rainbow are the hues that the human eye can see in the visible spectrum of light Light reflecting on a surface cause us to see color as light Warm colors: Red, Orange, Yellow Cool colors: Green, Blue, Indigo, Violet All color can be created through the blending of the Primary colors: Red, Blue, Yellow White is the presence of all color Black is the presence of no color Color coveys meaning in the same way that shape conveys meaning Color conveys meaning differently in diverse cultures Saturation More Grey Value The combination of light and dark colors Value applies to all color and not just black & white Value is easiest to detect on colors further apart in saturation Saturation refers to the amount of grey in a color The more grey present in a color makes it less saturated The less grey present in a color makes it more saturated The above red circles are the same color with grey added 4

5 Scale Dimension Shows a relationship between objects Applies to size & shape Gives greater meaning to less meaningful shapes Creates 3D depth in a 2D image 3 dimension in a 2 dimensional world is created through two parts creation of scale (larger objects in the front and smaller objects in the rear) seen as the bottom of area as the front and the top of the area as the rear memory using memory to form a mental image of reality Eye level the horizon line in a picture implies the level at which your eyes perceive absolute distance images in the image are seen in relation to the horizon line Eye Level, Part 2 The positioning of the viewer in relationship to the object being viewed Ex looking down from a tall building (a bird s eye view) Motion Motion cannot be conveyed in a still image, motion only exists in the real world Tricks must be employed to imply the illusion of motion Interpretation of motion is personal to the person interpreting Blur, direction, dimension, scale, and line are used to imply that an image is moving TEXT 5

6 Text Choosing the correct formatted text is often times more important than what the words reveal The medium in which you are working dictates the type of textual formatting to use Print media is treated differently than digital media Two types of Fonts Sans Serif Font Serif Font Which to use? Print materials = Serif fonts The serif s (or feet) help guide the eye across the page much like a line draws your attention from one point to another (font = Times New Roman 24) Digital Media = Sans Serif fonts The lack of a serif on letters helps the eye by leaving less on the screen to focus on serif s can be difficult to fit within pixels and the result is jumbled, messy, and distracting (font = Arial24) Types of Sans Serif fonts Arial Verdana Lucinda Note that all 3 fonts are size 60 font 6

7 Types of Serif fonts Times New Roman Garamond Perpetua Note that all 3 fonts are size 60 font Differences Times New Roman Arial Notice the differences: Same size text (both 60) but different weight Times New Roman appears lighter & thinner Arial appears chunky and solid Font Sizes Sizes of Font in Headings For multimedia, try to have no text smaller than 24 points, unless there is justification for doing so. [12] For multimedia, try to have no text smaller than 24 points, unless there is justification for doing so. [14] For multimedia, try to have no text smaller than 24 points, unless there is justification for doing so. [24] For multimedia, try to have no text smaller than 24 points, unless there is justification for doing so. [36] Headings, of course, need to be in significantly larger sizes. Heading [18] Heading [36] Heading [54] 7

8 When Creating Multimedia Leave Open Space on Your Card Do not be afraid of open or dead space Do not try to crowd lots of information onto a screen/card Do not try to use every last piece of space For Example This too is much st 2nd 3rd Qtr Qtr Qtr 4th Qtr East West North Now you know basic visual literacy guidelines The End 8