Chapter 3: Visual Design: Principles and Applications
-
Upload
maria-jiwani-lana -
Category
Education
-
view
306 -
download
1
Transcript of Chapter 3: Visual Design: Principles and Applications
![Page 1: Chapter 3: Visual Design: Principles and Applications](https://reader034.fdocuments.in/reader034/viewer/2022042908/58ed59bc1a28ab00428b4667/html5/thumbnails/1.jpg)
![Page 2: Chapter 3: Visual Design: Principles and Applications](https://reader034.fdocuments.in/reader034/viewer/2022042908/58ed59bc1a28ab00428b4667/html5/thumbnails/2.jpg)
•We learn 83% through the sense of sight!
Fact!
![Page 3: Chapter 3: Visual Design: Principles and Applications](https://reader034.fdocuments.in/reader034/viewer/2022042908/58ed59bc1a28ab00428b4667/html5/thumbnails/3.jpg)
CHAPTER 3
VISUAL DESIGN: PRINCIPLES AND APPLICATIONS
![Page 4: Chapter 3: Visual Design: Principles and Applications](https://reader034.fdocuments.in/reader034/viewer/2022042908/58ed59bc1a28ab00428b4667/html5/thumbnails/4.jpg)
VISUALS
![Page 5: Chapter 3: Visual Design: Principles and Applications](https://reader034.fdocuments.in/reader034/viewer/2022042908/58ed59bc1a28ab00428b4667/html5/thumbnails/5.jpg)
BENEFITS OF VISUALS
Motivate students
Simplification of complicated ideas and information
To meet the needs of the visual learners
![Page 6: Chapter 3: Visual Design: Principles and Applications](https://reader034.fdocuments.in/reader034/viewer/2022042908/58ed59bc1a28ab00428b4667/html5/thumbnails/6.jpg)
VISUAL DESIGN
![Page 7: Chapter 3: Visual Design: Principles and Applications](https://reader034.fdocuments.in/reader034/viewer/2022042908/58ed59bc1a28ab00428b4667/html5/thumbnails/7.jpg)
GOALS
Ensure legibility
Effort reduction
Increase active
engagement
Focus attention
![Page 8: Chapter 3: Visual Design: Principles and Applications](https://reader034.fdocuments.in/reader034/viewer/2022042908/58ed59bc1a28ab00428b4667/html5/thumbnails/8.jpg)
DecisionsElement
s
Pattern
Arrangement
![Page 9: Chapter 3: Visual Design: Principles and Applications](https://reader034.fdocuments.in/reader034/viewer/2022042908/58ed59bc1a28ab00428b4667/html5/thumbnails/9.jpg)
Visual Elements
Verbal Elements
ELEMENTS
Elements of Appeal
![Page 10: Chapter 3: Visual Design: Principles and Applications](https://reader034.fdocuments.in/reader034/viewer/2022042908/58ed59bc1a28ab00428b4667/html5/thumbnails/10.jpg)
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
![Page 11: Chapter 3: Visual Design: Principles and Applications](https://reader034.fdocuments.in/reader034/viewer/2022042908/58ed59bc1a28ab00428b4667/html5/thumbnails/11.jpg)
Do not use pictures just for
decorative purposes!
![Page 12: Chapter 3: Visual Design: Principles and Applications](https://reader034.fdocuments.in/reader034/viewer/2022042908/58ed59bc1a28ab00428b4667/html5/thumbnails/12.jpg)
VERBAL ELEMENTSLettering Style
Number of Lettering Style
Use of Capitals
Lettering Colour
Lettering Size
Spacing between letters
Number of Lines
![Page 13: Chapter 3: Visual Design: Principles and Applications](https://reader034.fdocuments.in/reader034/viewer/2022042908/58ed59bc1a28ab00428b4667/html5/thumbnails/13.jpg)
TECHNOLOGYTECHNOLOGY San-serif fontsTECHNOLOGYTECHNOLOGY Fonts with serifs
TECHNOLOGYTECHNOLOGY Script fontTECHNOLOGY TECHNOLOGY Crazy FontTECHNOLOGY Old English font
Lettering Style (Font Type)
![Page 14: Chapter 3: Visual Design: Principles and Applications](https://reader034.fdocuments.in/reader034/viewer/2022042908/58ed59bc1a28ab00428b4667/html5/thumbnails/14.jpg)
BULLETIN BOARD
2. Number of Lettering Styles
RULES!!
• No more than two style• Four variations
![Page 15: Chapter 3: Visual Design: Principles and Applications](https://reader034.fdocuments.in/reader034/viewer/2022042908/58ed59bc1a28ab00428b4667/html5/thumbnails/15.jpg)
“LESS IS BETTER THAN
MORE”
Rule of Thumb:
![Page 16: Chapter 3: Visual Design: Principles and Applications](https://reader034.fdocuments.in/reader034/viewer/2022042908/58ed59bc1a28ab00428b4667/html5/thumbnails/16.jpg)
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
![Page 17: Chapter 3: Visual Design: Principles and Applications](https://reader034.fdocuments.in/reader034/viewer/2022042908/58ed59bc1a28ab00428b4667/html5/thumbnails/17.jpg)
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
![Page 18: Chapter 3: Visual Design: Principles and Applications](https://reader034.fdocuments.in/reader034/viewer/2022042908/58ed59bc1a28ab00428b4667/html5/thumbnails/18.jpg)
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
![Page 19: Chapter 3: Visual Design: Principles and Applications](https://reader034.fdocuments.in/reader034/viewer/2022042908/58ed59bc1a28ab00428b4667/html5/thumbnails/19.jpg)
Spacing Between Letters
TEACH Optical spacing
T E A C H Mechanical spacing
![Page 20: Chapter 3: Visual Design: Principles and Applications](https://reader034.fdocuments.in/reader034/viewer/2022042908/58ed59bc1a28ab00428b4667/html5/thumbnails/20.jpg)
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
![Page 21: Chapter 3: Visual Design: Principles and Applications](https://reader034.fdocuments.in/reader034/viewer/2022042908/58ed59bc1a28ab00428b4667/html5/thumbnails/21.jpg)
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
![Page 22: Chapter 3: Visual Design: Principles and Applications](https://reader034.fdocuments.in/reader034/viewer/2022042908/58ed59bc1a28ab00428b4667/html5/thumbnails/22.jpg)
ELEMENT OF APPEAL
INTERACTION
TEXTURE
SURPRISE
![Page 23: Chapter 3: Visual Design: Principles and Applications](https://reader034.fdocuments.in/reader034/viewer/2022042908/58ed59bc1a28ab00428b4667/html5/thumbnails/23.jpg)
SURPRISE
![Page 24: Chapter 3: Visual Design: Principles and Applications](https://reader034.fdocuments.in/reader034/viewer/2022042908/58ed59bc1a28ab00428b4667/html5/thumbnails/24.jpg)
Texture
2D 3D
![Page 25: Chapter 3: Visual Design: Principles and Applications](https://reader034.fdocuments.in/reader034/viewer/2022042908/58ed59bc1a28ab00428b4667/html5/thumbnails/25.jpg)
Interaction
![Page 26: Chapter 3: Visual Design: Principles and Applications](https://reader034.fdocuments.in/reader034/viewer/2022042908/58ed59bc1a28ab00428b4667/html5/thumbnails/26.jpg)
PATTERNAlignment of Elements
Shape
Balance
Colour Scheme
Style
Colour Appeal
![Page 27: Chapter 3: Visual Design: Principles and Applications](https://reader034.fdocuments.in/reader034/viewer/2022042908/58ed59bc1a28ab00428b4667/html5/thumbnails/27.jpg)
Alignment of Elements
![Page 28: Chapter 3: Visual Design: Principles and Applications](https://reader034.fdocuments.in/reader034/viewer/2022042908/58ed59bc1a28ab00428b4667/html5/thumbnails/28.jpg)
Circle
Triangle
Rectangle
Shape of
letters
Shape
![Page 29: Chapter 3: Visual Design: Principles and Applications](https://reader034.fdocuments.in/reader034/viewer/2022042908/58ed59bc1a28ab00428b4667/html5/thumbnails/29.jpg)
Formal Balance
![Page 30: Chapter 3: Visual Design: Principles and Applications](https://reader034.fdocuments.in/reader034/viewer/2022042908/58ed59bc1a28ab00428b4667/html5/thumbnails/30.jpg)
Informal Balance
TYPES OF CLOUDS
![Page 31: Chapter 3: Visual Design: Principles and Applications](https://reader034.fdocuments.in/reader034/viewer/2022042908/58ed59bc1a28ab00428b4667/html5/thumbnails/31.jpg)
Imbalance
![Page 32: Chapter 3: Visual Design: Principles and Applications](https://reader034.fdocuments.in/reader034/viewer/2022042908/58ed59bc1a28ab00428b4667/html5/thumbnails/32.jpg)
STYLE
![Page 33: Chapter 3: Visual Design: Principles and Applications](https://reader034.fdocuments.in/reader034/viewer/2022042908/58ed59bc1a28ab00428b4667/html5/thumbnails/33.jpg)
STYLE
![Page 34: Chapter 3: Visual Design: Principles and Applications](https://reader034.fdocuments.in/reader034/viewer/2022042908/58ed59bc1a28ab00428b4667/html5/thumbnails/34.jpg)
STYLE
![Page 35: Chapter 3: Visual Design: Principles and Applications](https://reader034.fdocuments.in/reader034/viewer/2022042908/58ed59bc1a28ab00428b4667/html5/thumbnails/35.jpg)
COLOR WHEEL
Colour Scheme
![Page 36: Chapter 3: Visual Design: Principles and Applications](https://reader034.fdocuments.in/reader034/viewer/2022042908/58ed59bc1a28ab00428b4667/html5/thumbnails/36.jpg)
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
![Page 37: Chapter 3: Visual Design: Principles and Applications](https://reader034.fdocuments.in/reader034/viewer/2022042908/58ed59bc1a28ab00428b4667/html5/thumbnails/37.jpg)
ARRANGEMENT
CONSISTENCY
DIRECTIONALS
PROXIMITY
CLICK HERE
CLICK HERE
CLICK HERE
![Page 38: Chapter 3: Visual Design: Principles and Applications](https://reader034.fdocuments.in/reader034/viewer/2022042908/58ed59bc1a28ab00428b4667/html5/thumbnails/38.jpg)
The Principle of Proximity
CLICK HERE
![Page 39: Chapter 3: Visual Design: Principles and Applications](https://reader034.fdocuments.in/reader034/viewer/2022042908/58ed59bc1a28ab00428b4667/html5/thumbnails/39.jpg)
Directionals
CLICK HERE
![Page 40: Chapter 3: Visual Design: Principles and Applications](https://reader034.fdocuments.in/reader034/viewer/2022042908/58ed59bc1a28ab00428b4667/html5/thumbnails/40.jpg)
VISUAL DESIGN ISSUES IN COMPUTER-BASED
PRESENTATIONS
![Page 41: Chapter 3: Visual Design: Principles and Applications](https://reader034.fdocuments.in/reader034/viewer/2022042908/58ed59bc1a28ab00428b4667/html5/thumbnails/41.jpg)
TEXT CONSIDERATIONS
VISUAL EFFECTS
BASIC GUIDELINES FOR COMPUTER-BASED PRESENTATIONS
![Page 42: Chapter 3: Visual Design: Principles and Applications](https://reader034.fdocuments.in/reader034/viewer/2022042908/58ed59bc1a28ab00428b4667/html5/thumbnails/42.jpg)
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
![Page 43: Chapter 3: Visual Design: Principles and Applications](https://reader034.fdocuments.in/reader034/viewer/2022042908/58ed59bc1a28ab00428b4667/html5/thumbnails/43.jpg)
![Page 44: Chapter 3: Visual Design: Principles and Applications](https://reader034.fdocuments.in/reader034/viewer/2022042908/58ed59bc1a28ab00428b4667/html5/thumbnails/44.jpg)
Visual Effects
Text and graphic animations
Transitional effects
Use of ColourCLICK HERE
CLICK HERE
![Page 45: Chapter 3: Visual Design: Principles and Applications](https://reader034.fdocuments.in/reader034/viewer/2022042908/58ed59bc1a28ab00428b4667/html5/thumbnails/45.jpg)
Getting attention
Focusing on a
certain area
Stimulating curiosity
Providing clear
feedback
Explaining abstract concepts
USESCLICK HERE
![Page 46: Chapter 3: Visual Design: Principles and Applications](https://reader034.fdocuments.in/reader034/viewer/2022042908/58ed59bc1a28ab00428b4667/html5/thumbnails/46.jpg)
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,
![Page 47: Chapter 3: Visual Design: Principles and Applications](https://reader034.fdocuments.in/reader034/viewer/2022042908/58ed59bc1a28ab00428b4667/html5/thumbnails/47.jpg)
BOX IN
TRANSITIONAL EFFECTS
![Page 48: Chapter 3: Visual Design: Principles and Applications](https://reader034.fdocuments.in/reader034/viewer/2022042908/58ed59bc1a28ab00428b4667/html5/thumbnails/48.jpg)
BOX OUT
![Page 49: Chapter 3: Visual Design: Principles and Applications](https://reader034.fdocuments.in/reader034/viewer/2022042908/58ed59bc1a28ab00428b4667/html5/thumbnails/49.jpg)
WIPE LEFT
![Page 50: Chapter 3: Visual Design: Principles and Applications](https://reader034.fdocuments.in/reader034/viewer/2022042908/58ed59bc1a28ab00428b4667/html5/thumbnails/50.jpg)
WIPE RIGHT
![Page 51: Chapter 3: Visual Design: Principles and Applications](https://reader034.fdocuments.in/reader034/viewer/2022042908/58ed59bc1a28ab00428b4667/html5/thumbnails/51.jpg)
BASIC GUIDELINES FOR COMPUTER-BASED
PRESENTATIONS
![Page 52: Chapter 3: Visual Design: Principles and Applications](https://reader034.fdocuments.in/reader034/viewer/2022042908/58ed59bc1a28ab00428b4667/html5/thumbnails/52.jpg)
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.
![Page 53: Chapter 3: Visual Design: Principles and Applications](https://reader034.fdocuments.in/reader034/viewer/2022042908/58ed59bc1a28ab00428b4667/html5/thumbnails/53.jpg)
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.
![Page 54: Chapter 3: Visual Design: Principles and Applications](https://reader034.fdocuments.in/reader034/viewer/2022042908/58ed59bc1a28ab00428b4667/html5/thumbnails/54.jpg)
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.
![Page 55: Chapter 3: Visual Design: Principles and Applications](https://reader034.fdocuments.in/reader034/viewer/2022042908/58ed59bc1a28ab00428b4667/html5/thumbnails/55.jpg)
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.
![Page 56: Chapter 3: Visual Design: Principles and Applications](https://reader034.fdocuments.in/reader034/viewer/2022042908/58ed59bc1a28ab00428b4667/html5/thumbnails/56.jpg)
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.
![Page 57: Chapter 3: Visual Design: Principles and Applications](https://reader034.fdocuments.in/reader034/viewer/2022042908/58ed59bc1a28ab00428b4667/html5/thumbnails/57.jpg)
END