Zone Webcomic Design: In Detail, with Examples

Yesterday I wrote about Zone Webcomic Design , and its opposite, Page Webcomic Design.

Let's look at comics that incorporate Zone or Page design techniques, starting with Zone since there have been more questions.

Rightfully so: it's more complex, but it means you have more options, and for some comics it's a good way to go.

No webcomic that comes to mind, nor many web sites, incorporate a totally formula zone approach. Each of these examples has Zone attributes, and I'll count on the you to assemble them into a concept you can really picture clearly. Even our own sites, which we're currently overhauling, will show our attraction to Zone without going overboard.

I like a balance of familiarity and change in a web site. A good way to stay friendly but fresh is to rotate spot art -- the images you create to decorate the home page. You can rotate a banner, or just the direction of the eyes of that troll huddled in the corner (Bully Hill Vineyards famously did something similar with the goat's tongue on the label of their "Love My Goat" Red: a collection of labels reveals the goat gradually licking his lips).

The problem is, who has time to be changing spot art every day? The answer is to use the right script, and a dedicated archive loaded with images to be rotated.

Girl Genius does this on the landing page. Follow the link, and see what happens when you refresh the page. Anyone arriving to visit will get a random image, but not so random they doubt they are at the right site.

In our own rebuild of Lil Nyet (still underway, but nearing the end), we've reserved two zones for multiple images, including the option of no image. One will be the more traditional spot art, while another will be for more current items, like a bit of commentary on the story or a bonus gag image.

Rotating images do carry a responsibility, however, and you must decide how much time you can budget to add new ones and rest stale ones.

An opening design that crawls off the screen and onto the table top can be found in The Process , though it's marred by the gold leaf announcing an award nomination, which is incongruous. The complexity means a slower load time, but if you wait for the images to assemble and click a disk, you'll find one of the most dynamic tables of contents ever. Texture and three-dimensionality are also used. It's so dynamic it's almost unusable, in fact, but I've had a hard time connecting with this comic, and others might be doing fine.

I'm of two minds about Ellie Connelley. At first, I thought we had a classy-looking new title getting underway, but soon competing priorities slowed it down and now has come announcement of an overhaul focused on print (pardon me?). Maybe the creator's expectations were too high, but I think the real problem is that while guys can handle a non-sexy heroine, we uniformly have trouble with the penis-nosed female. (We get a good laugh when it happens to a male , though Owen Wilson can be forgiven while David Spade cannot.)

Ahem.

Ellie's home page shows us that scrollwork adds depth and texture, though of course it's not for everyone. We also note that a slightly bevelled look on many lines and cutouts gives an impression of depth. The color scheme is from the same palette across the page, until we scroll down to the ads.

One strategy for pairing ads with design is to put the ads of by themselves, at the bottom. This spoils the potency of the ads, however, and the revenue. Removing ads, moving them to inside pages -- all have drawbacks. In fact, I plan an entire column on this topic, so if you have thoughts to share, send them now so I can do a better job. A pure Zone approach to homepage design pretty much rules out ads that are not custom designed.

Robot-Factory , from France and London, may take a moment to load, but you might enjoy the sight. The fellow makes very fine robots for sale. But notice the wacky control panel on the left side. It's an excellent example of atmosphere and being in a zone. If it were my site, I'd make it functional, but it's still  a good specimen. This also serves notice that anyone doing steampunk or similar genres has special opportunities with Zone techniques.

Next please visit Making Fiends , a web cartoon picked up by Nick, and on TV now. The landing page is wonderfully atmospheric despite the labels on the buildings. (Click the building called Web Episodes to watch these, most of which are of a very high standard.) Note the hovering eyeball bats. Minimal animation makes them an ingredient within reach. For those exploring animation already, note how the solid color plus black lines of the characters eases the chore.

Allan uses just a bit of animation in the title to remind you that you've been to the site before.

Don't think I am turning into an animator. I'd like to make some animations one day, but comics are my true love. Teaming with an animator to install some motion like Allen is something everyone can consider, though a sober assessment will find it works for a limited number of page designs, and is probably best in small doses.

Lackadaisy just got a facelift that brings the current episode onto the landing page as well, though in miniature. Note how depth is gained from stacking, overlapping, shadows and wrinkled paper. Note customized button images in the poker chips. I think designing your own buttons in this way is possibly one of the best first steps you can take after tossing out clutter. A classy comic just got better-looking, huh?

I think it's possible to design a purely zone comic home page that would be successful, but you'll note that most titles cited use elements of zone design and often move towards or into zone status, but none of them are amusement parks of motion, noise and nausea. The tools we can deploy in a zone design are cumulatively too powerful for most comics, and can disturb readers. As I gear up to list some of those tools, I'll share my enthusiasm for the opportunities they offer.

Remember, Zone is about using the technology of the web to expand from the flat page and making use of space and movement. I have more coming up on Zone and Page Design, probably tomorrow. By the weekend, I hope to bring it all clear, and provide ideas for trying various techniques yourself without sweating.