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
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.
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
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.
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
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.
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.
