VISUAL DESIGN: PRINCIPLES AND APPLICATION

Visuals: >>> are materials that have an effect on the sense of sight. >>> are communication devices that serve as concrete referents to the spoken or written word.

160 140 120 100

70 60 50 40

80
30 60 40 20 0 20 10 0

Volume Open High Low

Close

Heinich et. al (1996) recommended that teachers keep in mind the following four basic goals of visual design when designing visuals for their classroom use: --Ensure legibility of words and pictures in your visual. --Reduce the effort needed in interpreting message. --Increase active engagement of viewer with message . --Focus attention on the most important parts of the message.

These includes decisions related to the visual elements to be used, the underlying pattern for displaying the elements and the arrangement of the elements within the pattern. ELEMENT The elements to consider in designing visuals can be divide into three categories:

>Visual elements >Verbal elements >Elements of appeal

>Visual Elements

-comprise pictures, illustrations and graphics to be used. -refer to the text to be used in the visual. The choice of font, style and size are important considerations when selecting the appropriate lettering to be used. >Verbal Elements -refers to the text to be used in the visual.

Some guidelines to help teachers with this task are as follows some guidelines to help teachers with this task are as follows: Lettering style (font type) this should be consistent and harmonize with the other in the elements in the visual. There are two major types of fonts: Seriff and San Seriff

TECHNOLOGY TECHNOLOGY San-serif Fonts ---------------------------------------------TECHNOLOGY TECHNOLOGY Fonts With Serif ------------------------TECHNOLOGY TECHNOLOGY Script Fonts -------------------------------------------TECHNOLOGY TECHNOLOGY Crazy Fonts ---------------------------------------------TECHNOLOGY Old English Fonts

Number of lettering styles - Keep this to no more than two in any static display (chart, bulletin board) or a series of related visuals (set of transparencies or computer or presentation slide) note: Whatever you do, the rule of thumb should be less is better than more! Use of capitals short headlines or title of no more than six words may be written in all capitals (upper case).

IT IS OFTEN LAMENTED THAT TEACHERS RELY TOO It is often lamented MUCH ON WORDS that teachers rely AS too much on words COMMUNICATION as communication VEHICLES. vehicles.

Lettering colour - contrast lettering with the background. Lettering size - choose a lettering size that allows good visibility even by the students seated right at the back of the classroom.
Spacing between letters - If you are using a computer to generate the text, it will automatically space the letters in every word.

Spacing between the lines If the lines of text are too close together, they tends to blur out at a distance, while lines too far apart will seem disjointed .

Fig. 3.6

Love is sweeter the second time around, so why not fall in love again. TOO CLOSE ------------------------------------------------------------------------------------------------Love is sweeter
the second time around, so why not fall in love again. TOO FAR

--------------------------------------------------------------------------------------------------

Love is sweeter
the second time around, so why not fall in love again. JUST RIGHT

Number of lines - This depends on the type and purpose of the visual.
Element of appeal should be considered also to ensure that your visual captures and hold the attention of your student. Three devices: Surprise is something unexpected Texture can add a third dimension to two-dimensional visuals .

Interaction a form provided instead of having static visual displays.

Pattern
Factors to consider as you decide on the overall look of the visual:

Shape the visual and the verbal elements can also be

arranged in a shape that is familiar to the students. Style choosing a design which matches your audience. Colour scheme set of color that produce harmony rather than annoyance.

Colour appeal consider the emotional impact of colours in

your choice.

Alignment of elements use this to show visual relationship between the main elements in the visuals.

Balance a sense of balance is achieved when the weight of elements in a visual is equally distributed on each side of its vertical or horizontal axis.

FORMAL BALANCE

INFORMAL BALANCE

Colour appeal consider the emotional impact of colours in your choice.

Arrangement
Principle of proximity by placing related elements closed together and unrelated items far apart. Figure-ground contrast is to have dark figure on a light background or vice versa. Consistency is a applicable when dealing with a series of visuals belonging to a set.

Ed.Tech Ed. Tech.

Ed. Tech. Ed. Tech.

Ed. Tech.

There are two major types of fonts found in most of the software applications which display or print text (such as word processors and web browsers) : Proportional-spaced fonts according to Grace et. al. (1995, p. 757) adjust the inter-character space based on the shape of the individual characters. Fixed-space fonts are the fonts which have a fixed amount of space between characters in the font.

Fig. 3.13 Numbers and letters in proportional and fixed-space fonts 7000 - 6000 1000

Dreams are cast down by our own difficulties in life.

(Arial font)

7000 -6000 1000

Dreams are cast down by our own difficulties in life. (Courier New font)

These visual effect include text animation, graphic animation and transitional effects.

Text and graphic animation

The following are some suggestions as to when animation can be use in computer-based instructional presentation: oGetting attention oFocusing on a certain area oStimulating curiosity oProviding clear feedback Transitional effects- may occur when the user clicks on the screen.

Transitional effects- may occur when the user clicks on the screen. Examples of transitional effects are as follows:

Use of Colour When using a colour scheme for a computer screen display it may be helpful to think in terms of a background colour, a colour for graphics text and a colour for highlights.
BACKGROUND White Light grey Blue Light Blue Light Yellow FOREGROUND Dark blue Blue, green, black Light yellow, white Dark blue, dark green Violet, brown HIGHLITGHTS Red, orange red Yellow, red Red, orange red

Dos for computer-based presentation:

Do use landscape (wide) orientation.

Do use sanserif types of fonts for the text

and make sure that the font size is large enough to be clearly seen. Do leave extra space between paragraphs.

Do use left justification.

Do use graphic to focus on an important area, carry primary message and to present data. Do consider the use of graphics, animations and video clips when it is difficult to describe something verbally Do follow the convention when using colours. Do have plenty of empty space on a screen. Do eliminate distracting background.

Do have consistency in the design.

Donts for computer-based presentation:

oDont use portrait (tall) orientation.

oDont put too much information on one screen.

oDont use too much or too little highlighting. oDont use decorative clip art to confuse the message. oDont use poor quality originals when scanning pictures. oDont mix too many fonts.

oDont use all capital letters. oDont split words at the end of the line or hyphenate them. oDont break a sentence across screens. oDont use graphics, animations or audio without a good purpose. oDont use special visual effects (such as flying letters, words or objects) without good reason. oDont use too many colors.