Visual Communication—OWL
-
Upload
charles-coursey -
Category
Education
-
view
118 -
download
0
description
Transcript of Visual Communication—OWL
![Page 1: Visual Communication—OWL](https://reader034.fdocuments.us/reader034/viewer/2022042613/54c83fc44a7959925f8b45d1/html5/thumbnails/1.jpg)
Visual Rhetoric forStudent Writers
Purdue Writing Lab
![Page 2: Visual Communication—OWL](https://reader034.fdocuments.us/reader034/viewer/2022042613/54c83fc44a7959925f8b45d1/html5/thumbnails/2.jpg)
Overview
• This presentation will cover– Definition(s) of visual rhetoric– Why visual rhetoric is important today– Visual rhetoric and
• Text• Color• Graphics• Overall design
![Page 3: Visual Communication—OWL](https://reader034.fdocuments.us/reader034/viewer/2022042613/54c83fc44a7959925f8b45d1/html5/thumbnails/3.jpg)
What is Visual Rhetoric?
• Definitions and applications– Use of images as argument
– Arrangement of elements on a page
– Use of typography (fonts, etc.)
– Analysis of existing images and visuals
![Page 4: Visual Communication—OWL](https://reader034.fdocuments.us/reader034/viewer/2022042613/54c83fc44a7959925f8b45d1/html5/thumbnails/4.jpg)
What is Visual Rhetoric?
![Page 5: Visual Communication—OWL](https://reader034.fdocuments.us/reader034/viewer/2022042613/54c83fc44a7959925f8b45d1/html5/thumbnails/5.jpg)
Why is Visual Rhetoric Important?
• We use visual thinking as a major part of our cognition (thinking process)
• We live in a visually dominated world, so…
• We must be able to read, dissect, and produce effective visuals
![Page 6: Visual Communication—OWL](https://reader034.fdocuments.us/reader034/viewer/2022042613/54c83fc44a7959925f8b45d1/html5/thumbnails/6.jpg)
Why is Visual Rhetoric Important?
“Visual thinking pervades all human activity,
from the abstract and the theoretical to the
down-to-earth and everyday…”
Robert McKim, Experiences in Visual Thinking, 1980
![Page 7: Visual Communication—OWL](https://reader034.fdocuments.us/reader034/viewer/2022042613/54c83fc44a7959925f8b45d1/html5/thumbnails/7.jpg)
Visual Rhetoric and…
• Text elements– How type functions and choosing fonts– Headline versus body text– Text and the Web
• Color• Visuals and graphics
– Clip art– Illustrations and diagrams– Graphs– Photographs and manipulated images
• Overall design
![Page 8: Visual Communication—OWL](https://reader034.fdocuments.us/reader034/viewer/2022042613/54c83fc44a7959925f8b45d1/html5/thumbnails/8.jpg)
How Type Functions
• “Personalities” of type
– Formal and informal fonts
– Consequences and font choices• Consider effect of font choice
• Personality and appropriateness
![Page 9: Visual Communication—OWL](https://reader034.fdocuments.us/reader034/viewer/2022042613/54c83fc44a7959925f8b45d1/html5/thumbnails/9.jpg)
Font Personalities Example
![Page 10: Visual Communication—OWL](https://reader034.fdocuments.us/reader034/viewer/2022042613/54c83fc44a7959925f8b45d1/html5/thumbnails/10.jpg)
Choosing Appropriate Fonts
• Font choice will build or harm ethos (author’s credibility)
–Context and purpose of document is
important
–Cultural and visual associations of fonts should fit document
![Page 11: Visual Communication—OWL](https://reader034.fdocuments.us/reader034/viewer/2022042613/54c83fc44a7959925f8b45d1/html5/thumbnails/11.jpg)
Font Choice Example 1
![Page 12: Visual Communication—OWL](https://reader034.fdocuments.us/reader034/viewer/2022042613/54c83fc44a7959925f8b45d1/html5/thumbnails/12.jpg)
Font Choice Example 2
![Page 13: Visual Communication—OWL](https://reader034.fdocuments.us/reader034/viewer/2022042613/54c83fc44a7959925f8b45d1/html5/thumbnails/13.jpg)
Headline Versus Body Text
• How text functions
–Type of text dictates font choice
• Emphasis and attention
• Information
–Sustained readability
![Page 14: Visual Communication—OWL](https://reader034.fdocuments.us/reader034/viewer/2022042613/54c83fc44a7959925f8b45d1/html5/thumbnails/14.jpg)
Headline & Body Text Example
![Page 15: Visual Communication—OWL](https://reader034.fdocuments.us/reader034/viewer/2022042613/54c83fc44a7959925f8b45d1/html5/thumbnails/15.jpg)
Text and the Web
• Differences between print and the
Web
– Accommodating users and browsers
– HTML standard fonts
– Screen readability
![Page 16: Visual Communication—OWL](https://reader034.fdocuments.us/reader034/viewer/2022042613/54c83fc44a7959925f8b45d1/html5/thumbnails/16.jpg)
Color and Contrast
• Most basic and critical choice
–Black text on white background
shows high contrast and is most
common
–White text on black background is
not ideal
![Page 17: Visual Communication—OWL](https://reader034.fdocuments.us/reader034/viewer/2022042613/54c83fc44a7959925f8b45d1/html5/thumbnails/17.jpg)
Font Contrast Example
![Page 18: Visual Communication—OWL](https://reader034.fdocuments.us/reader034/viewer/2022042613/54c83fc44a7959925f8b45d1/html5/thumbnails/18.jpg)
Computer Screens and Color
• Pixels and colors on screen
–RGB values
–Color saturation
• Cultural associations of color
![Page 19: Visual Communication—OWL](https://reader034.fdocuments.us/reader034/viewer/2022042613/54c83fc44a7959925f8b45d1/html5/thumbnails/19.jpg)
More Color Examples
![Page 20: Visual Communication—OWL](https://reader034.fdocuments.us/reader034/viewer/2022042613/54c83fc44a7959925f8b45d1/html5/thumbnails/20.jpg)
Clip Art
• Using packaged clip art–Avoid the “cartoony” effect
–Choose clip art that truly fits the purpose of the document
–Match design schemes
• Consider creating images
![Page 21: Visual Communication—OWL](https://reader034.fdocuments.us/reader034/viewer/2022042613/54c83fc44a7959925f8b45d1/html5/thumbnails/21.jpg)
Clip Art Examples
![Page 22: Visual Communication—OWL](https://reader034.fdocuments.us/reader034/viewer/2022042613/54c83fc44a7959925f8b45d1/html5/thumbnails/22.jpg)
Illustrations and Diagrams
• Purpose to inform– Conveys specific information– Relates to content in document– More than an accent
• Striving for clarity– Avoid clutter– Choose selective pictures of reality– Break up large amounts of information
![Page 23: Visual Communication—OWL](https://reader034.fdocuments.us/reader034/viewer/2022042613/54c83fc44a7959925f8b45d1/html5/thumbnails/23.jpg)
Graphs
• Choosing how to represent quantitative information
– Pie charts and showing parts of a whole
– Bar graphs and numeric comparisons
– Line graphs and plotting changes
![Page 24: Visual Communication—OWL](https://reader034.fdocuments.us/reader034/viewer/2022042613/54c83fc44a7959925f8b45d1/html5/thumbnails/24.jpg)
Photographs
• Found images versus captured photographs
–Copyright–Composition and quality
• Achieving effects with photos
![Page 25: Visual Communication—OWL](https://reader034.fdocuments.us/reader034/viewer/2022042613/54c83fc44a7959925f8b45d1/html5/thumbnails/25.jpg)
Photo Examples
![Page 26: Visual Communication—OWL](https://reader034.fdocuments.us/reader034/viewer/2022042613/54c83fc44a7959925f8b45d1/html5/thumbnails/26.jpg)
Overall Design
• Creating paths for the eye– Striking, eye-catching elements– Finding information easily
• Design as rhetorical organization
• Consistency in design– Avoid “kitchen-sink syndrome”– Pitfalls of pre-fab templates
![Page 27: Visual Communication—OWL](https://reader034.fdocuments.us/reader034/viewer/2022042613/54c83fc44a7959925f8b45d1/html5/thumbnails/27.jpg)
Stepping Back
• Is your design clarifying your information?
• Is your design unique enough to make it stand out?
• Is your design readable from its intended distance?
• Have you checked for typos and errors?
• When designing for the Web, have you checked your design on different computers and in different browsers?
![Page 28: Visual Communication—OWL](https://reader034.fdocuments.us/reader034/viewer/2022042613/54c83fc44a7959925f8b45d1/html5/thumbnails/28.jpg)
Additional Resources
• The Non-Designer’s Design Book and The Non-Designer’s Web Book, both by Robin Williams
• Color Index by Jim Krause
• Idea Index by Jim Krause
• What is Graphic Design? by Quentin Newark
![Page 29: Visual Communication—OWL](https://reader034.fdocuments.us/reader034/viewer/2022042613/54c83fc44a7959925f8b45d1/html5/thumbnails/29.jpg)
For More Assistance
The Writing Lab at Purdue
226 Heavilon Hall
765-494-3723
OWL: http://owl.english.purdue.edu
![Page 30: Visual Communication—OWL](https://reader034.fdocuments.us/reader034/viewer/2022042613/54c83fc44a7959925f8b45d1/html5/thumbnails/30.jpg)
The End