The latest version of iOS, the ‘kinda funny lookin’ iOS7 is almost upon us, and if you haven’t already started working on it, here’s an overview of the changes…
First of all, the Application Icons are now slightly larger:
- iPhone: 120px (retina)
- iPad: 76px (iPad 2/iPad Mini) and 152px (iPad 3)
As iOS7 only works on retina iPhones, you don’t need to supply a 60px version, just a 57px one for apps that will also run on iOS6 or earlier.
The corner radius has changed too – where previously it was based on the original iPhone non-retina icon (10px on the 57px icon) its now a mystery. Mani have a really in-depth investigation to discover the formula for the new radius, but my personal advice is not to worry about it. Make sure you don’t have any design element around the edge, such as a border, that relies on it. Just place a mask on a layer above to give you the rough idea, and carry on supplying your icons with square corners.
Style, or the lack of it
There’s been a lot of talk about Grids and Golden Ratios – my advice is to not to worry about these too. By all means use the grid as a starting point, but don’t feel bound by it.
Apple’s new iconset is inconsistent, and ranges from the basic (Calendar) to shockingly immature (Game Center). I didn’t pass any comment when iOS7 was first announced as I believed that the designs would take evolve and mature. They haven’t though. When I compare it to my Windows 8 phone, with its clear, bold and consistent icon style, I just sigh.
Sorry, this isn’t meant to be a rant! Safe to say, I’m “not a fan”.
Finally, ‘prerendered’ no longer exists as an option – iOS7 has removed the gloss overlay for all icons, so if this was something you wanted in your design, you will need to add it to your artwork.
- iOS7 Design Cheat Sheet - a very comprehensive reference of all new sizes (I haven’t had time to update The Icon Handbook reference yet!)
- New Metrics for iOS7 App Icons - Great tips on App Name length which is more of an issue in iOS7
- Marc Edwards PSD Templates
- Sketchmine Sketch.app Templates
- iOS6 and 7 visual comparison
- Posted: 03 Sep 2013
- Comment: via Twitter