to illustrate or not to illustrate

Download To illustrate or not to illustrate

Post on 16-Jul-2015




0 download

Embed Size (px)


To Illustrate or Not to Illustrate

To Illustrate or Not to IllustrateSteven Jong ( New England InterChange ConferenceMarch 2015

I am currently a senior technical writer at Oracle, where I have led teams documenting telecommunications products

I have more slides than usual, so lets get right to it1The big pictureFor this presentation, I focus on some graphic design basics addressing:Screen captures, specifically raster graphics (of software)Photographs (of physical objects)Illustrations, specifically line art (of both)Common issues, dos, dontsMy perspective: writer, not illustrator (amateur, not pro)Tool- and platform-agnostic (but focused online)To Illustrate or Not to Illustrate | STC NE InterChange2March 2015Though the title of my presentation is a whether question, I am trying to answer the questions why, when, and how

Im going to give advice I think is obvious, but they touch on problems we see all the time, so I guess notI am generally avoiding video (let alone Augmented Reality)I know some tools better than others, but Im not going to recommend anyI dont think I can label anything a best practice, but maybeI have done Web research, attended webcasts by experts, and solicited opinions on issues and best practices on LinkedIn groups and on TECHWR-L2There is no question: we are wired to seeOver 80% of learning is visual, and our brains process images differently from textand 60,000 times fasterUsers today expect and demand illustrationsIn my opinion, customers no longer print, sofree!Monitors, smartphones, and tablets all support high-resolution, full-color visuals, plus zoom, souse themA closed plane curve every point of which is equidistant from a fixed point within the curve Illustrate or Not to Illustrate | STC NE InterChange3March 2015On Facebook, people are posting 200,000+ photos each minute; on YouTube, 100 hours of video each minute (in 2013!)

If you come from a print background, your concerns about the cost and display quality of illustrations (and color) are outmoded:

Print quality standard is 600 dpiPDF standard is 300 ppi, full color; I give up on my objections that customers spend money printing color PDFs, because they just dontso consider it freeMacintosh display 72 ppi, 16.7 million colors (24-bit RBG, 8 bits/channel)Windows display 96 ppiApple Retina display about triple 72 ppi (~216)All platforms support zooming images3Shared elements of written and visual styleElementWrittenVisualCorrectnessYesClarityYesConcisionYesConsistencyYes

To Illustrate or Not to Illustrate | STC NE InterChange4March 2015Increasingly, writers are left to do graphic work, but with little or no guidance on visual styleIf you talk to a graphic artist or a photographer, youll learn that there are rules of visual grammar, and specific styles of work in their fields. At a high level, the elements of visual style are the same ones were familiar with. We have our four Cs; visual artists use the same ones. They also use style guides and templates.

Tina Kister: Visual symbolism is just as important as textual symbolism, and consistency makes it easier for users/readers to interpret. The best way to ensure consistency is to make a short media guide and, if possible, use template(s).

Louise Tincher: [Use consistent] sizing, resolution, and/or color schemes for all related graphics in a single piece of work (for example, a series of full screen captures, schematics, or hardware photos).

4Some file formats are better than othersTypeProprietary?Compressed?Best ForPNG (Portable Network Graphics)NoYesScreen captures, illustrationsTIFF (Tagged Image File Format)NoYesPhotos, scansSVG (Scalable Vector Graphics)NoN/AIllustrationsBMP (Bitmap)YesNoWindows screen captures/archivesGIF (Graphics Interchange Format)YesYes (256 colors)AnimationsJPG (Joint Photographic Experts Group)DisputedYes (lossy)Digital photos (only)To Illustrate or Not to Illustrate | STC NE InterChange5March 2015Which format to use?

Best formats for Web are PNG, GIF, and SVG (although browser support is limited and tools are shaky)

Rick Hamilton, XML Press: You need to know the requirements and keep on top of them (the ebook requirements are especially variable). My main tool for dealing with this diversity is to use SVG for all of our true illustrations (i.e., not screenshots or photographs). That takes care of print, and with good tools you can generate the rest. Then we use DocBook XML conditional processing to select the correct image for each deliverable. [I use DITA XML.]

Best format for PDF (and print) are Encapsulated PostScript (EPS), but it doesnt display well in creation tools, and I am ignoring it

Dont use imported PDFs as bitmaps (theyre huge, up to 100x the size of other formats for small images)5Screen Captures(1 of 14 slides)To Illustrate or Not to Illustrate | STC NE InterChange6March 2015Desktops 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 InterChange7March 2015We can display more today, so dont forget the size of the file you create when you capture a desktop

This is the original Macintosh desktop on the original Macintosh hardware, and my (relatively cheap) 23-in monitor at home (work monitors the same)

The original Mac display resolution was 72 ppi (matching the 72-point typography standard); today, for both Mac and Windows PCs, its 96 ppi, (a 4:3 ratio)7 so capture screens, not desktops

To Illustrate or Not to Illustrate | STC NE InterChange8March 2015OK, this is ridiculous. Most of this screen is empty space.

Some people actually mask out the outer portion, retaining all the unneeded bits, but white bits and unused take up just as much file space. Dont do that! You can make a source file you cant work with.

Michael Devito: Size screenshots [and] screenshot detail carefully. Not sure which is worse - a screen detail illustration which should be small but is much too large, or a larger screen illustration made so small it's unreadable. The former makes documents look amateurish; the latter frustrates readers and can obscure important information.

(That, and slightly different sizes distract the eye.)

So step one is to size your windowparticularly important with browser-based interfaces

Ill be specific: Size screens the same, and reduce them the same percentage, whenever practical

Then align them and keep them in print area (margins)8Set up screenand datafirst

To Illustrate or Not to Illustrate | STC NE InterChange9March 2015OK, this browser window is sized reasonably (still rectangular, which is more natural).

But there are still lots of problems here:

Is that a real email address?Is that how many characters are in my password?Does the URL show a sign-in token?What other site was I surfing?The top of the screen is extraneous detailTodays Windows and Mac OS windows are translucentwhat was underneath?GUI rounded-corner effect is lost

You need to set up the data you show before you capture the screen!9Clarity: Dont use JPG for screen capturesInitial captureAfter three edits

To Illustrate or Not to Illustrate | STC NE InterChange10March 2015Ive been advising against saving screen captures as JPGs for years, and I can finally demonstrate why

JPG compresses files by removing information, especially noticeable at sharp edges

Even in the initial screen capture (left), you can see compression artifacts

Every edited version of the file is smaller and looks worse10

Clarity: Camiant (PDF)March 2015To Illustrate or Not to Illustrate | STC NE InterChange11This was originally captured from a technical presentation, saved as a JPG, and used as shown in a technical document in October 201211Clarity: Dont resize, scale, or downsampleOriginal size

Resized down 50% and back

To Illustrate or Not to Illustrate | STC NE InterChange12March 2015Kim Schrey: I led a graphics team for our writing department in the past. One of our guidelines was to always resize in the image editing program because I can get a cleaner, crisper image with less degrading.

Resizing, scaling, or downsampling all reduce the data in the file and interpolate bit colors; for example, reducing 50% means collapsing and averaging four pixels into one. On the right is what you get. Once lost, the data can never be restored. It is literally unclear!

Much better is to instruct your display platform to display an image in a smaller area.12Clarity: FrameMaker 12 (Help)March 2015To Illustrate or Not to Illustrate | STC NE InterChange13

Multichannel publishing in FrameMaker 12 Help: you reduce a screen, you also reduce the size of text on the screen

MioMap User Manual, August 2006To Illustrate or Not to Illustrate | STC NE InterChange14March 2015Text is 12-point Ariel

Product has a 3.5 in screen (small to begin with); screen captures reduced about 50%

We are meant to see whats on them, but the screen title is now roughly 5.5 pt, and the labels (light grey on dark grey to begin with) are about 5 pt

If this were a contract, it would be illegal; its certainly illegible14Concision: dont show GUIs, show data

To Illustrate or Not to Illustrate | STC NE InterChange15March 2015(I did this for a department policies and procedures manual, in and for FrameMaker)

This shows a right-click popup menu and the dialog box that opens as a result, but how the GUI works isnt the point; the point is the data in the dialog box. This presentation combines three screen captures in one illustration, but the focus is o


View more >