Visual design: Theories and Principle

VISUAL DESIGN
Principles and
Applications
Angela F.L Wong and Cheung Wing Sum
baisaguira@gmail.com
1

10% - hearing 83% - sight
LEARNING USING THE FIVE SENSES
1% - taste
4% - smell2% - touch
2

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.
3

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.
4

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.
5

 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
6

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
7

 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.
8

 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
9

 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.
____________________________________________________________
___________________________________________________________
10

 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.
11

Pattern
factors to consider:
 Alignment of elements - show clear relationship
between the main elements in the visual. (either
Horizontal or vertical)
12

 Shape – visual and verbal elements can be arranged in
a shape that is familiar to the students
Water cycle
15

Shape
The shape, outline, or configuration of anything.
Examples
•Squares
•Circles
•Ellipses
•Ovals
•Rectangles
•Triangles

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.
17

 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.
19

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
20
Color has an immediate
and profound effect on a design.

 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.
.
21

Directionals – directing the viewer’s attention
to a particular part of the visual.
Consistency – final factor to note in the
arrangement decision.
H
serif
22

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
23

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)
24

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.
25

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
26

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.
27

 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.
28

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.
29

 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
30

 Prepared by : Ms. Bai Saguira M. Abdulah
31

Visual design: Theories and Principle

More Related Content

Similar to Visual design: Theories and Principle (20)

More from Ira Sagu (20)

Recently uploaded (20)

Visual design: Theories and Principle

Editor's Notes