iPhone App Icon Design Strategy

We’re getting all the design assets for our lead apps together at a rate of knots, but one issue we have come up against, as design obsessives, is the icons for the individual apps.

As well as the issue of all  editions of the app needing to have the same icon (when the app is internationally available), we have the problem that the icon must be a tiny 57×57 pixels and meet  Apple’s design and interface guidelines. There are also limits on the number of characters we can use with the app on the desktop and in the store before the name is truncated. When you are working with long book titles – The Death of Bunny Munro or Dreams From My Father – you just can’t use them in full.

Working within these restraints, we have been doing a lot of thinking about the best strategy for making icons for the Apps. I thought we would share our thinking with you, and the solution we have come up with. I’ve quoted below, in full, an email from our designer about how he approached the strategy of designing the icons for books which already have a book cover – or a number of book covers – and how the icon is different to the book jacket.

“I’ve been thinking a lot about how to approach the individual app icons. They’re not as straightforward as they may seem and as a marketing tool they merit some thought. After speaking to publishers about the issues in relation to licensing the cover imagery and having seen placeholders on the EE site, the way forward is completely clear to me now.

Let me explain. It requires some branding bollocks and some crude schematics…

There are (according to Wally Olins) three approaches to branding a number of related items:

1. Monolithic
2. Branded
3. Endorsed
   

Monolithic

In a monolithic approach, one master brand is created which is ‘forced’ upon all products. For us this would mean all app icons are the same.

This is just a very crude diagram and by no means am I suggesting this kind of visual style. The monolithic approach would very much build the Enhanced Editions brand – but to the detriment of individual app ‘brands’. It’s not a particularly elegant approach and you’re going to end up with something so vague because it needs to fit all the different books under its wing. I think this route is somewhat lazy but may be a fallback.

2. Branded

Here all books are branded individually.

Each book looks completely different with an app icon that suits the individual subject matter and tone of the book. This is more or less the approach most (printed) book covers take. Each cover is designed differently, trying to convey the subject and feel of the content by graphical means.

Originally I thought this was the way to go but for a number of reasons I’ve concluded that that’s probably a bad idea:

1. Designing a book cover is hard enough – trying to do it in 57px x 57px is just pointless. You’ll always end up with some kind of ‘icon’ anyway.
2. Unlike paper books in a shop that are trying to vie for attention with their cover, the purchase of an iPhone ebook is only secondarily (if at all) going to be determined by the design of the app icon.
3. As discussed with Peter, we may run into licensing issues regarding the imagery – in particular for those books for which Enhanced Editions has international rights.

3. Endorsed

Similar to the branded route, each book has its own identity but is endorsed by a unifying graphic.

This would ensure that the books – although individually designed – become recogniseable as being from Enhanced Editions which helps to build the EE brand and allows for cross-fertilisation between books. The issues with this approach are similar to those of the branded route.

HOWEVER…

There is a way of pursuing the endorsed route and circumnavigating the issues – by designing the app icons as a series. I’m almost certain that this is the route to take.

All icons are designed in a similar fashion. They share a similar graphic approach, maybe similar colours, or a similar ‘grid’. Again, the above is a diagram. By no means am I saying we must have big red letters as app icons.

This is the approach taken by some of classic Penguins etc. All books look similar, yet there’s room for some individuality. By going down this road, we avoid the problems associated with the regular branded or endorsed route while still allowing for individuality and at the same time build a bold style around the app icons that will (over time) make them recogniseable as belonging to the EE stable of quality products.

End of branding bumpf.

Execution

Below is a visual of the app icons. To illustrate the principle of the series as described we’ve done three.

Each icon is a very neat and clean rendering of a classic clothbound hardback book with a blocked and debossed icon. The colours will vary as will obviously the icons (for example we obviously don’t want a “pi” symbol on pi, and will try perhaps for a tiger or a boat) but the graphic language very much ties them together as a series and makes them recognisable.

The icons are bold — the white is very punchy — and instantly ‘legible’ and memorable while the ‘book’ design makes them stay within the vernacular without looking cheesy. In fact we think they look very classy and bold.

The cloth also resonates with our rendering of the bookmark, which will be a beautiful “ribbon” bookmark, which will drop into the screen in distinctive shape and colour. We’re toying with the idea of stitching the name of the book into the bookmark for added distinction. And the icon — the bunny, the “o” or whatever — is also used throughout the book as the chapter ornament, which returns you to the table of contents.

As you can see, we’ve also opted out of the glossy (laminated!) finish that the software renders (you can toggle this, apparently) to enhance the clothy feel. They still need some fiddling, but we’re pretty happy with where they’ve ended up.

Final Icons