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, there is more than 80 hours worth of information to wade through as a designer. Here are the highlights.
iOS 10
The tenth iteration of iOS 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 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.
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.
To define a color in the P3 space, use the newly added UIColor/NSColor methods:
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:
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 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.
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, 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.
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, 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.
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:
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 and start it, then head to Xcode > Open Developer Tool > Accessibility Inspector in the menu.
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.
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
- Auditing Your Apps for Accessibility (807)
- Crafting Modern Cocoa Apps (239)
- Designing for tvOS (802)
- Disability and Innovation: The Universal Benefits of Accessible Design
- Inclusive App Design (801)
- Introduction to Xcode (413)
- Iterative UI Design (805)
- Making Apps Adaptive, Part 1 (222)
- Making Apps Adaptive, Part 2 (233)
- Platform State of the Union
- Talking In Pictures: Reconstructing the Building Blocks of Language
- Typography and Fonts (803)
- What’s New in Auto Layout (236)
- What’s New in Accessibility (202)
- What’s New in Cocoa Touch (205)
- Working with Wide Color (712)
