Creating Conceptual Comics: Storytelling and Techniques

April 14, 2006

An IA Summit 2006 Workshop: Presented by Kevin Cheng and Jane Jao

I have a confession to make. I almost didn’t sign up for the Creating Conceptual Comics workshop. When I saw it listed in the IA Summit program, several questions came to mind.

  • First, how could anyone fill a whole day with a topic like this?
  • Second, with all the “serious” stuff in the same time slot, shouldn’t I do one of those workshops instead?
  • And third, I don’t really know how to draw all that well; so what could I do with comics anyway?

Champion Advertisement
Continue Reading…

Then I reminded myself of several other things:

  • At my workplace, I keep preaching the value of visual communication, and maybe I should put up or shut up.
  • It would be a nice break from the bullet-point monotony of the garden-variety seminars.
  • If I’m going to take creativity seriously, maybe this would be the most serious workshop I could choose.

I’m happy to say my second thoughts were right on all counts. Just when I thought I’d encountered every user-research and ideation technique under the sun, Kevin Cheng, shown in Figure 1, and Jane Jao succeeded in opening participants’ eyes to a surprisingly versatile and efficient method that lets one express things no other medium can quite capture.

Figure 1—Kevin on comics
Kevin on comics

The workshop began with an introduction to how a comic—that is, sequential art—works as a medium, and how comics differ from purely textual documents, storyboards, and wireframes.

A series of comics panels can tell the story of a user’s situation and show how she interacts with a software application. Comics let you present a user within her context, even before she encounters the application. And then, when it shows her using the software, the focal point is the user—and her thoughts and body language. The application becomes just one element of her whole situation, which is much more true to real life.

Figures 2 and 3 are examples of comics that illustrate user interactions.

Figure 2—Comics panels
Comics panels
Figure 3—More panels in the series
More panels in the series

While a text-based scenario might tell the story pretty well, it requires reading and greater logical comprehension and doesn’t easily integrate a visual feel for the software concept. And while wireframes or prototypes of screen designs might be very visual, they lack the narrative context for the software’s use. Plus, they usually require a designer to flesh out a design in much greater detail and tend to get people reviewing the design hung up on tiny details rather than on the design’s overall purpose and conceptual model.

Comics nicely bridge the gap between pure text and literal visuals. They let you emphasize the more meaningful portions of a design, and they show the design within a meaningful context rather than in a vacuum.

Kevin and Jane demonstrated that one doesn’t have to be an accomplished comics artist to get the job done. With just a few strokes of a pencil, you can create basic faces and express body language evoking a whole range of emotions. They even provided some handy stick-figure and facial-expression reference guides! Figure 4 shows the handouts.

Figure 4—Handouts

If anyone in the room had any doubts they could draw comics, their doubts were dispelled by the end of the day. Our facilitators gave us assignments to work on in small groups. We had to go through the whole process: brainstorming design ideas, then developing a way to get the essential ideas across in a comic strip by writing a script, roughing out some panels, and inking them in, and finally, presenting them to the rest of the participants. Figure 5 shows some comics panels that participants drew.

Figure 5—Participants’ comics
Participants' comics

The results were amazing. Granted, our stick people didn’t come close to the deftly rendered characters in OK/Cancel, but we found out virtuosity wasn’t necessary. In some ways, the simplicity of our scribbles was part of their merit.

I was very impressed by how complete amateurs like myself were able, in just a few hours, to create comics that expressed some very sophisticated design concepts quite clearly. And we did it all without having to prematurely design any detailed user interfaces or list a single bullet point. The kicker? I felt that each presentation gave us the user’s perspective better than any written scenario or storyboard I’ve ever seen.

How often can you say you truly learned something completely new in a design workshop? For me, it had been a long time. But there I was, working hands-on with paper and pencil, dreaming up great ideas, and experimenting with visual communication in a medium I hadn’t before seriously considered for the purpose. If you have a chance to attend this workshop, do it! If nothing else, it’ll help you remember why you wanted to be a designer in the first place. 

Photos by Andrew Hinton and Kyle Pero

Information Architect and UX Strategy Consultant at The Understanding Group

Senior Digital Experience Architect at State Farm

Atlanta, Georgia, USA

Andrew HintonAndrew is the author of Understanding Context: Environment, Language, and Information Architecture. Since the early ’90s, he has helped organizations both large and small make better places with information. Previously, Andrew practiced as an IA consultant and designer for companies like American Express, Sealy, Wachovia, Shaw, and Kimberly-Clark. Andrew participated in the founding of the IA Institute and wrote its manifesto.  Read More

Other Articles on Conference Reviews

New on UXmatters