EVOLUTION OF AN ICON

Interactive Sketchbook 2.0 is just weeks away from being complete.  And as we continue to finish up the next version I wanted to share some of the process of shaping the icon along the way.

Original Version

This is the version of the icon that is currently in the app store.  While not bad, there were lots of ways to improve it, especially the way it looks on the higher resolution of a retina screen.

 

Improving For Retina

V1 below is effectively what the original icon looked like when viewed on a retina screen.  Fuzzy and pixelated.  Creating anything that looked better was one of the first priorities once I had early builds of the new version running.  V2 has all the assets swapped out and rendered in the appropriate resolution.  The extra detail of v2 improved the icon quite a bit, and so it was left alone for several weeks. (It no longer hurt my eyes on a retina iPad.  Notice the extra detail in the face and text.)  V3 changed the thickness of the pencil.  I probably made v2’s pencil too fat, and though it was certainly iconic, I wanted our icon to feel a little more professional, and less cartoony or kid like.

v1v2v3

Bring in the Graphic Designer

V3 was left alone for months as I focused on implementing the UI for the App.  Once I had enough of the interface working I began to work with Graphic Designer Tim Whalen.  Tim created beautiful new assets for almost everything in version 2.0 of Interactive Sketchbook!  In the last month or so we’ve been jumping back to work on the icon with the new interface assets.

V4 uses our new pencil asset.  The new pencil is a more highly detailed illustration, yet it is cleaner than a photographic asset.  However we felt that something about it was unbalanced once it was shrunk down to the size of the icon.  But it wasn’t worth getting too caught up in tweaking until we had replaced some of the other assets in the icon.  V5 we swapped out the old binder for a new one.  The new binder has a neat wrap around effect where you can see the coils curl back behind the sketchbook.  This makes the icon really look like a sketchbook, but after living with it for awhile it seemed to make the icon feel like less of a touchable button.  V6 we simplified the binder.  And though a lot of detail was thrown out, I think the result is much more inviting.

v4v5v6

Almost There

For V7 we have increased the contrast on the pencil and added an outline to help it pop from the sketchbook background.  Adding a deeper shadow on the pencil also made the icon a bit more pleasant to look at.  With the deeper shadow my eyes tend to focus mostly on the face and pencil, whereas before the icon would draw my eye too many places at once.  We’ve also replaced the original texture for a newer one that is more subtle and organic.

v7

At this point the icon is fairly good.  There are some likely last minute tweaks that will be made before the app launches, but those can wait until we’ve lived with this icon for awhile.  It’s important to have time to let a design sink-in, and time to grow (or not grow) on you.  A lot of work goes into designing even something as simple as an icon, and you might accidentally get attached to a detail that doesn’t improve the design.  Or you may not notice a subtle quality that reveals itself with time.

Bonus Icon Timeline

Here they are all at once so you can see a purely visual progression.

v1v2v3v4v5v6v7

• Category: Design, Development, Interactive Sketchbook, iPad