Learn design through app icons! A beginner’s guide.
As a Japanese Company we have a big variety of really great and interesting articles in our Japanese Blog. As a new initiative we are going to have the best of them translated and published every month. Have fun with the following post which was originally written by our lovely colleague Aoi-san.
Have you ever had problems like these when designing an icon for your application?
- First of all, how do I do it?
- Should I create a logo?
- Should the app name be part of the icon?
So for those of you who are not so familiar with design, we’ve gone ahead to look for the optimal solution to these issues when designing an icon.
I hope that this article can provide some hints for people such as those who are studying UI/UX design but often have trouble with icon design.
What can be understood from an icon’s design
On Apple’s Human Interface Guidelines, a set of guidelines for developers, you can find some instructions to help you through designing an app icon.
The rules are the following:
- Embrace simplicity
- Provide a single focus point
- Design a recognizable icon
- Keep the background simple and avoid transparency
- Use words only when they’re essential or part of a logo
- Don’t include photos, screenshots, or interface elements
- Don’t use replicas of Apple hardware products
- Don’t place your app icon throughout the interface
- Test your icon against different wallpapers
- Keep icon corners square
(Reference: https://developer.apple.com/ios/human-interface-guidelines/icons-and-images/app-icon/)
As you can see, there are many restrictions to making an app, besides the fact that it has to be small.
Thinking about the designs for an icon can be an opportunity for those studying design to further deepen their understanding. There are 2 reasons why.
Give information
When downloading a new application, what are the steps that you take to find it?
Many people would search some keywords, such as “camera” or “diet,” then take their pick from the results that are given to them.
But today, there are so many different applications that are available to us. So many of them look very similar, have similar features, or are in the same price range. For one app to catch the user’s eye and be chosen amongst all of these selections, it has to be appealing yet simple.
Also, icons are very small.
This tiny little square has to send users some kind of message as the “face of the app”. You can discover a critical way of thinking in design through this concentrated form of expression.
Deciphering trends
Even apps that are constantly at the top of the list update their icon from time to time.
If you look back into its history, you will find that apps, whatever category they may belong to, update themselves by following the design trend.
If we analyzed these updates, shouldn’t we be able to decipher the trends in design?
Now, I would like to touch on how to think about design by looking at iPhone apps on the App Store as a basis. Try comparing your own current production design, or against your home screen and see what you find.
Let’s look through a variety of patterns
There is a variety of icon designs that depend on the app’s characteristics or features. Here, I have roughly sorted the top ranking apps by design along with their categories and features.
Pattern 1: Make good use of well known logos
When looking on the App Store or at your home screen, you can see that simple icons stand out the most.
Apps like Facebook, Twitter, LINE, Tumblr, Spotify, Pinterest, Snapchat, or Youtube are already well known for their logos. Thus, the logo speaks for itself with just its key colour.
The characteristics and services of the applications shown above can be recognised immediately.
An icon’s role is to help users decipher the functions of the app instinctively. If the application has a logo that is already well known, you could say that the icon design is 90% finished just by placing that in the center.
Pattern 2: Get rid of letters. Simple is best.
If your application does not have a logo, you may wonder whether or not to use the full name of the app.
A search for apps that include their name within their icon turned up the following results. I found Retrip, Delish Kitchen, Zozotown, and Hulu.
Apple’s guidelines state “Use words only when they’re essential or part of a logo”. Additional information like “Free!”, “New camera app”, or “More than 1 million downloads!” is not only unnecessary — it is strongly frowned upon by Apple.
Putting too many words in that small icon space will make it harder to read. Whatever message you want to deliver may not be communicated properly and may give the user a negative impression.
Also, be mindful that even for apps that provide both free and paid versions, if your icon says “Free” there is a high probability you will receive a rejection during the App Store Review process when submitting your app.
Then what about the name of the app?
Usually, whether it’s on your iPhone’s home screen or in the App Store, the app name is displayed very close to the icon. So there is no need to repeat yourself.
Even if there’s a lot that you want to say, you can give users a better impression about the app’s design if you express your app through a simple illustrated icon.
The first pattern of app icons that I introduced should be considered more as a designed logotype rather than letters.
These app icons represent their service or brand through their logotypes, so although it is technically a letter, it is serving as a symbol logo.
Pattern 3: Use letters as symbols
I also found icons that borrowed from or were inspired by their company or service logo rather than using the logo in its entirety.
Examples of these are; Tumblr, minne, Prott, Sunchi Note.
So you may also often find the first letter of the app name being designed into a logotype.
This might be an idea to try out if you are having trouble expressing the features of your app in an illustration, or if the app has various different features that would be difficult to combine into a single graphic.
Pattern 4: Utilize images effectively
Through my research, I found that there are not many icons which use photos. One example of an app with a photo is AWA.
Within the interface design of the app, AWA also uses a lot of images. So in this case, the app interface and the icon match and we are able to get a feel of the app.
However, images contain a huge amount of information, such as using many colours or many objects.
Putting all of that information into a tiny icon could result in:
- Too much clutter
- A loss of focus on what you wish to the show the user
So it seems a little difficult to use this icon pattern effectively.
The Apple guidelines mentioned above also stated that background images should be “simple” and that “there is no need to fill the entire icon with contents.”
The AWA icon does use an image, but it does not use a huge variety of colours and is almost like a colour gradation. The 3 main letters easily catch our attention.
If you are able to use the image effectively, it is possible to make a memorable icon like this. However, you will need to be very careful with your selection of colours and how they are adjusted.
Pattern 5: Differentiate yourself through design
Asides from letters and images, another effective way for users to instinctively understand the features of an app is to use illustrations.
Most of the time, there is one illustration that expresses the features of a certain category of applications. Hence, there are often many apps in one category with very similar icons.
For example, many apps in the Photo & Video category with “photo taking” as a main feature use a circle in the centre of their icon.
Other examples could be emailing apps using an image of an envelope, or task management apps using a check mark. If app icons do not easily show what its features are, it would become a strain on users who have to figure it out. It may also drive users away from using the app. If your app is one that users would be using on a daily basis, it would be best if the icon had a clear link to its features.
However, that would mean that you will be using an icon design that is widely used. So it is important that you differentiate your app from others by designing an icon that effectively utilizes your app’s distinctive features as well as colour schemes.
Pattern 6: Illustrate the feel of the app
There is one type of app that breaks every rule to icon designing mentioned so far. They are game apps.
Overall, none of these apps are flat. Don’t you think that they’re rather three-dimensional, and use a lot of colours as well as many words and illustrations?
These apps are best considered an exception.
You could say that game apps are trying to entice users with the image style and atmosphere of the game by illustrating the icon in a way that the characters almost pop out of it.
Moreover, game app icons seem to have a set of rules and a culture of its own. For example, icons may change during a campaign period of the game itself, or icons may have some symbol that the creator uses for all of their game apps. Rather, this type of icon design gives a sense of “game apps” to its users, so it is recommended to avoid designing icons like this unless your application is a game.
Consider updates
Next, let’s think about design trends and the role of design by looking at the history of updates.
Have you ever had that odd feeling when you suddenly noticed one day that the icon of the app you were using had changed?
Icons are designed in a way that matches the app’s characteristics. But at the same time, many apps follow the same design rules as the iOS default apps of that time.
Let’s take Instagram as an example.
Do you all remember this realistic textured, retro feel icon?
The now familiar gradation design was not well received at the time of the 2016 update. This type of change was implemented in many apps after the iOS update from version 6 to 7. (Reference: Icon comparison: iOS 6 vs iOS 7)
After the release of iOS7, flat design became widely used for interfaces as well as app icons. It could be due to the fact that these app icons don’t mix in well on the home screen with the other iOS default apps. But flat design has been very well received and many apps have already adopted it.
As an example, minne, a shopping app where you can buy and sell handmade goods, announced a drastic update to its app and icon design in September 2017. The icon change of minne was accompanied by the redesigning of the brand itself including the company’s logo.
(Reference: https://minne.com/brand)
Changing your icon comes with some risk as app icons carry a huge role of being recognised instinctively by the user. At the same time, there are almost always voices of dissatisfaction from users when the design that they were familiar with have changed. But a new, simple icon could appeal to a more diverse area of users and situations.
For this reason, there are many apps who have updated their design to something more flat, simple, and spacious.
The apps above did not always look as simple as this. When they were initially launched, many services used a more detailed icon to clearly convey the app’s features to users. When designing the icons, it is also important to think about how well recognised the app is to users, and whether the design is in line with where the app/service aims to be.
Learn design through app icons
App icons are filled with the principles of design as well as current trends. It is difficult to communicate exactly what you want to say in a tiny square, and may be even more difficult to find a simple yet unique design when there are already so many variations.
However, by thinking about an icon design that’s perfect for your app with a deep understanding of the feature that you want to promote or the target user, you will gain experience in thinking from the user’s perspective and utilizing the design process to build on a concept.
Learning from these examples, I recommend you all to try thinking about design through icons.
Originally published at Goodpatch Blog.
