Visual Rhetoric Crash Course
In preparation for the MEmorials, I wanted to give a quick crash course in Visual Rhetoric. Your design decisions will play a factor in the evaluation of this piece. The following is meant to provide you with a heuristic, a set of questions, to think about as you construct this (and any other) text (and I mean “text” as loosely as possible).
The Basic C.R.A.P.
One of the first “viral” books on visual rhetoric and design was Robin William’s book The Non-Designer’s Design Book, now in its third edition. Williams explicated four primary design principles:
- Contrast
- Repetition
- Alignment
- Proximity
Let’s think about them one at a time.
Contrast
Williams’ first principle stressed that usable design requires high levels of contrast. One of the lessons we carry from this is a distinction between contrast and conflict. Another is to be wary of sublte changes. If you want to change something, make it a super-big change. Don’t go one font-size larger, go five. Don’t go a single-shade lighter, etc. etc.
Repetition
Repetition is probably the simplest of concepts in Williams’ quartet. Put simple, we want to repeat as many things as possible because it helps users find what they are looking for, navigate a site, and notice important changes. Take a look, for instance, at most websites: you’ll notice that headers, navigation, footers, and sidebars rarely change as you move to different pages in the site. But, the content changes. By keeping other elements “static,” it calls more attention to what is dynamic.
Of course, by maintaining repetition, you create the opportunity for a “wow” moment simply by breaking the established expectation. Use these opportunities sparingly.
Here’s an example of what, via Garr Reynolds’s discussion of presentation storytelling in Presentation Zen Design, we might call narrative contrast: Max Fisher’s piece on War and Peace in Kiev from the Washington Post.
Alignment
Alignment is a critical concept. Obviously, alignment asks to think about the margins and spaces built into our design. But alignment doesn’t demand that we use only one margin. Rather, alignment asks us to set hierarchical preferences via varying margins (without going overboard).
If you care about my soul at all, then you will never, ever, ever, ever center-align anything. Ok, maybe you can center-align a title. Maybe. Nah.
Proximity
Proximity is, imo, the most difficult of the quartet to describe. Williams writes: “The idea of proximity doesn’t mean that everything is closer together; it means that elements that are intellectually related connected, that has some sort of communication relationship, should also be visually connected.” In web design, this can easily be built by paying attention to space, or what web designers often call padding, between elements.
We’ll think about proximity, space, and layout more down below when we think about the Golden Rule.
Color
Don’t be afraid of color. That said, recognize that the study of color has a few basic rules. Here’s a quick rundown:
Maria Claudia Cortes’ Color in Motion
Link to Cortes’ video. Different colors have different meanings and set different moods. There is no definitive set of meanings. But, if you wore pink to a wake, people would stare at you. As a rhetorical designer, it is your idea to imagine how different audiences will react to your choices. What are the expectations for what you are doing? Should you risk defying those expectations?
Some Helpful Guides / Tools
- Tiger Color Introduction to Color Theory
- Colourlovers.com offers some great pre-fab color palettes, complete with hex values
- SlayerOffice Palette Generator will make a gradient palette based on two different colors.
- Pictaculous will generate a palette based on an image
Most of these applications will translate colors into hex codes (for instance, white is #ffffff, while red is #ff0000). Most design software will include some kind of entry field to dictate specific hex colors.
Typography
Typography is an incredibly deep subject area. People can become serioulsy passionate about typographical choices. As with all of these principles, there isn’t any kind of definitively right or wrong answers. But there are some central concerns to consider as you design a print or web text.
To Serif or not to Serif
Fonts come in two primary classes, serif fonts and sans-serif fonts. The difference: wings and feet. Let’s look at an image:
As a rule of thumb, serif fonts are used for printed materials. Studies have shown that the wings and feet on serif writing (inherited from the legacy of cursive) improve reading speed. On the web, however, the addition of wings and feet can increase pixelation, and hence, strain on the eyes, and hence, cause ouchy headaches (especially on a pc). Technological improvements over the past few years have reduced this effect, but the rule continues to be: serif for print, sans-serif for the web.
You can use serif fonts for web headings, however. Just make sure that you repeat the serif-heading, sans-serif-main-content distinction. Also, be sure to look at your fonts-you want contrast without clash. (See Douglas B’s “How to Choose a Typeface” at SmashingMagazine and his blog post “Top 19 Fonts in 19 Top Combinations”).
If you take a look at contemporary websites, especially those invested in their design aesthetic, then you will see a predominant amount of sleek, clean, sans-serif fonts used for body text, often with a imbalanced sans-serif or weighted serif for headings.
In terms of design, the Wall St. Journal offers us an “ugly” old-school website. It has way too many alignments, fonts, and colors crashing together. Compare this to an even mediocre “web3.0” design aesthetic like Vivino or 1st Web Designer (or 90% of the Squarespace templates we are working with). Even with commercial sites looking to provide a mass of information, the increasing trend is toward minimalist design that eschews “mystery meat” (complicated) forms of navigation. K.I.S.S.
Harry Roberts’s Typography Heuristic
Harry Roberts’ “Technical Web Typography: Guidelines and Techniques” provides an excellent heuristic for typography. Let’s consider his points in order.
Font-Face or Font-Family; in addition to Roberts, I would recommend Aaron Boodman’s “B Definitive Web Font Stacks” for building font-families.
Font-Size; in I Love Typography’s introductory guide to web typography, the author urges designers to choose a moderate base size. We’ll avoid microscopic text, and follow both his/her and Roberts’ suggestion and go with 16 pixels.
Line Length, or Measure; the general principle here is that you don’t want text to stretch across the entire screen. A bit more specific: you are aiming for approximately 45-75 characters per line.
Line Height, or Leading; according to Roberts, the easiest way to figure out your base line-height is to set it as 150% of your base font-size, which can be easily done as 1.5em (see my CSS). This comes out to 24 pixels. There are more sophisticated ways of setting this number (see below).
Magic Number; this number (base font-size x 1.5) is what Roberts refers to as our “magic number.” It gives us a baseline for setting other elements of the page–from margins and padding, to white spaces, etc. All we try is multiplying/dividing our magic number whenever we need to calculate a measurement.
From Magic Number to the Golden Rule
Typography: Ratios for Headings, Spacing, and Layout
Thinking about typography more broadly, you may have question about “how much padding should I have on a left margin?” or “how wide should I make my navigation box?” One solution to these questions lies in attending to the ancient Golden Mean–the magical ration of 1.6.
Tim Brown’s “More Meaningful Typography” and Vitaly Friedman’s “Applying Divine Proportion to Web Designs” build theories off of the Golden Mean, the ancient Greek ration that surfaces in a variety of creative mediums, from music to art to architecture to page design. Brown points us toward a modular scale generator–simply put in your base text size, select your desired ratio, and the generator will supply a range of numbers. Friedman shows how the golden ratio can not only inform margins, padding, and text size–but also dictate page layout.
The point here is to develop an awareness that things like alignment and placement aren’t arbitrary. There should be a thought process behind these choices. As with many things, just because their isn’t a right answer doesn’t mean there isn’t bad choices.
Here’s a link to this page’s modular scale.
Click here to see some of these typography considerations in action.
Taking Care of Images
There’s a few basic things to keep in mind with images for the web.
Image Quality
No one likes ugly pixelated images. If your images are ugly and pixelated then you are doing something wrong (probably trying to make a small image larger). A nice, basic rule: never increase the size of an image.
Note that one way of assuaging poor image quality can be through the use of filters. In some cases filters can improve image quality (here’s a quick guide on some of the more helpful photoshop filters). Here’s Darren Hoyt’s easy-to-follow tutorial for for fixing poor quality photos (like those you might get off your phone).
Of course, editing images can lead to some critical ethical questions, such as the Contreras controversy. See this link as well on cropping.
. And I never miss an opportunity to share this:
Related: Lena Dunham’s cover photo manipulation. And when virtual alteration becomes physical.
Image Borders
Think of images as art on the wall. If you like something, you frame it. If you’re going to put an image up on your site, then you need to provide it a border. This can done pretty easily through CSS. Here’s the code:
#content img {
border: 5px solid #999;
padding: 5px; }
NOTE: See the image here to see the border code in action.
The border property above first creates a five pixel wide border around the image. The padding property inserts 5 pixels of whitespace between the image and the border. Of course, you can also create elaborate borders around images in Photoshop and export them as part of the image file
Squarespace’s “edit image” interface provides a number of helpful image editing tools, including some quick and easy border options.
Note, too, that a lot of minimalistic web3.0 design aesthetic ignores borders.
Image File Types
Part of paying attention to image quality requires you know something about image file types. Essentially, there’s only two file types you need to use on a page. If your image is just going to sit there like a photograph, then you likely want to use a .jpeg. If your image requires transparencies, dynamic movement, or quality resizing, then you likely want to use a .png (aka portable network graphic) You should not use raw photoshop files (.psd) on the web as many browsers do not know how to render them.
Images and Accessibility
Whenever possible, you should ensure that images have alternate text–text that appears in case an image cannot show up, or text that is read via screen readers for the visually-impaired.
In Squarespace, you set the alt-text by writing captions. You can then turn the captions off in the image menu. I will demonstrate this in class.
