(For more resources on iPhone, see here.)
The application icon and essential interaction elements such as the Navigation Bar and Tab Bar are crucial for the success of our work. The user will be tapping the icon every time they go to use our app, and interact with our navigation elements throughout their entire experience in our application.
If we want success, we must focus on making these components attractive and functional. Attention to detail and the presentation of these pieces will be key, and we’ll need to produce our best work if we want to stand out in a sea of apps.
Designing an application icon and preparing it for the user home screen
It’s often said that a book shouldn’t be judged by its cover, but the harsh reality of mobile development is that an app is often judged by its icon. This rounded rectangle will appear on the home screen of every user, and it’s important that we create something that is attractive and also a good indication as to what the user should expect after downloading our application.
In this recipe, we’ll create a strategy for successful app icon design.
Getting ready
Adobe Photoshop will be our primary tool in the design of our app icon. It may also be helpful to grab some paper and a pencil so that we can sketch out any concepts we may have before we begin working on our computer.
How to do it…
The application icon is a primary component of any work. Appearing in the App Store, on a user’s home screen, in Spotlight searches, and more, it’s an important part of our job.
Let’s take a look at several steps that will be useful in the creation of our app icon:
- We should start by with either a rough sketch or Photoshop mockup of our intended design. We should create this mock up at several sizes to help represent the different resolutions at which our icon will be viewed.
- After we’ve developed an idea that we believe is going to scale well, its time to sit down in Photoshop or Illustrator and begin work on our icon.
At this point, we need to determine what size canvas we want to design our icon on. Apple requires that our icon be available at a variety of sizes, with a 512 by 512 pixel square currently being the largest required format, but we should be prepared in case this requirement changes in the future and design our icon accordingly. There are two different ways we can go about making our icon “future proof”.
We can go about designing the icon in a vector format using an application like Adobe Illustrator. Vector drawings will always be the best way to ensure that our icon will scale to any size, but they can be a bit more difficult to create.
If we’re more comfortable using a raster image manipulation program like Photoshop, it’s best to create our icon at a resolution well above what we’ll ever need for the App Store, starting with a canvas of 4096 by 4096 pixels square or greater.
Such a large raster size will give us a piece of art that will print comfortably on sizes as large as 13 inches when printed at 300 DPI, while also easily scaling down to whatever size we need for the App Store.
- Once we’ve decided which format we’re most comfortable with, its time to go about creating our icon.
- Once we’ve completed our icon, it is time to prepare it for inclusion into our application.
- This icon should then be named apple-touch-icon.png and placed inside of our application bundle. iOS will then automatically add the glare effect to the top half of the icon, as seen throughout the interface.
The Info.plist is a file that allows us to customize a bunch of different application attributes. We’ll learn how to use it to remove the icon gloss effect in an upcoming recipe titled Removing the app icon’s gloss effect.
- After finishing our icon, we may also want to run a small focus group, much like we would in order to gain feedback on our user interface design.
We can quickly set up a simple website with a form asking for opinions on our design or even email an image of the icon to friends and family in order to facilitate feedback.
When looking to gather opinion on our icon, we want to better understand a user’s first impression of our icon. For a good portion of purchase decisions, the icon may be the only bit of insight into our app that the user has before tapping the buy button. We want to make sure that on first impression, the typical user associates our icon with quality, simplicity, and value. If our icon looks amateur, users probably won’t consider our application for purchase.
How it works…
Icon design is tough, primarily because we’re required to design a small square that represents our application’s purpose, quality, and value. It’s truly a challenge to design something that works well at 512 pixels and 27 pixels. Let’s take a look at how the steps above work together to create a good icon.
Resolution flexibility is arguably the difficult part of icon design, as our work needs to look great at 512 pixels by 512 pixels and at 27 by 27 pixels. Small details that look great at a high resolution can really make an icon indecipherable when scaled down to the lowest resolution required:
In the above screenshot, we can quickly see how an icon becomes less legible as it decreases in size. It’s necessary to provide the icon to Apple in several different sizes, which can vary depending upon the iOS device we’re developing our application for and the current operating system requirements from Apple. These file sizes have varied significantly throughout the life of iOS, so we should verify the current requirements in the iOS Development Center before their creation.
Sebastiaan De With keeps an excellent Photoshop file for iOS icon design, complete with resolution requirements, which he updates every time Apple changes the icon requirements. We can find the file here at http://blog.cocoia.com/2010/iphone-4-icon-psd-file/ and it should reference it while designing a new icon.
When building our icon, we should really take time to think about what our icon should look like and what users will think when they first set eyes on it in the App Store. This set process works because it systematically creates a piece of work that will be optimized for the various needs of iOS.
There’s more…
It may take a bit of practice to get a firm grasp on what makes a great or poor icon. Here are a few helpful ideas, just in case we’re struggling to develop an icon that we’re happy with.
Dropping the text
We should always refrain from including a great deal of text in our app icon. Text tends to become illegible when scaled down to small resolutions such as 27 x 27, so it is often best to keep text out of our icon. If we absolutely must include text in our icon, we should use short words that are large in size and in a bold typeface.
Great gradients
From an art design perspective, we’ll probably be including an artistic gradient in our icon to offer the illusion of brushed metal or progressive lighting. But choosing a strong color palate for a gradient can be difficult.
Dezigner Folio has created a large library of fresh, modern gradients that they’ve offered up for free use in any project. For the entire library, feel free to visit their website at http://www.dezinerfolio.com/2007/05/03/ultimate-web-20-gradients-v30-release.
If all else fails….
If we’re having a rough time with icon design and all else fails, we can always hire a freelance artist or design firm to help out with the production of our application icon. A quick search of Google can help us find a multitude of artists who have become specialists in the field of icon design.
Finding a talented designer can actually be quite affordable, with many freelance artists charging a hundred dollars or less for a high quality icon. As icons can be produced in Photoshop, local graphic designers or students can help out at affordable rates as well.
