22 panels

I just started work on my next essay and it’s clear to me at this point that it’s visually going to be inspired by comics. So I asked Lucy for advice about where to get started learning about layouts, formatting, etc. because I remember reading Scott McCloud’s books about a decade ago but now I wanted to learn about the grammar of comics in more detail: where to put things, how to sequence a story, and how to shape graphics in a new and unfamiliar way.

Lucy first hyperlinked me to The Creator’s Guide to Comics Devices by Reimena Yee which is exactly the sort of thing I was looking for. The strange thing is that these guides are simple and obvious when you look at them but, right now, for me, they’re revelatory. Take contraction, where something like the spacing of gutters between panels in a comic can act as easily overlooked punctuation:

Contracting panels produce particular evocative affects. Often it increases tension, heightens focus, or evoke physical and experiential affects such as losing consciousness and claustrophobia...

Lucy also linked to this post about comic book artist Wally Wood and his rules and guides for speeding up the work called 22 panels. Artists, if ever stuck, would reference these rules to unblock them, as Scott Vandehey writes:

The “22 panels” we know today were assembled by one of Wood’s assistants, Larry Hama: “When I was starting out as an editor at Marvel, I found myself in the position of having to coach fledgling artists on the basics of visual storytelling, and it occurred to me that the reminder sheets Woody made would help in that regard.”

Hama later said, “I don’t believe that Woody put the examples together as a teaching aid for his assistants, but rather as a reminder to himself. He was always trying to kick himself to put less labor into the work! He had a framed motto on the wall, ‘Never draw anything you can copy, never copy anything you can trace, never trace anything you can cut out and paste up.’ He hung the sheets with the panels on the wall of his studio to constantly remind himself to stop what he called ‘noodling.’”

(Most front-end dev work to me is noodling and I realize that my whole sojourn into design systems was inspired by removing all this noodling work, and trying to get us all working together on the bigger, harder problems. Rather than, ya know, making the fifteenth inconsistent toast component or whatever.)

Finally, Lucy linked me to these comic book lettering tips by Nate Piekos that are pretty fun. He has a lot of screaming advice, such as:

DON’T CROSS BALLOON TAILS...EVER

And now I wish there were rules like this for product design that I could refer to now and again whenever I start noodling because I certainly spend far too much time moving elements around on a page when the big, useful work is sometimes left pushed aside or abandoned, incomplete. Also — as I’m mid-ramble anyway — I strongly believe that there’s many lessons us web designers ought to pilfer from these comics. The use of space and rhythm, the hierarchy of information and the gradual reveal of ideas, building on the suggestions of the last page, sequentially, until the big reveal at the end.

My bet is this: if you find yourself asking what the future of reading on the web looks like, then I guarantee that it’s comic books from 50 years ago that hold all the answers.