I'd Rather Be Writing » layout

Visually Appealing Documents Combine Text with Images

Tom Johnson — Mon, 10 Oct 2011 17:08:36 +0000

A few years ago, I was scouring magazines to get ideas for quick reference guide layouts. In particular, I found that WIRED magazine has some of the most creative and engaging layouts, often with text laid out in three or four columns, or along the side of a graphic, or in various quadrants about the page.

I was trying to figure out the right layouts that would give my quick reference guides the same eye-popping appeal when I realized something: Almost all magazine layouts have a dominant image that the content revolves around. Without the image, no matter what you do with the text, no matter how you lay it out, your design won’t jump out at the reader. To make an attractive quick reference guide, you need a strong image.

In many cases, that image might just be a screenshot with some callouts around it. That is probably the easiest approach for technical writers. But if you have some Illustrator or Photoshop skills, you can go beyond the simple screenshot and create a concept diagram or other illustration.

Neglecting images is one of the most common missteps in tech comm. We rely entirely too much on words. And while I enjoy writing, I’m also trying to become more visual savvy — because I know that words combined with images result in incredibly appealing documents. And by images I don’t just mean a series of screenshots. We all know what those kinds of manuals look like — the ones with a screenshot after each step.

Leveraging images to illustrate concepts provides a refreshing experience for the user. To see concepts illustrated in graphics, or in other words, to see an idea, engages us. That’s really the appeal of the visual, especially the infographic — not just to have some eye candy, or to see a screen, but to see an idea.

Too often we dismiss our visual endeavors because we aren’t comfortable in making graphics. But I’ve come to learn that executing a mediocre graphic isn’t tough. What’s tough is coming up with the right way to illustrate an idea. It’s hard to find a way to depict an abstract idea in a concrete, visual way.

Even if you work with a graphic designer, often the graphic designer will ask you what you want him or her to draw. You will still probably have to do the work of visual imagination, sketching out how an idea might be illustrated. But here’s the redeeming quality: coming up with these idea sketches is incredible fun. It’s challenging and creatively fulfilling at the same time. In a lot of cases, the illustration doesn’t need to be too technical to convey a message. The simpler and less ink, the better.

Here are a few one-page quick reference guides I’ve been working on lately. Notice that they combine text with images.

Each guide has a strong image, and then a few columns of text. That’s all. The images aren’t necessarily eye-popping (like with images in a magazine), and two images are just stylized screens. But in general, the combination of text with images creates more appealing documents.

No doubt writers shy away from images for a variety of reasons, especially when text requires translation. If the images have embedded text, they can’t be translated. One “easy” solution might be to make wordless images. However, removing all words from an image cripples the instructional power of the image. It draws the reader to look at the image, but because the image doesn’t have a strong message to communicate (not having any words), it leaves the reader with a blank message. Or the image merely becomes decorative.

One way to get around this is to create your images in Illustrator (or some other graphics program), and then place the images in your InDesign file. Then create text boxes in InDesign and overlay the text boxes on the image. Then group the text boxes and the image. If you have have some advanced translation experts, who know how to export from InDesign to XML and then import again when it’s translated, it’s a technique that will work. If your output is online, you could implement the same strategy by making the image a background image, and positioning the text with CSS.

Incorporating images into technical documentation poses challenges, for sure. Not only is it hard to visually depict an abstract idea, you have to also be familiar with graphics tools to execute the idea, and then you may need to handle translation as well. Still, despite the hassle, the end product will be much more enticing to readers if you include images.

Blog Sponsors

Podcast — Visual Composing: Document Design for Print and Digital Media, with Jo Mackiewicz

Tom Johnson — Mon, 14 Mar 2011 07:49:42 +0000

Visual Composing: Document Design for Print and Digital Media

Download MP3
Length: 45 min.

Recently Jo Mackiewicz (Auburn University) and Kathryn Riley (Illinois Institute of Technology) published Visual Composing: Document Design for Print and Digital Media with Pearson. This book covers the visual side of document design, including all the design decisions from the font you use to the colors you choose to the tables, column widths, images types, and more. I interviewed Jo for a podcast about the book. In the podcast, we cover the following:

Typography, including serif and san-serif fonts
Font sizes, and recommendations for older users
Characters per line — 35, 55, 75, or 95 characters long
Color — complementary colors, Itten’s wheel, the psychology of color
Headings and subheadings
Background colors, negative and positive polarity
Contrast in document design
Dual-coding theory, and when aural and verbal conflict but not visual and verbal
Reasons for gaps in graphic document design among technical writers
File types for images
Alignment — full justification versus ragged right
Symmetry and professional versus playful tone

Resources

Visual Composing on Amazon /on Pearson.
Jo Mackawicz’s website.

Blog Sponsors

Free download: Good vs. Great Design (summary) ~ Authentic Boredom

Tom Johnson — Fri, 22 May 2009 20:18:43 +0000

Free download: Good vs. Great Design (summary) ~ Authentic Boredom.

Blog Sponsors

Good Designs Have Strong Contrast

Tom Johnson — Sun, 04 Jan 2009 06:43:16 +0000

Since I’ve been reading The Non-Designers Design Book: Design and Typographic Principles for the Novice, I’ve started to see the importance of contrast everywhere. The author, Robin Williams, argues that contrast is one of the four pillars of design, and that most people don’t include enough of it. As a result, rather than contrast, they end up with conflict. Williams writes:

A design is in conflict when you set two or more typefaces on the same page that are similar — not really different and not really the same. I have seen countless students trying to match a typeface with one on the page, looking for a face that “looks similar.” Wrong. When you put two faces together that look too much alike without really being so, most of the time it looks like a mistake. The problem is in the similarities.

Although Williams goes into detail about contrasting typefaces, the general idea is to push contrast more than you might be naturally inclined. If you don’t, you end up with conflict. The next time you eat at a restaurant, look closely at the menu. A good menu has a high degree of contrast between sections. A poorly designed menu usually has the titles in 14 pt Times New Roman font with bold formatting, followed by Times New Roman 12 pt font for the menu items. Boring. Williams writes:

Don’t be a wimp. Most effective type layouts take advantage of more than one of the contrasting possibilities. For instance, if you are combining two serif faces, each with a different structure, emphasize their differences by contrasting their form also: if one element is on roman letters, all caps, set the other in italic, lowercase. Contrast their size, too, and weight; perhaps even their direction. … For a wide variety of examples and ideas, take a look through any good magazine. Notice that every one of the interesting type layouts depends on the contrasts. Subheads or initial caps emphasize the contrast of size with the contrast of weight; often, there is also a contrast of structure (serif vs. sans serif) and also form (caps vs lowercase) as well.

We already understand the principle of contrast in many other aspects of our lives, such as how we dress. In the following image, the orange-red color combination is hideous, but the red-black combination — which has a lot more contrast — is more acceptable.

Left, the colors are too similar -- the result is conflict. Right, the colors are substantially different -- the result is contrast.

When we dress, we automatically choose clothes that have some contrast, even if we’re not designers. It’s natural, yet we don’t always carry over the same principles into layout and design.

In the next photo, look at the color of the jackets — pink and brown, purple, and black and pink. The jackets on the outside have strong contrast, and the the colors work. The jacket in the middle lacks contrast. But rather than purple and light-purple, or purple and aqua, the designer chose to keep the shades pretty much the same.

More colors -- notice the contrast of the jackets on the outside

The solid purple jacket works, but will need contrast from pants, gloves, or a hat. (Of course, my kids look cute no matter how I dress them.)

My point is this: if we take our natural sensibility for contrast that we automatically employ in dress, and then apply it to layout and design, we’ll naturally make documents that have greater appeal. Here’s another example from Williams’ book, this one about table of contents.

Contrast in table of contents

Start looking at contrast and you’ll see it everywhere — store signs, book jackets, billboards, TV titles, logos, magazines, labels, dress, and more. The designs that catch your eye will have a good deal of contrast.

Blog Sponsors

How to Create Columns with CSS Float | eHow.com

Tom Johnson — Thu, 01 Jan 2009 06:49:34 +0000

How to Create Columns with CSS Float | eHow.com

I see so many sites that structure everything with tables. News flash: tables are out. Divs and floats are in.

I'd Rather Be Writing » layout

Visually Appealing Documents Combine Text with Images

Blog Sponsors

Podcast — Visual Composing: Document Design for Print and Digital Media, with Jo Mackiewicz

Resources

Blog Sponsors

Free download: Good vs. Great Design (summary) ~ Authentic Boredom

Blog Sponsors

Good Designs Have Strong Contrast

Blog Sponsors

How to Create Columns with CSS Float | eHow.com

Blog Sponsors

Presentation Zen: If you could recommend only one book (on graphic design)

Blog Sponsors