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

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 competitionnow that Steve Jobs is gone?

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 diluting capability

iOS7 Overview: Focus

Content is brought to the foreground.

Maximize the user experience by applying iOS 7’s three core design principles

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

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.

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.

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

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/9028077http://www.behance.net/gallery/Google-Visual-Assets-Guidelines-Part-2/9084309

Get iOS7 Ready

Redesign Example

vs

Get iOS7 Ready

iOS 7 Redesign: Will it break?

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

Get iOS7 Ready

iOS 7 Redesign: What could Facebook look like?

Get iOS7 Ready

iOS 7 Redesign: Flatten those colors

ClarityText 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

Get iOS7 Ready

iOS 7 Redesign: Simplify iconography

ClarityText 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

Get iOS7 Ready

iOS 7 Redesign: Simplify navigation

ClarityText 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

Get iOS7 Ready

iOS 7 Redesign: Focus on content over chrome

DeferenceThe UI helps users understand and interact with the content, but never competes with it.

In this example• Content maximizes the available area

Get iOS7 Ready

iOS 7 Redesign: Restrain the navigation

DeferenceThe UI helps users understand and interact with the content, but never competes with it.

In this example• Nav/UI doesn’t compete with content

Get iOS7 Ready

iOS 7 Redesign: It’s about layering, not piling

Hierarchy conveyed through depthVisual layers and realistic motion heighten users’ delight and understanding

In this example• Tint layers are used to convey depth• Embellishments are stripped away

Get iOS7 Ready

iOS 7 Redesign: Breaking away from tradition

Hierarchy conveyed through depthVisual 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

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

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

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.

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

Get iOS7 Ready

Upcoming events:

San FranciscoWednesday October 23rd, 20138am to 10am PST

Wearable Tech Round-Table

Thank you!

Get iOS7 Ready

Helpful Resources

iOS7 App Redesignshttp://ios7redesigns.tumblr.com

The iOS 7 Design Cheat Sheethttp://ivomynttinen.com/blog/the-ios-7-design-cheat-sheet/

36 High-Quality Flat Design Resourceshttp://mashable.com/2013/07/29/flat-design-ui-kits/

iOS 7 GUI PSDhttp://www.teehanlax.com/tools/ios7/http://applidium.com/en/news/introducing_ios_7_gui_psd/