Pixelmator is a great many things to photos, but what it can also be used for is designing amazing app user interfaces and app icons. Through all the work put into the functionality of an app, you now have the ability to showcase that functionality in a beautifully crafted app icon.
Bad app icon designs are among the top three reasons why apps keep getting rejected from the App Store.
The app icon is usually the first place most people will notice your app. You have to truly stand our from the noise to be noticed. Below is a screenshot of the Top Grossing Games in the Mac App Store currently. Being simple, beautiful, and instantly recognisable are the three main traits of awesome app icon design.
Does your eye get drawn to any particular design?
Do these icons have some similarities – what do you like about them – what about them was eye-catching?
The following 9 simple rules will help you create amazing app icons using Pixelmator:
1. Keep it simple and don’t drown in the detail
Keeping the details to a minimum in app icons, the better. With only a few key elements, you can convey the essence of you app adequately. Below is a weather app icon we created in an earlier tutorial.
2. Stay away from words and numbers
Words are dangerous on the face of your app icon. The saying “a picture is worth a thousand words” should be your motto when designing your app and your app icon. Words will clutter the message you are trying to convey, and in the split second that someone sees your app icon it could convey complication. Although Pixelmator has great tools to incorporate cool fonts into your images, this is not an instance in which they should be utilised. It is okay to use a letter or number as part of your logo, but in general stay away from using words or numbers that will overcomplicated the design. Most likely the user won’t be able to read the word or number when looking at the app icon on their phone.
3. Design for your audience, but also for global use
You want to make sure that not only your audience will know what you app is about, but also anyone who looks it up will also get it – ideally without having to read the summary of your app to figure it out. Even apple has taken to simplifying all of their apps to make them noticeable and simple for use by everyone. You can take a leaf out of Apple’s design trend and very quickly design something similar in Pixelmator.
4. Design for the right size
Make sure you design the right size of the icon – rookie mistakes will cost you by getting rejected from the app store. Make sure you stick within the app store guidelines for maximum success.
5. Be consistent with shadows and highlights (and don’t go crazy either)
Use simple shadows and highlights to really make your app icon pop; however be warned that you can take this too far trying to make a 3D effect, and completely lose the plot. Just be consistent.
6. Easy on the perspective and 3D effects
Creating some awesome perspective and 3D effects using Pixelmator will make you app icon stand out; however use this wisely. Ideally test out a few designs and see how it looks relative to other app icons on your device.
And don’t worry even Apple makes mistakes in that department. So learn from the best.
7. Don’t use real pictures in your app icon
Please don’t do this – they are just terrible, so don’t even try.
8. Choose your colours wisely
It is important to utilise the vibrant colours Pixelmator offers carefully. The goal of the colour is to stand out and catch someones eye in a crowded app market. Choosing the right colour, and limiting the number of overall colours used can make the difference between great design and random art. Here is a screenshot of poker apps in the app store – see the apps that use colour wisely and those that just look far to busy and messy.
9. Be unique and instantly recognisable
Remember that you have only a second to capture a potential users attention. Therefore the app icon you create in Pixelmator needs to be deliberate and thoughtful. Every detail needs to be focused on the app and what the potential interpretation can be.
Pixelmator has the versatility to create beautiful and elegant app icon designs, so take the time to learn how to make an app icons that are amazing.