Oh, boy. It’s been a while, hasn’t it? This is the first post of the year, and it will be about the first book I’ve finished, “See What I Mean” by Kevin Cheng (which, by the way, I got from O’Reilly’s Blogger Review Program). It’s a book about using comics “for work”, to communicate ideas like product concepts, user stories, and such, more effectively.

This post will cover about half the book, from chapters 2 to 5. These notes are much more useful if you have the book to refer to the pictures, but hey, this is mostly for me ;-)

Properties of comics

Basic vocabulary for the anatomy of comics:

Anatomy of a comic

Properties of comics:

  1. Communication: comics don’t need words, or can express a lot without them (p. 23). They’re universal!
  2. Imagination: characters with few features make more readers relate. This can be applied to UI mockups/sketches, too: people focus less on design if it’s abstract (p. 25,26).
  3. Expression: give interpretation to words (“I’m sorry”/”Thank you” examples with different facial expressions on p.27). When combining text and pictures, the sum is bigger than the parts.
  4. Time: comics can express time passing by using empty or repeated panels. Also, via words in “narration” and reference objects (like burning candles, clocks, or day/night).

Drawing 101

Drawing faces is easy! Eyebrows and mouth go a long way to express mood. Body language helps quite a bit, too, and it’s easy to represent. See examples of combinations of eyebrows and mouths on p.47, 48. In faces, eyes go in the middle, and dividing the bottom half in three gives bottom of nose and mouth. Also see http://www.howtodrawit.com for tips on how to draw different things.

Approx. proportions for a person are two heads for torso, 1 for hips/groin, and 3 for the legs. Body language basic guidelines: leaning forward shows interest, concentration or anger (depends on arm position and context; curling the spine works, too); arm position can tell a lot (lifting one or both, on chin, in front of body); head positions don’t change much, but facial expressions or where the person is looking, does. When drawing body language, try to imagine the situation and exaggerate it. It often helps to start with a stick figure, then add detail.

Steps to create a comic

There’s no single correct way to create a comic. One possible approach:

  1. What’s your comic about? Why you’re using comics, what to include, who’s the product and comic for. This chapter is about this step.
  2. Writing the story: create scripts in words, an outline, define characters, setting and dialogue.
  3. Laying out the comic: plan each panel, what to show and how much of it.
  4. Drawing/refining the comic.

What’s your comic about?

Don’t approach the question broadly and vaguely, break it down! Define goals (what to accomplish), length (3-8 panels encouraged; should fit on site homepage, a postcard or e-mail; if longer, consider physical prints), audience (expertise level, context), and representative use case (help your readers understand why they should care).

Writing the story

When writing a script, you can use a similar format as that of film scripts. Each panel’s needs four primary elements:

  1.  Setting (defined up front, usually in bold). It can be time of day, location, or maybe what happens in the background. It depends heavily on the audience. The first panel can help with the setting (“establishing shot”). There are different graphical ways to convey a setting: the description of it describes a concrete way (eg. exterior of coffee shop vs. interior of coffee shop vs. close-up of coffee cup being served).
  2. Characters (all caps, bold). There are several types: target audience, people who interfact with them, and objects/locations that play a significant role (eg. the solution). Target audience is typically based on personas, go make them if you don’t have them already.
  3. Dialogue (regular font). It’s defined by more than the text itself: fonts, sizes, colours, bubble shapes or the split into different bubbles are very important, too! The text can be hard to get right: make it fit the character, keep it realistic (avoid marketing jargon and overly enthusiastic conversation). Captions can communicate time, setting, action, and even dialogue, but don’t add unnecessary information in them, and always try to speak from the character’s voice.
  4. Actions (usually italics). It’s what characters do, depicted in the panel art.

How to tell a story: remove all unnecessary. You can combine several points in a single panel. Show, don’t tell. See examples on p.98-100.

And that’s it for today. In a few days I’ll publish the rest of the summary.