Download - Visual design: Theories and Principle
VISUAL DESIGN
Principles and
ApplicationsAngela F.L Wong and Cheung Wing Sum
baisaguira@gm
ail.com
1
10% - hearing 83% - sight
LEARNING USING THE FIVE SENSES
1% - taste
4% - smell2% - touch
baisaguira@gm
ail.com
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.
baisaguira@gm
ail.com
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.
baisaguira@gm
ail.com
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.
baisaguira@gm
ail.com
5
Verbal Elements – refer to the text to be used in the visual.
guidelines: Lettering Style (font type)
2 Major Types of Lettering Style1. Serif – for main text Ex. Times New Roman (simple serif style)2. Sanserif – (without serif), for the headings in printed materials. Ex. Arial
baisaguira@gm
ail.com
6
TECHNOLOGYTECHNOLOGY Sanserif fonts
TECHNOLOGYTECHNOLOGY Fonts with serifs
TECHNOLOGYTECHNOLOGY Script fonts
TECHNOLOGYTECHNOLOGY Crazy fonts
TECHNOLOGYTECHNOLOGY Old English fonts
Style versus legibility of lettering
baisaguira@gm
ail.com
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.
baisaguira@gm
ail.com
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
baisaguira@gm
ail.com
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.____________________________________________________________
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@gm
ail.com
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.
baisaguira@gm
ail.com
11
Patternfactors to consider:
Alignment of elements - show clear relationship between the main elements in the visual. (either Horizontal or vertical)
baisaguira@gm
ail.com
12
Vertical Lines
Horizontal Lines
Shape – visual and verbal elements can be arranged in a shape that is familiar to the students
Water cycle
baisaguira@gm
ail.com
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.
baisaguira@gm
ail.com
17
baisaguira@gm
ail.com
18
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@gm
ail.com
19
Cool colors ( blue, green and violet)Warm colors ( red, yellow and orange)
Red- danger or actionOrange – warmth or energyBlue – aloofness or clarityGreen – freshness or restfulnessViolet – depressionYellow - cheerfulness
baisaguira@gm
ail.com
20Color 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.
.
baisaguira@gm
ail.com
21
Directionals – directing the viewer’s attention to a particular part of the visual.
Consistency – final factor to note in the arrangement decision.
Hserif
baisaguira@gm
ail.com
22
Text ConsiderationTwo 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@gm
ail.com
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)
baisaguira@gm
ail.com
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.
baisaguira@gm
ail.com
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
baisaguira@gm
ail.com
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.
baisaguira@gm
ail.com
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.
baisaguira@gm
ail.com
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.
baisaguira@gm
ail.com
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
baisaguira@gm
ail.com
30
Prepared by : Ms. Bai Saguira M. Abdulah
31
baisaguira@gm
ail.com