Web Directions: Comic book inspiration and the CSS Eleven

Andy Clarke captivated the audience in true Malarkey style this morning, with his keynote presentation Think Like A Mountain at Web Directions South.

Drawing upon one of his childhood loves, comic book art, Andy pointed out the numerous parallels between comic books and web page layout.

Bandying around references to and artwork by comic artists both celebrated and obscure (Frank Miller, Paul Chadwick, Dave Gibbon) Andy highlighted the progression between panels in a comic book (some follow an obvious order; others require a lot more deductive reasoning). As it does in the movies, this technique adds drama by not explicitly showing every detail.

In addition, following an established convention to build trust and familiarity, then busting out of that convention occasionally, is an effective way to create timing for a story, or for a user scanning a page.

Andy also mentioned the rhythm of a page, as defined by its layout. On the Web, similar rhythm can be created by using borders, background images/colours, contrast (font weight). It’s useful to think about the amount of time we want someone to look at our content when laying it out.

While it might not be appropriate to splash exaggerated sound effect captions across our sites, we can still use conventions for drawing a reader’s eye across the page too — for example, by using contrast, images, headings or slightly rotating a container that the user would normally expect to be perfectly aligned. In comics, bigger panels translate to slow storytelling, and small, thin panels can create a much faster, more frantic pace. Thinking about a product page, it’s easy to see how a user is likely to spend more time dwelling on a larger picture than a collection of much smaller images.

Andy touched on the topic colour, and suggested that in comics and on the Web, colour doesn’t always add something. e.g. Sin City is mostly monochrome, but the splashes of colour really stand out.

He concluded by comparing the evolution of the Web as a medium to that of comic books, which originally had limitations on the stock used, and therefore, the colours that could be applied. On the Web, we’ve now evolved from the web-safe colour palette and the lowest common denominator, so this should give us more freedom to take advantage of the medium and explore it to its full potential.

After his presentation, Andy also introduced the CSS Eleven, a collection of standards-based designers whose goal it is to help the W3C’s CSS Working Group evolve the CSS3 specification. Great to see three SitePoint authors, Cameron Adams, Jina Bolton and Jonathan Snook, on the team!

Related posts:

1. Friends Don’t Let Friends Use Comic Sans Comic Sans is the font that everyone loves to hate!...
2. Win Signed SitePoint Books at Web Directions South If you're at the Web Directions South conference in Sydney...
3. Web Directions South: Discount Tickets for SitePoint Readers Early bird pricing for this year's Web Directions South conference...
4. New Release: Build Your Own Web Site The Right Way Using HTML & CSS Build Your Own Web Site The Right Way Using HTML...
5. 101 Essential CSS Tips, Tricks & Hacks The team at SitePoint is pleased to announce a new...

This entry was posted on Thursday, September 27th, 2007 at 2:07 pm, contains 522 words, 7 images, and is filed under Web Design. You can follow any responses to this entry through the RSS 2.0 feed. Both comments and pings are currently closed. The views and opinions in this blog post are those of its author.