•We learn 83% through the sense of sight!
Fact!
CHAPTER 3
VISUAL DESIGN: PRINCIPLES AND APPLICATIONS
VISUALS
BENEFITS OF VISUALS
Motivate students
Simplification of complicated ideas and information
To meet the needs of the visual learners
VISUAL DESIGN
GOALS
Ensure legibility
Effort reduction
Increase active
engagement
Focus attention
DecisionsElement
s
Pattern
Arrangement
Visual Elements
Verbal Elements
ELEMENTS
Elements of Appeal
VISUAL ELEMENTS
Catego
ry 1
Catego
ry 2
Catego
ry 3
Catego
ry 4
0%10%20%30%40%50%60%70%80%90%
100%
Series 3Series 2Series 1
Picture Illustration Graphic
Do not use pictures just for
decorative purposes!
VERBAL ELEMENTSLettering Style
Number of Lettering Style
Use of Capitals
Lettering Colour
Lettering Size
Spacing between letters
Number of Lines
TECHNOLOGYTECHNOLOGY San-serif fontsTECHNOLOGYTECHNOLOGY Fonts with serifs
TECHNOLOGYTECHNOLOGY Script fontTECHNOLOGY TECHNOLOGY Crazy FontTECHNOLOGY Old English font
Lettering Style (Font Type)
BULLETIN BOARD
2. Number of Lettering Styles
RULES!!
• No more than two style• Four variations
“LESS IS BETTER THAN
MORE”
Rule of Thumb:
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
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
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
Spacing Between Letters
TEACH Optical spacing
T E A C H Mechanical spacing
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
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
ELEMENT OF APPEAL
INTERACTION
TEXTURE
SURPRISE
SURPRISE
Texture
2D 3D
Interaction
PATTERNAlignment of Elements
Shape
Balance
Colour Scheme
Style
Colour Appeal
Alignment of Elements
Circle
Triangle
Rectangle
Shape of
letters
Shape
Formal Balance
Informal Balance
TYPES OF CLOUDS
Imbalance
STYLE
STYLE
STYLE
COLOR WHEEL
Colour Scheme
Emotional Impact Colour Cool colours blue, green and violetWarm colours red and orangeDanger or action RedWarmth or energy OrangeAloofness or clarity BlueFreshness Green
Depression Violet Cheerfulness Yellow
Colour Appeal
ARRANGEMENT
CONSISTENCY
DIRECTIONALS
PROXIMITY
CLICK HERE
CLICK HERE
CLICK HERE
The Principle of Proximity
CLICK HERE
Directionals
CLICK HERE
VISUAL DESIGN ISSUES IN COMPUTER-BASED
PRESENTATIONS
TEXT CONSIDERATIONS
VISUAL EFFECTS
BASIC GUIDELINES FOR COMPUTER-BASED PRESENTATIONS
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
Visual Effects
Text and graphic animations
Transitional effects
Use of ColourCLICK HERE
CLICK HERE
Getting attention
Focusing on a
certain area
Stimulating curiosity
Providing clear
feedback
Explaining abstract concepts
USESCLICK HERE
Use of Colour
Background Foreground HighlightsWhite
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,
BOX IN
TRANSITIONAL EFFECTS
BOX OUT
WIPE LEFT
WIPE RIGHT
BASIC GUIDELINES FOR COMPUTER-BASED
PRESENTATIONS
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.
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.
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.
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.
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.
END