Even though this year’s WWDC theme is stability and performance, there are a number of changes and new features that are likely to be of interest to you as a software designer.
New font
This year’s most noticeable visual change is the switch from Helvetica to San Francisco, a custom-built typeface introduced earlier this year on the Apple Watch. This change affects both iOS and OS X, thus unifying the typographic treatment of all Apple’s operating systems. Overall, this is a welcome change as Helvetica had some noticeable kerning and weight issues when used in smaller sizes.
What this means for you: If your native app is using the system font, make sure that the more condensed letters of San Francisco work well with your layout and information architecture.
Better graphics & animation performance
Starting with OS X El Capitan and iOS 9, all graphics and animation libraries, such as Core Animation, will be dropping OpenGL and OpenGL ES in favor of Metal, Apple’s high-performance graphics API introduced last year. This change is expected to improve the performance of animations and graphics on both platforms by reducing the CPU overhead involved in executing GPU commands.
What this means for you: Your app will look and perform better without any additional work. You may want to test your app on a Metal-enabled device by installing the developer previews of OS X and/or iOS. If poor performance held you back when making UI decisions in the past, it might be worthwhile to revisit them.
Multitasking
This year Apple introduced split-screen multitasking on both OS X and iOS 9 (iPad-only as of this writing). Users will be able to run two apps side-by-side and resize windows by dragging the divider in-between. On iPad, two multitasking modes are available to the user, depending on the capabilities of the device:
- A Slide Over mode where one app is overlaid modally over another app.
- A Split View mode where both apps are running side-by-side, receiving user input simultaneously. This mode is more resource-hungry and works only on the most recent devices.
Additionally, videos can now play in a PiP mode (picture-in-picture), where they are overlaid over other running applications.
What this means for you: Since you no longer have control over the viewport configuration your app will be running in, you have to ensure that your UI is fully responsive. If you have been putting off learning Auto Layout and size classes, this is probably a good time to fix that. Apple’s official guide is an excellent starting point. And while you are at it, get familiar with the newly introduced Stack Views, which are supposed to make responsive grids and rows a lot easier to achieve.
This might be less critical for most apps, but take some time to run your app alongside different type of apps to gauge UI performance.
App slicing
A new feature that Apple announced as a part of their “app thinning” initiative is app slicing. Concretely, this means that the user device will only download the app resources it needs, ignoring other assets that are meant to be used by other platforms and devices.
What this means for you: If you have been using asset catalogs to organize different resolutions of your images in Xcode, your app will automatically take advantage of slicing. If you have not, this is the opportunity to make the switch.
Safari & Web development
Safari 9 comes with some new features that you can make use of to enhance the user experience of your websites. The first of which is the introduction of pinned tabs à la Chrome. By default, Safari will generate an icon using the dominant color of the page and the initial letter of its title. I personally prefer this behavior as a lot of websites happen to have poorly designed favicons. If you want to use a custom icon for your website when pinned by the user, you can provide a black foreground, transparent background SVG icon like so:
<link rel="icon" sizes="any" mask href="icon.svg">
This declaration should be placed above other rel="icon" declarations to avoid conflicts. You can also specify the color your icon will be displayed in on hover using:
<meta name="theme-color" content="#bada55">
Safari also introduces some new CSS features such as scroll snapping and backdrop filters that can be used to enhance the look and feel of your website. Filters in particular open the door to visual effects that were previously impossible to achieve with CSS alone. Last but not least, developer tools were improved with a redesigned inspector layout and a brand-new responsive design mode that allows you test your website in different viewport configurations.
What this means for you: If Safari users constitute a non-negligible percentage of your visitors, you might want to consider using some of these features to enhance their experiences.
UI testing
After a long wait, Apple has unveiled its official take on UI testing for iOS. Using Xcode 7, you can record a series of interactions directly on the simulator. These will be automatically transformed into code and used later to reproduce the steps required to run the test.
What this means for you: Depending on how comfortable you are with Xcode, you should be able to add UI tests without much effort or coding skills.
Swift 2.0 & Playgrounds
Last but not least, Apple updated Swift–the programming language it introduced last year–to its second major version and announced that it’s open-sourcing it as soon as the end of the year. This update improves the stability of the language and adds some highly requested features such as better error handling.
What this means for you: It might not be critical to learn Swift as a designer, but doing so will empower you while doing your day-to-day work, especially considering that the fledging language is likely be used for a lot more than just iOS and Mac apps in the near future.
