“It is not the strongest of the species that
survives, nor the most intelligent that survives. It
is the one that is most ...
iOS 6 to iOS7
UI/UX perspective
Designing a great user interface for your iOS app
requires tremendous care, creativity, co...
All new iOS7
• Control Centre
• Notification Centre
• Multi-tasking
• Enhanced Camera

• Photos
• Airdrop
• Safari
• Safar...
Rich UI to Flat UI
ICON Design
• Clean
• Simple
• Explanatory
ICON Design
• Glossy layer gone
Navigation bars
Buttons
Progress View
• More thinner
• No glossy effect
Status Bar
• Transparent status bar in iOS7
– 20px more space for your app.
Switches
Tab Bar Icons
Icon and Image Sizes
Size for iPhone 5 and
iPod touch (high
resolution)

Size for iPhone and iPod Size for iPad and iPad
t...
App Icons
Devices

iPhone Non Retina
iPhone Retina

iPad Non Retina (mini and
2nd gen)

iPad Retina

iOS 6 size (in pixel)...
App Icon cont.
• No Glossy effect

Please visit for more information: http://www.mani.de/backstage/?p=483
When You Submitting..
• Invalid Image - For iOS applications, icons
included in the binary submission must be in the
PNG f...
Apps that changed to iOS7
Apps that changed to iOS7
Apps that changed to iOS7
Apps that changed to iOS7
Apps that changed to iOS7
Thank You 
Hello.. I'm Chathuranga Jayanath. 
You can find me here at anytime:
http://about.me/jayanath
Reference
• http://blogs.innovationm.com/ios6-to-ios7user-interface-changes/
• http://www.technobuffalo.com/2013/06/27/i
o...
Upcoming SlideShare
Loading in...5
×

I os 6 to ios7 User Interface Perspective

384

Published on

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

Published in: Design, Technology, Art & Photos
0 Comments
1 Like
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
384
On Slideshare
0
From Embeds
0
Number of Embeds
1
Actions
Shares
0
Downloads
5
Comments
0
Likes
1
Embeds 0
No embeds

No notes for slide

I os 6 to ios7 User Interface Perspective

  1. 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. 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. 3. All new iOS7 • Control Centre • Notification Centre • Multi-tasking • Enhanced Camera • Photos • Airdrop • Safari • Safari- iCloud Keychain
  4. 4. Rich UI to Flat UI
  5. 5. ICON Design • Clean • Simple • Explanatory
  6. 6. ICON Design • Glossy layer gone
  7. 7. Navigation bars
  8. 8. Buttons
  9. 9. Progress View • More thinner • No glossy effect
  10. 10. Status Bar • Transparent status bar in iOS7 – 20px more space for your app.
  11. 11. Switches
  12. 12. Tab Bar Icons
  13. 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. 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. 15. App Icon cont. • No Glossy effect Please visit for more information: http://www.mani.de/backstage/?p=483
  16. 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. 17. Apps that changed to iOS7
  18. 18. Apps that changed to iOS7
  19. 19. Apps that changed to iOS7
  20. 20. Apps that changed to iOS7
  21. 21. Apps that changed to iOS7
  22. 22. Thank You 
  23. 23. Hello.. I'm Chathuranga Jayanath.  You can find me here at anytime: http://about.me/jayanath
  24. 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
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×