To illustrate or not to illustrate

TO ILLUSTRATE OR

NOT TO ILLUSTRATE

Steven Jong ([email protected])

STC New England InterChange Conference

March 2015

The big picture

• For this presentation, I focus on some graphic design

basics addressing:

1. Screen captures, specifically raster graphics (of software)

2. Photographs (of physical objects)

3. Illustrations, specifically line art (of both)

• Common issues, do’s, don’ts

• My perspective: writer, not illustrator (amateur, not pro)

• Tool- and platform-agnostic (but focused online)

To Illustrate or Not to Illustrate | STC NE InterChange 2March 2015

There is no question: we are wired to see

• Over 80% of learning is visual, and our brains process

images differently from text—and 60,000 times faster

• Users today expect and demand illustrations

• In my opinion, customers no longer print, so—free!

• Monitors, smartphones, and tablets all support high-

resolution, full-color visuals, plus zoom, so—use them

A closed plane curve every point

of which is equidistant from a

fixed point within the curve

http://blog.wyzowl.com/power-visual-communication-infographic


Shared elements of written and visual

style

Element Written Visual

Correctness Yes

Clarity Yes

Concision Yes

Consistency Yes


Increasingly, writers are left to do graphic work, but with

little or no guidance on visual style

Some file formats are better than others

Type Proprietary? Compressed? Best For

PNG (Portable Network

Graphics)

No Yes Screen captures,

illustrations

TIFF (Tagged Image File

Format)

No Yes Photos, scans

SVG (Scalable Vector

Graphics)

No N/A Illustrations

BMP (Bitmap) Yes No Windows screen

captures/archives

GIF (Graphics

Interchange Format)

Yes Yes (256

colors)

Animations

JPG (Joint Photographic

Experts Group)

Disputed Yes (lossy) Digital photos

(only)


SCREEN CAPTURES(1 of 14 slides)


Desktops are bigger and more colorful…1984: 514x344 pixels@72ppi, 1-bit color (176,816 bits) 2014: 1920x1080 pixels@96ppi, 24-bit color (49,766,400 bits)


… so capture screens, not desktops


Set up screen—and data—first


Clarity: Don’t use JPG for screen captures

Initial capture After three edits


Clarity: Camiant (PDF)

March 2015 To Illustrate or Not to Illustrate | STC NE InterChange 11

Clarity: Don’t “resize,” “scale,” or “downsample”

Original size Resized down 50% and back


Clarity: FrameMaker 12 (Help)


“Multichannel publishing” in FrameMaker 12 Help: http://tinyurl.com/kgjfyno

When you reduce a screen, you also

reduce the size of text on the screen

MioMap User Manual, August 2006


Concision: don’t show GUIs, show data


Correctly crop and resize


This is the

menu bar

Go back one page; right-click for history

Close tab

URL

Plugin enabled

Website does not

supply identity

information

Inconsistent callouts, labels, and leaders


Consistent callouts, labels, and leaders


Screen capture do’s and don’ts

• Use for concepts, installs,

completion, sample data,

reports, complex screens

• Make your own

• Set up realistic data (first)

• Trim edges (work big);

size with output in mind

• Include with the right step,

not before or after

• (In Help) Consider linking

from text to large screens

• Don’t use just to show

GUI behavior

(“travelogue”)

• Don’t copy from others

• Don’t use real or test data

• Don’t mask edges; don’t

make too big to display

• Don’t include out of

sequence in task

• Don’t shrink below

legibility (limit ~50%)


Screen capture recommended process

1. In product: Size equally, minimizing white space

2. In product: Populate fields with realistic data

3. Capture screen (not entire desktop)

4. In tool: Edit data as needed; delete unwanted details

5. In tool: Crop, add border (or use window frames)

6. In tool: If you need callouts, layer them on top,

consistently

7. Keep and archive in PNG or BMP, following a content-

related file naming convention

8. In display engine: Reduce no more than 50%

(preferably in multiples of 36 ppi)


PHOTOGRAPHS(1 of 12 slides)


Showing physical reality

"Refraction photo" by ajizai - Licensed under Public Domain via Wikimedia Commons


What something is supposed to look like

http://healthylivinginthecity.com/2013/03/27/project-cookbook-snow-pea-scallion-and-radish-salad/


One way to show motion

Eadweard Muybridge, 1878 [Public domain], via Wikimedia Commons


Showing parts

DieCastForum.com, by SuperKungFu, 20 Oct 2014 (http://tinyurl.com/pjll55m)


“Max Payload of an A-6,” pinned by Felix Nuts Tomcat (http://tinyurl.com/majg9jn)


Giving a visual index

From A Field Guide to the Birds of Britain and Europe, Peterson, Mountford, and Hollom (1974). http://tinyurl.com/o6mfbeq


Annotations outside photo


Annotations inside photo

Boston Globe


Set up your photos


Driver-pro.comZhumell Z12 Deluxe Dobsonian Reflector Telescope

Owner’s Manual, December 2010

Photography do’s and don'ts

• (Screen-capture do’s

apply here too)

• Set up lighting and

background

• Consider the value of, and

need for, color

• Save and archive in TIF

(not RAW) format

• (Screen-capture don’ts

apply here too)

• Don’t just point and shoot

• Don’t overwhelm the

user’s eye

• Don’t discard the originals


Photography recommended process

• Set up lighting and background in advance

• In tool: Crop or edit out extraneous details

• In tool: If parts require descriptions, better to include in a

separate, number-annotated table

• Keep and archive finals and originals in TIF


ILLUSTRATIONS(10 slides)


Photos versus illustrations

Photo details can be visually confusing

Illustrations avoid visual clutter

and emphasize specific details

Driver-pro.com “Interface lg” by JoshGeake at en.wikipedia


Use corporate clipart whenever possible

EAGLE 5 EAGLE XG EAGLE XGEAGLE XG

& Tek3-based IAS IMF

Application

Server

ATCA/Blade

Server

Database

(AAA, ENUM

Server, HLR,

HSS & NP)

IAS IMF

Rack-mount Server

SGW

IAS STP SIP Proxy

Server

SCP

SCP

Add text for Tekelec

Software/Hardware

Add Text

TekServer 2TekServer 3

Tekelec

Solution

Solution

AAAAAA


Incorporate company clipart


Vector versus raster graphics

Resolution dependentResolution independent

(architecturally the same)


Be careful about ungrouping objects


How to show action and fit

Lexmark Impact S3000 Series User’s Guide, November 2010


Hardware parts and action

Nikon Coolpix L830 Reference Manual, © 2014 Nikon Corporation


Drawing do’s and don’ts

• (Screen capture and

photography do’s apply)

• Prefer making (or buying)

your own, or repurposing

• Look for clipart (your own

company and others’)

• Be consistent in style and

perspective

• Prefer Web-safe,

complementary colors

(see PowerPoint themes)

• (Screen capture and

photography don’ts apply)

• Don’t just grab whole

presentation illustrations

• Don’t just use as is—add

other elements

• Don’t mix styles (abstract/

representational, 2D/3D)

• For Web, don’t use “old”

styles or distracting bright

(primary) or clashing

colors


Drawing recommended process

• Adopt a style guide for nomenclature (better to include in

a separate table rather than annotate)

• Understand how line and shape weight, color, and style

emphasize (or deemphasize) elements

• Take advantage of (or create) templates and libraries

• Group or lock imported objects

• Follow consistent structure to add and align elements

(lines, boxes, etc.); layer annotations onto bitmaps

• Save both source and output

• Develop your skill—any level is valuable!


GALLERY(1 of 12 slides)


Microsoft PowerPoint Help: Task


Microsoft PowerPoint Help: Concept


Apple iTunes Quick Tour


Apple Magic Mouse description

http://www.apple.com/magicmouse/#hero-video


The Google Chrome Comic

Behind the Open Source Browser Project. Words by the Google Chrome team, comics adaptation by Scott McCloud.

Licensed under the Creative Commons Attribution-Noncommercial-No Derivative Works 2.5 License (2008)


Infographics

http://tablet-infographics.squarespace.com/#/ice/


Animated GIFs

"The Horse in Motion-anim" by Eadweard Muybridge, Animation: Nevit Dilmen - Library of Congress Prints and Photographs

Division. Licensed under Public Domain via Wikimedia Commons


Animated GIF: Key and lock

http://www.businessinsider.com/9-awesome-animated-gifs-that-show-how-cool-tech-works-2013-5


http://www.businessinsider.com/9-awesome-animated-gifs-that-show-how-cool-tech-works-2013-5

Cinemagraph

Scott May (https://www.behance.net/gallery/2969819/Collection-of-Cinemagraphs/)


Interactive SVG

http://upload.wikimedia.org/wikipedia/commons/6/6c/Trajans-Column-lower-animated.svg




Embedded video: Apple Magic Mouse

Preferences


SUMMARY


Summary

• It’s never been easier to communicate visually—and

users have never wanted images more

• At a high level, you already know visual communication

principles—they’re the same as for written communication

• You get what you pay for (make v. buy, photo v.

illustration)

• Learn a bitmap editor, photo editor, drawing package, and

your camera—and how to combine the results

• Knowing how to create even simple visual communication

improves your work, helps users, and is a valuable skill

• Options are rapidly expanding—there’s more to come


For more information:

• Elliott, Norbert. MSPTC Editing Guide, Ch. 15 (Graphics).

http://elliotmedia.wikispaces.com/Graphics

• Giemsa, Bettina. Technical Illustration in the 21st Century:

A Primer for Today’s Professionals. Parametric

Technology Corporation, 2007.

• Tufte, Edward R. The Visual Display of Quantitative

Information. Cheshire, CT: Graphics Press, 1983.


References

1. “The Power of Visual Communication Infographic,” Matt Byrom, Wyzowl (3 Mar 2014). Retrieved 26 Feb 2015 from http://tinyurl.com/n33v9gy.

2. “Using Illustrations in Technical Communication,” Charles Cave, ASTC Conference (October 2011). Retrieved 24 Feb 2015 from http://tinyurl.com/3mcyq7o.

3. “Visual technical communications—from cost factor to added value,” Corel Corporation (2009).

4. “Effective Infographics: Telling Stories in the Technical Communication Context,” Geoff Hart, TECHWR-L. Posted 3 June 2013, retrieved 25 Feb 2015 from http://tinyurl.com/mkyzdrh.

5. “The Power of Visual Communication,” HP Development Company (2004).

6. “7 tips for designing awesome animated GIFs,” Andy Orsow, InVision. Posted 10 Dec 2014, retrieved 27 Feb 2015 from http://tinyurl.com/m8al76s.

7. “The value of adding images to technical documentation,” V. BerbaVelasco Jr. streetdirectory.com. Retrieved 23 Feb 2015 from http://tinyurl.com/n8huq3b.


http://tinyurl.com/3mcyq7o

http://tinyurl.com/n8huq3b