Designing for Apple Watch Series 4

Apple Watch Series 4 includes significant enhancements for designers and developers.

Series 4 watches have new displays with larger dimensions, along with new APIs and improvements in performance, enhancing your ability to deliver rich information and actions to the people who use your app.

You'll want to take these new dimensions into account as your create or update your app.

Series 4 watches are larger than watches in previous series.

They come in two sizes, measured on the exterior of the case: 40mm and 44mm.

Previous series of Apple Watch are 38mm and 42mm.

And the display dimensions of these watches measure 272 by 340 pixels on 38mm watches, and 312 by 390 pixels on 42mm watches.

The displays of Series 4 watches have grown significantly, measuring 324 by 394 pixels for 40mm, and 368 by 448 pixels for 44mm.

Not only is display larger, but the border around it is thinner, bringing more attention to interactive elements, and making the information feel richer and more immersive.

You'll want to account for all display dimensions.

Your app should deliver the same information and actions to the user, regardless of screen size.

As you consider your layouts, notice that the display of the 40mm Series 4 watch is actually very similar in dimension to the display of the 42mm watches of previous series.

The new 40mm watch has a display size that is 12 pixels wider and 4 pixels taller.

Looking across the case sizes, 40 and 42mm watches sit in the middle of a spectrum.

If you target your screens layouts here, you should then ensure your layouts scale down to 38mm dimensions, and up for 44mm dimensions.

The Design Resources on developer.apple.com contain assets and templates to get you started in designing for all 4 sizes.

Be aware that some watchOS interface elements scale with the watch size.

The templates contain extensive collections of these elements, organized by watch size, to ensure that your mock-ups are as pixel-precise as possible.

So now let's talk about how these new displays impact the layout of your screens.

The most notable difference of the new display is its shape.

Like iPhone X, Apple Watch Series 4 has rounded corners, creating a symmetrical look within the curved corners of the case.

WatchKit will assist you in the presentation of text and controls, so that your UI appears in an optimal location in the viewport.

WatchKit elements will adapt to the new displays.

At the top, your app's status bar will account for the rounded corners.

As in previous versions of watchOS, the clock will appear on every screen, and your app can use the title area to provide a helpful heading or title describing the purpose of the screen.

Both of these elements will be indented, and this indentation should create left and right margins that extend vertically through the display of content in your app.

These are System Minimum Layout Margins.

Graphic elements and button backgrounds should extend beyond these margins and run nearly edge to edge, up to the one pixel margin that runs by default on either side.

Text should align to the left margin, extending from the left edge of the text in the status bar.

To account for the corners in scroll views, there are clear areas at the top and bottom of the content area.

These are known as scroll clear areas, and they ensure that text and buttons are nudged fully into view when the user completes a scrolling action.

For example, a button at the bottom of a scroll view will settle in the safe area above the clear area.

If you're using a full-screen SpriteKit or SceneKit scene, you'll want to use the margins and insets to nudge your content into view.

The best watch experiences are simple and glanceable, so you may have views within your app that are intentionally single-screen and should not scroll.

For example, if you want to make sure that a button rests in the clear area, rather than getting nudged up by the system, you can do so by setting an attribute in Xcode.

In the attribute inspector for the view, you can select Fixed to screen edges, and this will ensure that the content within that view will not scroll.

Now let's talk about updating your app for Apple Watch Series 4.

Your app will run on Series 4 watches even before you recompile it for watchOS 5.

It will be displayed at 38mm dimensions on 40mm watches, and at 42mm dimensions on 44mm watches.

It will be centered in Series 4 displays.

And from a user point of view, your app will appear and behave predictably.

Recompiling your app for watchOS 5 will allow your app to occupy the full width and height of the new display.

As long as you've implemented your WatchKit elements relative to their containers rather than at fixed widths, your app will expand to fill the additional screen space on Series 4 watches, and this will feel much more immersive and engaging to your users.

If your app contains a full-screen SpriteKit or SceneKit scene, you'll want to make sure that text and controls in your scene are rendered correctly on Series 4 watches.

You should access the System Minimum Layout Margins to ensure that your content is inset properly from the left and right edges of the screen, and the Content Safe Area Inset information to ensure that text and actions settle appropriately in the content area of the watch when the user scrolls.

Series 4 introduces new haptics that correspond with the rotation of the Digital Crown, creating a more tactile experience across Apple Watch.

By default, haptic detents, or taps, are produced when the Digital Crown is rotated.

So common user interactions, like scrolling or selecting an item in a picker, will deliver tactile feedback to the user.

You should evaluate your app's experience with this new haptic feedback on Series 4 watches.

Users will become accustomed to a consistent tactile experience, so if your app coordinates events in the UI with Digital Crown rotation, you'll want to make sure that those UI events line up with these new haptic effects.

Next, let's discuss the new text styles introduced in watchOS 5, and the implementation of Dynamic Type on Series 4 watches.

In watchOS 5, the Dynamic Type Library was expanded to include four new larger sizes.

Large Title, and Titles 1, 2, and 3 provide more ways to ensure that content and actions are glanceable on the watch screen.

As you're implementing and testing these styles, remember that there are different default content categories that correspond to the watch case size.

Small is the default category for 38mm, Large for 40mm and 42mm, and XLarge for 44mm.

While watches may start with different default settings, each offers the same spectrum to accommodate a wide range of user settings.

Adhering to these styles will ensure that your app is delivered predictably to all users.

Finally, let's discuss enhancements related to the visual assets in your watch project.

You can now streamline the production of graphics by using PDFs, allowing for high-resolution scaling across device sizes.

If you prepare your graphics with a scale factor of 2 and save them as PDFs, you can create a single file for usage across all four watch sizes.

When you bring this PDF asset into Xcode, place it in the Asset Catalog of your Watch project, drop the asset in the Universal 2x box.

And then, in the attribute inspector, adjust the Auto Scaling property to Automatic.

This scales your graphics down by 9 percent for 38mm displays, and up 10 percent for 44mm displays.

One last note: To account for the UI of the 44mm watch, there are two new app icon sizes.

These new icons will be used for the short look notification and the Home screen icon.

Guides and dimensions for these icons can be found in the templates in the Design Resources, which have been newly updated for Apple Watch Series 4.

There's also a thorough introduction to watchOS 5 features in the video, "What's New in watchOS" from WWDC.

This video, the Design Resources, and the Human Interface Guidelines can be found at developer.apple.com.