---
title: 'What''s New in WWDC16: Designer Edition'
teaser: Apple's 27th WWDC conference brought with it major updates to the platforms
  and a handful of new tools and APIs. There is more than 80 hours worth of information
  to comb through as a designer, and we are here to help.
tags: design,ios
author: Reda Lemeden
published_on: 2016-06-23
---

![WWDC Banner](https://images.thoughtbot.com/blog-vellum-image-uploads/g8X04h0fTZyqaKKkETDA_wwdc-16-banner.png)

Apple's 27th WWDC conference brought with it major version updates to the
platforms and a handful of new tools and APIs. Just like [last year's
edition][last year], there is more than 80 hours worth of information to wade
through as a designer. Here are the highlights.

## iOS 10

![iOS 10 Preview](https://images.thoughtbot.com/blog-vellum-image-uploads/HsYcj1B4R7CXfqPY9rOh_wwdc-16-ios10.jpg)

The [tenth iteration of iOS][iOS 10 preview] exposes new APIs that allow for
deeper and more seamless integrations with system apps and features. Between
rich notifications, 3D touch widgets, Siri, and native app extensions, your
users have more ways to use your app without even opening it.

**What this means for you**: You will need to get familiar with these new entry
points and make the necessary adjustments to the way you design the user's
journey. Users will come to expect these features in third-party apps as they
become more and more commonplace.

## watchOS 3

The [new release of watchOS][watchOS 3] is one of the most significant updates
this year. Here is a summary of what changed:

-   Apps launch immediately thanks to background updates.
-   The Control Center from iOS is here. Or at least, a miniature version of it.
-   The Friends interface and pull-up glances are gone.
-   The side button brings up a new gesture-based app switcher referred to as
    the Dock. It displays periodic UI snapshots of the most used apps.
-   Several frameworks such as [SceneKit] for 3D renderings, [AVFoundation] for
    playing audio/video, and [SpriteKit] for making 2D games are supported now.
-   [Dynamic Type] support was also added to allow users to increase or
    decrease the font size to suit their needs.

![watchOS 3 Dock](https://images.thoughtbot.com/blog-vellum-image-uploads/YVma1WBTFKwWExvPtRG6_wwdc-16-watchos-dock.gif)

**What this means for you**: You will spend less time animating loaders and more
time designing app interfaces. With the new Dock, it's important to make sure
that your UI snapshot gets the balance right between clarity and usefulness.

## Wide Color

Apple updated all their SDKs to support *Wide Color*, a marketing term for
*Display P3* which is itself based on [DCI-P3] and is the default color profile
of the retina iMac and the 9.7" iPad Pro. P3 has a wider gamut compared to sRGB,
the current industry standard, which means it can display colors that sRGB
can't, especially greens and reds. Compared to Adobe RGB, P3 covers more reds
but fewer greens.

![Wide Gamut P3 compared to sRGB](https://images.thoughtbot.com/blog-vellum-image-uploads/dMADRrxRToiBTJsbz3Bu_wwdc-16-wide-color.jpg)

To define a color in the P3 space, use the newly added [UIColor]/[NSColor]
methods:

```swift
UIColor(displayP3Red: 1.0, green: 0.0, blue: 0.0, alpha: 1.0)
NSColor(displayP3Red: 1.0, green: 0.0, blue: 0.0, alpha: 1.0)
```

Additionally, Apple introduced an extended version of sRGB that would allow you
to use the same primitives to represent colors in the P3 space. Practically, you
will be able to use values smaller than 0.0 or larger than 1.0 to define your
colors:

```swift
NSColor(red: 1.1, green: -0.25, blue: 0.0, alpha: 1.0)
UIColor(red: 1.1, green: -0.25, blue: 0.0, alpha: 1.0)
```

**What this means for you**: You can now take advantage of Wide Color in
your apps and games, making them look more vibrant than before. To do so, use
the P3 color space -- or the extended sRGB for backward compatibility -- to
define your UI colors. You will also have to export your image assets as 16bit
PNG files with an embedded P3 ICC profile alongside your existing assets, since
the new SDKs allow you to selectively target different color profiles.

Keep in mind that [Sketch] (as of 3.8) does not support exporting assets with an
embedded color profile other than sRGB, so you will need to use [Photoshop] or
[Affinity Designer] instead.

## tvOS 10

The most notable change in [tvOS 10], UIKit's younger sibling, is the addition
of a dark mode. Users will be able to switch between modes system-wide and will
come to expect your app to adapt to their choice.

Apple also added notification badges to tvOS which could be useful to draw the
user's attention to newly available content.

![tvOS 10](https://images.thoughtbot.com/blog-vellum-image-uploads/g9tJ6JmPSKK51tk9I3xy_wwdc-16-tvos-10.jpg)

**What this means for you**: You will have to make sure that your app looks good
in both modes. If you are using raster assets for icons, make sure that you
serve a version for each mode. You can also use plain black PDF vector
assets and tvOS will take care of inverting the colors for you.

## macOS Sierra (10.12)

On the [desktop side of things][Sierra], Apple finally confirmed the long
rumored rename of the operating system from *OS X* to *macOS*. They also brought
Siri to the Mac and added new capabilities such as Apple Pay on the Web
and cross-device copy and paste.

API-wise, Apple introduced [NSGridView], a new view subclass that makes
grid-based designs easier using rows and columns, similar to
what you can achieve with HTML tables.

![NSGridView](https://images.thoughtbot.com/blog-vellum-image-uploads/2cdyy4bVRd6TYDE5wBXK_wwdc-16-nsgridview.jpg)

They also improved the way status bar items work by allowing users to
manually drag them out of the bar.

**What this means for you**: You no longer have to think twice before using
grid-based layouts where they make sense; preference panes is an obvious place
to start. Make sure your "menu bar apps" adopt the new APIs to meet users'
expectations. If your UI can benefit from [Wide Color](#wide-color), make use of
it.

## Swift Playgrounds for iPad

One of the highlights of this year's WWDC was the new [Swift Playgrounds] app
for iPad. The app uses an interactive puzzle game to teach programming basics in
Swift. It also allows you to create your own playgrounds either from scratch or
by reusing the assets from the template playgrounds. To improve the experience
of writing code on a tablet device, the app features a touch-optimized,
gesture-driven code editor.

![Playgrounds iOS](https://images.thoughtbot.com/blog-vellum-image-uploads/YGZQypnSQD2V6sMcnn47_wwdc-16-playgrounds-ios.jpg)

**What this means for you**: If you haven't taken a look at Swift yet, this app
is the perfect place to start. Once you feel more comfortable with the basics,
check out our ongoing [Building iOS Interfaces] series.

## UIViewPropertyAnimator

A notable new addition in iOS 10 is the [UIViewPropertyAnimator] class that
makes creating gesture-driven, interruptible animations a breeze. You can start,
stop, pause, and even rewind the animation using a relatively self-explanatory
syntax:

```swift
let myAnimation = UIViewPropertyAnimator(
  duration: 0.3,
  curve: .easeIn,
  animations: { [unowned self] in
    self.backgroundColor = UIColor(red: 1.0, green: 0.5, blue: 0.2, alpha: 1.0)
    // Other view property changes...
  })

myAnimation.startAnimation()
```

**What this means for you**: This new API is the perfect opportunity to start
experimenting with animation on iOS. For veterans, this will make
things like view controller transitions noticeably easier to animate.

## Accessibility

This year Apple continued to show strong commitment to accessibility with the
addition of a powerful new Accessibility Inspector in [Xcode 8]. The inspector
comes with a handy auditing feature that automatically scans your app's current
view for accessibility issues and provides suggestions on how to fix them.

To access this new tool, install the [Xcode 8 Beta][Xcode 8] and start it, then
head to *Xcode* > *Open Developer Tool* > *Accessibility Inspector* in the menu.

![Accessibility Inspector Menu Item](https://images.thoughtbot.com/blog-vellum-image-uploads/JI6Av2BQT92MDaSrDiCR_wwdc-16-xcode-accessbility-inspector.jpg)

Once the inspector is running, select the target app that's running on your Mac,
the simulator, or an actual iOS device, then click the second-to-last *Audit*
icon.

![Accessibility Inspector UI](https://images.thoughtbot.com/blog-vellum-image-uploads/f56mRNSERlCeH4NWwhc2_wwdc-16-accessibility-inspector.gif)

Apple also promised that they will be releasing a color
contrast calculator app for macOS to help you keep the contrast of your colors
in check. The app will be available on the [Resources] section of the iOS HIG.

## Sessions to Watch

These are the most design-relevant sessions of this year's edition:

- [Apple Design Awards](https://developer.apple.com/videos/play/wwdc2016/103/)
- [Auditing Your Apps for Accessibility (807)](https://developer.apple.com/videos/play/wwdc2016/807/)
- [Crafting Modern Cocoa Apps (239)](https://developer.apple.com/videos/play/wwdc2016/239/)
- [Designing for tvOS (802)](https://developer.apple.com/videos/play/wwdc2016/802/)
- [Disability and Innovation: The Universal Benefits of Accessible Design](https://developer.apple.com/videos/play/wwdc2016/104/)
- [Inclusive App Design (801)](https://developer.apple.com/videos/play/wwdc2016/801/)
- [Introduction to Xcode (413)](https://developer.apple.com/videos/play/wwdc2016/413/)
- [Iterative UI Design (805)](https://developer.apple.com/videos/play/wwdc2016/805/)
- [Making Apps Adaptive, Part 1 (222)](https://developer.apple.com/videos/play/wwdc2016/222/)
- [Making Apps Adaptive, Part 2 (233)](https://developer.apple.com/videos/play/wwdc2016/233/)
- [Platform State of the Union](https://developer.apple.com/videos/play/wwdc2016/102/)
- [Talking In Pictures: Reconstructing the Building Blocks of Language](https://developer.apple.com/videos/play/wwdc2016/106/)
- [Typography and Fonts (803)](https://developer.apple.com/videos/play/wwdc2016/803/)
- [What's New in Auto Layout (236)](https://developer.apple.com/videos/play/wwdc2016/236/)
- [What’s New in Accessibility (202)](https://developer.apple.com/videos/play/wwdc2016/202/)
- [What’s New in Cocoa Touch (205)](https://developer.apple.com/videos/play/wwdc2016/205/)
- [Working with Wide Color (712)](https://developer.apple.com/videos/play/wwdc2016/712/)

[Affinity Designer]: https://affinity.serif.com/en-us/
[AVFoundation]: https://developer.apple.com/av-foundation/
[Building iOS Interfaces]: https://thoughtbot.com/blog/building-ios-interfaces-swift-primer
[DCI-P3]: https://en.wikipedia.org/wiki/DCI-P3
[Dynamic Type]: https://developer.apple.com/library/ios/documentation/UserExperience/Conceptual/TransitionGuide/AppearanceCustomization.html#//apple_ref/doc/uid/TP40013174-CH15-SW4
[iOS 10 preview]: http://www.apple.com/ios/ios10-preview/
[last year]: https://thoughtbot.com/blog/whats-new-in-wwdc-15-designer-edition
[NSColor]: https://developer.apple.com/library/mac/documentation/Cocoa/Reference/ApplicationKit/Classes/NSColor_Class/
[NSGridView]: https://developer.apple.com/reference/appkit/nsgridview
[Photoshop]: http://www.adobe.com/products/photoshop.html
[Resources]: https://developer.apple.com/ios/human-interface-guidelines/resources/
[SceneKit]: https://developer.apple.com/library/ios/documentation/SceneKit/Reference/SceneKit_Framework/
[Sierra]: http://www.apple.com/macos/sierra-preview/
[Sketch]: https://www.sketchapp.com
[SpriteKit]: https://developer.apple.com/spritekit/
[Swift Playgrounds]: http://www.apple.com/swift/playgrounds/
[tvOS 10]: https://www.apple.com/tvos-preview/
[UIColor]: https://developer.apple.com/library/ios/documentation/UIKit/Reference/UIColor_Class/
[UIViewPropertyAnimator]: https://developer.apple.com/reference/uikit/uiviewpropertyanimator
[watchOS 3]: http://www.apple.com/watchos-preview/
[Xcode 8]: https://developer.apple.com/xcode/