Comic book layouts as web design inspiration

Back in the mid-’80s, I paid my way through art school working bar jobs and spending my Saturdays helping out in a comic shop. Comics are masterclasses in storytelling, design, and pacing. And when it comes to visual storytelling, few artists do it better than Watchmen’s Dave Gibbons. When an issue of Watchmen landed, we’d close the shop to read it. I still have those original comics — one of them signed by the writer, Alan Moore — and they still often influence how I think about layout design.

In this post, I’ll explore how the structure of comic book layouts — panels, gutters, and rhythm — can inspire more expressive and narrative-driven web designs. 

You’ll learn how to borrow techniques from three of my favourite comics — Concrete, Sin City, and, of course, Watchmen — to control pacing, shape emotion, and guide your audience through a story.

To the uninitiated onlooker, panels in a comic book have a similar function to still frames from a film; sequential snapshots in a film strip containing specific moments in a narrative. However, within the pages of a comic, panels must work hard to help readers understand the story.

Take this example from Paul Chadwick’s Concrete. At the top is a series of nine small panels, an unusual choice in itself. Our hero, Concrete, swims across them. The repetition of these small panels suggests the rhythm of his movements.

Next is a panel that Paul deliberately made large. Even though there’s no real action, this bigger panel makes the reader pause, realising just what the photographer is pointing his camera at. The panels shrink again as the action speeds up, culminating in a thin panel with its unwelcome touch.

It’s Frank Miller’s iconic high-contrast illustrations that most people will remember about Sin City. But the way Frank made layout integral to the story is perhaps even more impressive. When the anti-hero, Marv, shoots the priest —instead of a conventional panel — it’s the “Blam! Blam! Blam!” sound effect which frames the action. 

In Understanding Comics (1994), the definitive work on comic book layout techniques, Scott McCloud explains that:

Comic book pages contain a layout system that’s designed to convey a narrative. Every panel is a moment in time, and so a comic book’s layout doesn’t only contain the story, it becomes part of it.
In Understanding Comics, Scott explains this concept and how panel arrangement and size change the amount of time the reader spends looking at a panel. Using this technique, comic artists can slow a reader down, speed them up, or stop them in their tracks.

Smaller panels create swift eye movement, and readers spend less time looking at them in shorter bursts of attention. A sequence of smaller panels establishes a mental rhythm which the reader can quickly become accustomed to.

On the other hand, larger panels give the impression that more time is passing in the story, and they subconsciously prompt someone to spend more time looking at them. Large panels may emphasize major points in a story or contain more than one moment in time.

The two outer panels in that last sequence go from a close-up to a long-shot, but the two in the middle are smaller — not because they contain less content, but so that they perfectly match the cadence of the conversation.

These techniques can be just as helpful to designers working on the web as they are in worlds occupied by costumed crime fighters and superheroes. Imagine a page full of information about a product or service. You’d naturally want someone to focus for longer on its benefits than on the technical specifications.

Why do some panels have borders and some not? And why does artwork sometimes bleed to the edges of a page? Comic artists use borders and bleeds like film directors use cuts and camera angles. Most comic book panels use borders to create a box that contains a moment. They define space and time, giving the reader a sense of structure, and a sequence of panels with borders also creates rhythm.

On the web, we often think that adding borders to a box emphasizes its content, but sometimes the opposite can be true. When there are no borders, the eye is free to spend more time wandering out into white space, paradoxically providing greater emphasis.

When artwork bleeds across gutters and margins, it implies there’s more happening off the page. It creates intrigue and suggests there’s something important to pay attention to.

Some comics have characters, speech bubbles, or other elements that break out of their panel, like a hand reaching across the gutter or a foot kicking through the border. Artists use these to disrupt the rhythm created by a sequence of panels for a dramatic effect, and to lead someone’s eye to make it easier to follow the story.

One of Scott McCloud’s most powerful ideas in Understanding Comics can inspire web designers to think about pacing and storytelling. In comics, gutters are the spaces between panels, and most readers don’t consciously notice them. But Scott explains that it’s in the gutters where much of a story is told:

The gutter is where a reader imagines the connections between panels. They don’t see the action, so it’s up to their imagination to interpolate it. Scott describes the phenomenon of our brains filling in the blanks as “closure,” and he explains several types:

Moment-to-moment transitions show tiny changes, like a man walking through a gate and down the street, which draw the reader in with each subtle movement. As the action is detailed, there’s very little interpolation needed to understand what’s happening.

Action-to-action transitions follow a subject through a progression of actions, like a man being hit on the head with a blunt object.

Subject-to-subject transitions shift attention from one element to another within the same scene, creating tension.

Scene-to-scene transitions jump across distances in space or time, like moving from the present to the past. These larger jumps require the reader to make bigger mental leaps to cross the gaps in a narrative.

Watchmen isn’t just a sensational story; Dave Gibbons’ work on its design is a masterclass in layout storytelling. Throughout the majority of the book, Dave used a 3×3 grid — nine equally sized panels — on almost every page, which creates a steady rhythm.

This grid serves several purposes. First, it gives Watchmen’s visual language a structure. Repetition allows the reader to process the story at an even, measured pace. Because that rhythm is so consistent, even the slightest deviation becomes a major narrative event.

When Dave breaks the grid by combining panels, stretching them wide, or dropping into a full-bleed splash, we can feel the effect. He used this technique for the incredible ending of Watchmen chapter 11 and the start of the twelfth and final chapter.

Back in the comic shop I worked in, I read each issue of Watchmen when it arrived each month. As its story developed, the suspense which came from waiting was as much a part of the experience as reading the comic. Dave Gibbons stuck to his nine-panel grid for much of the story, but at the end of chapter 11, he slowed down the action by using wider panels, and then sped it up with smaller ones. 

Then, in the final panel — the largest on that page — nothing, just an empty white box. The month until chapter 12 arrived was excruciating. It opened with six full pages, filled with carnage. 

What had happened in the time between chapters? At this point, my heart was racing, and my imagination went into overdrive — precisely what the writer and artist wanted me to feel.

The brief: My client, The Daily Grind, is a coffee company that promotes the work of ethical coffee growers. They asked me to design a section devoted to content which tells stories about the people who grow the beans for our morning cuppa. The Daily Grind isn’t an actual client. However, the creative challenges and the decisions involved in designing a project like this are real.

Tip: My favourite comics are black and white, and I typically design without color to help me create structure without becoming distracted by color.

The Daily Grind understood when I explained that the pages people experience early on in their journey aren’t just for delivering content; they’re about setting the stage. For consistency across the Daily Grind website, I reused the modular grid I’d designed for their Caffeine Conference website, which was inspired by retro wrestling posters.

I used a row of smaller panels at the top of the page. These contain photographs and links to profiles of other coffee growers, and keeping them small means that a reader’s eyes can skip across them quickly.

Lola is the main character in this narrative about coffee growers, so to emphasize her essential role, I placed her in the largest panels. Whereas the majority of panels on this page are bordered, Lola’s panel is frameless, allowing her content to bleed into neighboring panels.

I used the modular grid differently for a section on the coffee-growing process. Here, the three top panels are equally sized, while the larger panel underneath will slow the reader down and allow them to focus on its content.

Just like in Watchmen, those three evenly sized panels use an action-to-action transition which takes the reader from a long-shot of the coffee growing fields to a close-up of the beans. The larger panel below encourages the reader to slow down, take in the subject, and then move to the next panel where they’re able to pledge their support.

A comic book’s opening pages do a lot of heavy lifting. They’re a place where a reader can focus, almost like taking a deep breath before the story kicks in. They establish context, helping someone understand where they are and what’s happening in the story. Many comics use these splash pages to offer a quick catch-up or a one-paragraph summary for new readers. This invites people in and stops them from feeling lost. Splash pages set the tone, not just in the text but also in the layout.

Lola’s large portrait occupies the majority of the modular grid, but this time her picture bleeds off the page to add visual interest and suggest there’s more to her story. Other characters occupy smaller panels and act as links to other pages, while the one-paragraph introduction lets a reader know what this page is about at a glance.

Like many of my favourite comics, this design looks more emotive in black and white. There have been plenty of occasions where I’ve suggested a client avoid using any color, but The Daily Grind team are a colorful bunch, and they wanted their design to be in full color.

I think they were right.

Thanks to the talented artists, writers and publishers whose work I’ve used as examples in this article.

Yes — if we want it to be.

When you break it down, comic book layouts and web pages aren’t that different. Both are built from sequences. Both rely on the interplay between layout and storytelling to guide an audience through an experience.

Comics remind us that layout isn’t just for organizing content — it’s a crucial part of the narrative. The size of boxes, the space between them, the way elements flow from one moment to the next — these decisions shape a story as much as any image or line of dialogue.

So think like a comic artist. Ask how you want someone to feel as they click and scroll. Decide where they should pause, where they should race ahead, and use rhythm, contrast, and surprise to lead them through. That’s storytelling.

Often referred to as one of the pioneers of web design, Andy Clarke has been instrumental in pushing the boundaries of web design and is known for his creative and visually stunning designs. His work has inspired countless designers to explore the full potential of product and website design.

Andy’s written several industry-leading books, including Transcending CSS, Hardboiled Web Design, and Art Direction for the Web. He’s also worked with businesses of all sizes and industries to achieve their goals through design.

Visit Andy’s studio, Stuff & Nonsense, and check out his Contract Killer, the popular web design contract template trusted by thousands of web designers and developers.