2. 10% - hearing 83% - sight
LEARNING USING THE FIVE SENSES
1% - taste
4% - smell2% - touch
baisaguira@gmail.com
2
3. What are Visuals and Why Use them?
Visuals - are materials that have an effect on
the sense of sight. They are communication devices
that serve a concrete referents to the spoken or
written word. It can also help motivate students to
learn by attracting and maintaining their attention.
baisaguira@gmail.com
3
4. 4 Basic Goals of Visual Design when designing visuals for
the Classrooms
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 message.
baisaguira@gmail.com
4
5. Decisions – decide on how to arrange the pictures and words.
(elements, pattern and arrangement)
Elements – three categories are visual elements, verbal
elements and elements of appeal.
Visual Elements – comprises pictures, illustration and
graphics to be used.
baisaguira@gmail.com
5
6. Verbal Elements – refer to the text to be used in
the visual.
guidelines:
Lettering Style (font type)
2 Major Types of Lettering Style
1. Serif – for main text
Ex. Times New Roman (simple serif style)
2. Sanserif – (without serif), for the
headings in printed materials.
Ex. Arial
baisaguira@gmail.com
6
7. TECHNOLOGY
TECHNOLOGY Sanserif fonts
TECHNOLOGY
TECHNOLOGY Fonts with serifs
TECHNOLOGY
TECHNOLOGY Script fonts
TECHNOLOGY
TECHNOLOGY Crazy fonts
TECHNOLOGY
TECHNOLOGY Old English fonts
Style versus legibility of lettering
baisaguira@gmail.com
7
8. Number of lettering style – rule: “less is better than
more”
Use of capitals – includes upper case and lower case.
IT IS OFTEN LAMENTED THAT TEACHERS
RELY TOO MUCH ON WORDS AS
COMMUNICATION VEHICLES.
It is often lamented that teachers rely too
much on words as communication vehicles.
baisaguira@gmail.com
8
9. Lettering colour – contrast lettering with the
background.
Lettering size – allows good visibility
Spacing between letters – either optically or
mechanically spacing.
T E A C H mechanical spacing
TEACH optical spacing
baisaguira@gmail.com
9
10. Spacing between the lines – either too close, too
far or just right. lettering space.docx
It is often lamented that teachers
rely too much on words as
communication vehicles.
____________________________________________________________
It is often lamented that teachers
rely too much on words as
communication vehicles.
___________________________________________________________
It is often lamented that teachers
rely too much on words as
communication vehicles.
baisaguira@gmail.com
10
11. Number of lines – depends on the purpose
of the visual.
Elements of Appeal
3 devices for making your visual more appealing
Surprise – something unexpected. (Ex. Text
animation)
Texture – can add a third dimension to two-
dimensional visuals. (kinds of cloud using
cotton as materials) it could be smooth or rough for
visual. texture.docx
Interaction – incorporate movable parts.
baisaguira@gmail.com
11
12. Pattern
factors to consider:
Alignment of elements - show clear relationship
between the main elements in the visual. (either
Horizontal or vertical)
baisaguira@gmail.com
12
15. Shape – visual and verbal elements can be arranged in
a shape that is familiar to the students
Water cycle
baisaguira@gmail.com
15
16. Shape
The shape, outline, or configuration of anything.
Examples
•Squares
•Circles
•Ellipses
•Ovals
•Rectangles
•Triangles
17. Balance – it is achieve when the weight of the
elements in a visual is equally distributed on
each side of its vertical or horizontal axis.
2 kinds of balance : formal and informal balance.
baisaguira@gmail.com
17
19. Style – choose a design style which matches
your audience.
Colour Scheme – select colours that produce
harmony rather than annoyance.
Ex: Complementary colours (red-green, blue-
orange, yellow-violet)
Analogue colours (blue-green)
Colour appeal – consider the emotional
impact of colours in your choice.
baisaguira@gmail.com
19
20. Cool colors ( blue, green and violet)
Warm colors ( red, yellow and orange)
Red- danger or action
Orange – warmth or energy
Blue – aloofness or clarity
Green – freshness or restfulness
Violet – depression
Yellow - cheerfulness
baisaguira@gmail.com
20
Color has an immediate
and profound effect on a design.
21. Arrangement – can be proximity using overlap
and the use of directional.
Proximity – placing the related items close
together and unrelated items far apart in the
visual.
.
baisaguira@gmail.com
21
22. Directionals – directing the viewer’s attention
to a particular part of the visual.
Consistency – final factor to note in the
arrangement decision.
H
serif
baisaguira@gmail.com
22
23. Text Consideration
Two Major Types of Fonts
1. Proportional-spaced fonts – adjust the inter-character
spaced based on the shape of the individual
character. Ex. Times New Roman and Arial
2. Fixed-space fonts – fixed amount of space between
characters in the font.
Ex. Courier New and Letter Gothic
Visual Design Issues in Computer-Based
Presentation
baisaguira@gmail.com
23
24. Before, I don’t believe in courtship. It’s a waste of
time. If I love the person, I’ll tell her right away. But for
you, I’ll make an exception. Just love me now and I’ll
court you forever .
(Arial font)
Before, I don’t believe in courtship.
It’s a waste of time. If I love the
person, I’ll tell her right away. But
for you, I’ll make an exception. Just
love me now and I’ll court you forever .
(Courier font)
baisaguira@gmail.com
24
25. Visual Effects - includes Text Animation, Graphic Animation,
Transitional Effect.
Text and Graphic animation – misuse of the features will
confuse the audience.
Transitional effects – occurs when the user clicks on the
screen.
Use of colour – consider its background colour, colour for
the text/graphics and highlights.
baisaguira@gmail.com
25
26. Colour guidelines for computer screen display
Background Foreground
graphs and text
Highlights
white
light grey
blue
light blue
light yellow
dark blue
blue, green, black
light yellow, white
dark blue, dark green
violet , brown
red, orange
red
yellow, red
red, orange
red
baisaguira@gmail.com
26
27. Basic guidelines for computer-based presentation
Do’s for computer-based presentation
Do use landscape orientation
Do use sanserif types of fonts
Do leave extra space between paragraphs
Do use left justification
Do use graphics to focus on an important area, carry
primary message and to present data.
baisaguira@gmail.com
27
28. Do consider the use of graphics, animations and video
clips.
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.
baisaguira@gmail.com
28
29. Don’ts for computer-based presentation
Don’t use portrait orientation
Don’t put too much information on one screen display
Don’t use too much or too little highlighting
Don’t use decorative clip art to confuse the message
Don’t use poor quality originals when scanning pictures.
Don’t use too many fonts.
baisaguira@gmail.com
29
30. Don’t use many fonts
don’t use all capital letters.
Don’t split words at the end of a line or hypenate them.
Don’t break a sentence across screens.
Don’t use graphics, animation or audio without a good
purposes.
Don’t use special visual effect without good reason
Don’t use too many colour on one screen only
baisaguira@gmail.com
30
31. Prepared by : Ms. Bai Saguira M. Abdulah
31
baisaguira@gmail.com