Discussing about user interface changes of iOS7. Head to head comparison with iOS6.

1. “It is not the strongest of the species that
survives, nor the most intelligent that survives. It
is the one that is most adaptable to change.”
-charles darwin-

2. iOS 6 to iOS7
UI/UX perspective
Designing a great user interface for your iOS app
requires tremendous care, creativity, continual
iteration, and a solid ...

3. All new iOS7
• Control Centre
• Notification Centre
• Multi-tasking
• Enhanced Camera
• Photos
• Airdrop
• Safari
• Safari- iCloud Keychain

4. Rich UI to Flat UI

5. ICON Design
• Clean
• Simple
• Explanatory

6. ICON Design
• Glossy layer gone

7. Navigation bars

8. Buttons

9. Progress View
• More thinner
• No glossy effect

10. Status Bar
• Transparent status bar in iOS7
– 20px more space for your app.

11. Switches

12. Tab Bar Icons

13. Icon and Image Sizes
Size for iPhone 5 and
iPod touch (high
resolution)
Size for iPhone and iPod Size for iPad and iPad
touch (high resolution) mini (high resolution)
Size for iPad 2 and iPad mini
(standard resolution)
120 x 120
120 x 120
152 x 152
76 x 76
1024 x 1024
1024 x 1024
1024 x 1024
1024 x 1024
Launch image (required
640 x 1136
for all apps)
640 x 960
1536 x 2048 (portrait)
768 x 1024 (portrait)
2048 x 1536 (landscape) 1024 x 768 (landscape)
Spotlight search results
icon (recommended)
80 x 80
80 x 80
80 x 80
40 x 40
58 x 58
58 x 58
58 x 58
29 x 29
About 44 x 44
About 44 x 44
About 44 x 44
About 22 x 22
Tab bar icon (optional)
About 50 x 50
(maximum: 96 x 64)
About 50 x 50
(maximum: 96 x 64)
About 50 x 50
(maximum: 96 x 64)
About 25 x 25 (maximum: 48
x 32)
Default Newsstand
cover icon for the App
Store (required for
Newsstand apps)
At least 1024 pixels on
the longest edge
At least 1024 pixels on
the longest edge
At least 1024 pixels on
the longest edge
At least 512 pixels on the
longest edge
120 x 120
152 x 152
76 x 76
Description
App icon (required for
all apps)
App icon for the App
Store (required for all
apps)
Settings icon
(recommended)
Toolbar and navigation
bar icon (optional)
Web clip icon
(recommended for web 120 x 120
apps and websites)

14. App Icons
Devices
iPhone Non Retina
iPhone Retina
iPad Non Retina (mini and
2nd gen)
iPad Retina
iOS 6 size (in pixel)
iOS 7 size (in pixel)
57 x 57
not available
114 x 114
120 x 120
72 x 72
76 x 76
144 x 144
152 x 152

15. App Icon cont.
• No Glossy effect
Please visit for more information: http://www.mani.de/backstage/?p=483

16. When You Submitting..
• Invalid Image - For iOS applications, icons
included in the binary submission must be in the
PNG format.
• -If your application supports the iPhone device
family, you must include square icons of the
following dimensions: 57x57 pixels and 120x120
pixels.
• -If your application supports the iPad device
family, you must include square icons of the
following dimensions: 72x72 pixels, 76x76 pixels
and 152x152 pixels

17. Apps that changed to iOS7

18. Apps that changed to iOS7

19. Apps that changed to iOS7

20. Apps that changed to iOS7

21. Apps that changed to iOS7

22. Thank You 

23. Hello.. I'm Chathuranga Jayanath. 
You can find me here at anytime:
http://about.me/jayanath

24. Reference
• http://blogs.innovationm.com/ios6-to-ios7user-interface-changes/
• http://www.technobuffalo.com/2013/06/27/i
os-7-app-redesign-mockups/
• http://blog.manbolo.com/2013/08/15/newmetrics-for-ios-7-app-icons