to illustrate or not to illustrate
TRANSCRIPT
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
To Illustrate or Not to Illustrate | STC NE InterChange 3March 2015
Shared elements of written and visual
style
Element Written Visual
Correctness Yes
Clarity Yes
Concision Yes
Consistency Yes
To Illustrate or Not to Illustrate | STC NE InterChange 4March 2015
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)
To Illustrate or Not to Illustrate | STC NE InterChange 5March 2015
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)
To Illustrate or Not to Illustrate | STC NE InterChange 7March 2015
… so capture screens, not desktops
To Illustrate or Not to Illustrate | STC NE InterChange 8March 2015
Clarity: Don’t use JPG for screen captures
Initial capture After three edits
To Illustrate or Not to Illustrate | STC NE InterChange 10March 2015
Clarity: Don’t “resize,” “scale,” or “downsample”
Original size Resized down 50% and back
To Illustrate or Not to Illustrate | STC NE InterChange 12March 2015
Clarity: FrameMaker 12 (Help)
March 2015 To Illustrate or Not to Illustrate | STC NE InterChange 13
“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
To Illustrate or Not to Illustrate | STC NE InterChange 14March 2015
Concision: don’t show GUIs, show data
To Illustrate or Not to Illustrate | STC NE InterChange 15March 2015
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
March 2015 To Illustrate or Not to Illustrate | STC NE InterChange 17
Consistent callouts, labels, and leaders
To Illustrate or Not to Illustrate | STC NE InterChange 18March 2015
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%)
To Illustrate or Not to Illustrate | STC NE InterChange 19March 2015
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)
To Illustrate or Not to Illustrate | STC NE InterChange 20March 2015
Showing physical reality
"Refraction photo" by ajizai - Licensed under Public Domain via Wikimedia Commons
To Illustrate or Not to Illustrate | STC NE InterChange 23March 2015
What something is supposed to look like
http://healthylivinginthecity.com/2013/03/27/project-cookbook-snow-pea-scallion-and-radish-salad/
To Illustrate or Not to Illustrate | STC NE InterChange 24March 2015
One way to show motion
Eadweard Muybridge, 1878 [Public domain], via Wikimedia Commons
To Illustrate or Not to Illustrate | STC NE InterChange 25March 2015
Showing parts
DieCastForum.com, by SuperKungFu, 20 Oct 2014 (http://tinyurl.com/pjll55m)
To Illustrate or Not to Illustrate | STC NE InterChange 26March 2015
“Max Payload of an A-6,” pinned by Felix Nuts Tomcat (http://tinyurl.com/majg9jn)
To Illustrate or Not to Illustrate | STC NE InterChange 27March 2015
Giving a visual index
From A Field Guide to the Birds of Britain and Europe, Peterson, Mountford, and Hollom (1974). http://tinyurl.com/o6mfbeq
To Illustrate or Not to Illustrate | STC NE InterChange 28March 2015
Annotations inside photo
Boston Globe
To Illustrate or Not to Illustrate | STC NE InterChange 30March 2015
Set up your photos
March 2015 To Illustrate or Not to Illustrate | STC NE InterChange 31
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
To Illustrate or Not to Illustrate | STC NE InterChange 32March 2015
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
To Illustrate or Not to Illustrate | STC NE InterChange 33March 2015
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
To Illustrate or Not to Illustrate | STC NE InterChange 36March 2015
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
To Illustrate or Not to Illustrate | STC NE InterChange 37March 2015
Vector versus raster graphics
Resolution dependentResolution independent
(architecturally the same)
March 2015 To Illustrate or Not to Illustrate | STC NE InterChange 39
Be careful about ungrouping objects
To Illustrate or Not to Illustrate | STC NE InterChange 40March 2015
How to show action and fit
Lexmark Impact S3000 Series User’s Guide, November 2010
To Illustrate or Not to Illustrate | STC NE InterChange 41March 2015
Hardware parts and action
Nikon Coolpix L830 Reference Manual, © 2014 Nikon Corporation
To Illustrate or Not to Illustrate | STC NE InterChange 42March 2015
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
To Illustrate or Not to Illustrate | STC NE InterChange 43March 2015
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!
To Illustrate or Not to Illustrate | STC NE InterChange 44March 2015
Microsoft PowerPoint Help: Task
To Illustrate or Not to Illustrate | STC NE InterChange 47March 2015
Microsoft PowerPoint Help: Concept
To Illustrate or Not to Illustrate | STC NE InterChange 48March 2015
Apple Magic Mouse description
http://www.apple.com/magicmouse/#hero-video
To Illustrate or Not to Illustrate | STC NE InterChange 50March 2015
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)
To Illustrate or Not to Illustrate | STC NE InterChange 51March 2015
Infographics
http://tablet-infographics.squarespace.com/#/ice/
To Illustrate or Not to Illustrate | STC NE InterChange 52March 2015
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
To Illustrate or Not to Illustrate | STC NE InterChange 54March 2015
Animated GIF: Key and lock
http://www.businessinsider.com/9-awesome-animated-gifs-that-show-how-cool-tech-works-2013-5
To Illustrate or Not to Illustrate | STC NE InterChange 56March 2015
Cinemagraph
Scott May (https://www.behance.net/gallery/2969819/Collection-of-Cinemagraphs/)
To Illustrate or Not to Illustrate | STC NE InterChange 57March 2015
Interactive SVG
http://upload.wikimedia.org/wikipedia/commons/6/6c/Trajans-Column-lower-animated.svg
To Illustrate or Not to Illustrate | STC NE InterChange 58March 2015
Embedded video: Apple Magic Mouse
Preferences
To Illustrate or Not to Illustrate | STC NE InterChange 59March 2015
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
To Illustrate or Not to Illustrate | STC NE InterChange 62March 2015
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.
March 2015 To Illustrate or Not to Illustrate | STC NE InterChange 63
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.
To Illustrate or Not to Illustrate | STC NE InterChange 64March 2015