visual design: theories and principle
TRANSCRIPT
![Page 1: Visual design: Theories and Principle](https://reader036.vdocuments.us/reader036/viewer/2022062316/58abea9a1a28ab504e8b53a7/html5/thumbnails/1.jpg)
VISUAL DESIGN
Principles and
ApplicationsAngela F.L Wong and Cheung Wing Sum
baisaguira@gm
ail.com
1
![Page 2: Visual design: Theories and Principle](https://reader036.vdocuments.us/reader036/viewer/2022062316/58abea9a1a28ab504e8b53a7/html5/thumbnails/2.jpg)
10% - hearing 83% - sight
LEARNING USING THE FIVE SENSES
1% - taste
4% - smell2% - touch
baisaguira@gm
ail.com
2
![Page 3: Visual design: Theories and Principle](https://reader036.vdocuments.us/reader036/viewer/2022062316/58abea9a1a28ab504e8b53a7/html5/thumbnails/3.jpg)
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
![Page 4: Visual design: Theories and Principle](https://reader036.vdocuments.us/reader036/viewer/2022062316/58abea9a1a28ab504e8b53a7/html5/thumbnails/4.jpg)
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
![Page 5: Visual design: Theories and Principle](https://reader036.vdocuments.us/reader036/viewer/2022062316/58abea9a1a28ab504e8b53a7/html5/thumbnails/5.jpg)
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
![Page 6: Visual design: Theories and Principle](https://reader036.vdocuments.us/reader036/viewer/2022062316/58abea9a1a28ab504e8b53a7/html5/thumbnails/6.jpg)
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
![Page 7: Visual design: Theories and Principle](https://reader036.vdocuments.us/reader036/viewer/2022062316/58abea9a1a28ab504e8b53a7/html5/thumbnails/7.jpg)
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
![Page 8: Visual design: Theories and Principle](https://reader036.vdocuments.us/reader036/viewer/2022062316/58abea9a1a28ab504e8b53a7/html5/thumbnails/8.jpg)
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
![Page 9: Visual design: Theories and Principle](https://reader036.vdocuments.us/reader036/viewer/2022062316/58abea9a1a28ab504e8b53a7/html5/thumbnails/9.jpg)
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
![Page 10: Visual design: Theories and Principle](https://reader036.vdocuments.us/reader036/viewer/2022062316/58abea9a1a28ab504e8b53a7/html5/thumbnails/10.jpg)
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
![Page 11: Visual design: Theories and Principle](https://reader036.vdocuments.us/reader036/viewer/2022062316/58abea9a1a28ab504e8b53a7/html5/thumbnails/11.jpg)
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
![Page 12: Visual design: Theories and Principle](https://reader036.vdocuments.us/reader036/viewer/2022062316/58abea9a1a28ab504e8b53a7/html5/thumbnails/12.jpg)
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
![Page 13: Visual design: Theories and Principle](https://reader036.vdocuments.us/reader036/viewer/2022062316/58abea9a1a28ab504e8b53a7/html5/thumbnails/13.jpg)
Vertical Lines
![Page 14: Visual design: Theories and Principle](https://reader036.vdocuments.us/reader036/viewer/2022062316/58abea9a1a28ab504e8b53a7/html5/thumbnails/14.jpg)
Horizontal Lines
![Page 15: Visual design: Theories and Principle](https://reader036.vdocuments.us/reader036/viewer/2022062316/58abea9a1a28ab504e8b53a7/html5/thumbnails/15.jpg)
Shape – visual and verbal elements can be arranged in a shape that is familiar to the students
Water cycle
baisaguira@gm
ail.com
15
![Page 16: Visual design: Theories and Principle](https://reader036.vdocuments.us/reader036/viewer/2022062316/58abea9a1a28ab504e8b53a7/html5/thumbnails/16.jpg)
Shape
The shape, outline, or configuration of anything.
Examples• Squares• Circles • Ellipses
• Ovals• Rectangles • Triangles
![Page 17: Visual design: Theories and Principle](https://reader036.vdocuments.us/reader036/viewer/2022062316/58abea9a1a28ab504e8b53a7/html5/thumbnails/17.jpg)
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
![Page 18: Visual design: Theories and Principle](https://reader036.vdocuments.us/reader036/viewer/2022062316/58abea9a1a28ab504e8b53a7/html5/thumbnails/18.jpg)
baisaguira@gm
ail.com
18
![Page 19: Visual design: Theories and Principle](https://reader036.vdocuments.us/reader036/viewer/2022062316/58abea9a1a28ab504e8b53a7/html5/thumbnails/19.jpg)
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
![Page 20: Visual design: Theories and Principle](https://reader036.vdocuments.us/reader036/viewer/2022062316/58abea9a1a28ab504e8b53a7/html5/thumbnails/20.jpg)
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.
![Page 21: Visual design: Theories and Principle](https://reader036.vdocuments.us/reader036/viewer/2022062316/58abea9a1a28ab504e8b53a7/html5/thumbnails/21.jpg)
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
![Page 22: Visual design: Theories and Principle](https://reader036.vdocuments.us/reader036/viewer/2022062316/58abea9a1a28ab504e8b53a7/html5/thumbnails/22.jpg)
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
![Page 23: Visual design: Theories and Principle](https://reader036.vdocuments.us/reader036/viewer/2022062316/58abea9a1a28ab504e8b53a7/html5/thumbnails/23.jpg)
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
![Page 24: Visual design: Theories and Principle](https://reader036.vdocuments.us/reader036/viewer/2022062316/58abea9a1a28ab504e8b53a7/html5/thumbnails/24.jpg)
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
![Page 25: Visual design: Theories and Principle](https://reader036.vdocuments.us/reader036/viewer/2022062316/58abea9a1a28ab504e8b53a7/html5/thumbnails/25.jpg)
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
![Page 26: Visual design: Theories and Principle](https://reader036.vdocuments.us/reader036/viewer/2022062316/58abea9a1a28ab504e8b53a7/html5/thumbnails/26.jpg)
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
![Page 27: Visual design: Theories and Principle](https://reader036.vdocuments.us/reader036/viewer/2022062316/58abea9a1a28ab504e8b53a7/html5/thumbnails/27.jpg)
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
![Page 28: Visual design: Theories and Principle](https://reader036.vdocuments.us/reader036/viewer/2022062316/58abea9a1a28ab504e8b53a7/html5/thumbnails/28.jpg)
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
![Page 29: Visual design: Theories and Principle](https://reader036.vdocuments.us/reader036/viewer/2022062316/58abea9a1a28ab504e8b53a7/html5/thumbnails/29.jpg)
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
![Page 30: Visual design: Theories and Principle](https://reader036.vdocuments.us/reader036/viewer/2022062316/58abea9a1a28ab504e8b53a7/html5/thumbnails/30.jpg)
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
![Page 31: Visual design: Theories and Principle](https://reader036.vdocuments.us/reader036/viewer/2022062316/58abea9a1a28ab504e8b53a7/html5/thumbnails/31.jpg)
Prepared by : Ms. Bai Saguira M. Abdulah
31
baisaguira@gm
ail.com