My slides introducing the new design philosophy in iOS 7 to the CocoaHeads group. Note that this presentation was given before the iOS 7 NDA was lifted, so there's some stuff I'm sort of willfully obtuse about.
Special thanks to Keynote for making the slides super duper tiny to accommodate my notes. :P
iOS 7 Design Philosophy
Origins, Tips, and Tricks
Hi, I’m Ellen Shapiro, I’m an iOS and Android developer for the Nerdery. We’re a dev shop of about 450 people, with about 40 of us over in the West Loop.
I’m here to talk about iOS 7, which means I’m going to be running a liiiittle bit of a risk of the BanHammer.
So before I start I’ve got some videos in this, which come from two primary sources:
- Videos of anything within apps that are available on iOS 6 are screencasts I recorded...and you should probably ignore the operating system on these
since *someone* may have upgraded all my AirPlay devices to iOS 7 before I started recording these. And this is why I won’t be publishing these slides for
- Videos of actual iOS 7 apps are from Apple’s marketing website.
Design in iOS 7
If you’ve watched any of the WWDC videos or even the videos Apple’s got publicly available on their site, you can see there are three clear themes for iOS 7.
Deference is about as putting content ﬁrst, above the chrome of your application, so that the user can more quickly and easily get the information they
Clarity is about keeping your interactions straight - while you want to reduce your chrome, you can’t eliminate context completely. Give the user what they
need to in order to interact with the application
Depth is about motion and visual layers working together to help the user identify where they are in their content
• Minimize your chrome to show off your
• Reading apps (Pocket, Kindle, etc)
One of the biggest, clearest examples of an outside app having a huge design inﬂuence on Apple is Pinterest.
Pinterest was one of the ﬁrst apps to popularize the disappearing-with
In addition to being very popular with chefs and shopoholics...
...some of this is anecdotal, but I know tons of designers who love Pinterest as a tool to organize
• In Pocket, the user has to tap to
show/hide the chrome
• In the Kindle app, it auto-
disappears if you scroll side to side,
but you have to tap to show.
• Top and bottom chrome disappear
as the user scrolls, giving content
• Takes all the user effort out of
I helped build something that was based on this functionality - one of the most interesting things I noticed after I started building it was that in other apps,
I would instinctively scroll up before starting to try to press the back button.
And that wasn’t new, that was just something that I actually noticed once I started having to build this functionality. This is basically the same way I felt
about Pull to Refresh when it was ﬁrst introduced.
Noticing the small, weird details about how users use their devices, especially on phones, can lead to really interesting new interaction schemes.
• Top chrome recedes, but doesn’t
• Bottom chrome disappears
This is a video taken directly from the iOS 7 marketing website (albeit looped to emphasize my point here).
• As with much in iOS 7,
UIScrollViewDelegate is your friend.
• Determine direction and velocity of user’s
scrolling, and use that to determine
whether and how quickly to show/hide
• Thank your deity of choice you are not
trying to do this on Android.
Grab the initial contentOffset, then check it as scrollViewDidScroll: ﬁres to determine direction and velocity.
I worked on an app (unfortunately White-labeled) on Android that did something similar - Doing this on Android is much more of a hash because of some
differences in the way the interface methods call back on different devices, and the inability to easily predict how large an interface element will be when
it’s fully inﬂated. It is, to put it mildly, a giant pain.
Being a huge Simpsons fan, this is naturally where I start any discussion about clarity.
• While minimizing your chrome, make sure
your user still has clear context about how
to interact with your app.
• Compare to Android design principles
“Simplify My Life” and “Make Me Amazing” -
all about making sure user knows location
and has easy access to their most-used
One of the most interesting things that Apple is emphasizing is clarity.
There are a bunch of design principles that I think are being
Clarity vs. Simplicity
“Simplicity is often equated with minimalism.
Yet true simplicity is so much more than just
the absence of clutter or the removal of
decoration. It’s about offering up the right
things, in the right place, right when you need
them. It’s about bringing order to
What’s really interesting is the difference between the developer-facing materials and the public-facing materials.
There are very, very few mentions of simplicity in the updated HIG, but this quote is pulled straight from Apple’s promotional page for iOS 7.
• Skeumorph: “An object or feature that
imitates the design of a similar artifact
made from another material.”
• Linen background in Notiﬁcation Center,
green felt in Game Center.
• Demand that skeuomorphic design have a
Deﬁnition from the OED: http://oxforddictionaries.com/us/deﬁnition/american_english/skeuomorph
A lot of people saw the removal of the green felt and the linen backgrounds in iOS as an abandonment of Skeumorphic design. I’d argue it’s more of a
demand from Apple to think through whether your choice of skeuomorphic is necessary to understand the functionality of your application.
Clarity is not “not
- Does it make more sense for a calculator to look exactly like a physical calculator, or retain the same form and button order, but take as much space as
possible for the button placement?
(iOS7 screenshot from the iOS 7 marketing site)
Clarity is not “not
- By stripping a physical compass down to its barest essentials to still be understandable, it’s distilling to essential functionality.
- Personally, I still think it’d be cool if you could use the back camera to overlay it on a map, but this is a damn sight better than wood grain.
(iOS7 screenshot from the iOS 7 marketing site)
• If there’s a way for your user to understand
the use of your application without
skeuomorphs, do it that way.
• If you do need something resembling real
life, strip it to its bare essentials.
• If you need a tutorial to explain to your
user how something works, you’re probably
making it too hard for them.
Overuse of tutorials has become kind of endemic in mobile development - a tutorial being *available* is a good thing, if people get lost. But having it be
the ﬁrst thing users see tells the user you don’t trust them to ﬁgure things out, and points to your design possibly being too complex.
• Use of movement, animation, and blurs to
indicate position within an application.
• Yahoo Weather
• Google/Google Now
We’re going to talk about a couple apps that are already implementing visual designs with a lot of depth.
• As user scrolls down, blur
increases to place emphasis on
content rather than background.
• Opening radar creates a new layer
that expands out, while closing it
contracts it back down to the old
• Refreshing adds another layer.
Note: Apple’s partnered with Yahoo for data on the weather and stocks apps since launch, and given Yahoo’s big overhaul lately, I wouldn’t be surprised to
see more interesting stuff from them.
Depth: Google /
• Animation pops in on initial launch
• Cards animate in on a delay to
bring the user’s attention to them
• Clicking anything that would open
an internal UIWebView does it in a
The Google app vs. Google Now animation is one of my favorite ones I’ve seen in a long time. Smooth switching of modes of the application with a clear
visual indicator, and a really fun way to toggle it back and forth.
• Blur and dimming of the content
below is key for the feeling that
the Control Center pane is
“above” the home screen.
• Home screen blur causes app
icons to “ﬂoat.”
There are better examples of this in a few places, but the NDA-Friendly one comes in this video from the iOS 7 marketing site of Control Center.
• Use new UIViewController transitions.
• Watch your use of blur - this is really GPU
intensive if you’re not judicious about it.
• Think about where you can convey
navigational depth by blurring a background
rather than just pushing a new VC.
For UIVC transitions, there’s a whole session, Custom Transitions Using View Controllers, from this year’s WWDC that’s really great.
For blur, note that if you don’t need it to be live, there are some new methods on UIView to help facilitating taking a snapshot of your UI so blurring it
becomes easier and less GPU intensive.
One thing to take a look at for backwards compatibility on GPU-accellerated blurring: https://github.com/BradLarson/GPUImage - I haven’t tried it but it
has a huge contributor base.
Design in iOS 7
And, one more time, the three biggest themes -
You want to build your application so it gets out of the way of your user...but not so much that they have no idea what the hell they’re doing. And you want
to take advantage of new APIs for view controller transitions and blurring/animation to convey depth.
If you keep these themes in mind as you build out your application, you’ll ﬁt right in with iOS 7.
Special Bonus Slide!
• Screen casts captured with Reﬂector App:
• 50% off Promo code:
I made all the screen casts for this presentation using ReﬂectorApp, which uses AirPlay to allow you to record things happening on your screen.
I tweeted at them about how much I loved their app, and they gave me a promo code to share with you ﬁne people for half off, which means the app is
$6.50 for you. I found it well worth it at twice the price.