What is Visual? Benefits of Visual Goals Elements ...

2. •We learn 83% through the sense
of sight!

3. CHAPTER 3
VISUAL DESIGN:
PRINCIPLES AND
APPLICATIONS

4. VISUALS

5. BENEFITS OF VISUALS
Motivate students
Simplification of complicated ideas
and information
To meet the needs of the visual
learners

6. VISUAL
DESIGN

7. GOALS
Ensure
legibility
Effort
reduction
Increase
active
engagement
Focus
attention

8. Decisions Elements
Pattern
Arrangement

9. Visual Elements
Verbal Elements
ELEMENTS
Elements of Appeal

10. VISUAL ELEMENTS
0%
20%
40%
60%
80%
100%
Category1
Category2
Category3
Category4
Series 3
Series 2
Series 1
Picture Illustration Graphic

11. Do not use pictures
just for decorative
purposes!

12. VERBAL ELEMENTS
Lettering Style
Number of Lettering Style
Use of Capitals
Lettering Colour
Lettering Size
Spacing between letters
Number of Lines

13. TECHNOLOGY
TECHNOLOGY San-serif fonts
TECHNOLOGY
TECHNOLOGY Fonts with serifs
TECHNOLOGY
TECHNOLOGY Script font
TECHNOLOGY
TECHNOLOGY Crazy Font
TECHNOLOGY Old English
font
Lettering Style (Font Type)

14. BULLETIN BOARD
2. Number of Lettering Styles
RULES!!
• No more than two style
• Four variations

15. “LESS IS BETTER
THAN MORE”
Rule of Thumb:

16. Use of Capitals
No more than six
words
VISUAL DESIGN:
PRINCIPLES AND
APPLICATION
All capitals
More than six
words
It is often lamented
that teachers rely
too much on words
as communication
vehicles.
Do not capitalize

17. Lettering Colour
No more than six
words
VISUAL DESIGN:
PRINCIPLES AND
APPLICATION
All capitals
More than six
words
It is often lamented
that teachers rely
too much on words
as communication
vehicles.
Do not capitalize

18. Lettering Size
It is often lamented that teachers rely too much on words as
communication vehicles.
24
It is often lamented that teachers rely too much on
words as communication vehicles.
28
It is often lamented that teachers rely too much
on words as communication vehicles.
32
It is often lamented that teachers rely too
much on words as communication
vehicles.
36
It is often lamented that teachers rely too much on words as communication vehicles. 18

19. Spacing Between Letters
TEACH Optical spacing
T E A C H Mechanical spacing

20. Spacing Between Lines
It is often lamented that teachers rely too
much on words as communication vehicles.
Too close –
tend to blur out at
a distance
It is often lamented that teachers rely too
much on words as communication vehicles.
Too far –
seem disjointed
It is often lamented that teachers rely too
much on words as communication vehicles.
Just Right

21. Number of Lines
Enjoying more leisure, as they sometimes do,
men find that the remarkable development of
technology and scientific investigation and
the new means of communication offer them
an opportunity of attaining more easily their
cultural and spiritual inheritance and of
fulfilling one another in the closer ties
between groups and even between peoples.
8
LINES

22. ELEMENT OF APPEAL
INTERACTION
TEXTURE
SURPRISE

24. Texture
2D 3D

25. Interaction

26. PATTERN
Alignment of Elements
Shape
Balance
Colour Scheme
Style
Colour Appeal

27. Alignment of Elements

28. Circle
Triangle
Rectangle
Shape
of letters
Shape

29. Formal Balance

30. Informal Balance
TYPES OF
CLOUDS

31. Imbalance

32. STYLE

33. STYLE

34. STYLE

35. COLOR
WHEEL
Colour Scheme

36. Emotional Impact Colour
Cool colours blue, green and violet
Warm colours red and orange
Danger or action Red
Warmth or energy Orange
Aloofness or clarity Blue
Freshness Green
Depression Violet
Cheerfulness Yellow
Colour Appeal

37. ARRANGEMENT
CONSISTENCY
DIRECTIONALS
PROXIMITY
CLICK HERE
CLICK HERE
CLICK HERE

38. The Principle of Proximity
CLICK HERE

39. Directionals
CLICK HERE

40. VISUAL DESIGN ISSUES
IN COMPUTER-BASED
PRESENTATIONS

41. TEXT
CONSIDERATIONS
VISUAL EFFECTS
BASIC GUIDELINES FOR COMPUTER-
BASED PRESENTATIONS

42. 8005
+ 1111
9126
Now is the winter of our discontent
Arial
Font
8005
+ 1111
9126
Now is the winter of our discontent
Courier
New
font
Numbers and letters in proportional and fixed-space fonts

44. Visual Effects
Text and graphic animations
Transitional effects
Use of Colour
CLICK HERE
CLICK HERE

45. Getting
attention
Focusing
on a
certain
area
Stimulating
curiosity
Providing
clear
feedback
Explaining
abstract
concepts
USES
CLICK HERE

46. Use of Colour
Background Foreground Highlights
White
Light Grey
blue
light blue
light yellow
Dark blue
Blue, green, black,
light yellow, white
dark blue, dark
green, violet,
brown
Red, red orange,
yellow,

47. BOX IN
TRANSITIONAL EFFECTS

48. BOX OUT

49. WIPE LEFT

50. WIPE RIGHT

51. BASIC GUIDELINES FOR
COMPUTER-BASED
PRESENTATIONS

52. DO’S
• Do use landscape (wide) orientation.
• Do use san-serif 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 graphics to focus on an important area, carry
primary messages and to present data.

53. DO’S
• Do consider the use of graphics, animations and
video clips when it is difficult to describe something
verbally.
• Do follow the conventions when using colours.
• Do have plenty space on screen.
• Do eliminate backgrounds.
• Do have consistency in design.

54. DON'TS
• Don’t use portrait (tall) 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.

55. DON'TS
• Don’t use poor quality originals when scanning
pictures.
• Don’t mix too many fonts.
• Don’t use all capital letters.
• Don’t split words at the end of a line or
hyphenate them.

56. DON'TS
• Don’t break a sentence across screens.
• Don’t use graphics, animations or audio
without good purpose.
• Don’t use special visual effects without good
reason.
• Don’t use too many colours on one screen.