bus-icon-in-subway

Make stunning, attention-grabbing icons for your mobile applications.

Icons for Android and iOS are graphics for a mobile application required to display the program on the screen of a mobile device. Almost all objects in the interface of mobile platforms are displayed using icons, as they simplify identification and visual search.

A quick glance at a graphic element is often enough to make a decision about downloading an application. Ideally, the icon should explain the purpose of the program without having to read the description.

You may also like: The Importance of UX.

Tips on Creating Icons for Applications

The icon for applications is part of the graphical cover of the mobile platform. Therefore, it should be in harmony with the interface and icons nearby, while maintaining its uniqueness. Therefore, the first rule: read the instructions from Android and iOS developers.

  • The official site for Android product designers provides a list of preferences for style, components, animations, and other visual elements. 
  • Apple has instructions on creating visual elements for iPhone and iPad programs.

Simplicity and Clarity

Make friends with minimalism — the less details and “decor” in the picture, the more chances there are for recognition. The ideal icon is the one that symbolizes the essence and purpose of the software product. You don’t have to go far for examples. Just look at the program symbols of all popular social networks.

Scalability

Icons cannot be resized or stretched. Therefore, they should be readable in the size characteristics determined by the developers of mobile systems. Usually, the icon is displayed on the main page, as well as in the submenu, in a slightly smaller version. The display changes on different devices.

This depends on the resolution and other characteristics of the screen. In any case, users do not have to strain their eyesight to understand the meaning of the image. Therefore, the finished image needs to be tested for different screens.

Recognition

Simplicity (see the first rule) and a recognizable style are the parts of the ability to focus on the idea without unnecessary elements. The number of applications in the Google Play Market is over two million. The App Store has approximately the same number. Imagine two million icons fighting for user’s attention!

Here are some tips on how to make your image unique: 

  • Use a recognizable brand element (for example, the first letter of the name with a trademark font).
  • Demonstrate the functional feature of the program (for example, draw a message cloud for the messenger).
  • Use a symbol that is understandable to the target audience at a glance.
  • Do not copy competitors. If a niche is full of bright colored icons, make your icon monochrome.
  • Analyze the result and try new ideas. It is impossible to calculate exactly which design option will “shoot.”

Coherence

An icon is one of the visual elements of a brand. It has to be coherent with the general branding style. The perfect icon:

  • Is made in the style and colors of the brand.
  • Visually describes the program and indicates its purpose.
  • Corresponds to the color scheme and design elements of the program.
  • Is clearly visible on light, dark, and colorful backgrounds (given the variety of custom wallpapers).

Uniqueness

There are many requirements for icons. The sizes, rounding rules, degree of transparency, and other subtleties are normalized. However, you can implement any ideas on the “canvas” made according to the requirements of developers. Experiment — pick backgrounds, change perspectives, try different shapes, and try not to repeat the ideas of competitors, even a bit.

Text

Taking size into consideration, you will not be able to write a lot on the image. Small letters are complicated to read. International program products should be universal. If the inscriptions are in English, they will be readable in most countries, Cyrillic alphabet or hieroglyphics will cause problems for foreigners. The ideal option is not to use the letters or use only 1 or 2 from the brand name.

The Unity of Design and Functionality

The correct icon is one that does not make a user read the description of the program. An example of successful visualization is a camera image for the “Camera” application.

Icons for iOS Applications

Icons for IOS application

Size Requirements

Every icon for iPhone and iPad has to be in both a small and big variant. Small is for the home screen (also Spotlight search and settings) and the big is used in the App Store.

Characteristics

iPhone6s Plus & iPhone 6Plus

iPhone6s, iPhone6, & iPhone5

iPhone4s

iPad & iPad mini

iPad2 & iPad mini

iPad Pro

An icon for an app

180×180

120×120

120×120

152×152

76×76

167×167

For the App Store

1024×1024

1024×1024

1024×1024

1024×1024

1024×1024

1024×1024

For the Spotlight search

180×180

For iPhone 6s & iPhone 6 use 120×120

For iPhone 5 use 80×80

80×80

120×120

60×60

120×120

Settings menu

87×87

58×58

58×58

58×58

29×29

58×58

Tools panel or Navigation bar

66×66

44×44

44×44

44х44

22×22

44х44

Tab panel

75×75 (max: 144×96)

50×50 (max: 96×64)

50×50 (max: 96×64)

50×50 (max: 96×64)

25×25 (max: 48×32)

50×50 (max: 96×64)

Design Rules

  1. As simple as possible: small details are not distinguishable on small logos.
  2. Lack of transparency, minimalistic background. It should not suppress nearby elements.
  3. Without copyright infringement: among other things, it is impossible to use corporate symbols of Apple.
  4. In the interface, the icon does not necessarily have to be duplicated, it just has to use the same color scheme.
  5. Before downloading, it is better to test the picture on different types of backgrounds.
  6. Upload a picture with right angles: the system rounds them automatically.
  7. No need to mark the border of the image: the system itself adds pixel indentation.

Icons for Android Applications: Designer Standards

Icons for Android Applications

How can you make an icon for an Android application according to the rules? You need to consider the size of the gadgets and the resolution of their screens. Graphic elements in applications are measured in dots per inch – DPI. There are several DPI categories:

  • Low or LDPI — 1200.
  • Middle MDPI — 1600.
  • High HDPI — 240; extra-high XHDPI — 320.
  • Extra-extra-high XXHDPI — 480.

For Android, you need to develop separate logo programs: iOS standards do not apply to them. Rule: the icon should be in PNG format, 32-bit, with a transparent background.

The size in the database is 48dp, + 1dp per edge. The higher the pixel density is, the better the detail. You can make several icons with different size options using the table:

MDPI basic size

HDPI 1,5x

XHDPI 2x

XXHDPI 3x

Icon

48px

72px

96px

144px

Icons for Google Play Programs

Size requirements: 512х512, high resolution. The image is needed only for the Google store, and it has to repeat the appearance of the image used to launch.

“Recommended” Section

This section demonstrates the graphical capabilities of the program. Icon sizes are 1024×500 pixels, PNG format, 24 bits, with a transparent background.

A few recommendations:

  • Do not place anything in the cut-off parts, especially in the lower third of the picture.
  • It is better to put the image, logo, or other key element in the center.
  • Text has to be short and large.
  • A unique shape is allowed.
  • A cropped version of a large image is not allowed.
  • The image has to have the same “weight” as other icons.

Best Services for Logo for Applications

If you do not have a designer who can develop a visual element according to all the rules, use specialized services.

Logaster

Logaster is a wonderful service for program developers who do not want to delve into the intricacies of requirements and master graphics programs. Logaster makes the process of creating a logo for a mobile application is extremely easy.

IconsFlow

IconsFlow is a relatively free service, where you can create or change a ready-made logo for a mobile application. There are two editors in the interface: the first is the main, there are a palette and a list of effects and styles, and the second has tools for changing the share. Graphic skills are required.

Fontawesome

Fontawesome provides a set of icons and fonts based on which you can create your own vector logos for mobile applications. The program must be downloaded and you need at least basic graphical editing skills.

Conclusion

Creating app icons is a compromise between standardization and creativity. On the one hand, you need to comply with all the requirements of mobile platforms (otherwise the program will not pass moderation). On the other hand, it is necessary to create a unique image that will stand out among competitors. In order to succeed:

  • Use the services of professional designers or, even simpler, specialized services.
  • If you have branded visual elements, be coherent with them, so that the icon will be in a corporate style.
  • Work on visualization ideas in which simplicity is combined with high recognition and visibility.
  • Experiment with variants by analyzing user response and activity.
  • Regularly update the logo to match the overall design of the mobile operating system, as well as general and corporate trends.

Related Articles



Source link

Write A Comment