2. Get
iOS7
Ready
What’s ahead
Why are Apple changing everything?
How are they doing it? - Principles and Features
iOS7 Redesign Example
Key iOS7 Considerations

3. Get
iOS7
Ready
iOS7: Why do you think Apple is changing everything?
Get
iOS7
Ready

4. Get
iOS7
Ready
iOS7: Why is Apple changing everything?

5. Get
iOS7
Ready
iOS7: Why is Apple changing everything?
Cool?
Get
iOS7
Ready

6. Get
iOS7
Ready
iOS7: Why is Apple changing everything?
Cool?
Bored?
Get
iOS7
Ready

7. Get
iOS7
Ready
iOS7: Why is Apple changing everything?
Cool?
Bored?
Get
iOS7
Ready
Playing catch up with competition
now that Steve Jobs is gone?

8. Get
iOS7
Ready
iOS7: Why we think Apple is changing everything
Responsive OS Design
for a multi-device world
Get
iOS7
Ready

9. iOS7 Overview: Simplicity
iOS 7 is visually simplified, allowing the
content be prominent.
Reduce complexity without
diluting capability

10. iOS7 Overview: Focus
Content is brought to the foreground.
Maximize the user experience by
applying iOS 7’s three core
design principles

11. Get
iOS7
Ready
iOS7 Overview: New features
Get
iOS7
Ready
Airdrop
Flat design language 1500 New APIs Enhanced Multi-tasking
Physics EngineiCloud Keychain
iBeacons
Automatic App Updates

12. Get
iOS7
Ready
iOS7 Principles: Deference
Resource - http://www.aisleone.net/2009/design/8-ways-to-improve-your-typography/
Deference
The UI helps users understand and interact
with the content, but never competes with it.

13. Get
iOS7
Ready
iOS7 Principles: Clarity
Resource - http://www.aisleone.net/2009/design/8-ways-to-improve-your-typography/
Clarity
Text is legible at every size, icons are
precise and lucid, adornments are
subtle and appropriate.
A sharpened focus on functionality
motivates the design.

14. Get
iOS7
Ready
iOS7 Principles: Depth
Depth
Visual layers and realistic motion heighten
users’ delight and understanding.

15. Get
iOS7
Ready
iOS7 Overview: The rise of flat design

16. Get
iOS7
Ready
iOS7: Not the first flat designed OS
Metro is our design language. We call it Metro because it’s modern
and clean. It’s fast and in motion. It’s about content and typography.
And it’s entirely authentic.
- Microsoft
http://msdn.microsoft.com/en-us/library/windows/apps/hh781237.aspx

17. Get
iOS7
Ready
iOS7: Not the first flat designed OS
Metro is our design language. We call it Metro because it’s modern
and clean. It’s fast and in motion. It’s about content and typography.
And it’s entirely authentic.
- Microsoft
http://msdn.microsoft.com/en-us/library/windows/apps/hh781237.aspx
Reductive approach, geometric shapes, front facing icons, bright
color palette, and straight hard shadows.
- Google
http://www.behance.net/gallery/Google-Visual-Assets-Guidelines-Part-1/9028077
http://www.behance.net/gallery/Google-Visual-Assets-Guidelines-Part-2/9084309

18. Get
iOS7
Ready
Redesign Example
vs

19. Get
iOS7
Ready
iOS 7 Redesign: Will it break?
Answer
Not really.
If using native UI elements combined
with custom versions, inconsistent
artifacts may show up.
If using a fully custom iOS 6 UI, then
Apple have intentionally designed iOS7
to support your app.

20. Get
iOS7
Ready
iOS 7 Redesign: What could Facebook look like?

21. Get
iOS7
Ready
iOS 7 Redesign: Flatten those colors
Clarity
Text is legible at every size, icons are
precise and lucid, adornments are
subtle and appropriate.
In this example
• No textured backgrounds or effects
• No gradients, bezels or shadows

22. Get
iOS7
Ready
iOS 7 Redesign: Simplify iconography
Clarity
Text is legible at every size, icons are
precise and lucid, adornments are
subtle and appropriate.
In this example
• Icons use a single, consistent color
• Icons are flat/outlined without
gradients, shadows or bezels

23. Get
iOS7
Ready
iOS 7 Redesign: Simplify navigation
Clarity
Text is legible at every size, icons are
precise and lucid, adornments are
subtle and appropriate.
In this example
• Nav is free of outlines/bezels/shadows
• Nav focuses on text-only

24. Get
iOS7
Ready
iOS 7 Redesign: Focus on content over chrome
Deference
The UI helps users understand and
interact with the content, but never
competes with it.
In this example
• Content maximizes the available area

25. Get
iOS7
Ready
iOS 7 Redesign: Restrain the navigation
Deference
The UI helps users understand and
interact with the content, but never
competes with it.
In this example
• Nav/UI doesn’t compete with content

26. Get
iOS7
Ready
iOS 7 Redesign: It’s about layering, not piling
Hierarchy conveyed through depth
Visual layers and realistic motion heighten
users’ delight and understanding
In this example
• Tint layers are used to convey depth
• Embellishments are stripped away

27. Get
iOS7
Ready
iOS 7 Redesign: Breaking away from tradition
Hierarchy conveyed through depth
Visual layers and realistic motion heighten
users’ delight and understanding
In this example
• Content can be layered
• Content is the focus of the experience
• Nav compliments but doesn’t compete

28. Get
iOS7
Ready
iOS 7 Redesign: Facebook in iOS7
Get
iOS7
Ready

29. Get
iOS7
Ready
Tigerspike Key Considerations: Overview
Resource - http://www.taming-openoffice-org.com/newsite/?page_id=90
The new flat aesthetic
Tinting, not textures
Dynamic typography
Full bleed interfaces
Hierarchy conveyed through depth
Physics engine
Enhanced multi-tasking
1500 new APIs to use
New Safari is omni-channel friendly

30. Get
iOS7
Ready
Key Consideration: iOS6 Support
Does your app need to support iOS 6?
iOS users tend to be very quick to update
their devices and expect their favorite apps
to follow suit.

31. Get
iOS7
Ready
Key Consideration: The New Flat Aesthetic

32. Get
iOS7
Ready
Key Consideration: Tinting, Not Textures
Get
iOS7
Ready

33. Get
iOS7
Ready
Key Consideration: Dynamic Typography

34. Get
iOS7
Ready
Key Consideration: Full Bleed Interfaces

35. Get
iOS7
Ready
Key Consideration: Hierarchy Conveyed Through Depth

36. Get
iOS7
Ready
Key Consideration: Physics Engine
Get
iOS7
Ready

37. Get
iOS7
Ready
Key Consideration: Enhanced Multi-tasking
Get
iOS7
Ready

38. Get
iOS7
Ready
Key Consideration: 1500 New APIs To Use
Get
iOS7
Ready

39. Get
iOS7
Ready
Key Consideration: New Safari is Omni-channel Friendly
Get
iOS7
Ready

40. Get
iOS7
Ready
Where to start
Get
iOS7
Ready
Compile and test your iOS 6 app(s) on iOS 7 ASAP
Get a point release ready with updated iOS 7 UI components
(and any bugs fixed) for when the update arrives
Begin work on your next major release re-imaging your
experience to take full advantage of the OS
Don’t boil the ocean—release, iterate & release.

41. Get
iOS7
Ready
Upcoming events:
San Francisco
Wednesday October 23rd, 2013
8am to 10am PST
Wearable Tech Round-Table
Thank you!

42. Get
iOS7
Ready
Helpful Resources
iOS7 App Redesigns
http://ios7redesigns.tumblr.com
The iOS 7 Design Cheat Sheet
http://ivomynttinen.com/blog/the-ios-7-design-cheat-sheet/
36 High-Quality Flat Design Resources
http://mashable.com/2013/07/29/flat-design-ui-kits/
iOS 7 GUI PSD
http://www.teehanlax.com/tools/ios7/
http://applidium.com/en/news/introducing_ios_7_gui_psd/