3. INFORMATION DESIGN
3.4 Visual Rhetoric
Visual rhetoric is the use of visual design element to help you achieve a communication goal. Infographics, advertisements, websites, memes, menus, even graffiti are all obvious examples of media that use visual rhetoric to influence or persuade the viewer. Within technical writing, the use of images, colour schemes, typography, spacing, layout and composition help you to design compelling and persuasive messages in a variety of media, including documents, posters, web interfaces, and presentations.
We’ve discussed rhetoric in general in Ch. 2.2 Writing to persuade, and in Ch. 3 we’ve focused on designing information to ensure “readability” using headings, lists, figures and tables. Visual rhetoric builds on these ideas by focusing on how the visual elements of your message can contribute to its persuasiveness. Where effective visual design can make strong arguments even more compelling, poor visual design can confuse or irritate your reader, and potentially make ideas less persuasive or accessible.
Consider the three rhetorical appeals in terms of the visual impact your document might have on the reader:
| Rhetorical Appeal | Visual Rhetoric |
| Ethos | How can your document’s visual design help support your credibility as an author? Does it convey professionalism? Expertise? Authority? Attention to detail? Will it encourage your reader to trust you? |
| Pathos | How do you want your audience to feel when they see your visual design? Impressed? Shocked? Interested? Curious? Strategic use of images, colour, and fonts can impact your reader’s emotional response to what you’ve written |
| Logos | How can you strategically use visual tools like images, typography, colour, layout and composition to clearly convey your purpose, convey a hierarchy of ideas, and signal key ideas you want your reader to prioritize? |
CRAP Design Principles
C.R.A.P. is an acronym for a widely recognized set of design principles focusing on contrast, repetition, alignment, and proximity. These principles are applied in many visual design contexts from fine art to graphical user interfaces and document design.
CONTRAST: use contrast to create visual interest and focus attention. Strategic use of contrasting font sizes and styles can help organize information logically, allow readers to scan effectively, and make certain ideas stand out. For example, headings are larger and bolder than body text to help create orientation markers for the reader. Caption text is often smaller to distinguish it easily from body text. The labeled portion of a labeled list is bolded, italicized and/or capitalized to make the key words/ideas stand out (for example, this one uses BOLDED ALL CAPS for the labels). Overuse can make the document feel chaotic and out of balance.
REPETITION: repetition and consistency help to create visual coherence and flow in the document and can help establish your visual brand. Once you have established a design principle (heading and font styles, margins, spacing, layout, colour, etc), you should stick with it. Otherwise your document can appear amateurish and might confuse your reader.
ALIGNMENT: Every element in your design is visually connected. Alignment ensures that these connections help to establish structural order and coherence in your document. Alignment principles can work as conventions. For example, in academic writing, text is left aligned, except for the first line of each paragraph, which is indented slightly to indicate a new paragraph. Technical writing, on the other hand, uses an additional space between paragraphs to signal a new paragraph, and keeps full left alignment of all text. Both typically use the more reader-friendly “ragged right” margin. Lists and long quotations are typically indented to clearly signal where they start and end. Inconsistent or inappropriate alignment causes your document to appear “messy” and poorly thought out.
PROXIMITY: this principle is based on the tendency for readers to perceive things that are close together as related to each other. For example, when adding space around headings, you should have more space above the heading than below it. The text below the heading, to which it belongs, should be closer to the heading than the text above it (which is associated with the previous heading). This is also why we avoid creating “widows and orphans” where the heading ends up at the bottom of the page, but the text that follows it appears on the next page. When readers see a figure or table, they expect to see the discussion of that visual on the same page, usually in the paragraph directly preceding or following the visual. Readers will get annoyed if they have to flip ahead or back to find the visual that is being discussed on a different page.
For a deeper dive into these and related visual design principles, check out Gestalt Principles of Perceptual Organization by Lois Frankel.
Visual Rhetoric in Action
Watch the short animated videos below, created by LearnFree, for some thoughtful and visually engaging information on visual rhetoric (Typography, Layout and Composition, Colour, Images, and Fundamentals of line, shape, form, texture and balance) that will help you make effective and strategic information design choices.
Designing Accessible Information
When designing your document, infographic, or website, keep in mind that not all readers will have the same visual abilities. Some readers with low or no vision will rely on screen readers to read the information aloud. People who are colour blind may not be able to understand ideas that rely on colour coding alone. As the information designer, you must consider how these different ways of perceiving can be addressed in your design.
Create accessible information by adopting the best practices described below for each element of your design
FONTS: accessible fonts prioritize legibility to allow people with low vision or reading disabilities to read quickly and easily. Serif fonts (like Times New Roman) have decorative features (serifs) that can impede readability. Select common sans serif fonts such as Aptos, Calibri, or Arial to enhance legibility. Avoid excessive use of ALL CAPS, italics, underlining, or fonts smaller than 11 points. In small doses, these can help with emphasizing key ideas, but overuse can have the opposite effect.
HEADINGS: Use Styles in MS Word to create consistent headings that can be scanned and understood by assistive technology such as screen readers. These will allow the screen reader to alert the listener to the presence of a headings. If you format your headings manually, the screen reader will interpret them as body text, and this could create confusion for the listener.
TABLE OF CONTENTS: Provide a table of contents for long documents (or a navigation menu in a website) to help readers easily select the content they want to read. Using Styles to create headings allows you to automatically generate a table of contents based on the headings and sub-headings in your document.
IMAGES: Add Alt Text to describe images (Smart Art, illustrations, photos, shapes, etc,) in your document and indicate their purpose. Screen readers will read the alt text to the listener who cannot see the image. Try to make the alt text as concise as possible, but still convey the information necessary to understand the nature and purpose of the visual. You can append Image Descriptions for visuals that require more detailed descriptions than are typically used in alt text.
DATA VISUALIZATIONS: Use descriptive captions for all figures and tables, and include descriptive labels for X and Y axes, as well as important diagram features. Using the “insert caption” function means that you can automatically generate a List of Figures and List of Tables in your Table of Contents. Please note that tables can be problematic for screen readers to present accurately, especially if there are merged cells. Tools for making tables accessible are limited, but using row and column headers (box heads and stubs) can be helpful.
LISTS: Use the bullet and numbered list options in the Paragraphs toolbar to make lists. Manually making lists using the tab button does not provide the document structure for screen readers to identify the text as a list. Use a bullet lists for items that do not need to be in a specific order; use a numbered lists for items that need to be presented chronologically (a list of steps to follow in order).
COLOUR: Avoid using colour alone to convey meaning. If you use green for correct and red for incorrect, include a check mark within the green image, and an X within the red. If you have a graph with different coloured bars comparing different data sets, include texture or shade to help distinguish one bar from another and include these in your legend. Make sure that font colours contrast effectively with the background colour.
HYPERLINKS: Create descriptive hyperlink text. Hyperlinks embedded in your text should provide clear and accurate information about where the link will take the reader. Avoid using vague terms like “click here” or “source.” Instead, you might use the name of the webpage you are linking to, the name of the author, title of the document, or the key word that the destination site defines. Don’t use the same hyperlinked text (eg “source”) to link to different sites.
The Check Accessibility tool in MS Word (found in the Review toolbar) can offer some general guidance on how accessible your document it, but it is not designed to adhere to any specific accessibility regulations or policies. Depending on your context, you may need to abide by more stringent accessibility guidelines.
Universal Design (UD) is a proactive framework for designing products and experiences that can be accessed, understood, and used by the greatest number of people possible, regardless of abilities. The Centre for Excellence in Universal Design outlines 7 Principles that can be used to guide your design process and help you consider ways to make your designs accessible to a wide range of users. While these principles were developed to apply to designing built environments and products, many of them also apply to document and website design.
