0
Get
iOS7
Ready
What’s ahead
Why are Apple changing everything?
How are they doing it? - Principles and Features
iOS7 Redes...
Get
iOS7
Ready
iOS7: Why do you think Apple is changing everything?
Get
iOS7
Ready
Get
iOS7
Ready
iOS7: Why is Apple changing everything?
Get
iOS7
Ready
iOS7: Why is Apple changing everything?
Cool?
Get
iOS7
Ready
Get
iOS7
Ready
iOS7: Why is Apple changing everything?
Cool?
Bored?
Get
iOS7
Ready
Get
iOS7
Ready
iOS7: Why is Apple changing everything?
Cool?
Bored?
Get
iOS7
Ready
Playing catch up with competition
now t...
Get
iOS7
Ready
iOS7: Why we think Apple is changing everything
Responsive OS Design
for a multi-device world
Get
iOS7
Ready
iOS7 Overview: Simplicity
iOS 7 is visually simplified, allowing the
content be prominent.
Reduce complexity without
diluti...
iOS7 Overview: Focus
Content is brought to the foreground.
Maximize the user experience by
applying iOS 7’s three core
des...
Get
iOS7
Ready
iOS7 Overview: New features
Get
iOS7
Ready
Airdrop
Flat design language 1500 New APIs Enhanced Multi-taskin...
Get
iOS7
Ready
iOS7 Principles: Deference
Resource - http://www.aisleone.net/2009/design/8-ways-to-improve-your-typography...
Get
iOS7
Ready
iOS7 Principles: Clarity
Resource - http://www.aisleone.net/2009/design/8-ways-to-improve-your-typography/
...
Get
iOS7
Ready
iOS7 Principles: Depth
Depth
Visual layers and realistic motion heighten
users’ delight and understanding.
Get
iOS7
Ready
iOS7 Overview: The rise of flat design
Get
iOS7
Ready
iOS7: Not the first flat designed OS
Metro is our design language. We call it Metro because it’s modern
and c...
Get
iOS7
Ready
iOS7: Not the first flat designed OS
Metro is our design language. We call it Metro because it’s modern
and c...
Get
iOS7
Ready
Redesign Example
vs
Get
iOS7
Ready
iOS 7 Redesign: Will it break?
Answer
Not really.
If using native UI elements combined
with custom versions...
Get
iOS7
Ready
iOS 7 Redesign: What could Facebook look like?
Get
iOS7
Ready
iOS 7 Redesign: Flatten those colors
Clarity
Text is legible at every size, icons are
precise and lucid, ad...
Get
iOS7
Ready
iOS 7 Redesign: Simplify iconography
Clarity
Text is legible at every size, icons are
precise and lucid, ad...
Get
iOS7
Ready
iOS 7 Redesign: Simplify navigation
Clarity
Text is legible at every size, icons are
precise and lucid, ado...
Get
iOS7
Ready
iOS 7 Redesign: Focus on content over chrome
Deference
The UI helps users understand and
interact with the ...
Get
iOS7
Ready
iOS 7 Redesign: Restrain the navigation
Deference
The UI helps users understand and
interact with the conte...
Get
iOS7
Ready
iOS 7 Redesign: It’s about layering, not piling
Hierarchy conveyed through depth
Visual layers and realisti...
Get
iOS7
Ready
iOS 7 Redesign: Breaking away from tradition
Hierarchy conveyed through depth
Visual layers and realistic m...
Get
iOS7
Ready
iOS 7 Redesign: Facebook in iOS7
Get
iOS7
Ready
Get
iOS7
Ready
Tigerspike Key Considerations: Overview
Resource - http://www.taming-openoffice-org.com/newsite/?page_id=90
...
Get
iOS7
Ready
Key Consideration: iOS6 Support
Does your app need to support iOS 6?
iOS users tend to be very quick to upd...
Get
iOS7
Ready
Key Consideration: The New Flat Aesthetic
Get
iOS7
Ready
Key Consideration: Tinting, Not Textures
Get
iOS7
Ready
Get
iOS7
Ready
Key Consideration: Dynamic Typography
Get
iOS7
Ready
Key Consideration: Full Bleed Interfaces
Get
iOS7
Ready
Key Consideration: Hierarchy Conveyed Through Depth
Get
iOS7
Ready
Key Consideration: Physics Engine
Get
iOS7
Ready
Get
iOS7
Ready
Key Consideration: Enhanced Multi-tasking
Get
iOS7
Ready
Get
iOS7
Ready
Key Consideration: 1500 New APIs To Use
Get
iOS7
Ready
Get
iOS7
Ready
Key Consideration: New Safari is Omni-channel Friendly
Get
iOS7
Ready
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 wi...
Get
iOS7
Ready
Upcoming events:
San Francisco
Wednesday October 23rd, 2013
8am to 10am PST
Wearable Tech Round-Table
Thank...
Get
iOS7
Ready
Helpful Resources
iOS7 App Redesigns
http://ios7redesigns.tumblr.com
The iOS 7 Design Cheat Sheet
http://iv...
Introduction to iOS7's design changes
Upcoming SlideShare
Loading in...5
×

Introduction to iOS7's design changes

2,721

Published on

Published in: Design, Software, Technology

Transcript of "Introduction to iOS7's design changes"

  1. 1. 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
  2. 2. Get iOS7 Ready iOS7: Why do you think Apple is changing everything? Get iOS7 Ready
  3. 3. Get iOS7 Ready iOS7: Why is Apple changing everything?
  4. 4. Get iOS7 Ready iOS7: Why is Apple changing everything? Cool? Get iOS7 Ready
  5. 5. Get iOS7 Ready iOS7: Why is Apple changing everything? Cool? Bored? Get iOS7 Ready
  6. 6. 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?
  7. 7. Get iOS7 Ready iOS7: Why we think Apple is changing everything Responsive OS Design for a multi-device world Get iOS7 Ready
  8. 8. iOS7 Overview: Simplicity iOS 7 is visually simplified, allowing the content be prominent. Reduce complexity without diluting capability
  9. 9. iOS7 Overview: Focus Content is brought to the foreground. Maximize the user experience by applying iOS 7’s three core design principles
  10. 10. 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
  11. 11. 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.
  12. 12. 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.
  13. 13. Get iOS7 Ready iOS7 Principles: Depth Depth Visual layers and realistic motion heighten users’ delight and understanding.
  14. 14. Get iOS7 Ready iOS7 Overview: The rise of flat design
  15. 15. 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
  16. 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 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
  17. 17. Get iOS7 Ready Redesign Example vs
  18. 18. 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.
  19. 19. Get iOS7 Ready iOS 7 Redesign: What could Facebook look like?
  20. 20. 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
  21. 21. 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
  22. 22. 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
  23. 23. 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
  24. 24. 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
  25. 25. 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
  26. 26. 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
  27. 27. Get iOS7 Ready iOS 7 Redesign: Facebook in iOS7 Get iOS7 Ready
  28. 28. 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
  29. 29. 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.
  30. 30. Get iOS7 Ready Key Consideration: The New Flat Aesthetic
  31. 31. Get iOS7 Ready Key Consideration: Tinting, Not Textures Get iOS7 Ready
  32. 32. Get iOS7 Ready Key Consideration: Dynamic Typography
  33. 33. Get iOS7 Ready Key Consideration: Full Bleed Interfaces
  34. 34. Get iOS7 Ready Key Consideration: Hierarchy Conveyed Through Depth
  35. 35. Get iOS7 Ready Key Consideration: Physics Engine Get iOS7 Ready
  36. 36. Get iOS7 Ready Key Consideration: Enhanced Multi-tasking Get iOS7 Ready
  37. 37. Get iOS7 Ready Key Consideration: 1500 New APIs To Use Get iOS7 Ready
  38. 38. Get iOS7 Ready Key Consideration: New Safari is Omni-channel Friendly Get iOS7 Ready
  39. 39. 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.
  40. 40. Get iOS7 Ready Upcoming events: San Francisco Wednesday October 23rd, 2013 8am to 10am PST Wearable Tech Round-Table Thank you!
  41. 41. 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/
  1. A particular slide catching your eye?

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

×