Note: Unless I hear otherwise I will assume you understand the readings from Technical Communication Strategies for Today. Therefore, lectures on readings from the book will tend to be short, focusing on specifics I want to highlight. Just because I don’t address something doesn’t mean that it isn’t important. If you have any questions or need further elaboration on anything about the readings, including material not covered in the lectures, please ask.
Ch. 13: Designing Documents and Interfaces
Principles of Design
In ch. 13 of Technical Communication Strategies for Today, Johnson-Sheenan offers us five principles for design: Balance, Alignment, Grouping, Consistency, and Contrast. You might also come across these basic ideas represented as four ideas expressed as designer Robin Williams’s CRAP (as in “Good design is CRAP”) or the more timid riff on her acronym CARP. Either way, the CRAP/CARP acronym stands for Contrast, Repetition, Alignment, Proximity. In case it’s not immediately clear, Johnson-Sheenan’s “grouping” and “consistency” are equivalent to Williams’s “proximity” and “repetition” respectively. I’m rather fond of Williams’s acronym because it’s straightforward and can be expressed simply:
- Contrast: Different elements should look very different. (See Figure 13.2 in Technical Communication Strategies for Today, p. 370: The title and header font is different from the body text font.)
- Repetition: Like elements should look similar. (See Figure 13.4 in Technical Communication Strategies for Today, p.372: Each of the items in the horizontal navigation bar have an icon along with the text, and the use of purple for links (both text links, and in both the horizontal and vertical navigation bars.)
- Alignment: Elements should like up with other elements. (See Figure 13.1 of Technical Communication Strategies for Today, p. 369: Every element shares at least one horizontal or vertical line with at least one other element—that is, you can lay a ruler along the edge of any element and see that it lines up with at least one other element.)
- Proximity: Like items should be grouped near each other. (See Technical Communication Strategies for Today, p. 374-75: In the footer that spans both pages, on the left we find the chapter number, title, and page number clustered together with left-justification, and on the right we find the subsection of the chapter and the page number clustered together with right-justification.)
On the one hand, these seem like fairly simple principles, whether we’re using Johnson-Sheenan’s schema or Williams’s schema. Regardless, simply trying to apply these principles to document and interface design can let non-designers go a long way towards producing good looking, well designed documents.
Some Other Design Elements, Strategies, and Techniques
Whether you’re preparing a one-page rèsumè, a 35-page honors thesis, or a collaboratively authored report for your client, you want to maintain a consistent style and formatting throughout a document to help your readers navigate through the document. At the organizational level, style guides are used by companies, non-profit groups, and even government agencies to create a consistent brand across the organization, that is, to give a similar look and feel to all the documents the organization produces. Modern word processors (as opposed to text editors) allow you to create your own style guide for a project, which can be quite useful for making global formatting changes should you decide to change the look of your 2nd-level headings. The article “Style Basics in Word” explains how to use styles in Word. Even if you use a different word processor, if you’re not familiar with this feature, take a glance at this document and then look for instructions specific to your tool of choice. For more information, here’s a short article on creating a document style guide and short article on creating an organizational style guide.
As Johnson-Sheenan notes, sans serif fonts have traditionally been used for headings, footers, captions, and titles, and serif fonts have traditionally been used for body text. Traditionally, this has been the rule for print texts because on paper large sections of serif fonts are easier to read than sans serif fonts are. However, designers found that the opposite used to be true for online reading — because screens were not nearly as easy to read from, it has traditionally been easier to read online text in sans serif font than in serif font. And so it used to be that one used a serif font for body text in print documents and a sans serif font for body text for electronic documents. With recent advances in screen resolution, however, using serif fonts for body text in online documents is becoming standard allowing us to once again have the universal design rule of serif fonts for body text and sans serif fonts for titles, headers, footers, and captions.
Headers are powerful tools for guiding readers and improving readability. A good, descriptive header offering a summary of what’s to come prepares readers for what they about to read. As you read magazine articles, web sites, text books, journal articles, and the like, start paying attention to the use of headings to get a sense of how they are used.
White space is another tool that improves readability as well as add visual appeal. Don’t fear it.
Grids and wireframing
On pp. 372-375, Johnson-Sheenan suggests using grids to design page layouts and interfaces, a technique that is generally referred to as grid design or wireframing. Grid design and wireframing aren’t exactly the same thing, with grid design coming out of graphic design and traditionally used for print-based documents, and wireframes coming out of information design, user-experience design, and interaction design and traditionally used for websites and other screen-based, interactive interfaces. For more information about both, see: