I thought it might be useful for designers and clients alike to see how we approach a typical App Icon design project.

In this case study the client requested an App Launcher Icon for an Email App developed on multiple platforms. The first thing to consider when creating an icon for different platforms is how to maintain a consistent look when different design rules and size requirements apply across each platform.

Windows and Android favour an ‘open’ design, whereas iOS icons are ‘enclosed’ within a button shape. Also, if a Windows Desktop icon is required you know from the start that your design will need to work in 16×16 pixels, which is way smaller than a typical mobile App Icon is displayed and can seriously curtail your creativity.

As long as you consider how this will impact your design from the start, you should be fine. For this project, we decided to keep things very simple.

Design Brief

Email Icon, Google Image Search

Google Search ‘Email Icon’

The client has requested an icon for an Email App; in this scenario there are some very obvious ideas that spring to mind but it is always worth doing some research first. A Google image search tends to be my first port of call and in this case my search returned a lot of variations on the ‘envelope’, some showing the back, others the front, some with or without additional secondary glyphs or graphics.

It is a waste of time trying to re-invent a new metaphor for a concept as well ensconced in our psyche as ’email’, so lets keep it nice and simple and stick with the already well established standards.

I quite like the look of the back of an envelope and it is far more commonly used than the front, so that is where I will start.

Obviously, with more obscure concepts you will need to do more research. But keeping it simple is the most important advice I can give. Even when your client insists on a literal interpretation of what their App does, you need to stick with a simple, clean and clear concept that is easily recognisable and gives a ‘hint’ of the App’s use. Try and get too precise with the meaning and you will likely end up with an icon that is far too complex or detailed and will not scale down gracefully, especially true when you need to produce a 16×16 pixel version.

 

Concept sketches

If you are capable of holding a pencil, you should be able to create a concept sketch, it doesn’t have to be art, just convey an idea. Putting a little bit of effort in with a pencil could save you hours later on, so it is well worth doing.

Email Icon Sketches

Email Icon Sketches

Producing some sketches like these only takes a few minutes and gives the client a starting point, without you having to invest too much time with full or partial renders.

In this case the client expressed a preference for the penultimate concept, which is great because it is a very common icon metaphor and should be easily recognisable by those using the software.

Rendering & refinement

In some cases it is pretty obvious how the final render should look but as a general rule it still pays to take things slowly if the project isn’t on too tight a time line. The image below shows the different stages in the rendering process. At each step the client was consulted for feedback to ensure we were progressing in the desired direction.

Email Icon Renders

Email Icon Renders

Once we had reached the 3rd iteration, we felt we were very close but the client requested a little added detail to the ampersand. Whilst they liked the effect, we all agreed the 3rd iteration was cleaner and would scale far better; so this was chosen as the final approved design.

File production

The final stage of the project is to render the necessary sizes and file formats for each platform. However, for iOS we must also introduce a background for the icon for which the ‘button’ shape can be clipped by the iOS device.

Again, we want to keep things fairly simple, not only because it helps with the legibility when scaling but also because most operating systems are moving towards a far more austere look and feel.

Email App Icon

Email App Icon

If you are creating cross-platform App Icons, you have probably realised a great deal of the work is involved in optimising your design to the various file sizes you will require.

For example, if you wish to Support Android, iOS6, iOS7, Windows Phone 8 and Windows 8 Desktop platforms, you will need over 30 different file sizes.

In my next blog post I will organise all the different file sizes and formats so you can download a full set of cross-platform App Icons which are completely free for you to use as you wish.

Mobile App Icon Design

Adam Parrish

Owner and creative director at Creative Freedom Ltd. Unbelievably cool icon design expert, husband, and father of two awesome girls. A proper decent chappy and thoroughly fab to work with. Ok, so I wrote my own bio…

Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.