Interactive Design, Strategy, & Technology for Websites, Mobile, Apps, & Games

Dynamic Header


Design for 100 pixels

View All Blog Posts

Design for 100 pixels

– by Andy Pratt
Illustration by Andy Pratt

Ever walk into a store and see a book that captures your attention, even from a distance? That’s no accident. Publishers make a concerted effort to design covers that get noticed from afar, specifically six feet away. With so many books in your average bookstore, it’s a real battle for each one to get noticed. Designing books that are visually arresting from six feet away is an important guideline for the industry. It helps to ensure that each book has a chance of capturing your attention, even in a store containing thousands of them.

So how does online shopping affect this rule? We know online purchasing continues to capture more of the market. Cyber Monday 2011 saw a 29% increase in sales over Black Friday 2011*. Compared to Cyber Monday 2010, sales increased by 33%. The six foot rule is becoming increasingly outdated, simply because people aren’t shopping in brick and mortar stores as often.

So I suggest a new guideline: the 100 pixel rule. Design your cover to catch a person’s attention at 100 pixels tall. This need not just apply to the covers of books, but media in general. A small thumbnail constitutes the first impression of many online products. A lot of the books I buy are first discovered in a recommendation bar at the bottom of another product. For music, most of the album artwork I see is from a thumbnail on iTunes, Spotify or Pandora.

Designed to grab attention as a thumbnail.

Funny Garbage is primarily an interactive agency, but our love of pop culture, comics and ephemera has allowed us to create the occasional book. Our sister company Red Hot, has also produced over fifteen compilation albums to raise money for HIV / AIDS awareness efforts. So although we are mostly known for designing interactive experiences, we have also designed the occasional product. This experience allows us to understand the challenges of designing content and the framework that the content supports.

This knowledge impacts some of our design choices. A good example of this is our cover for Red Hot’s “Dark was the Night” album.  The two CD complication album has a powerful line up of amazing artists, including Bon Hiver, David Byrne, and Yo La Tengo, but few people would know to search for it directly. However, with all of the artists involved, the likelihood of the album showing up as a related thumbnail is high. This factor influenced our cover design: a simple layout with bold typography. It’s something we knew would grab the attention of a viewer, even in a 100 pixel size.

Dark was the Night on


So what does this mean?

I am not saying that the shrunken down thumbnail of your product should dictate the design. But I hope it influences it. Your competitors are on a virtual shelf, all lined up in that recommendation bar. Scale down your design and see what it looks like when it is tiny. Take a screen grab of an Amazon page or the iTunes store and mock up your product in that bar.  Can you read the title? Does it stand out against your competitors? Does your thumbnail pop? The 100 pixel rule encourages designers to consider a consumer’s first visual experience with a product. Give it a try. See if it changes how you design.

* Source IBM Coremetrics benchmarks report, Black Friday and Cyber Monday 2011