Which mobile APP icon is the best-looking and is it your favorite?

The application icon is a user’s first impression of your application. Users can judge whether the application is beautiful and friendly through the application icon. To a large extent, a good product should have a good application icon, and a good application icon should clearly convey the connotation of the product and make the user experience peaceful and unified from the outside to the inside. Therefore, designers should pay attention to the following 8 principles when designing application icons.

1. Recognizability

The first premise of excellent icon design is that the meaning is accurate, allowing users to recognize the meaning it represents at a glance, and being able to be close to the metaphor in the user's mind. Therefore, recognizability is the first important principle of trademark design. Since the flat design style became a popular trend, skeuomorphic icons have gradually disappeared and been replaced by flat graphics that weaken the texture. This actually puts forward higher requirements for design. In the past, we could use very concrete graphics to express it, but now we can only convey the correct information through abstract graphics. In iOS, the icon of the system music application is a very good design example. , and the metaphor of the game center is very poor. It is difficult for users to understand its meaning from several colored bubbles and to obtain relevant information. Users of the first three applications in the picture below can easily identify their product attributes. Although the last application icon has distinctive personality characteristics, it is difficult to convey it to users visually. Camera, shooting, photo' and other information.

2. Differences

There are millions of applications in the AppStore. Searching for common product names will yield dozens or hundreds of results, and many of their application icons are similar. To make your application stand out from many similar products, when designing a trademark, designers must highlight the core functions of the product while showing differences to avoid visual homogeneity.

3. Continue the product interface

Extract design elements from the product interface as a reference for the application icon, so that users can know what type of product and main color it is through the application icon at a glance What is it, what is the design language, what does the interface look like, etc. This is the most perfect design method. Among similar products, Clear can be said to be the best example. Its application icon design not only has a strong metaphor, but also continues the design style of the product interface. Simple shapes are superimposed with bright and bright color blocks to create an effect. What makes Clear unique.

4. Be careful with white backgrounds

In order to pursue the ultimate beauty, more and more designers are designing application icons with white backgrounds. It is undeniable that from a single visual point of view, the use of icons with a white background highlights the subject and also appears very concise. However, when applied to different desktop wallpapers, icons with a white background are easily buried in other brightly colored icons. Especially when the mobile phone wallpaper is white, the icons with white background appear like irregular Android icons. At the beginning of this chapter, we mentioned that when irregular application icons are arranged together, the screen will become very uneven.

5. Highlight the brand

When designing application icons for well-known brand products, you should make full use of their brand logos. These graphics have left a deep impression on users and are very easy to use. Identify. For example, QQ has been using a cute little penguin as its brand image for ten years, which has been deeply engraved in the hearts of users. Whether they hear or see a penguin, they always think of QQ immediately. Even if Remove all decorations from the penguin image, leaving only a simple silhouette graphic, so users will not be able to mistake it. This is the charm of the brand, and it should also be well utilized when applying icon design to extend the vitality of the brand.

6. Vibrant colors

The iOS10 Human Interface Guidelines provide a set of design specifications that clarify color matching and built-in applications choose to use those that look more personal. , pure and clean colors, green is used for phone messages, blue is used for weather and browser, yellow is used for memos and reminders, etc.

Using bright colors when designing your app icon will help your app grab users’ attention.

7. Use grid lines

Designers should always use IOS grid lines as a design basis when designing application icons. It can maintain peace and unity between your design and the IOS system. . The more icons designed using grid lines, the better they can match each other in the interface, and the stronger the overall sense of the icons in the interface will be.

8. Multi-scenario testing

The application icon we finally designed will appear on the mobile home screen, AppStore, interface and other environments at different resolutions. The designer needs to Conduct design testing in the application scenarios of the icons to make them fit as perfectly as possible. on the AppStore. The icon size is 1024×1024px, which means designers have a lot of room to play and can depict many details. On the home screen of the mobile phone, the icon size is 120×120px. When the large image is zoomed into a small image, some details will be lost, making the image blurry. At this time, designers need to make subtle adjustments to small-size icons and remove unnecessary decorative elements to ensure that application icons can maintain clear recognition even in small-resolution scenarios. After doing all this, you must also test your design on a mobile device. If you design and draw in Photoshop, you can connect PsFlay to cast the screen to your mobile phone for confirmation.

The above content is provided by Silk Road Education