Inspired Magazine

How Comic Books Can Make You a Better Designer

Posted: 27 Apr 2010 12:53 PM PDT

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

Save to Delicious

PSD Tutorials ..

Tuesday, April 27, 2010