“Technical Illustration and Animation Strut Their Stuff: Visual and Media Design Principles We Can All Apply” introduced an overview of visual design and animation, and continued our exploration of digital portfolio examples. The evening featured a progression that began with the principles of “visual language” (the combination of textual and graphic components found in much technical and business content) and moved into the whizzy, flashy world of technical illustration and animation. Presenters included Justine Nielsen, Collin Falla, Curtis Handley, and Chloe Andresen.

Appealing to Our Senses and Sensibilities
by Michael Raphael

When you’re planning the design of a document, start by analyzing your audience, knowing its language limitations, and what use the audience will make of your document, explained Justine Nielsen, a member of SLO STC and an institutional research and publications specialist at Cal Poly.

Justine, the first of four speakers at the April 28 meeting who talked about technical illustration, animation, and visual and media design principles, advised us on the use of visual language in the overall document design, pre-production and pre-press preparation. “Consider who the audiences are, what their goals are, and how you can advocate on their behalf,” she said.

Then figure out which medium is most appropriate, continued Justine. If you choose to produce an online document, layer its information hierarchically, and test it with various stages of technologies, not just current versions of browsers. If you choose print, consider physical working conditions when choosing page size, layout, fonts, colors, and substrate. For example, will the documents need to be waterproof?

Keep it simple
 
In any event, make the information easy to find and easy to understand, Justine said. “Just chunk it.  Keep it short. No long sentences. Use long paragraphs only for explanation, not for instruction.” And repeat information rather than using cross-references, she said.
 
She also advises designers to use text organizers including headlines, kickers, subheads, headers, footers, pull-quotes, sidebars, and bulleted and numbered lists. “Design for visual effectiveness” by using words, images and shapes to create a visual language, she said. “Don’t overwhelm with too much information” when using technical illustrations. Create simple tables and diagrams and don’t use distracting “chart junk,” Justine advised.
 
The bottom line? Market yourself by showing your design skills with a digital portfolio. (To download Justine's Powerpoint presentation, click here. To see examples of her document design work at Cal Poly, take a look at the PolyView reports posted here.)

Animation and 3-D modeling pay off
 
Justine's ending remarks segued into the presentation by Collin Falla and Curtis Handley of C-Squared Design, a San Luis Obispo company that provides technical illustration and animation, 3-D modeling, new media design, and Web site design to a number of local and distant clients.

Collin and Curtis demonstrated cutting-edge uses of such programs as Flash to create work that can be used in something beyond online résumés—digital portfolios. For example, they’re developing a CD interactive portfolio for a photographer to go with his stock photography Web site, which shows his style of photography. They have used Flash extensively not only for that, but also for producing three major technical manuals for a local client, which shows how Flash can be used to animate three-dimensional graphics used in a CD presentation.
 
“Your digital portfolio will say ‘hello’ to your client,” Collin said, adding that in the case of the photographer, Flash also protects his client’s images. Collin said it is important to take into consideration “who you’re pitching to,” saying that in the photographer’s case, it’s the art director.

Interactivity can be a key
 
“Interactivity can lurk just about anywhere,” Collin explained. He and Curtis use Inventor for 3-D modeling, and using it with other applications to produce a seamless package.

“Technical communicators face challenges, and each medium influences the other, although the front ends are similar,” Collin said. “Even humor can work,” and can even be integrated into a technical manual, he said. To understand what appeals to your target audiences, use the data collected by groups that track demographic information on who flocks to various kinds of media-driven sites.
 
Curtis and Collin also stressed the need for using various iterations of the most popular and well-used browsers, including Explorer, Netscape, Omega, and the new Apple browser, Safari. “You have to make sure things load quickly,” Collin said. Testing their productions thus requires a significant amount of time. Curtis added that the biggest mistake people make in designing a Web site is size, creating sites that are “too big for the screen.”

Consider the ROI—it’s important
 
The ROI—return on investment—is the bottom line for clients, said Collin, in describing one of the jobs he and Curtis completed for a client. In that instance, the portfolio they created “generated a huge income in the first year,” much more than offsetting the cost of developing the Web site.
 
“It has been well established that effective technical communication is multi-modal, employing words, images, motion and sound to ensure ease of comprehension and memorability,” Collin said.  “It could be argued that, in our current cultural context, those who do not employ multi-modal content where appropriate are engaging in self-sabotage, as more of our daily exposure to media becomes multi-modal.”

To see more of Collin's and Curtis's work, visit their C-Squared Design Web site.

Music works with Web sites
 
Chloe Andresen (shown at far left) who deals with traditional and new media design, instructional design, Web site design, and original musical compositions, took STC members and guests through a journey of her digital portfolio, demonstrating how the mix of visual and audio works.
 
“I’m a concept person,” said Chloe, who works at a video-production company in the San Luis Obispo area. “Multimedia can tell the story. Make it a living design.”

Chloe, who first worked at a print shop, said that even print can have a “certain amount of interaction,” when the quality of paper, inks, and folding are considered.

Tell the story visually
 
She knew there was a need at a school where students were suffering from repetitive strain injuries, and put together an instructional program that illustrates how to deal with such injuries.
 
She also identified the need for analyzing your market. “Who are they? What’s the audience?” For college students, at the school for which she created the program dealing with injuries, “you can have whistles and bells, but not too much.” College students don’t want to have to read any more than is necessary, she added. Consider age, sex, background, and determine color, pace and mood in your design, she advised. Also, find out where these people are located, and what types of computers they use.
 
First organize the material in outline form, before turning it into a graphical prototype, and see if it represents the information correctly, Chloe said. Consider your objectives, and make up a structural strategy. She starts with a storyboard, using paper and pencil, and goes on from there. She uses action scripting, and makes a skeleton, testing functionality, then prepares graphics for Flash. She uses PhotoShop and Illustrator, plus other programs, then routes images through Flash.
 
“Evaluate how the user uses it,” she said. And, with respect to mixing media with music, she said a Web site or digital portfolio “has to spark interest in order to get an attitude change.”

To see more of Chloe's work, visit her Living Contrast Web site.

Photography by Mary Meyer.

 #####