4 Icon design tips
(Read web version.)
Every mobile app needs an icon that is stylish, appealing and memorable. The icon should intrigue and excite potential users and be consistent with the purpose or nature of the app. It is the most important element of your app to grab attention and is used in many places, including the app store(s), mobile device main screens, web sites and social media. An icon is a key part of the brand identity.
This post shares 4 tips to help design a wonderful icon for your mobile app. In previous posts I have covered 4 Visual Design Principles (general design guidelines) and how icons are an important component in fostering User Growth.
I’ll use my icon designs to illustrate how the tips can be applied.
Relatable
An app icon needs to have some association with the function of the app itself. What do you want people to think or feel? Is it serious or fun? How different and intriguing is it? Does it entice and make people want to click it? With millions of listings on the app stores, your app icon needs to stand out and engage your target users. Icons should evolve over time, usually sticking with a core theme or concept.
The Nip To app helps users find public amenities, such as toilets and waste bins, on a map. I wanted a fun, cartoon like character which makes people smile and conveys the idea of nipping to something. Credit goes to my wife, Marcia Martin, who came up with the icon design. The idea behind the icon for my Aim For app is to illustrate how elated users might feel when they achieve what they aim for in life.
Simple and scalable
Simplicity in the design of the icon is important for aesthetic and practical reasons. A clean design is easier to recognise and remember, plus reduces the likelihood of confusion. Icons are presented at various scales for different purposes (often ranging from 1024x1024 down to 16x16 pixels) and more complex designs are likely to distort at the smaller sizes.
Simplify the design by:
Having an uncluttered, opaque background; often a single colour or shade of grey. The background needs to contrast with the main icon design.
Avoiding the temptation to fill the entire icon space with content. Work with and use space deliberately.
Having a focal point for the design.
Balancing the design so it looks centred.
Excluding photos and/or screenshots from the app.
Keeping icons square as masks are applied to generate rounded corners.
The Chairing it app helps ensure meetings are fulfilling and fun. The 3 arrows represent the meeting attendees, all heading in the same direction. The leader is represented by the larger arrow and is presented in a contrasting Orange colour. The simple design retains its identity when scaled down to 16x16 pixels.
Colour considerately
Colour can help make a design vibrant and engaging. It is one of the characteristics which establishes visual hierarchy and contrast between items in a design. Colours can help with object recognition, carry cultural meaning, communicate mood and establish identity. A limited colour palette is often best. Where appropriate, use contrasting colours and tones. A limited set of apps will naturally lend themselves to more diverse and vibrant use of colour, such as Apple’s Photos app.
Scarper is a grid based game. I wanted its icon to suggest fun and illustrate some of the key mechanics of the game. Hence, it shows a simplified grid of colourful tiles and that players connect these together.
Avoid words
Words should only appear in an icon if they are essential and part of a logo. In many situations the name of an app appears below its icon so repeating the name is not necessary. Words will often clutter a design.
Other resources
How to design an app icon by 99Designs
5 tips for Designing the perfect mobile app icon by Upland
10 Reasons to Use Color by Understanding Graphics
This post covered 4 tips to help design great app icons: Relatable, Simple and scalable, Colour considerately and Avoid words. Next Sunday’s post will explore some legal matters, including how to trademark app names.
Until next Sunday, analyse the icons for your favourite apps in light of the design tips.
Have fun.
Phil…
