The Evolution of Speech Timer 2.0 Icon

Finally in WWDC 2013 session 225 Apple provides an official in-depth “guideline” on how an iOS app icon should look like. In the session Mike Stern said that icons should start with a “shape” – a distinct recognizable outline that can be recognized at a distance. Because the icon needs to be legible at small sizes – not just for the home screen but also shown in search results.

However that presentation also recommend that icons need to be realistic but not photographic. Realistic as in including textures and gradients – elements of skeuomorphism. This doesn’t seem to be in tune with the rest of iOS 7’s paradigm shift where icons need to be more symbolic and less skeuomorphic.

BuSpeech Timer 1 0 Icont anyhow most of Mike Stern’s recommendations are still relevant. Having a recognizable shape is important for an app icon, which is really a pictogram. Which the old Speech Timer icon failed to qualify.

The original Speech Timer icon was intended as an illustration of the activity that the application supports. It shows a person speaking and then gauged with green, yellow, and red signals, which are the standard Toastmasters time signals. In my opinion that icon looks fairly okay albeit not easily recognizable in small sizes.

Icon Redesign

Speech Timer 2.0 icon rev 1As part of the iOS 7 redesign, Speech Timer needs a new icon. At start I’d imagine an analog timer – something like a wall clock but customized to time speeches. Since the typical Toastmaster speech is a 5-8 minute session, I drew the clock face to show a cycle of eight minutes, showing green, yellow, and red sections that correspond to the time flag masks. At a distance, this just becomes a circle and not immediately recognizable.

I pondered for a while, looking for the perfect shape for the new icon. Then I look at the Speech Timer’s tab bar icon – there it is, an hourglass. Seems like a perfect shape for an icon. It brings some continuity from the old version of Speech Timer, easily recognizable in small sizes, and some familiarity of a real-world object.

Speech Timer Toolbars Comparison

Speech timer 2 Icon rev 7 grid overlayiOS 7’s new design also comes with a new icon grid. Consequentially the hourglass is molded to conform this grid – you can see for yourself in the icon to the right where the grid is superimposed on the icon. See how the hourglass edges coincide with the grid’s diagonal intersections. Also notice that the upper and lower glass enclosures coincide with the grid’s largest square.

The hourglass features magical multi-colored radioactive sand 😉 These green, yellow, and red particulates are symbols of the three time signals of a typical Toastmasters speech. Really the actual color values sourced from iDraw for iPad’s default color palette and I’m kinda fond of their slightly creamy color and decided to add gradients to make them both creamy and glowing.

Did I mention iDraw for iPad? Yes, iDraw is the tool I used to draw the iOS icon. Although I still need a Mac for most kind of work, the iPad is quite convenient to get some work done while commuting, something that a regular laptop won’t be able to do. What’s nice is that iDraw has a Mac version too and both editions syncs via iCloud.

Anyway the iOS icon underwent a number of revisions – gradients, color changes, relative sizes of the sand time signal flags, etc. They’re still stored in my iDraw’s iCloud document store.

Speech Timer iDraw History

Mac Version

However Mac app icons needs to be 3D rendered objects and not simple drawings like iOS 7’s icons. Just look at Apple’s own apps that are updated for Mavericks – both their built-in apps and app store offerings icons are models of real-world objects, painstakingly detailed if I might add.

Mac App icons comparison

Then I fired up Cheetah 3D to make the icon for Speech Timer on the Mac. Like the iOS version, it’s also an hourglass – but a 3D model of an hourglass.

Speech Timer 2 Mac Icon Construction

Because the Mac icon has a lot more detail than the iOS icon, I needed to provide the smaller size versions of the icon as separate images. This is mainly so that the icon is still legible in smaller sizes and yet retains its full glory when displayed in large size.

Because the icon is a 3D model, this is achievable simply by changing the camera angle and some rendering parameters. For the lower size icons, the camera is straight-on to the hourglass, thus showing less detail. Furthermore I’ve added a stronger blue ambient light on the background which makes the blue tint in the glass stronger.

Without further ado, here are the complete set of Speech Timer 2.0 icons – please let us know what you think.

Speech Timer 2 0 Icons illustration

By the way, if you’re interested to get pre-release versions of Speech Timer or simply to get  updates to Speech Timer’s development, sign up to the list below. We won’t spam – promise!

Subscribe to our mailing list

* indicates required

Until next time, take care.

 

Tags: , , , , ,

%d bloggers like this: