Tip: In some cases, app developers will design a “dark version” of their icon to maintain its beauty outside of mobile devices, like in websites and advertisements.Īn example would be this dark theme icon from Instagram: You need to maintain the icon’s stunning look wherever people see it. Your app icon will also be shown on various websites, which have different background themes. Users have various wallpapers on their device’s screen. Be Mindful of the BackgroundĪndroid and Apple both have a dark mode. Tip: If you need to add text to your icon, put an acronym or the starting letter of your app name. But their names are very short, and the words are, in fact, their design. You may say that some icons have words, like Hulu and IMDb. “A picture tells a thousand words” – you would have failed in the art of app icon design if you still need words to convey what the icon means. Pictures and text are different forms of representation. In fact, you should also keep the name of the app short and sweet as well (check out Generating That Perfect App Name: Tools and Tricks ). Android and Apple both show the name of the app below the icon. Moreover, it is unnecessary to put words. You do not want people squinting their eyes trying to decode what’s been written within the icon with a very tiny font. Using words in an app icon design is a big no-no because of its size limitation. Try to limit your shape and object usage to just one, if possible. Snapchat’s attractive icon has yellow and white primary colours. This is what many apps have done, like Facebook, Vimeo, Spotify and Skype. It is a good idea to use up to only two primary colours. There are two habits you can follow to ensure your icon is simple in design: Limit the Use of Colors You will confuse the user if you clutter it with various objects and elements like colour, text, or shapes. Always Keep It SimpleĪpp icons are small. This ensures the design doesn’t stray when the resolution changes. You should use a design that will stick to its impact when the icon size changes.Īpps like Instagram and Twitter use a single object in their icons. Scale the icon on various resolutions and sizes and see how it looks and feels.ĭon’t cram too many elements into the icon like text, plenty of colours, and multiple shapes. Wherever people see your app icon, it should create a consistent brand representation and authority effect.Ī tip would be to not only use a 1024 x 1024px palette while designing. It will be shown in other places like the phone’s Settings panel, your official website, and social media. The phone’s menu drawer isn’t the only place where your app icon will reside. You should ensure your app icon design looks good whether it’s big or small. However, for Facebook’s other applications – Messenger, Whatsapp, and Instagram – their icons still communicate what they do.įacebook Messenger has a chat bubble, Whatsapp has a phone, and Instagram has a camera in their app icon design. One such example would be Facebook, which only has an “F” on its app icon. They can get away with it because their apps are already very popular. You may notice that some apps don’t reflect their functionalities on their icon. Other examples include games like Angry Birds and Fruit Ninja. For example, you can more or less infer that YouTube is a video streaming app through its iconic “Play” button in the red background. Communicate Your App’s FunctionĪ good icon will tell the user what the app does just by looking at it. Here is the reference for you:Īpp Icon Design Best Practices 1. The rest of the sizes will be automatically scaled down from this baseline.įor iOS : Apple has a size guideline on its official website. Note that you will only need to submit the five icon sizes mentioned. The final 512x512px size is for displaying the icon on Google Play Store. The first four sizes are for phones with different pixel densities (MDPI, HDPI, XHDPI, XXHDPI, and XXXHPDI). In this article, we explore how you can design excellent mobile app icons.Īpp Icon Sizes on Various Operating Systemsīefore designing an app icon, you should be aware about the sizes supported by various operating systems.įor Android : You need to submit five app icon sizes along with your app (48×48px, 72×72px, 96×96px, 144×144px, 192px×192px, and 512×512px. It plays an important role in determining the user experience (UX) of the mobile software. Your app icon design sets the mood, getting the user to think about your app in a particular way before opening it. If your mobile app is a house, then the user interface (UI) is the house’s interior design, and the app icon is the front gate. (Bonus Tip) Experiment With Seasonal Icons.Think About the Colors That Are Generally Used in the Industry App Icon Sizes on Various Operating Systems.
0 Comments
Leave a Reply. |
AuthorWrite something about yourself. No need to be fancy, just an overview. ArchivesCategories |