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.
Latest posts by Jenni Chasteen (see all)
- Gamespiration – Splinter Cell Conviction – May 12, 2010
- How Comic Books Can Make You a Better Designer – April 27, 2010
Nice post! Original!
Love the examples of superheros & supermodels. :)
Good article, pushed me towards new ideas! Thanks IM & Jenni.
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.
[...] Design: Funny, after yesterday’s post: How Comic Books Can Make You a Better Designer The Differences Between Good Designers and Great Designers Your Blog Is Blinding Me A Recipe for [...]
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!!
[...] Click here to visit the article » [...]
clever article / way – to get more traffic to the fredericks website
[...] Comic Books Can Make You a Better Designercatalin zorzini on 04 28 10 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 [...]
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 :)
[...] How Comic Books Can Make You a Better Designer [...]
Nice article! never thought of web design like this.
I liked reading this article.
[...] Chasteen, writing for Inspired Magazine writes up her thoughts on how comics can make you a better designer; Long before I ever picked up a Wacom tablet or even heard the word kerning, I read comic [...]
Lovely article…
Brilliant stuff! Never really thought about it this way.
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…
[...] http://www.inspiredm.com/2010/04/27/comic-books-design/ [...]
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 Comic Books Can Make You a Better Designer [...]
[...] How Comic Books Can Make You a Better Designer [...]
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
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.
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!
Loved it. Truly refreshing and inspiring stuff.
[...] is a interest article about someone who is inspired by Comics: http://www.inspiredm.com/2010/04/27/comic-books-design/ Some interesting quotes by the [...]
[...] the design flow right is not easy, yet inspiration is everywhere. In a recent blog post How Comic Books Can Make You a Better Designer a case in point is made. “This isn’t a comic book. It’s a [...]
[...] Featured Guest Article on Inspired Mag: How Comic Books Can Make You a Better Designer [...]
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.
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.
[...] Are Comics Still For Kids? [...]
I like it! Comic is Great for health! Way better than medication! (as well as animation!)
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.
[...] 5) How Comic Books Can Make You a Better Designer [...]
@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.
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.
[...] like Klimt or Kandinsky, and get a feel for their shapes and composition. Or you could even take inspiration from comic book layouts. Brainstorm with your client, doodle [...]
Great web site! I am realy happy stumbling upon it!
great design article comparing typical web design layouts with comic book page layouts: http://tinyurl.com/3xva3sl
[...] all else fails, go to comic books for inspiration. The storylines bring back a memory or two of your yet-to-be-tainted childhood. The [...]
How Comic Books Can Make You a Better Designer http://bit.ly/cZazl3
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.
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
[...] more by checking out her post here: How Comic Books Can Make You a Better Designer | Inspired Magazine. Share this:EmailMoreDiggPrintLike this:LikeBe the first to like this post. comic artcomic [...]
[...] Jenni Chasteen takes pains to explain how the grid layout of a comic book can often be more dynamic and variable than website layouts: “Scan a ’25 Great Examples of Web Design’ list and you’ll find at least a dozen … [...]
[...] Jenni Chasteen takes pains to explain how the grid layout of a comic book can often be more dynamic and variable than website layouts: “Scan a ’25 Great Examples of Web Design’ list and you’ll find at least a dozen … [...]
[...] http://inspiredm.com/comic-books-design/ Share this:TwitterFacebookLike this:LikeBe the first to like this. [...]
[...] benzi desenate, poți căpăta fără să-ți dai seama aptitudini care te ajută să creezi siteuri mai bune. Gândește-te un pic. Atât banda desenată cât și majoritatea siteurilor sunt mijloace [...]
[...] 17 Comic How can Comic Books Make You a Better Designer? Portraits of Comic Book Artists as Graphic Designers BioLatest Posts [...]
[...] LINK [...]