Designing for Apple Watch


Somewhere in the upcoming months we can expect the Apple Watch to arrive. Recently I’ve been working on prototypes for the watch which has fueled my enthusiasm for the possibilities. When designing for the Watch it’s key to be aware of both the possibilities and limitations.

The Basics

There are three main interfaces for your content: Notifications, Glances and the App itself. Let’s zoom in to get a clear view of what we can design and how.

Notifications

Notifications on your wrist are very similar to what we know from iOS and will probably be added as an option to the notifications screen on your iPhone. There are two types of notifications on Apple Watch.

Example of Short and Long Notifications

Short notifications are non-scrollable, only show the App icon and directly lead to the App when tapped. Long notifications are scrollable and you can perform actions from the notification. For example: ‘do you want to unlock your car?’ when you’re close to it. Or just a simple snooze when you’re receiving a reminder.

The structure of a long notification is predefined, but for a designer it’s possible to customize it to fit the look & feel of your App.

Glances

Glances can best be compared to the widgets in your notification screen. A Glance can display the most important information of your App. Glances are optional and will appear in a swipe-able collection of Glances from several Apps. They are context-aware, which means they can display information based on time, GPS, iBeacons and so forth.

A Glance to follow the match of your soccer team in between Cooking and Weather Glances (courtesy of Apple).

As a designer it’s important to know that Glances are template based. There is a lot of freedom within these templates, but it’s not possible to do just anything. There can be no user interaction in a Glance, other than opening a screen within the App when a user taps.

Watch App

At the core of it all is your Watch App. It’s important you realize that the Apple Watch is in essence a second screen to your iOS device. For now, you can’t create a truly native Watch App, you’ll always need an accompanying iPhone App. This will be even more clear when you launch your Watch App in Xcode’s simulator. You can only open the Watch view as an external display.

In a certain way this can be compared to using your Apple TV as a second screen for you iPhone or iPad. For example, race games that show controls on your iPhone and the race on the TV screen. The big difference with Apple Watch, obviously, is that the ‘external display’ can also register events (taps) and display the views. But in essence the App and its code runs from your phone.

Figure based on explanation by Ray Wenderlich

The Apple Watch also needs the iPhone for Data and Location. So if you design, you should know these limits. For example: it’s not possible to create a native Running app that you can use without your phone. But fact is, that it doesn’t really matter for most apps. Watchkit magically takes care of the communication between the iPhone and the Watch. As a user you won’t know what happens where.

“A WatchKit app complements your iOS app; it does not replace it. If you measure interactions with your iOS app in minutes, you can expect interactions with your WatchKit app to be measured in seconds. So interactions should be brief and interfaces should be simple.”
— Apple Watch Human Interface Guidelines

Interface

Key to your design is choosing the right interface style for your app. Watchkit offers two types of navigation: Hierarchical and Page-based. Your app can only support one navigation method.

Hierarchical is what we’re used to in iOS and it lets you navigate to detail screens. Page-based lets the user swipe through pages horizontally.

A prototype of a Page-based app.

Although you can customize the interface pretty far, it’s probably a good idea to take the aesthetic of the Watch in consideration. The Watch already has a black bezel, which means that apps with a black background can use the full width of the app as the Watch already has padding around the screen.

Layouts

Recently I wrote an introduction to Auto Layout for iOS projects. So here’s the news: Apple Watch doesn’t use Auto Layout. When placing an object in your interface you are able to define its position both horizontally and vertically.

The new layout system is quite easy to learn and doesn’t really limit you in capabilities. More complex layouts are definitely possible and it’s mainly a matter of user friendliness to what extent you want your design to distinguish itself from the default layout.

Positioning in Xcode

You can dive deeper into the subject of positioning and setting up Apple Watch Storyboards with this tutorial by Ray Wenderlich.

With the Apple Watch basics covered, we can confidently start the visual design process.

Design with Sketch

Apple has released a comprehensive set of design resources for Apple Watch. This is definitely a great asset for designers, as it includes Sketch and Photoshop templates for the different interfaces (App, Glances, Notifications), Icons, System Fonts and other specifications. Download the Design Guides and Resources.

I definitely prefer Sketch for iOS design. Artboards keep your project better organized and Sketch offers built-in support for exporting images for Retina screens. If your less familiar with Sketch, the Sketch 3 guide will help.

The Sketch resources offer the two Apple Watch sizes — 38mm and 42 mm — which have different resolutions. The 38mm Apple Watch will have a retina resolution of 272x340pixels, which displays as 136x170 points. The 42mm screen has a retina resolution of 312x390px, which displays as 156 by 195 points. Sounds tiny, right?

Previewing your tiny Watch design

Key to a great Watch design is that you understand the limitations of this small screen. As it influences interface choices and font and interface choices.

As long as the Apple Watch is not available, I recommend previewing your design on a similar Retina screen. Another benefit of using Sketch is its built-in Sketch Mirror feature. Sketch Mirror is a native iOS app that lets you preview your Sketch designs on a device.

Sketch Mirror in action

Previewing with Sketch Mirror is not entirely the same. The iPhone (4, 5 and 6) has a ppi (Points Per Inch) of 326, while the Apple Watch has a 332ppi. The difference is minor. Because of down-sampling you can’t preview the Apple Watch accurately on an iPhone 6 Plus by default.


Visualizing your Watch App

Once you start building your app in Xcode you’ll notice that the simulator only shows the full resolution. To make sure you keep making the right design decisions for a tiny screen, you can do the same trick with xScope. XScope lets you send a part of your Mac screen to a native iOS app called xScope Mirror.

By sending the simulation of your Apple Watch app to your iPhone, you can get a clear preview until the real deal arrives.

In conclusion

It’s hard to say what will be the killer feature on the Apple Watch. Will it be the actionable Notifications? Will users prefer Glances to the full App? Or will we use a Watch App to read stuff in a way we never expected on such a small device? It probably completely depends on the goal of the App and its users’ preferences.

We are going to be seeing some great and very useful Apps. We’ll probably be seeing even more ridiculous and silly apps. But fact is, you might need only one or two killer apps to make the Apple Watch worth it. I hope this introduction to designing for Apple Watch will help you to kickstart creating that one.