Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.
TO ILLUSTRATE OR
NOT TO ILLUSTRATE
Steven Jong (stevefjong@comcast.net)
STC New England InterChange Conference
March 2015
The big picture
• For this presentation, I focus on some graphic design
basics addressing:
1. Screen captures, specificall...
There is no question: we are wired to see
• Over 80% of learning is visual, and our brains process
images differently from...
Shared elements of written and visual
style
Element Written Visual
Correctness Yes
Clarity Yes
Concision Yes
Consistency Y...
Some file formats are better than others
Type Proprietary? Compressed? Best For
PNG (Portable Network
Graphics)
No Yes Scr...
SCREEN CAPTURES
(1 of 14 slides)
To Illustrate or Not to Illustrate | STC NE InterChange 6March 2015
Desktops are bigger and more colorful…
1984: 514x344 pixels@72ppi, 1-bit color (176,816 bits) 2014: 1920x1080 pixels@96ppi...
… so capture screens, not desktops
To Illustrate or Not to Illustrate | STC NE InterChange 8March 2015
Set up screen—and data—first
To Illustrate or Not to Illustrate | STC NE InterChange 9March 2015
Clarity: Don’t use JPG for screen captures
Initial capture After three edits
To Illustrate or Not to Illustrate | STC NE I...
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
To Illustrate or Not to Illustra...
Clarity: FrameMaker 12 (Help)
March 2015 To Illustrate or Not to Illustrate | STC NE InterChange 13
“Multichannel publishi...
When you reduce a screen, you also
reduce the size of text on the screen
MioMap User Manual, August 2006
To Illustrate or ...
Concision: don’t show GUIs, show data
To Illustrate or Not to Illustrate | STC NE InterChange 15March 2015
Correctly crop and resize
To Illustrate or Not to Illustrate | STC NE InterChange 16March 2015
This is the
menu bar
Go back one page; right-click
for history
Close tab
URL
Plugin enabled
Website does not
supply identi...
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...
Screen capture recommended process
1. In product: Size equally, minimizing white space
2. In product: Populate fields with...
PHOTOGRAPHS
(1 of 12 slides)
To Illustrate or Not to Illustrate | STC NE InterChange 22March 2015
Showing physical reality
"Refraction photo" by ajizai - Licensed under Public Domain via Wikimedia Commons
To Illustrate o...
What something is supposed to look like
http://healthylivinginthecity.com/2013/03/27/project-cookbook-snow-pea-scallion-an...
One way to show motion
Eadweard Muybridge, 1878 [Public domain], via Wikimedia Commons
To Illustrate or Not to Illustrate ...
Showing parts
DieCastForum.com, by SuperKungFu, 20 Oct 2014 (http://tinyurl.com/pjll55m)
To Illustrate or Not to Illustrat...
“Max Payload of an A-6,” pinned by Felix Nuts Tomcat (http://tinyurl.com/majg9jn)
To Illustrate or Not to Illustrate | STC...
Giving a visual index
From A Field Guide to the Birds of Britain and Europe, Peterson, Mountford, and Hollom (1974). http:...
Annotations outside photo
To Illustrate or Not to Illustrate | STC NE InterChange 29March 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.com
Zhumell Z12 Deluxe...
Photography do’s and don'ts
• (Screen-capture do’s
apply here too)
• Set up lighting and
background
• Consider the value o...
Photography recommended process
• Set up lighting and background in advance
• In tool: Crop or edit out extraneous details...
ILLUSTRATIONS
(10 slides)
To Illustrate or Not to Illustrate | STC NE InterChange 35March 2015
Photos versus illustrations
Photo details can be visually
confusing
Illustrations avoid visual clutter
and emphasize speci...
Use corporate clipart whenever possible
EAGLE 5 EAGLE XG EAGLE XG
EAGLE XG
& Tek3-based IAS IMF
Application
Server
ATCA/Bl...
Incorporate company clipart
To Illustrate or Not to Illustrate | STC NE InterChange 38March 2015
Vector versus raster graphics
Resolution dependent
Resolution independent
(architecturally the same)
March 2015 To Illustr...
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 | ST...
Hardware parts and action
Nikon Coolpix L830 Reference Manual, © 2014 Nikon Corporation
To Illustrate or Not to Illustrate...
Drawing do’s and don’ts
• (Screen capture and
photography do’s apply)
• Prefer making (or buying)
your own, or repurposing...
Drawing recommended process
• Adopt a style guide for nomenclature (better to include in
a separate table rather than anno...
GALLERY
(1 of 12 slides)
To Illustrate or Not to Illustrate | STC NE InterChange 46March 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 iTunes Quick Tour
To Illustrate or Not to Illustrate | STC NE InterChange 49March 2015
Apple Magic Mouse description
http://www.apple.com/magicmouse/#hero-video
To Illustrate or Not to Illustrate | STC NE Inte...
The Google Chrome Comic
Behind the Open Source Browser Project. Words by the Google Chrome team, comics adaptation by Scot...
Infographics
http://tablet-infographics.squarespace.com/#/ice/
To Illustrate or Not to Illustrate | STC NE InterChange 52M...
Animated GIFs
"The Horse in Motion-anim" by Eadweard Muybridge, Animation: Nevit Dilmen - Library of Congress Prints and P...
Animated GIF: Key and lock
http://www.businessinsider.com/9-awesome-animated-gifs-that-show-how-cool-tech-works-2013-5
To ...
Cinemagraph
Scott May (https://www.behance.net/gallery/2969819/Collection-of-Cinemagraphs/)
To Illustrate or Not to Illust...
Interactive SVG
http://upload.wikimedia.org/wikipedia/commons/6/6c/Trajans-Column-lower-animated.svg
To Illustrate or Not ...
Embedded video: Apple Magic Mouse
Preferences
To Illustrate or Not to Illustrate | STC NE InterChange 59March 2015
SUMMARY
To Illustrate or Not to Illustrate | STC NE InterChange 61March 2015
Summary
• It’s never been easier to communicate visually—and
users have never wanted images more
• At a high level, you al...
For more information:
• Elliott, Norbert. MSPTC Editing Guide, Ch. 15 (Graphics).
http://elliotmedia.wikispaces.com/Graphi...
References
1. “The Power of Visual Communication Infographic,” Matt Byrom,
Wyzowl (3 Mar 2014). Retrieved 26 Feb 2015 from...
Upcoming SlideShare
Loading in …5
×

To illustrate or not to illustrate

1,026 views

Published on

Do audiences want screenshots, conceptual illustrations, and visually pleasing graphics, or not? Does the delivery medium (print, online, Web) affect their expectations? Is a screenshot worth extra effort and expense, particularly if the information product is delivered in multiple languages? And when an illustration is the best choice, what are the best practices for producing it?

Published in: Software
  • Be the first to comment

  • Be the first to like this

To illustrate or not to illustrate

  1. 1. TO ILLUSTRATE OR NOT TO ILLUSTRATE Steven Jong (stevefjong@comcast.net) STC New England InterChange Conference March 2015
  2. 2. 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
  3. 3. 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
  4. 4. 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
  5. 5. 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
  6. 6. SCREEN CAPTURES (1 of 14 slides) To Illustrate or Not to Illustrate | STC NE InterChange 6March 2015
  7. 7. 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
  8. 8. … so capture screens, not desktops To Illustrate or Not to Illustrate | STC NE InterChange 8March 2015
  9. 9. Set up screen—and data—first To Illustrate or Not to Illustrate | STC NE InterChange 9March 2015
  10. 10. Clarity: Don’t use JPG for screen captures Initial capture After three edits To Illustrate or Not to Illustrate | STC NE InterChange 10March 2015
  11. 11. Clarity: Camiant (PDF) March 2015 To Illustrate or Not to Illustrate | STC NE InterChange 11
  12. 12. 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
  13. 13. 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
  14. 14. 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
  15. 15. Concision: don’t show GUIs, show data To Illustrate or Not to Illustrate | STC NE InterChange 15March 2015
  16. 16. Correctly crop and resize To Illustrate or Not to Illustrate | STC NE InterChange 16March 2015
  17. 17. 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
  18. 18. Consistent callouts, labels, and leaders To Illustrate or Not to Illustrate | STC NE InterChange 18March 2015
  19. 19. 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
  20. 20. 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
  21. 21. PHOTOGRAPHS (1 of 12 slides) To Illustrate or Not to Illustrate | STC NE InterChange 22March 2015
  22. 22. 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
  23. 23. 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
  24. 24. One way to show motion Eadweard Muybridge, 1878 [Public domain], via Wikimedia Commons To Illustrate or Not to Illustrate | STC NE InterChange 25March 2015
  25. 25. Showing parts DieCastForum.com, by SuperKungFu, 20 Oct 2014 (http://tinyurl.com/pjll55m) To Illustrate or Not to Illustrate | STC NE InterChange 26March 2015
  26. 26. “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
  27. 27. 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
  28. 28. Annotations outside photo To Illustrate or Not to Illustrate | STC NE InterChange 29March 2015
  29. 29. Annotations inside photo Boston Globe To Illustrate or Not to Illustrate | STC NE InterChange 30March 2015
  30. 30. Set up your photos March 2015 To Illustrate or Not to Illustrate | STC NE InterChange 31 Driver-pro.com Zhumell Z12 Deluxe Dobsonian Reflector Telescope Owner’s Manual, December 2010
  31. 31. 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
  32. 32. 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
  33. 33. ILLUSTRATIONS (10 slides) To Illustrate or Not to Illustrate | STC NE InterChange 35March 2015
  34. 34. 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
  35. 35. Use corporate clipart whenever possible EAGLE 5 EAGLE XG EAGLE XG EAGLE 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 2 TekServer 3 Tekelec Solution Solution AAAAAA To Illustrate or Not to Illustrate | STC NE InterChange 37March 2015
  36. 36. Incorporate company clipart To Illustrate or Not to Illustrate | STC NE InterChange 38March 2015
  37. 37. Vector versus raster graphics Resolution dependent Resolution independent (architecturally the same) March 2015 To Illustrate or Not to Illustrate | STC NE InterChange 39
  38. 38. Be careful about ungrouping objects To Illustrate or Not to Illustrate | STC NE InterChange 40March 2015
  39. 39. 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
  40. 40. Hardware parts and action Nikon Coolpix L830 Reference Manual, © 2014 Nikon Corporation To Illustrate or Not to Illustrate | STC NE InterChange 42March 2015
  41. 41. 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
  42. 42. 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
  43. 43. GALLERY (1 of 12 slides) To Illustrate or Not to Illustrate | STC NE InterChange 46March 2015
  44. 44. Microsoft PowerPoint Help: Task To Illustrate or Not to Illustrate | STC NE InterChange 47March 2015
  45. 45. Microsoft PowerPoint Help: Concept To Illustrate or Not to Illustrate | STC NE InterChange 48March 2015
  46. 46. Apple iTunes Quick Tour To Illustrate or Not to Illustrate | STC NE InterChange 49March 2015
  47. 47. Apple Magic Mouse description http://www.apple.com/magicmouse/#hero-video To Illustrate or Not to Illustrate | STC NE InterChange 50March 2015
  48. 48. 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
  49. 49. Infographics http://tablet-infographics.squarespace.com/#/ice/ To Illustrate or Not to Illustrate | STC NE InterChange 52March 2015
  50. 50. 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
  51. 51. 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
  52. 52. Cinemagraph Scott May (https://www.behance.net/gallery/2969819/Collection-of-Cinemagraphs/) To Illustrate or Not to Illustrate | STC NE InterChange 57March 2015
  53. 53. 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
  54. 54. Embedded video: Apple Magic Mouse Preferences To Illustrate or Not to Illustrate | STC NE InterChange 59March 2015
  55. 55. SUMMARY To Illustrate or Not to Illustrate | STC NE InterChange 61March 2015
  56. 56. 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
  57. 57. 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
  58. 58. 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. Berba Velasco Jr. streetdirectory.com. Retrieved 23 Feb 2015 from http://tinyurl.com/n8huq3b. To Illustrate or Not to Illustrate | STC NE InterChange 64March 2015

×