Designing an iOS app icon is a major milestone for your application development. An icon is the first thing people see on the App Store.
It’s your chance to grab attention of your potential clients. In addition, app icons are the first thing to associate with your brand.
In this article we’ll give you TOP 7 iOS icon design tips that will definitely help you create a successful product.
As a bonus you’ll find a mighty handy guide on a perfect app icon design lifecycle example.
Make sure to read to the end, as we prepared a practical tutorial on how to create an icon for iPhone and iPad apps using the Sketch App 3 editor.
#1 – Keep it simple
If you search around the App Store you’ll find all kinds of different icons shapes and ideas. Nevertheless the most popular apps usually embrace simplicity.
Your icon is just big enough to convey an idea to people. But not a dozen of them! Imagine that your icon is a road sign. You rarely see a sign containing huge amount of details.
Our recommendation is not stuffing your icon with lots of different images. You need to focus on one element that expresses the essence of your app.
Besides, if you cram many elements into an icon, you risk getting some of them appear blurry or muddy.
#2 – Help people recognize
Icons are a simple way for a user to classify you app – whether it’s for calling, geolocation, news or chatting. Why confuse people with complicated images? Keep it simple.
First things first. If you, for example, develop an app for making calls, it’s much better to depict a phone, than a phone cord or a satellite. Avoid dispersing your attention on secondary things.
#3 – Think outside the box
Even though you need to help people recognize what’s your app all about, you don’t want to upload yet another cookie-cutter icon to the App Store. Be creative.
A good example of this concept would be the Evernote app. If you look for the To-Do apps, you’ll find that the majority of them have basically identical icons.
Despite the popular association of To-Do lists with an image of a tick, Evernote UI designers decided to make their icon stand out by giving it a unique look. And they did a great job with that one!
Try not use cliche way of thinking. Think outside the box. People always prefer unique looking icons to the mediocre ones.
#4 – Choose colors responsibly
Color selection is one of the key elements of icon creation. Try to keep your color palette simple. One or two contrasting colors would be perfectly enough.
Even though there are cool apps with colorful icons, it’s much harder to keep the balance having a lot of colors, rather than a few of them.
Read also:
#5 – Avoid using photos
This is a big no-no. Photographs rarely look good on icons. They just don’t. It’s much better to use graphics.
#6 – Say “No” to text
It’s usually an exception rather than a rule that icons with text on them look good. If you can get by without using text, do it. Better use just a symbol or your logo for your iOS app icon design.
Not only the name of the app will just duplicate the writing on the icon, but you also risk getting things out of control if your app name is pretty long.
#7 – Test it out
There are specific requirements for the iOS app icon dimensions. Make sure to follow them. You should also make sure that your icon will look good considering the target iOS corner radius for app icons.
To be more precise, Apple employs a Human Interface Guideline that includes recommendations and requirements for creating an app icon.
These rules apply to any usable operating system – from iOS 7 to iOS 9.
Don’t wanna bugs? Then look for them!
You should check out your icon on all kinds of possible image sizes, that would be compatible with both retina and non-retina screens. If necessary, simplify it for smaller dimensions.
But once you think your icon is good to go, don’t forget to test it on real devices.
We also recommend testing your icon with different backgrounds. Make sure your app will look good against all kinds of wallpapers.
Special Bonus #1: A perfect icon lifecycle
Designing an icon is all about creativity and spontaneity. However, it’s good to have some kind of a plan to stick. This way you won’t waste your time on secondary things.
By writing this lifecycle guide we are hoping to help you get your working process more organized and efficient. Let’s get started!
Step 1: Brainstorming
You can do it either with a group of people or by yourself. Just write down whatever comes to your mind regarding the icon you’re about to create. The more the better.
This will help you create an abstract image of your future masterpiece.
Step 2: Sketches
A lot of people skip this step. They just go ahead and open up an editor program. We highly recommend for you to stick with this old-school tradition of plain old sketching on a piece of paper.
Actually it’s better to use a sketchbook for this purpose. The main reason is – you’ll have all your sketches in one place. You might get a few different versions of the icon and then pick out the best one.
Step 3: Presenting your sketches
So you got lots of different sketches in your notebook. That’s great! But before kicking off working on your masterpiece it’s better to present your ideas to the client or your fellow coworkers.
Now you can use the editor. But don’t pursue perfection. Remember – it’s still just a sketch. You only need to convey the overall idea.
To speed up the process we recommend using a tablet or a draw pad. But no worries, if you don’t have one. Plain old mouse will be good as well.
Read also:
Step 4: Drawing
This step is described in great detail later on right after the Step 5 in our “Special Bonus #2: Step by step icon creation tutorial”.
Step 5: Make your icon “website friendly”
If you’re planning on using the icon on a website, then it’s a good idea to translate it into CSS font. Your fellow web-designers will definitely appreciate this move.
There’s lots of services that can help you with that task. Here are some of our favorites: Fontello, Typicons, Iconic, Fontastic. Try them out by yourself and see what fits best for you!
Special Bonus #2: Step by step icon creation tutorial
Just as we promised, the article is not just about app icon design tips. Here’s a guide that will reveal best practices of icon design.
For this purpose we’re gonna be using Sketch App 3. You might ask: “Why not use beloved Photoshop?”. Because unlike Photoshop, Sketch App is a tool made specifically for UI and app designers.
Before we kick off, we wanna make a note that Sketch has an iOS app icon template. However, we won’t be using it. And here’s why: it is not a suitable method of creating differently sized icons. We’ll come up with our own solution instead.
A match made in heaven
If you want to get the best of Sketch App we recommend using Aeiconizer Plugin from the Sketch Toolbox. It will help you design a singular app icon and get it in the correct dimensions, ready for export.
Creating the icon
Here’s the actual step-by-step guide:
- Open up your Sketch App 3.
- Press CMD + N to open a new canvas
- Press “A” for Artboard and select 180 — iPhone 6 Plus under iOS Icons
- Press CMD + “+” to zoom-in at 200%
- Press “R” and draw out a rectangle that is the same size as the artboard
- In the inspector window choose the following styles:
- Fill: the color you need
- Border: untick and trash
Well, now you can go crazy and create whatever you want. Feel free to use all kinds of various effects.
Once you created your masterpiece, you can proceed to the next step, in which we’ll explain how to make use of the Aeiconizer Plugin.
Using the Aeiconizer Plugin
Now let’s get to the part where we end up getting our icon in all needed iOS-compatible sizes.
For starters select the artboard from the layers sidebar and navigate to Plugins → Aeiconizer. You will notice that our icon has been duplicated multiple times. That’s really convenient.
Exporting the icon
Select each artboard from the layers sidebar. Don’t forget omitting original artboard though. Press CMD + Shift + E to begin the export operation. A dialog will appear asking you to confirm the export — you can tick or untick any artboards before finally exporting.
If you are exporting a layer or group with custom settings, select the desired layer and click “Make Exportable” button located in the bottom-right corner of the window.
In this case you will be offered to change file format, suffix or resolution before exporting that individual layer.
Special Unexpected Bonus #3: App icon template
To spice things up even more we decided to present you our own custom app icon template.
It’ll make the icon creation process much easier.
Go ahead and download it for free, use it wherever you want and design an outstanding iOS App Icon 🙂
Conclusion
There’s a quote saying “You won’t succeed unless you try”. Experiments with a few key details to find the right shape. If you find a perfect match in shape, it’s gonna be much easier to come up with the right colors.
Eyecatching UI is one of the main focuses for LunApps. You already know that we are pixel-perfectionists, am I right?
That’s why we pay much attention to the process of icon creation. Our team makes sure to work with clients, while giving professional advices, up to the point when everyone (even the client 😉 ) is happy with the result.
If you need a mind-boggling logo for your app, be sure to contact us, and you’ll never regret it.