iPhone User Interface Cookbook — Save 50%
A concise dissection of Apple’s iOS user interface design principles
In this article, we'll tackle the first thing the user sees when using our app: the icon. This 512 pixel square will be an essential piece of the puzzle if we want to see success, and we'll discuss some ways in which our work can stand out from the crowd.
In this article by Cameron Banga, author of iPhone User Interface Cookbook, we will cover:
- Designing an application icon and preparing it for the user home screen
- Creating the rounded edges effect on our icon
- Removing the app icon's gloss effect
- Optimizing our newspaper or magazine app's icon for Newsstand in iOS 5
- Creating a custom Tab Bar for our iPhone application
(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.
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.
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.
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.
eBook Price: $26.99
Book Price: $44.99
(For more resources on iPhone, see here.)
Creating the rounded edges effect on our icon
The raised, rounded rectangle bezel is a common trait on many application icons. Made popular by developers such as Electronic Arts, Lima Sky, Gameloft, and others, such icons often look as if they almost have a wooden or metal frame.
Let's take a look at how we can go about creating our own rounded edge effect so that our icons stick out on the App Store.
For this recipe, we'll need a copy of Adobe Photoshop or another similar raster image editing application. It will also be useful to have the source file, titled IconBezel.PSD, to be downloaded from the Packt website.
How to do it...
Creating a rounded bezel effect on our icon is relatively simple; we'll just have to work in some rounded rectangles and proper sizing requirements. Let's take a look at the simple steps that we must take to create such an icon:
- Create a new Photoshop file for the icon, square in shape, measuring at least 512 pixels by 512 pixels. Then, give a color to the background of the file, ideally close in color to our bezel.
The outer bezel is often styled to look like metal when used in an icon, but we could try to make it look like wood, plastic, or some other material. Be creative and design something unique!
- Use the Rounded Rectangle tool with a radius of 25 pixels to create a rounded square that fills the entire screen. When we're done, the rounded rectangle should fill the entire square from edge to edge.
- Create another second rounded rectangle with a radius of about 15 pixels inside the first rectangle to create desired width bezel.
- Use a bevel and outer glow to create the illusion of a bezel.
- Include the desired art in the center of the icon frame.
- From here, we can save the icon as a PNG in whatever size we need for the app or marketing purposes.
How it works...
On an iOS device's home screen or in the App Store, Apple has designed icons to be presented with a rounded edge look. So while we'll create a square piece of art, our icon will look better if we design a bezel or other piece designed around the understanding that our icon will stand apart from the crowd.
Creating the ideal bezel effect isn't easy. For example, in step three, we need to create a second rounded rectangle inside the first. This rectangle should be in a different color from the first, offering a background for art that we'll place in later. It will also contrast with the first rectangle and give the illusion of a bezel.
As shown in the previous screenshot, this second smaller rectangle should have a radius between 10 to 15 pixels. If we use a radius equal to the larger rounded rectangle, our bezel will look somewhat misshapen.
Diving further into the design, by using the Bezel and Emboss blending effect in Step 4, we'll create a sense of depth that gives the illusion of a bezel, thanks to the Outer Glow blending effect on the inner rectangle.
A 6-pixel large inner bevel with a softness of 5 pixels should be fine, but we can play around with these values to create a desirable look. If we're looking to create a metallic look, we may want a greater bevel. If we're creating a wood look, we may want less of a bevel.
For this example, a glow with a size of 6 pixels offers just the shadow necessary to create our desired effect. Like the bevel though, we may want to play with this depending on our desired effect.
The rounded bezel is an easy way to make our icon pop; it just requires that we have an understanding of how our icon will be displayed on a device. With a bit of practice and experimentation, we can design an exceptional application icon.
We'll probably be creating a PNG image of our icon to place inside our app and submit to the store, but we shouldn't be including transparencies.
Not being caught cutting corners
A somewhat troubling problem is found in many app icons, where there is noticeable clipping in the corner of icons in the App Store and when placed on the device. To an icon with this problem, it looks as if the corners have been cut off a bit and replaced with white pixel artifacts.
This usually occurs when the icon designer creates a bezel like we've built in this recipe, but they don't place a background color in the image under the bezel and instead leave the corners transparent.
This is a great example as to why we should always test our designs on actual devices before we ship our app. This is a common mistake that could easily be corrected if we tested our icon file on an actual iPhone or iPad.
What happens is, corners aren't accurately sized and the corners aren't filling the entire file properly. The App Store and iOS can't properly display transparencies, so these missing pixels appear white and are often in contrast with our designed bezel.
Always include a full square image and use a color background in the corners, even though the user will never see these pixels. This will help to prevent this problem.
Removing the app icon's gloss effect
Apple created iOS to offer a standard icon, originally equal to 57 pixels by 57 pixels. On top of these icons, a standard glass reflection effect was placed on top of all icons.
But there will be times at which we feel that our icon will look better without the gloss effect. In this recipe, we'll discuss how we can remove this effect and create a crisp and bright icon.
For this recipe, we'll need XCode installed on a Macintosh computer. We'll also need the project file for our application in order to edit its Info.plist.
How to do it...
With a few simple steps, we'll easily remove the ship from our iOS icon on the user's home screen. Let's take a look at what is needed in order to remove the effect:
- Open our application project in XCode. We should begin by opening our project in XCode. If we need to check the code out of a repository or just open it from our computer, we should do so now.
- In XCode, open the project's Info.plist file. The location of this file may vary based on our application, but it will be present somewhere in the project folder.
- Add a new row to the Plist and set the key to Icon already includes gloss effect.
- Next, we'll need to create a new row in the Plist and then set the key of that row to the Icon already includes gloss value.
- Set the Boolean value to YES, save, and compile our application.
The next time we compile our application, the shine will no longer be present and our app icon will look crisp on the home screen.
There is no rule with regards to when we should or should not include the gloss effect. Try out both styles to see which suits our icon best.
How it works...
Our application's Info.plist file holds a variety of application properties, including the ability to remove the gloss effect from an icon when displayed on the iOS device home screen.
As learned in steps 4 and 5, this Boolean value determines if the gloss effect is placed upon our icon or not. By hovering over an existing row, we'll see a small plus icon that we can click with our mouse in order to create a new row:
iOS parses the plist when installing the application, and such settings are then applied to the icon in code by the operating system. It doesn't require much work on our part, and can help make our icon stand out as exceptional.
eBook Price: $26.99
Book Price: $44.99
(For more resources on iPhone, see here.)
Optimizing our newspaper or magazine app's icon for Newsstand in iOS 5
With iOS 5, Apple has developed a new set of application icon attributes to help make our periodical stand out in the new Newsstand feature. Our icon can now look different than the standard glossy rounded rectangle, allowing for our work to gain greater attention from our users.
In this recipe, we'll look at different ways in which we can customize our periodical icon in Newsstand.
In this recipe, we'll need a nearly completed periodical application for which we can complete the necessary icon files. It's important that we have an idea about what sort of art direction will be required for the icon as we complete this work.
How to do it...
Creating icon files for periodicals in iOS 5 and beyond is a bit more complex than the standard application, as we have the ability to have customizable covers that change as content changes with new issues in the app. We can also dress up our app icon to look like a real magazine or newspaper, which can offer neat artistic flare as well. Let's take a look at the steps required to create a periodical icon in iOS 5:
- Create a standard iOS icon square for the app, measuring 57 and 114 pixels for the iPhone and 72 pixels for the iPad.
- Design a periodical specific default cover image to appear in Newsstand. Select a binding edge and binding type for the Newsstand cover.
- Include cover images in future updates to the periodical for inclusion in Newsstand.
When these four steps have been accomplished, our icon will be ready to go for the Newsstand feature in iOS 5.
How it works...
Throughout the history of iOS, designers have only needed to put together a single icon, consisting of a 512-pixel square that is then scaled down to other sizes as required. This made icon design simple and easy, although it was quite difficult to make an icon stand out from the crowd. With iOS 5 and Newsstand, periodicals can now add a bit of customization to help an app's content stand out.
In step one, we'll be designing a standard square icon that will turn into a rounded rectangle and look like any other app icon in iOS. This will be required for our periodical, even though we have new and improved cover icons in Newsstand. The standard icon will be used in the App Store, when searching for an app in Spotlight, in the Settings application, and in notifications throughout the operating system, so it is required that we still include it in our app binary.
With step two, we'll be designing a more periodical specific icon to serve the purpose of a cover page for our magazine or newspaper when in the Newsstand feature. As new issues come out, we'll be able to update the icon to represent the day or week's cover story, but we'll still need a general periodical cover to display in case we have no updated periodical cover to display. This should be in the art style of our periodical and look much like a standard issue would appear on a physical paper or magazine.
For step three, we'll need to apply binding properties to the cover in the application's Info.plist. For the UINewsstandBindingType key, we'll provide a string of either UINewsstandBindingTypeNewspaper or UINewsstandBindingTypeMagazine. This choice is fairly self-explanatory and based on our selection, our periodical cover will look more like either a glossy magazine or a newspaper.
Next, we'll set the UINewsstandBindingEdge key to either UINewsstandBindingLeft , UINewsstandBindingEdgeRight , or UINewsstandBindingEdgeBottom. With our selection, the periodical cover will be edited to look as if the binding fold is on the left, right, or bottom of the issue.
Finally, we'll need to include updated periodical cover art images whenever we update our application so that iOS can adjust the cover accordingly in Newsstand. This will allow our periodical to appear up to date and grab the user's attention with an updated cover based on our most up-to-date app content.
By following these four steps, our icon will be ready for display in iOS 5's Newsstand feature.
Creating a custom Tab Bar for our iPhone application
While we'll often want to implement a standard Tab Bar, there may be an occasional situation for which we will want to create a customized Tab Bar that offers up a bit of a different look.
This will require that we create the new bar entirely in Photoshop, and then use these buttons to transition through different views. As we're creating something custom, we don't have many rules to follow. However, we should still create a Tab Bar that is somewhat recognizable to the user.
In this recipe, we'll discuss a technique for creating a custom Tab Bar for our iPhone application.
For this recipe, we'll need a copy of Adobe Photoshop or another similar raster image editing application. It will also be useful to have the source file, titled TabBar.PSD, downloaded from the Packt website.
How to do it...
We will need to go about creating a very structured and organized set of image files in order to have an effective custom Tab Bar. Let's take a look at the steps that we'll need to follow:
- Create a new file in Photoshop for the Tab Bar, that is equal to 98 pixels in height and 640 pixels in width. Give a background color to the Tab Bar to what we desire non-active tabs to be in color.
- Now, we should create a background color in our file that will serve as an inactive tab color background.
- Next, we should use the guide tool in Photoshop to create vertical guidelines to guide where we will place each tab. Guides can be found by selecting View in the Menu Bar and then choosing New Guide.
We'll find the width of each tab by taking the width of the screen and dividing it by the number of tabs that we intend to include. As seen below, if we want to include four tabs here, each tab should be 160 pixels in width on the Retina display.
- For each section of Tab Bar, create active and inactive states for each tab.
- Now we need to go about exporting each button for both states. It is typically easiest to go about selecting a single tab using the Marquee tool, and then copy the content from all layers using the Merge Copy tool with the Shift+Command+C shortcut . We can then create a new file, paste, and save it in both Retina and standard resolutions.
- As we save an image for each state, we should be sure to use clear file names for each tab, such as TabOneActive.png and TabOneInactive.png, to help us easily label and make changes to the tabs as need be through development.
- Place the images as buttons inside of our application. When an inactive tab is tapped, transition to the view that is represented by this tab and change the previous view's tab to the inactive image.
With this method, we'll quickly and easily create a unique Tab Bar that still behaves similar to how the user anticipates the behavior of the standard interface element to be.
How it works...
While a bit more rare, custom Tab Bars can help make our application stand out. The design principles behind the bar are quite simple, so it isn't difficult to re-create through some creative interface work.
In Step 1, we created a file with a resolution of 98 pixels by 640 pixels, because this is Apple's recommended height for the bar, but we really have the creative freedom to do whatever we want with regards to height.
As we move forward in the process, we will create the art for each tab. As we're creating a custom bar, color, texture, button requirement, and other attributes aren't really required to have any specific look. We should keep a general look that remains somewhat familiar to the user, but we should still feel free to use a little creativity.
Once we export our new images, the new Tab Bar is ready to be placed as individual buttons anchored to the bottom of our application interface. We'll create as many buttons across the bottom of the screen as tabs we want, and then create a system through which each view is presented by tapping an inactive button on the bottom of the screen. When this inactive button is tapped, the view will change and the previously active tab button will change to its inactive counterpart.
Remember that if we do decide to go this route, we should still keep the standard Tab Bar behavior intact. We'll be creating something that users won't be expecting and in most situations, that's OK. But since the custom bar will look a bit foreign, we don't want to completely scare away users from something that both looks and behaves completely unexpected.
But through creating something as shown, we can greater customize our interface and make our application our own.
In this recipe, we've recommended a height of 49 pixels for a Tab Bar, but is this a requirement? Let's take a look at to why we should follow this rule.
Losing the freshman 15
Our initial desire may be to make our Tab Bar a bit bulkier than the Apple native bar, giving users a bit larger of a tap zone to switch between tabs. This is a bit undesirable, as it can often be confusing to the user and could lead to possible interface problems down the road.
Through day-to-day use of the iPhone, iPad, or iPod touch, the user is going to become trained with regards to what the standard size of a Tab Bar should be. If our bar is much larger or smaller, we'll break the cognitive expectation for the user and they'll not know how to perceive the item at first.
We also need to be aware that Apple could very well change the screen size of the iPhone or iPad, create a new Tab Bar style with different function expectations, or design some other fundamental operating system change. By making our custom Tab Bar similar in size to the original bar, we'll be able to quickly adapt our app if something changes in the future.
In this article, we discussed the all-important application icon, along with a couple of other ways in which we can make our work shine on the iPhone, iPod touch, and iPad.
- Development of iPhone Applications [Article]
- Interface Designing for Games in iOS [Article]
- iPhone: Issues Related to Calls, SMS, and Contacts [Article]
- iPhone Applications Tune-Up: Design for Performance [Article]
- iPhone User Interface: Starting, Stopping, and Multitasking Applications [Article]
About the Author :
Cameron Banga is a young mobile application entrepreneur who has helped to develop more than twenty applications for the iPhone and iPad. He is currently a partner at 9magnets LLC, where he designs mobile apps for a variety of notable clients. His first iPhone application, Battery Go!, received praise from the New York Times, Fox Business News, Macworld, the Chicago Sun-Times and more.