2. Overview
2
Main Points:
• Definition(s) of visual rhetoric
• Why visual rhetoric is important today
• Visual rhetoric and
• Text
• Color
• Graphics
• Overall design
3. What is Visual Rhetoric?
3
Visual Rhetoric includes:
• The use of images as an argument;
• The arrangement of elements on a page;
• The use of typography (fonts, etc.); and
• The analysis of existing images and visuals.
4. What is Visual Literacy?
4
Visual Literacy
Visual Thinking Visual Learning Visual
Communication
Metaphoric
Thinking
Visualization
Source of
Imagery
Right Brain/
Left Brain
Mental Nodes
Design of
Materials
Read Pictures
Research on
Learning
Art
Media
Visual Rhetoric
Aesthetics
5. Why is Visual Rhetoric
Important?
5
Visual Rhetoric matters because…
• 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.
6. Visual Rhetoric and…
6
Text elements
• How type functions and choosing appropriate 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
7. How Type Functions
7
Type has different “Personalities”:
• There are formal and informal fonts
• The consequences of font choices:
• Consider the effect of each font
• What is the selected font’s personality
and appropriateness?
9. Choosing Appropriate
Fonts
9
Your font choice can either build or harm your ethos
(credibility) as an author.
The context and purpose of the document is
important.
The cultural and visual associations of the fonts
should fit the purpose of the document.
12. Headline versus Body
Text
12
How text functions:
• Type of text dictates font choice:
• Emphasis and attention
• Information
• Sustained readability
14. Text and the Web
There are text and type differences between print and the
Web.
When choosing type for the Web, consider:
• Accommodating users and browsers;
• HTML standard fonts; and
• Screen readability.
15. Color and Contrast
15
Color is the most basic and most critical
choice you, as an author, can make:
• Black text on white background shows high
contrast and is the most common choice.
• White text on a black background , however, is not
ideal.
18. More Color Examples
18
• Pixels and colors are different on
screen than in print
• RGB values
• Color saturation
• Cultural associations of color
19. Clip Art
19
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 instead!
21. Illustrations and
Diagrams
21
Visuals to inform:
• Convey specific information
• Relate to content in the document
• Are more than an accent
Striving for visual clarity:
• Avoid clutter
• Choose selective pictures of reality
• Break up large amounts of information
22. Graphs
22
Choosing how to represent quantitative
information:
•Pie charts – showing parts of a whole
•Bar graphs – numeric comparisons
•Line graphs – plotting changes
23. Photographs
23
Found images vs. captured photographs
Considerations:
• Copyright
• Composition and quality
• Achieving effects with photos
25. Overall Design
25
Design Considerations:
1. Creating paths for the eye:
• Striking, eye-catching elements.
• Finding information easily.
2. Design as rhetorical organization
3. Consistency in design:
• Avoid “kitchen-sink syndrome.”
• Pitfalls of pre-fab templates.
26. Stepping Back
26
To evaluate your design, ask yourself:
• 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?
27. Additional Resources
27
The Non-Designer’s Design Book and The Non-Designer’s Web Book by Robin
Williams
Color Index and Idea Index by Jim Krause
What is Graphic Design? by Quentin Newark
28. THANK YOU
Purdue University On-Campus Writing Lab
Krach Leadership Center (2nd
Floor)
Web: http://owl.english.purdue.edu/
Phone: (765) 494-3723
Email: owl@owl.english.purdue.edu
28
#2:This slide overviews the content of this workshop.
Click mouse to advance slide.
#3:You may or may not know that visual rhetoric is a buzzword that has been used to refer to anything from the use of images as argument, the arrangements of elements on a page, or the use of typography. Sometimes, visual rhetoric is used to describe the analysis of existing images and visuals.
This particular workshop cannot cover each of these areas in-depth. However, the workshop will cover some common visual rhetoric problems encountered by student writers and how you can improve your knowledge of visual rhetoric to create multimedia and visual-based projects. <ADVANCE TO NEXT SLIDE.>
#4:The term visual rhetoric falls under an umbrella term known as visual literacy, which is generally split into three categories: visual thinking, visual learning, visual rhetoric/communication (though clearly visual thinking and visual learning must occur in order to communicate visually). The diagram on this slide illustrates these ideas. The graphic is modified from Sandra Moriarty's diagram in her essay, "A Conceptual Map of Visual Communication" and from "Teaching Visual Literacy and Document Design in First-Year Composition" (MA Thesis) by Allen Brizee. This diagram illustrates the strong connection between the use of visuals and cognitive processes of the brain during communication and learning.
<Click mouse to advance slides.>
#5:Since visual thinking is a major part of our cognitive process, and since our world is dominated by visuals in communication, authors must be able to analyze and produce documents using visual rhetoric.
<Click mouse to advance slides.>
#6:This workshop will specifically cover the use of
Text elements—such as fonts and typography
Color
Visuals and graphics—including illustrations, clip art, charts, and photographs
Finally, we will briefly introduce the overall design of visual-based and multimedia projects.
It’s important for writers and designers to consider each of these elements rhetorically and make appropriate choices based on the audience and purpose of the project. The ultimate goal is to build one’s ethos, or credibility. We’ll be referring to audience, purpose, and ethos throughout this workshop.
<ADVANCE TO NEXT SLIDE>
#7:Text is so highly visual that its visual nature and power are often overlooked. However, it is important that designers understand how type functions and what it does before making decisions about the use of a particular font.
Each typeface has a personality, whether it is formal or informal, and each can achieve a particular effect. It’s important to remember that not all fonts are appropriate for every situation simply by the nature of their personality.
<ADVANCE TO NEXT SLIDE>
#8:In this example, you can look at the font choice and focus on the font without being distracted by the meaning of the text.
We can see different personalities, and levels of formality emerging simply with these four choices.
Font number 1 and number 4 are san-serif fonts, meaning they are plain and do not have any decorations or finishing strokes on the letters.
Fonts 2 and 3 are serif fonts, meaning that they are more decorative and have additional strokes, or feet, on the letters.
Consider the personalities of each of these fonts and the situations in which they would be appropriate. Serif fonts tend to be more formal while san-serif fonts are less formal. In a few minutes, we’ll look at examples of when these fonts would be appropriate or not.
<ADVANCE TO NEXT SLIDE>
#9:So, it’s important to choose a font according to rhetorical situations and not simply because a font looks “cool” or “pretty.”
Designers should think about the context of the publication or project, as well as the purpose behind the project and which fonts will improve the ethos of the publication.
Furthermore, designers must consider the cultural and visual associations of a particular font faces and choose fonts that are appropriate for the document. Not all fonts will fit the document because the document might have one purpose, and an improper font choice may distract from or contradict the document’s intent.
<ADVANCE TO NEXT SLIDE>
#10:The example shown here lists 4 separate phrases in the same fonts as in the example you saw earlier. Instead of only seeing the font, you can consider the choice of font in context with the message being conveyed.
The first two phrases—”Operating Instruction” and “Dear Mrs. Smith” do not, at first glance, appear to have any cultural associations. This is intentional as the fonts are nondescript and commonly used.
However, in looking at “Medieval History,” you will notice that the font looks like our cultural conception of Medieval script. The font choice for “Bigfoot Captured!” fits what we are used to seeing on Supermarket tabloids. It’s loud and bold, indicating an announcement of incredible news.
Look through magazines, at billboard advertisements, and other documents to see how fonts are used and to get a feel for cultural associations of various fonts.
<ADVANCE TO NEXT SLIDE>
#11:This next example on the right shows the same fonts but different phrases, and cultural associations are ignored. The font choices may not be most appropriate considering the context of the phrases.
For example, “In deepest sympathy” may seem cold and impersonal if the phrase, in this particular typeface, were on the front of a sympathy card.
The font choice for “Lafayette Teen Center” may be appropriate in some contexts, unless the context is a promotional publication aimed at teens. It doesn’t work to grab attention or evoke excitement, whereas a different font, one more “youthful” in appearance, would work best.
The font choices for “Chemistry Lab Report” and “Museum of Natural History” are also inappropriate given their cultural associations.
<HERE, THE FACILITATOR CAN ASK THE PARTICIPANTS WHY THE LAST TWO FONT CHOICES DO NOT WORK.> <ADVANCE TO NEXT SLIDE>
#12:So, it’s important to choose a font according to rhetorical situations and not simply because a font looks “cool” or “pretty.”
Designers should think about the context of the publication or project, as well as the purpose behind the project and which fonts will improve the ethos of the publication.
Furthermore, designers must consider the cultural and visual associations of a particular font faces and choose fonts that are appropriate for the document. Not all fonts will fit the document because the document might have one purpose, and an improper font choice may distract from or contradict the document’s intent.
<ADVANCE TO NEXT SLIDE>
#13:The example on top shows a script font in what appears to be a title, or headline—”Lunch Menu.” The font choice seems appropriate. It’s eye catching, evokes a sense of formality, and the font is isolated to that one phrase.
What happens when that font extends to other text, as in the example on the bottom? Sustained readability becomes an issue, and it’s virtually impossible for anyone to read pages and pages of text in this font without getting eyestrain. Fonts like Times New Roman or Arial are more appropriate choices for body text because they are comfortable to read.
<ADVANCE TO NEXT SLIDE>
#14:When using text on the Web, it is important to know how the Web differs from print. First of all, fonts are handled differently between the two. Print and print-based documents are static, and when designers create and print a document, there are no surprises with appearance. Readers will see the document as it was designed. On the Web, however, browser configurations can impact how a user will see—or not see—a text. Designers must take into account that different users have different configurations and accommodate various users. Not all font faces are visible in every browser, and screen size, as well as resolution, can alter the appearance of text on the Web. In some cases, the alignment of the text is seriously affected or users will see a string of boxes and nonsense characters.
It’s best to stick with HTML standard fonts such as Times New Roman, Arial, Verdana, and so forth. You can also specify, more generically, “San Serif” or “Serif,” allowing the Web document to be seen with a common font on the user’s machine.
Finally is the issue of screen readability. While some fonts look great on print, those same fonts may look horrible on screen. Fonts that resemble handwritten script are difficult to read, regardless of user compatibility or not. Be sure to view your Web text in more than one browser and on more than one screen.
<ADVANCE TO NEXT SLIDE>
#15:This workshop will only cover some basic ideas about color, but keep in mind that there are a wealth of resources about color in books and on the Web, some of which cover theoretical perspectives. For this workshop, we will devote our primary consideration to contrast.
Contrast deals with the brightness of one color in relation to another color, and it is one of the most basic and critical choices a designer makes about color. The most extreme example of contrast occurs on the printed page with black text and white paper. The contrast between black text and white paper increases legibility, making it the most commonly used combination.
<ADVANCE TO NEXT SLIDE>
#16:Reversing the color scheme to white text on a black background may pose some problems when designing for the screen. On some monitors, white can be almost blinding or may not be as visually appealing. It may be best to stick with conservative choices when designing for the screen.
One example is to run black text over a neutral, light color like beige or mint green.
<ADVANCE TO NEXT SLIDE>
#17:Let’s look at a few examples to illustrate what we’ve covered with regard to color.
The first example shows a bright red background and deep blue text. The contrast is low, making the text difficult to read. Also, if you remember that pixels each contain an RGB value, you’ll see that the red element of the red areas of the screen is full on. The blue element of the blue areas is full on. The result is a black hole on the left and a glow on the right. Remember, too, the cultural associations of the bright red.
The second example uses a darker red color for a background and a desaturated blue color. There’s higher contrast, and the text is easier to read. Also, this darker red does not have the same cultural associations of the first example.
<ADVANCE TO NEXT SLIDE>
#18:Computer screens are made up of pixels, which are tiny boxes of light. Each pixel contains a red element, a green element, and a blue element, also known as RGB. The combination of colors that a designer uses may not always look best on screen because of RGB values. We’ll look at a few examples in a moment to illustrate this idea.
Designers must consider the difference between saturated versus muted colors when choosing color combinations. Saturation is how much color there is. Think back to when you were a child and played with watercolors. When you really scrubbed your brush in the paint, you picked up more color, producing a full, saturated color when the brush hit the paper. On the opposite end, if you watered down the brush and picked up very little paint, the result was more faint.
Finally, designers should also think about cultural associations of various colors. For example, red is culturally-coded to jar us. It can represent danger, excitement, revolution, etc. Think about where red is used—red lights, stop signs, flags, warning labels and during bullfights. Red is not always the best choice because of these associations, so it is important to think about what a particular color represents and choose accordingly.
<ADVANCE TO NEXT SLIDE>
#19:Visuals, whether they be illustrations or charts and graphs, can either make or break your credibility. It’s very important to consider how the use of a visual will effect your ethos and impact whether an audience will take you seriously.
This especially applies to the use of packaged clip art. Very little clip art looks good or has any type of sophistication, especially commercially package clip art that comes with common software programs. Clip art is often cartoony or silly, or abstract and general to the point of being useless. Also, designers using clip art are restricted to the color scheme used in the clip art. There is no room for image manipulation, so designers are stuck with something that is often stylized and something that may totally clash with the color scheme and design of a document.
When possible, consider creating your own images, because you can design an image that fits the design scheme and purpose of your document.
<ADVANCE TO NEXT SLIDE>
#20:When choosing visuals think about the extra information that is being conveyed. For example, the piece of clipart on the left may seem like a great choice for advertising a pipe and cigar shop. However, there are so many elements that surround the main focus, which is the pipe. This piece of clip art has a cartoony look with the outmoded fashions (which may be fine if the design is striving for an antique/nostalgic look). Also, if your design scheme uses deep reds and yellows, for example, this clip art will clash.
Many beginning designers will choose this piece of clip art because of the pipe. If the pipe is what’s important, seek out a piece of clip art that focuses just on the pipe, such as the example on the right. This example may contextually be a better image than the first example; however, it still may not fit with the overall design scheme.
<ADVANCE TO NEXT SLIDE>
#21:Illustrations and diagrams can either enhance or ruin a design. But unlike clip art, which is usually meant as an accent, illustrations and diagrams serve a central purpose to inform. They should convey specific information that relates to the overall information in a document.
As a result, designers should strive for clarity in illustrations and diagrams and avoid the clutter of too much information. For example, a map of the United States does not include representations of every office building, house, or grocery store between New York City and Los Angeles. It does, however, have selective pictures of reality, so that users can focus on what is most important in the map—the roads. It is also important to break up large amounts of complex information into manageable pieces, and designers can break up the information visually or spatially. For example, a road atlas of the United States is in book format, where every state gets its own page. It would be impractical, difficult to use, and hard to read if the atlas was simply a gigantic map of the entire country.
<ADVANCE TO NEXT SLIDE>
#22:It’s becoming easier for designers to create graphs to represent information, especially because programs like Microsoft Excel enable designers to create different types of graphs and control color or scale.
Not all graphs are alike, and designers must choose how to represent qualitative information based on the type of data and the purpose of the graph.
For example, pie charts are a common, easy to generate graph. However, they are only helpful in showing parts of a whole, so if your figures are not in percentages, pie charts will not be an appropriate representation of your data. If you want to demonstrate changes over time, a single pie chart will be useless. You may have to use several pie charts.
Bar graphs are helpful for comparisons between different numeric variables, even over time.
Finally, designers have the option of using line graphs, especially for plotting changes in one variable over time. Line graphs are especially helpful when working with small time segments, and when multiple colors are used, several variables can be plotted. It’s important to remember that using too many lines and plotting too many variables can be confusing to a reader. A bar graph might be a better choice in this situation.
<ADVANCE TO NEXT SLIDE>
#23:Photographs have always been a popular design choice, and it’s even easier to incorporate photographs because of the availability of digital cameras, scanners, and other imaging devices.
Nevertheless, many beginning designers still choose to find images on the Web rather than capture their own images. One concern when using found images is the issue of copyright. Second and most important from a design standpoint is the issue of composition and quality. Again, the issue of ethos comes up, and designers want to use images with the best quality and clarity. Otherwise, when the image is reproduced on screen or paper, it may appear fuzzy or grainy, which takes away from the overall design of the project.
Another key consideration when using found images is the appropriateness of the image to the overall design and content of the project. As with clip art, it is easy to find a photograph that may highlight a particular theme or idea. Depending upon the composition and subject matter of the photo, however, it may or may not fit with your overall design. Therefore, it is best to capture your own image when possible.
Finally, designers should think about the effects they are achieving with photographs. When using a captured or found image, it is important to consider what the image conveys and whether the photo includes anything inappropriate or unnecessary. Designers can manipulate an image—cropping it to exclude certain parts, removing clutter, adding filters, even manipulating the color—all to achieve a certain effect and to emphasize the subject matter of the photograph.
<ADVANCE TO NEXT SLIDE>
#24:In the first example, you can see a picture of the Lafayette skyline with some clutter—in this case, street lights.
The second image has been manipulated to remove the distracting streetlight, giving a clean effect and a more direct view of the courthouse.
When manipulating pictures, however, one must ask where the line exists between an accurate portrayal of reality and an aesthetic representation of it. Designers must think, too, how their ethos is affected by manipulated images.
<ADVANCE TO NEXT SLIDE>
#25:Each of the visual factors we’ve discussed—text elements, colors, and images—is a mammoth concern on its own. However, designers rarely only worry about one of these factors. In visual design, it’s important to consider all of these factors and how they all come together. Creating visual and multimedia projects is similar to writing a traditional essay or research paper. The complete product does not exist perfectly in a designer’s mind. Instead, the best ideas come from a designer’s interaction with those ideas on paper, in a word processor, or in a design program. Sometimes what seems like a great idea isn’t when a designer actually implements it and sees the result. There are some basic guides, however, that will help you realize your visual design ideas.
The first is creating paths for the eye. For example, you are creating a poster for a club call-out at Purdue. With the sea of posters on campus, you must think about an eye-catching design, either with a striking image or a small amount of text in large font. Certainly, you can generate the poster with this design idea, keeping in mind the issues of font choice and image quality.
However, if the rhetorical purpose of the poster is to inform students about the particulars of the callout meeting, you must also consider how the information is arranged on the poster. You don’t want all the text for the meeting details to be lumped onto the page. Instead, you must create a path for the eye to follow, aligning the text so that your audience can easily pick out and find the information quickly. This leads us to the idea of design as rhetorical organization. As you highlight the most important information and create paths for the eye to follow, you also are organizing the information in a way that makes sense, in the same way you would organize sentences and paragraphs.
Finally, it’s important to be consistent in your design. With the endless possibilities for font and color choices, it’s easy to get carried away and try to incorporate many different styles and choices. Rather than including everything plus the kitchen sink, work towards consistency in your design, making good, rhetorical decisions about fonts, colors, and images.
It’s easy, also, to simply choose a pre-fabricated template in, say, Microsoft Word or Dreamweaver, when generating flyers or web pages. One thing to remember is that everyone has seen these templates, and many choose to use them. Using a template may be easy, but not only does your design lack originality, your ethos can be destroyed completely. On a positive note, templates can be useful, and you can create your own templates. Many programs have special files for creating templates, or you can easily create a file and save it as a template.
It’s also important to remember that consistency does not mean uniformity. However, the use of a color scheme, a graphic, some header text, or even a visual style in your typography can serve to remind an audience whose page they’re reading. In corporate speak, this is known as branding.
<ADVANCE TO NEXT SLIDE>
#26:As designers, you have carefully thought about your font choices, your colors, your artwork and images, and, of course, your content. You’ve come up with what you believe to be an interesting, appropriate design. Now it’s time to step back from the work and view it as your intended audience would. Ask yourself the following questions:
Is your design clarifying your information or making it more confusing?
Is your design unique enough to make it stand out from a pile of resumes, a stack of brochures, a wall full of posters?
Is your design readable from its intended distance? Don’t print posters as though they were business cards and vice versa. Have you tried to read it from 10 feet away? 20 feet? 50?
Have you checked the spelling and mechanics on everything? Remember, it’s always some big, bold headline that has the typos!
Finally, when designing for the Web, how does it look on different browsers? On campus computers? On Aunt Martha’s 1988 pre-Pentium computer? How long do pages take to load?
It’s ALWAYS a good idea to get a second pair of eyes to critically examine your work. Remember that just as no one is born a brilliant, ready-for-press writer, design takes hard work and dedication.
<ADVANCE TO NEXT SLIDE>
#28:Purdue students in West Lafayette, IN may visit the On-Campus Writing Lab in Krach Leadership Center, 2nd Floor. Worldwide users may call the grammar hotline with short questions. Worldwide users may also visit the Purdue OWL to access a large library of writing resources.