Have you ever wondered what makes people choose between things that have the same functionality?

Or buy a particular washing machine or a particular bike?

It comes down to design and user experience.

The same applies to choosing an application in the Google play or App store. When we need to download an app, we browse the diversity until something helps us choose.

And, guess what? Often it’s the app icon design that draws the eye.

Why is it so important to create a great app icon design, not just anything?

You can create a great product with incredible functionality, but how would people know about it?

You only have a small space to put the whole idea into, which will make your future consumer want to tap it over the endless variety of other applications.

So don’t waste this precious design real estate – put meaning into every single pixel!

It is an intimidating task even for experienced designers. In this article, we will give you tips on the mobile app design process, helping you avoid some common mistakes. We will tell you about the latest design tendencies and provide an overview of the most popular tools for app icon design.

Flat design or Material design?

As in any sphere, design follows fashion and trends.

It’s necessary to know which are current to create professional and up-to-date products.

Today, we can see that most interfaces are made within Flat design or Material design. For people who are not involved in the industry, the difference may not be clear at all. In the next few paragraphs, we will tell you about their main differences and advantages.

Flat design is a buzzword among UX/UI designers today.

It initially evolved as a counter to Skeuomorphism where things are shown as they are in the real world.

It’s an approach which strips off all 3D details and tends to simplify things to a flat look. It has been adopted by the leaders of the market, such as Apple and Google’s Android OS.

The main features of Flat design

• Minimalism
• Absence of any graphic effects
• The main accent is on clean colours
• Simplicity of all elements
• Readable and clear fonts

Minimalism in flat design means that when we create a picture of something, we do not burden it with details.

Let us explain these five principles with a simple example.

Sketching a watch, we show just the primary attributes, like the clock face and hands and maybe some numbers. No curls, details or other peculiarities.

According to flat design features, the picture will not have specular highlights, shades, or textures. The colours will be bright without shades or gradients. If there are any letters or numbers, they should be recognizable at first sight. The picture may look almost sketchy, but stylish and complete.

The advantages of Flat UX/UI design

• It makes it easier for your users to grasp the main content and stay concentrated on it, but not distracted by visual effects.
• It makes the performance of the app faster due to a lighter design, compared to the skeuomorphic one.
• It creates a better experience for the user. Flat design gives a great stylish functionality where everything is focused on the workflow and users’ needs!

The main features of Material design

Material design is a branded product, created and supported by Google.

This approach comes from the need to create the same user experience on a wide variety of Android devices. They have done an excellent job with the concept and rules, and all the guidelines are available. Anyone who wants to dive in can create an app or a website according to this approach.

• Animated images and usage of layers create a feeling of dimension, yet stays flat in the details.
• Floating toolbars and any action is produced in a manner as if it moves on a piece of paper.
• Usage of bold colours and common design techniques.
• Usage of metaphors and symbols which are clear for developers and users.
• Creating a picture is as realistic as possible.

Material design has adopted many ideas from Paper Design principles.

We can create both 3D and 2D images on paper, or use two separate sheets to create a layered design.

Material design benefits

• It unites the best features of Flat design and 3D design, adding interactivity and experience for users.
• It has a detailed set of guidelines which makes it easier to work within and saves the designer’s precious time
• Can let you create a perfect design system for all possible types of screens: desktops, phones, watches, screens on car panels and so on.

As you see, each approach is great in its own way. Besides, everyone has their own taste, so it’s a point of choice for you and your client.

Now, let’s get closer to the app icon design itself.

A little bit of history

The contemporary icon derives from ideograms and pictograms.

Pictogram, from Greek word “pictus,” is an image which shows the most important features of an object or an idea in a sketchy shape.

Ideogram has a wider meaning and does not just describe an object, but the ideas and processes related to the depicted object.

This approach is now used in contemporary icons: the icon with a “letter” doesn’t mean we send paper letters, we just give an idea about what the app does.

The symbol on the icon usually tells us about the functionality of the applications and what kind of issues it may solve for us.

But how do you choose the right symbols and image to make the necessary impression?

Now we will tell you what characteristics a great icon design should have to catch your future users’ attention.

Rules to follow to create a better icon design

An identifiable and memorable icon can have an enormous impact on the popularity of your product. Here we will identify and analyze the most important points to follow, which will guarantee you great results:

• Scalability
• Consistency
• Recognizability
• Uniqueness

Scalability

Icons which try to cram too much onto the canvas fall victims of bad scalability.

To improve the scalability and avoid clutter:

• Focus on a single object.
• No screenshots or photos.
• Try your design on devices.
• Place it on contrasting backgrounds to see how it will look.

When a designer looks at an icon on a massive 40-inch screen, it looks great, but often, icons are intended to be seen on much smaller screens

And with the diversity of devices, including smartwatches becoming popular, take scalability into account. Especially if your product is supposed to be controlled from a watch screen.

Consistency

The experience should coincide with the expectations, related to the main functionality of the app. The app icon design should echo the style and design of the whole application itself:

• The symbolism of the icon must relate to the app’s essence and functionality.
• Use the same style and colour scheme for the icon and the app

Recognizability

Recognizability is what makes your icon stand out amongst the vast amount of other icons’ designs. The enemies of recognisability:

• A bland or intricate design.
• The usage of generic design, like a markup or a message character.

Uniqueness

Uniqueness can be one of the decisions to choose your app.

The world has enough icons with markups or wifi-signal symbols.

Also, statistic research in app icon colours shows that the most used colours are blue, with red and green following behind.

Shades of purple and yellow are almost entirely ignored!

Choose colours which are not so pervasive in the app icon design. Do a good job on the following things to please your users:

• Research your space, outline the central tendencies and try to take a different direction.
• Make a challenge to create an outstanding symbol for your app.
• Don’t be boring with your choice of colours.

Do not follow the trodden path, take your own line.

Avoid using words

In general, the idea is – do not use words in your app icon, because:

• Words and pictures are two distinct representative systems.
• Do not just put the name of your app into its icon – it may be hard to read on a small scale.

Longer words will not be clear for such a small space.

The description of your app will have all those words anyways; you don’t need to repeat.

Your icon is the first stop a user will make when trying out your product – make sure you impress them with the design.

Bad app icon design

The following things are going to spoil your brilliant icon:

• Misdirection – don’t paint anything foreign which does not relate to your app.
• Too many colours. Don’t make a rainbow, unless it’s an app for children. Keep the audience in mind.
• Avoid transparency, because your icon may get lost. Test your icon on different wallpapers.

Game app icons

Here we have great news for those who love to draw!

In game design, your creativity can unfold its wings and break all the rules above (except words in an icon!):

• You can add shine and textures.
• Use many vivid colours.
• Create an image of an outstanding game character to give the user a hint of the quality game design.

In other words, seduce people to install it and start playing the game!

Use Guidelines

The final piece of advice for designing app icons is to look at the Guidelines. Microsoft and Google for Android products or iOS may be helpful when creating app icons.

We hope that these tips will make the process of an app icon creation clearer.

Now you are ready to create your app icons. If you don’t have any app design software or icon creation tools, the following may help.

Popular software to design app icons

Adobe Photoshop is a standard today and is the number one choice for most designers. It will provide you with the best functionalities for your creative work. The monthly subscription price is $19.99.

Adobe Illustrator is also in the Adobe family and has extensive capabilities to create great vector design. Its monthly subscription cost is also $19.99.

CorelDRAW, the graphic editor created by Corel Inc. CorelDRAW Graphics Suite X8 is the newest version which is available for Windows users only. The company has stopped making versions of their product for Mac and Linux OS (the last one for Linux was in 2000). The full version cost is $669 and to upgrade if you are a user already, costs $324.

Affinity Designer by Serif is a popular choice for Windows and Mac OS. It was a Best Imaging Software Award Winner in April 2016. A one-time purchase is around $49 but depends on your local currency and specifics.

Related:  10 Writing Tools and Apps for Designers

Free app icon design software

GIMP by GNOME is a free raster graphic editor with partial support for vectors. It is compatible with Windows, Linux, and Mac OS. It can be an alternative to the products mentioned earlier, especially considering their pricing. As free software, it has its cons, of course, which we will not analyze now. The editor allows for the import and export of PDF, can work with photos and create your images. It can be automated by Python, Ruby, Perl, Java and other programming languages.

Iconion is free for Windows and Mac OS users. It provides a broad range of tools and a huge variety of templates for Windows 8, Mac and iOS. Your files can be saved as a jpeg, png, BMP, or ico.

Greenfish Icon Editor Pro is a great professional, free tool, but for Windows users only. It has a gorgeous designer toolkit and works with jpg, png, BMP, ico, cur, ani, xpm, and gif file formats. It is easy to use, lightweight, and portable.

IcoFX is another free app for Windows with a pretty rich functionality. It lets you work with photos and also has a great toolkit, providing you with more than 40 image effects. However, the software has become commercial. The last supported free version is 1.6.4., which is still available for usage.

The world of digital design software is full of great products for any taste and budget. The only necessary thing is your desire to work and create value.

We wish you luck in your creative work and success to your future app. The process of creation is the greatest thing people can experience in their life.

---

Author Bio: How to Design App Icons for Android and iOS – was written by: Olga Anoshyna a copywriter at Cleveroad, a software development company. We work with small business and big corporations to give the world best quality products.

The post How to Design App Icons for Android and iOS is by Stuart and appeared first on Inkbot Design.