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