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â€¦
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