Now that we’ve gone over some critical specifications and best practices for designing app icons for the two major mobile operating systems, we can begin the process of designing app icons with Adobe Illustrator. Design an App Icon with Adobe Illustrator Be sure to check out the Android and Google Play Store developer guidelines to ensure that your design abides by their specifications. This includes labels, text, logos, sales and promotions. Avoid adding tags and badges to your icon.Don’t scale backgrounds and full frame illustrations to fit the keylines.Don’t force your artwork to the full bleed.Other Best Practicesįinally, here are some miscellaneous best practices for designing your Android app icon, according to Android. And the same goes for all of the other shapes. If your logo is a circle, try to make the circle the same size and position as the circle in the keyline grid. To be safe, it is recommended that you keep the primary artwork (excluding the background) within the 384 x 384 pixel area centered within the icon. The keyline grid can be downloaded and imported into Adobe Illustrator, and is intended to be referenced when determining the size and position of your logo, icon, or artwork. The Android developer guidelines recommend using the provided keyline grid for reference when designing your app icon.Ĭredit: Google Play icon design specifications Dimensions (in pixels)Īnd that’s it! Smaller copies will be rendered by the operating system as needed. SizingĪlthough your app icon will be used in just as many sizes on the Android platform as it will on iOS, you won’t have to produce nearly as many sizes. The bad news is that our creativity has been a little more restricted. If your design abides one set of guidelines, chances are it abides by the other as well. The good news for us, as designers, is that we no longer need to make different icon designs for both the Android and iOS operating systems. They fix alignment issues caused by random open space to better present surrounding information, such as the title, rating, and price. They help users focus on the artwork, as opposed to the shape. Uniformed shapes are visually more appealing and easier to digest. Unfortunately, Android has since adopted an Apple-like policy in requiring that app icons have square corners so that a rounded mask can be applied on their end. In the past, Android allowed app icons with custom shapes. One thing you may have noticed about app icons on the iOS platform is that they all have similarly rounded corners. Make sure to check the developer guidelines for the complete list! Rounded Corners This is just a summary of some of the more important guidelines to abide by. Apple advises against using imagery with lots of details that are difficult to make out at small sizes, as well as interface icons that can be misleading. Avoid using photos, screenshots, and interface elements.The name of your app will be displayed within the operating system, below the app icon, so it would be redundant to include the name of the app in the icon. Avoid using words unless they’re part of your logo.Don’t let your background draw too much attention from the focus point. Use a simple background and avoid transparency.Pick a single idea or concept that you’d like to communicate and focus on that. Trying to communicate too much creates confusion. In summary, here are some best practices for designing app icons for the iOS platform… It is highly recommended that you read through these guidelines before proceeding so that you can be sure that you’re abiding by them when creating your design. Guidelines for iOSĪpple has outlined a series of design guidelines for designing app icons for their operating system. Both platforms have the capacity to reject designs that fail to meet their specifications, so it’s important to have this information before beginning. Otherwise the written tutorial should serve you well enough.īefore we begin designing app icons with Adobe Illustrator, we first need to comb through the design guidelines for both iOS and Android so that we can abide by them. I’ll be going over what the design guidelines are for both iOS and Android, setting up the artboard for app icon design, and then exporting your icon in all of the required sizes and formats.įor a more immersive learning experience I would recommend checking out the video tutorial below. In this tutorial I’ll be demonstrating how you can design your own app icons with Adobe Illustrator.
0 Comments
Leave a Reply. |
AuthorWrite something about yourself. No need to be fancy, just an overview. ArchivesCategories |