How do comics apply to web design?

At an interview, Rachel is asked how all her comics experience applies to web design.

Everything has a story

After illustrating that sites, programs and even equations have stories to tell, Rachel point to an apple and insists that it has a story, too. The interviewer seems comically flustered.

Nobody wants to listen to a monolog

A young lady's date drones on an on in this comic.
Comic from Rachel the Great: Stupid Male Incident #26 one of my earlier comics

Our culture encourages broadcasting over listening. Everyone is more interested in themselves than in your product/service/whatever. Storytelling is a more effective way of capturing their attention than broadcasting.

Components of a good story

The three components of a good story that will capture someone's attention are the six big questions, the hook, and flow (aka layout, design, illustration).

The 6 big Questions

Who, what, why, where, when and how?

Ruzuku's website does a good job of telling you all of the above.
A screenshot of Ruzuku's home page.
Some folks come right out and answer the Six Questions directly, like nGen works does.
A screenshot ngenworks.

Compel your Audience

You can hook your audience on three levels: Identification, Application, and Suspense.

Showing the story

...once or twice she had peeped into the book her sister was reading, but it had no pictures or conversations in it, 'and what is the use of a book,' thought Alice, 'without pictures or conversations?' Alice's Adventures in Wonderland
Alice from Wonderland.

You don't always need words

Comickers always tell each other "show the story, don't tell the story."

A wordless Owly comic by Andy Runton.
Owly comic kindly provided by the illustrious Andy Runton.

Copy isn't everything.

Overwriting, in comics and in web design, is a sign that the author is inexperienced or out of balance with their team.

A wordy comic
Panel of Fangs of the Fiend found at Stupid Comics

Unless...

Copy isn't everything unless you're writing for a narrow audience or purpose.

A CSSquirrel comic.
CSSquirrel comic graciously provided by the immaculate Kyle Weems.

People don't read. They look.

A wordless Beardfluff comic.
Beardfluff comic provided by the superb Rembrand Le Compte.
A wordless Candi comic showing a girl getting kissed.
Candi comic provided by the fabulous Starline Hodge.

Internationalization

IKEA's wordless instruction manual.
An instruction sheet commonly packaged with IKEA furnishings.
International traffic sign designs.
Main signs used by countries complying with the Vienna International Convention, which provides some international uniformity to road signs. Sourced from the Merriam Webster Visual Dictionary

Visual metaphor in UI

Trash icons, from a drawing of a hand throwing trash into a bin, to a stylized trash bin, to a trash icon.
Definition: Trash, trashed, throw away, discard.

Why I avoid tooltips

A sketch of a cursor hovering over an enigmatic icon on a menu bar. A tooltip displays.

Anatomy of a Story

All stories have a beginning, a middle and an end. A setup, a climax, a resolution.
A comic in which Raina Telgemeier recounts her poorest days at college.
Comic courtesy of the renowned Raina Telgemeier

A desert of text

This company has a very wordy site. I did my best to protect their identity for this demonstration.
Screenshot of a very wordy page.
Here's a clearer wireframe I tossed together super quick.
An improved wireframe showing a clearer layout and hierarchy.
Comic of Hereville.
Hereville comic provided by the stoic Barry Deutsch
An improved wireframe showing a clearer layout and hierarchy.

(Better) Examples of sites that tell stories.

Pointless Corp, a lighthearted romp from Viget.
A screenshot of Pointless Corp's site.
Rice Bowls is an organization that feeds hungry kids.
A screenshot Rice Bowls's site.
Rachel Nabors dressed up in her business professional clothes, drawn in the manga style.

Thank you for coming!

Please rate this talk at speakerrate.com.

I love talking about sequential art and comics, so drop me a line!

@CrowChick | My Comics | My web ramblings

Thirsty for moar?

Dive deep with articles I've written:

Check out these books by Scott McCloud:

Check out these excellent comickers who contributed their art to this presentation: