Web Directions: Comic book inspiration and the CSS Eleven

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!


Category: other Time: 2007-09-27 Views: 0

Related post

  • Video: Playing with jQuery and the CSS Class Selector 2014-11-27

    The CSS Class selector is very useful when you need to manage or apply CSS styles to multiple elements. Additionally the CSS Selector has performance advantages and can be overloaded. This becomes more exciting when jQuery is used to add/remove or to

  • Is there a web based converter between rwx and the octal version? 2011-03-18

    I can never remember what the conversion is from something like rw-r--r-- to 644. Is there a simple web based converter between the 2? --------------Solutions------------- This site provides an interactive way to see what permissions bits are set whe

  • How can I hide the light blue bottom border on Web Part headers (on hover) and the border around the active Web Part? 2012-06-14

    The bottom border only occurs on hover. The active Web Part has a full border that I'd like to remove. I've tried the following styles to no avail: .s4-wpActive { border: none; } tr.ms-WPHeader td { border-color: transparent; } .ms-WPHeader, .ms-WPHe

  • save data as a Web service with XML parser and the SQLite and swift 2016-02-08

    save data as a Web service with NSXMLParser and SQLite, the dartos if I can synchronize an update on the phone keep on the server and vice versa. Swift and IOS 9

  • Web Directions South: Discount Tickets for SitePoint Readers 2009-06-29

    Hot off the press this morning was the announcement that the Web Directions team have extended the early bird pricing for tickets to the Web Directions South 2009 conference until July 9. That's a whopping $200 off the full price, so if you were thin

  • What's the best term to refer to the pointy part of a comic-book-style balloon UI element? 2011-04-18

    In discussing balloon-ish UI elements, I've described the pointy part as 'points', 'arrows' or 'spikes', and that seems to get the idea across to many people alright... but I find myself falling back on hand gestures to clarify my err... point. What'

  • Announcing the Winner of our Web Directions South Quiz 2009-09-01

    Our recent Web Directions South quiz was hugely popular, with hundreds of hopefuls testing their knowledge about the Web Directions conference series in the hope of winning a ticket to WDS '09. To qualify for a free ticket, quiz-goers also had to pro

  • Web Directions South: Early Bird Pricing Ending Soon! 2007-06-29

    The lovely folks at Web Directions have informed me that the Early Bird Pricing for this year's Web Directions South conference in Sydney has been extended to July 4. If you're thinking of attending the Australian conference for web professionals in

  • Web Directions South, Day One: Conversation Is King 2008-09-26

    The SitePoint/99designs team were out and about at Web Directions South today, mingling with the punters and sharing coffee and carrot cake with the speakers. Miles mentioned in a recent issue of the SitePoint Tribune that there are a number of reaso

  • Using Helper Classes to DRY and Scale CSS 2014-11-05

    You are starting a new web project and looking for a new CSS methodology that will help you scale your code. A growing set of techniques for writing modular CSS are available, including SMACSS, BEM, and a number of other similar methodologies, all ba

  • Web Directions South, Day Two: Crowd vs Community 2008-09-29

    Perhaps it's because last week's Web Directions South conference was the fifth that I've attended that I'm more difficult to impress than I used to be. Day One of Web Directions South didn't really jump out and slap me in the face like I'd hoped. Not

  • Win Free Tickets to Web Directions Code 2013-04-18

    JavaScript, HTML5, CSS3: it's a changing landscape. Web Directions brings together practitioners and big thinkers at the leading edge to educate and inspire at a "festival of code". SitePoint is partnering with Web Directions Code 2013 in Melbou

  • Problem ordering the CSS references when registering CSS files with the CssRegistration class 2010-11-23

    I'm developing a web part which needs some custom CSS files. So I'm using the CssRegistration class to add them to the page header. The code registers 4 CSS files which got deployed to the layouts folder by the web part feature. A fifth CSS files is

  • Save $100 on Web Directions South 2011 2011-08-23

    Web Directions South is "The Australian Web Industry Conference", running October 11–14 in 2011, and its in Sydney. There are two days of workshops, two days of conference with four in depth tracks, keynotes, an expo and a veritable smorgasboard

  • After how many years does a Web Interface Design Book become outdated? 2012-07-19

    I am new to a UX team, and I am reading many web interface design books. Since the web is fast moving and evolving, some past best practices are now obsolete. For example, clear button in forms. Now the clear button is recommended to avoid in form de

  • An Introduction to the CSS Grid Layout Module 2016-03-02

    As web applications become more and more complex, we need a more natural way to do advanced layouts easily without hacky solutions that use floats and other less burdensome techniques. An exciting new solution for creating layouts comes with the CSS

  • Web Directions Reflections, part 1: JavaScript Evolution and the Aussie Invasion 2010-07-02

    I was fortunate to attend Web Directions @media in a slightly gloomy London last month. The event was a magnet for all the movers and shakers in the web world and both days were packed with excellent sessions for developers and designers. Where do I

  • Take the Web Directions Quiz and Win! 2009-07-20

    The Web Directions South conference is on again this year in Sydney in October, featuring several SitePoint authors and our own Technical Director, Kevin Yank. SitePoint is a media sponsor, and we're offering one lucky SitePoint reader the chance to

  • Web Directions 2010: And the Winners Are... 2010-08-24

    A little while back we let you know how you could snare yourself a free ticket to the Web Directions 2010 event in either Australia or the USA by taking a simple quiz. Well the quiz has finished, all eligible entries have been received, and today is

iOS development

Android development

Python development

JAVA development

Development language

PHP development

Ruby development


Front-end development


development tools

Open Platform

Javascript development

.NET development

cloud computing


Copyright (C) avrocks.com, All Rights Reserved.

processed in 8.855 (s). 13 q(s)