How Comic Books Can Make You a Better Designer

Categories Articles

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

Download high quality 642-873 to prepare and pass 650-296 with 650-393 dumps certification. Also get free demos of 642-185 for review of 642-973.

Jenni is a freelance blogger, web designer and self-described geek who spends as much of her time doodling as she does designing.
  • Nice post! Original!
    Love the examples of superheros & supermodels. :)

  • Good article, pushed me towards new ideas! Thanks IM & Jenni.

  • Sean

    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!

  • 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.

  • 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

  • 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/

  • 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.

  • 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.

  • Finally! Someone who smartly ties comic panel design to graphic and web design. Great post and examples, Jenni.

  • 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. :)

  • This is a very interesting concept.
    Thanks for sharing it.

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

  • clever article / way – to get more traffic to the fredericks website

  • Totally true! Love comics and see the relation to many aspects of design. Nice post. :^)

  • 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.

  • Comics can teach much more than web design. I’ll save examples for my blog post :)

  • Nice article! never thought of web design like this.

  • yogialb

    I liked reading this article.

  • Lovely article…

  • John W

    Brilliant stuff! Never really thought about it this way.

  • adli jacobs

    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

    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.

  • pretty cool and SMART!

  • 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

  • Couldn’t agree more!

  • Great post! I love comics and try also to connect user experience with pop culture inspiration.

  • Great article, something I had never considered before.

  • 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.

  • This is absolutely correct and even the cartoon channels can make u colorful designing senses…

  • 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

    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

    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

    Loved it. Truly refreshing and inspiring stuff.

  • jon

    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

    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.

  • I like it! Comic is Great for health! Way better than medication! (as well as animation!)

  • JP

    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

  • 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.

  • @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

    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.

  • I love this article!

    I’ve never been into comics, but reading Scott McCloud’s brilliant book “Understanding Comics” changed my design life. It was awhile ago that I read it, and while I’m a fan of gridding my designs, Jenni reminded me that surprise and novelty in design, even in small doses, can improve a viewer’s experience of a site.

    Thank you so much for your insight into bridging these 2 worlds.

  • This is such a good article. In one of my intro classes my professor had to read a book about this topic and then create a comic in flash. It definitely did teach me a lot.

  • I have been drawing comics my entire life. I just started doing some basic web design, and I never thought about it that way. I did think that a site is like one of those books that you get to make the decisions and skip to the correct chapter to continue.

  • Great web site! I am realy happy stumbling upon it!

  • Really good write up! Very interesting connection. Very inspiring.

  • This is a great way to think of content flow and website layout organization. Will definitely be looking to implementing this into our next design. Thanks a lot!

  • As a web designer and a HUGE comic fan (interestingly enough also an animation graduate), I loved your article. I’ve always thought that comics can help you design better, but I love you take on it.

    Very thought provoking.
    Good stuff.

  • I love comics and I love web design! Thanks for writing this article that combines the two. I will definitely be using these examples to argue how they relate.

    • Great Article. I have loved comic books since I was a young kid and your synthesizing that love with website design is truly inspiring.

  • Kerry Geary

    Thank you so much for making a post on this subject. I really can’t stand the whole cookie cutter look at times and Comics are a great resource for all designers/artists in anything that is trying to communicate and idea.

    Everyone needs to read … “understanding comics” by Scott Mccloud
    http://www.amazon.com/Understanding-Comics-Invisible-Scott-Mccloud/dp/006097625X