How Comic Books Can Make You a Better Designer

Our guest author today – Jenni Chasteen – is a freelance blogger, web designer and self-described geek who spends as much of her time doodling as she does designing.

Long before I ever picked up a Wacom tablet or even heard the word kerning, I read comic books. I absorbed the artwork, page layouts and character designs like a nerdy little sponge. To this day I can’t figure out why comics are considered a low form of art. Pretentious designers pass it off as kid stuff, but they’re missing out on some valuable sources of inspiration.w

While I was working as the assistant graphic designer at a large ecommerce company, I’m pretty sure I was the reason the Senior Graphic Designer had ulcers. It’s not that I intentionally set out to irritate her; it’s just that we didn’t always see eye to eye on design choices. She came from a web graphics/marketing background and I came from more of a self-taught/animation-school drop-out/good-at-BSing-my-way-through-life background. When she designed things she designed them with a strict level of symmetry and order. When I designed things I tried to never do the same thing twice.

On one occasion I handed in a mock-up of two adjacent promos, one with a close-up of a product, and one that was zoomed out. When she reviewed it she told me to make them both the same size.

Thinking that my design philosophy was incredibly clever I began to explain, “Well, I learned in storyboard class that no two panels in a comic should look the same…”

“This isn’t a comic book. It’s a website.”

I’m not sure where I went wrong. Somewhere between challenging her opinion and bringing up what she thought was childish nonsense I lost her attention.

I must have sounded crazy to her. And I probably sound crazy to you now.

Dynamic Layout vs The Grid

If you’re not seeing how comic books could possibly relate to “real” design, consider this: A website is meant to convey a message, just as a comic book tells a story. While it’s not showing your audience frame by frame what happened in a fight between Wolverine and the Incredible Hulk, your design should be just as engaging.

Scan a “25 Great Examples of Web Design” list and you’ll find at least a dozen that look more or less the same or follow some kind of grid layout. Thumb through 32 pages of a comic book and you won’t find two pages that are exactly alike. Comic book pages don’t conform to any one standard layout and are designed to keep the reader’s eye moving while highlighting the most interesting action. Grid layouts are extremely useful in getting a lot of information across in a logical way. But when a grid defines your design it’s like a super hero with only one villain to fight—after a while the story gets old.

The most important elements should be big and easy to read, with everything else on the page pointing towards it. Comic book artists aren’t afraid to distinguish the difference between the most exciting part of the story and the filler. When web designers show that kind of audacity it’s like saying “click here, THIS is the good part.” Of course a website shouldn’t look like a comic book, but it’s okay to step outside your comfort zone and create something dynamic.

Design Promos Like Comic Book Panels

So back to the story about the Senior Graphic designer. As I was trying to explain, two side by side panels with two characters that are the same size in the same place look homogeneous causing both of them to get overlooked. The same could be said for adjacent promos.

The homepage of the website we worked on together had a grid of ever changing promos featuring different products. These weren’t very interesting products, so we had to do what we could to make the site look interesting. For argument’s sake let’s say the products were cheese graters.

If you place a row of ads with identical layouts the viewer doesn’t see anything special about them… they just see a row of the same thing.

Imagine that same format in a comic book. It doesn’t work does it?

In fact in a comic book you expect to see different sized elements with different placement. You see a clear difference between each panel and it’s a helluva lot more interesting to look at.

So why is it that we expect to see conformity in promos? By switching close-ups with full shots and using varied text placement you get an exceptionally different final result. Each promo conveys a unique message while standing out from the others. Careful use of fonts and colors can still give them cohesion without appearing identical.

Super Heroes, Super Models. What’s the Difference?

Before you completely write me off as a ridiculous nerd and insist that no major website would even consider these kinds of design techniques—other than maybe Marvel.com or DCComics.com (which by the way, really don’t)—hear me out. Fredericks.com’s homepage is a shining example of comic book layout in a webpage. While I doubt the designer owns a copy of The Avengers #7, they made some pretty interesting design choices. The page uses a unique layout of promos or “panels” that vary in size and placement. In each panel, the elements (like the models, text, backgrounds) are sized and placed differently. And there’s one more thing this design does well that relates to comic books…

Action Lines!

Fredericks uses action lines to draw your eye around the page, bringing you through each section and highlighting the most important parts. The combination of strategically placed subjects, background elements and text deliberately works together to move your eye around the page and lead you to the most important parts of the page.

This technique is identical to the way comic book artists make the reader’s eye move throughout a page. In this Spiderman comic you can see that not only does the action follow a specific order to make you follow the sequence of events, but it gets your eye to the end of the page, enticing you to turn it. Similarly the Frederick’s homepage points you back to the main promo image, enticing you to click.

Use Your Design Super Powers

So if you want to be triumphant in the battle against boring design, don’t be afraid to pick up a comic book and get nerdy. Use everything you’ve got in your utility belt and be courageous in your design.

Source – Spider-Man comic

Jenni Chasteen

Jenni is a freelance blogger, web designer and self-described geek who spends as much of her time doodling as she does designing. Jenni Chasteen has 2 posts at Inspired Mag & counting!

Comments

Stef April 27th

Nice post! Original!
Love the examples of superheros & supermodels.
Sergei Tatarinov April 27th

Good article, pushed me towards new ideas! Thanks IM & Jenni.
Sean April 27th

This made me realize how boring typical website layouts really are. They’re way too blocky and comparing them to a comic book layout is the most imaginative insight I’ve seen in quite awhile. Great article!
Bianca April 27th

Love the idea of making a website a bit more dynamic by not doing a grid. Never thought of a comic book as an inspiration.
m_scott_hay April 27th

If anyone likes this post, I would suggest reading this great book by comic legend Will Eisner for a deeper look at design using comic style visual storytelling. http://bit.ly/98vkid
Mike Cane April 27th

Heh. The irony. I just posted this yesterday:

Comic Books: Adult Eyes Make A Difference
http://ipadtest.wordpress.com/2010/04/26/comic-books-adult-eyes-make-a-difference/
thorren April 28th

Great post Jenni. I’m not a designer, but I work with designers and having this kind of perspective is very helpful in providing a way that I can communicate my ideas to them, using the action and flow of the page to get through the message.
Aris April 28th

Totally brilliant article. I’m glad someone finally acknowledged that comics are good for something!

I like especially the last part about action lines. Ingenious, and I can really see how that works. Also, you’ve taught me something new about comics that I’ve always taken for granted.
Arnold Dela Cruz April 28th

Finally! Someone who smartly ties comic panel design to graphic and web design. Great post and examples, Jenni.
Asia April 28th

It is such an inspiration to me to see this post coming from a woman! I rarely encounter other gals who are into comics, and to see one come up with a revolutionary theory regarding my other passion… Wow! I would have never thought to combine them together in this fashion. Thanks for your wonderful contribution to this magazine.
Graham April 28th

This is a very interesting concept.
Thanks for sharing it.
Oasim April 28th

I loved this part self-taught/animation-school drop-out/good-at-BSing-my-way-through-life background
purely awesome!!
squareart April 28th

clever article / way – to get more traffic to the fredericks website
Carrrrrlos April 28th

Totally true! Love comics and see the relation to many aspects of design. Nice post. :^)
Atlanta accident injury lawyer April 28th

The overall comparison over comic books and web design is creative and insightful, but I especially enjoy the similarities drawn between dynamic layouts and comic book grids.
Matches Malone April 28th

Comics can teach much more than web design. I’ll save examples for my blog post
Nivanka Fonseka April 29th

Nice article! never thought of web design like this.
yogialb April 29th

I liked reading this article.
Hardik April 29th

Lovely article…
John W April 29th

Brilliant stuff! Never really thought about it this way.
adli jacobs April 29th

Nice one though I have always felt that it is not a matter of grid versus comic book. Rather, it is the approach of the designer and where the inspiration comes from. So you might well find boring, two-dimensional grid designers and vibrant, innovative ones… Both comic book and grid design have a logic to them, a pattern of sorts. This logic speaks to the viewer who has to make sense of the design. Because comics are in the cultural experience of the viewer, they can identify even if they don’t realise it. Tomorrow you might well find those inspired by comic book design become dogmatic about it and kick out any other innovators…
splinx001 April 29th

Loved the line…
‘I came from more of a self-taught/animation-school drop-out/good-at-BSing-my-way-through-life background.’
…laughed my ass off.
nashatwork April 30th

pretty cool and SMART!
Dean Vipond April 30th

Interesting article! While I totally get your points about breaking out of conformity to guide the eye around the page, and perhaps promote one section over another, this wouldn’t be viable for many businesses. As a designer, I often have to design something which will then have to be maintained by non-design staff employed by the client. This means establishing some guidelines to ensure the brand is consistently deployed, and that things don’t start to look very messy, very quickly.

In addition, if you were designing for a large commercial business, for example, one that sells lots of different things, you have a lot of internal politics, with different departments all trying to meet their targets. I speak from experience when, if a site were to have three promos like your cheese graters, it becomes a nightmare fighting off different departments all wanting their ‘bit’ to stand out more than the other departments! Having consistent promo designs at least eliminates some of the internal wrangling that can happen. Of course, it leads to less interesting designs, but a web site often needs to conform to a business’s culture, as well as be engaging and usable to customers.

As a side note, I also wrote an article a while back about how comics made me a better designer – http://deanvipond.com/blog/?p=31
John T April 30th

Couldn’t agree more!
Martin B April 30th

Great post! I love comics and try also to connect user experience with pop culture inspiration.
Ted Thompson April 30th

Great article, something I had never considered before.
Anthony J April 30th

Really enjoyed this article Jenni. I love comics and often thought the artwork would be the main source of inspiration. Guiding the eye is an important part of ecommerce, and you’ve shown how the principles of comic layouts apply well to this.
Robin May 1st

This is absolutely correct and even the cartoon channels can make u colorful designing senses…
Nathaniel Stott May 2nd

How does Heatmap Analysis compare to “Actionlines”?

I took a closer look at what you were saying and analysed the examples used with Attention Heatmaps. No really big surprises, just a demonstration that good design can be tested.
Good design works! Its not just a gut feeling.
http://www.stott.nl/2010/05/analysing-website-and-comic-book-design.html
Tim B May 2nd

I couldn’t agree more with what you’re saying. Comic books, magazines, catalogs, etc, they all use dynamic layouts to great effect. Once upon a time those same techniques couldn’t be used in web design because the technology didn’t exist, but now that it does, we need to go back to those print design roots and let our imaginations take flight.
Deano May 3rd

Great article and many intersting points … but:

A comic book flows (normally top to bottom; left to right, leading the reader on a journey that must be read in a certain order to make sense.

My problem as a designer (when working for web) is much the same in reference to my client’s preference of which products are most important but in the case of the web site I must allow for the fact that the reader is more in control of the journey and must make the story make sense whatever route he/she chooses to take.

Therefore as a design choice breaking the structure of the grid on one or multiple pages may help me stand out creatively but only as long as it retains some semblance of “readability” and “congruence” within the framework and navigation of the site as a whole.

I do admire anyone who is willing to push the boundaries – and this post certainly asks questions.

Keep ‘em coming. Thank you!
Helder Cervantes May 3rd

Loved it. Truly refreshing and inspiring stuff.
jon May 5th

Awesome post…really good stuff…never thought of it like this before…i usually never leave comments but this article was so well done i had to.
Rooty Toot May 6th

Agreed: ‘I came from more of a self-taught/animation-school drop-out/good-at-BSing-my-way-through-life background.’

Though you have piqued my interest clearly you don’t get it. Cimic formats are based upon the grid… oh! You meant composition. Your “action lines’ on the Frederick page are amateurish at best as the composition is within the grid format.
Duncan McDuncan May 16th

I like it! Comic is Great for health! Way better than medication! (as well as animation!)
JP June 2nd

Quite a thought-provoking article. No really! Lately I’ve been stuck in the rut thinking all ecommerce design had to look boring, and there simply are no other options. As soon as I’m done typing I’m going to get out the crayons and get to work:D
Matt June 2nd

Great article Jenni. It really got me thinking about how I can apply this to my designs. I’ve read time and again that designers should be taking inspiration and influence from other creative fields, you definitely found a way to bring comics and web design together.
Jenni June 26th

@Rooty Toot The point wasn’t that it was exactly a square, perfect grid. I don’t know of any comics other then the Sunday “funnies” that are formatted in uniform, perfectly square shapes. Obviously rectangular shapes still come into play but not every single element is exactly the same.

As for the Fredericks example I was just trying to show that you can plan to make your elements work together through interesting shapes and lines rather than just create promos that exist separately of each other. I was comparing it to the way that comic book aritsts use action poses to draw your eye throughout the page.
Gerard August 6th

An interesting and well thought out article. I especially liked the visual flow discussion. It’s a big thing in photographical composition too, directing the viewers eyes to a particular place or for creating tension, etc. in a scene.

And of course, who can resist a good comic. Not only are the layouts different, but depending on the artist, the characters have varying looks and feels conveyed from the individual drawing styles.