Visual Communication—OWL

Editor's Notes

• #2: <HAVE THIS INITIAL SLIDE FULLY VISIBLE BEFORE STUDENTS BEGIN FILTERING INTO THE WORKSHOP SPACE.> Welcome to this workshop on Visual Rhetoric for Student Writers. This workshop is brought to you by the Writing Lab at Purdue. Your teachers may have recommended that you come to this workshop to learn strategies for designing multimedia and visual-based projects with more rhetorical understanding. But you may be asking, “What, exactly, is visual rhetoric?” <ADVANCE TO NEXT SLIDE.> Writers and Designers: Karl Stolley and Allen Brizee Developed with resources courtesy of the Purdue University Writing Lab © Copyright Purdue University, 2000, 2006, 2008
• #3: This slide overviews the content of this workshop. Click mouse to advance slide.
• #4: 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.>
• #5: 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.>
• #6: 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.>
• #7: Robert McKim noted the importance of visual thinking in our world in 1980 when he wrote Experiences in Visual Thinking. <Click mouse to advance slide.>
• #8: This workshop will specifically cover the use of text elements—such as fonts and typography color and 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>
• #9: 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>
• #10: 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>
• #11: 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>
• #12: 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>
• #13: 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>
• #14: In choosing appropriate fonts or typefaces, designers must also consider the function of the text, whether it is a headline or whether it is body text. The type of text influences which font may be appropriate. In addition, sustained readability is an issue to consider when choosing a font face. Not all fonts lend themselves to sustained reading. In other words, what may work for headline text may not work for body text because a person’s eyes cannot read a particular font face when it is smaller and when the text is longer, as with most body text. <ADVANCE TO NEXT SLIDE>
• #15: 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>
• #16: 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>
• #17: 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>
• #18: 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>
• #19: 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>
• #20: 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>
• #21: Visuals, whether they be illustrations or charts and graphs, can either make or break your credibility. It’s very important to consider how the usual 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>
• #22: When choosing visuals think about the extra information that is being conveyed. For example, this piece of clipart 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 left. 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>
• #23: 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>
• #24: 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>
• #25: 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>
• #26: 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>
• #27: 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>
• #28: 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>
• #29: Check the Purdue OWL for more resources on visual rhetoric. <Click mouse to advance slides.>
• #30: Or visit the Writing Lab in Heavilon Hall. <Click mouse to advance slides.>