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
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.
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
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
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
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.
