•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