Designing for Apple Watch

The Basics

Designing for the Apple Watch is completely different from designing for iOS. We need to understand different aspects which make Apple Watch an amazing minicomputer and at the same time, an extension of the iPhone.

Screen Size

As designers, we need to consider the size of the screen of the Apple Watch and understand that the design is completely different from the iPhone. This is so important since the screen size brings new gestures and new UI/UX considerations.

Designing for Apple Watch

Perhaps, the first experience that we all have with Apple Watch is when we receive a notification. It is a pretty awesome experience as a user to act directly from the Watch without reaching for your phone. What makes this experience so good? Overall what makes the experience so personal is the watchOS Design Themes:

Design Principles

There are also some principles you need to consider the moment you start designing apps, we'll talk about these below.

ASK YOURSELF A QUESTION

Identify what is essential to show on your Watch App. Find that feature that is special to the end user. Ask yourself: What is the most important thing that the user would like to see at a glance? This is key for you to understand. If your App is about the weather, the question should be; How is the weather today? In the end, your design should answer that question.

You need to understand that your design will answer the main question that you are trying to solve with your App, so keep it short, essential and focused.

ITERATION

Ok, you have a great design for your Apple Watch App. People seem to love it. Don't stop there, you always keep asking yourself; How can we make this better? There are always new and creative ways to come up with better designs for your users.

NOTIFICATIONS

Apple Watch apps have two types of notifications: short-look and long-look interface.

The user first receives a notification, which is the short-look interface. This notification is visible for a brief time, if the user wants to dismiss it, they can lower their wrist. If they want to see the more detailed information they can raise their wrist and tap on the short-look interface.

Apple Watch design essentials

Apple offers some great resources for you to start designing for the Apple Watch, for design tools like Sketch, Adobe XD and Photoshop.

Qualities of great Apple Watch experiences

You need to plan carefully when you start designing your Apple Watch App. There is a nice video from Apple which gives some tips and tricks to best plan your App.

The best way to evaluate your App is to think about accomplishing these 4 points:

LEGIBLE

The user needs to understand at first glance what is the information you are displaying.

CONCISE

Get straight to the point. Remember that you will have just a few seconds between the moment your users receive your app notifications and raise their wrist.

TIMELY

Show the most relevant information to the user in the smallest amount of time as possible. Like that, you are making your App more relevant for the user.

PERSONAL

If your App accomplishes the first three elements, your user will feel a personal connection. Ideally, try to deepen this relationship with the user.

Colors

You need to choose a global color for your app which is consistent to your app in other devices such as the iPhone. Apple suggests to consider some of the following aspects:

• Use black for your app’s background color because it blends with the Apple Watch bezel and creates the illusion of an edgeless screen.
• Be aware of color blindness and how different cultures perceive color.
• Try to avoid using color as the only way to show interactivity.

Display sizes

Apple Watch comes in two sizes: 38 mm and 42 mm. So you need to use one image source file for both display sizes.

Typography

To design for the Apple Watch you need to use two type of fonts. SF Compact is the system font for watchOS and SF Compact Rounded is designed to work with complications. You can read more about it on Apple's HIG.

Icon Types

There are different type of icons for the Apple Watch: Home Screen Icon, Notification Center Icon, Short-Look Icon, App Store Icon and Companion Settings Icon. To know the specific size for each one of the Apple Watch models you can refer to the Human Interface Guidelines.

Icon Sizes

To date, Apple has four different sizes of watch. And as a designer you need to create a version of the icon for each one of the watches. You can learn more about it in the Human Interface Guidelines.

Apple watch app icons

Asset Catalog Creator Pro can create a full set of icons for Apple Watch and Apple's different platforms. It can really help you speed up your design process.

Images

As for any other app, you need to optimize your app’s images. Apple recommends you to use de-interlaced PNG files for bitmap/raster and artwork. Also, try to avoid transparency because the alpha channel increases the file size. You can use an 8-bit color palette for PNG graphics that don’t require full 24-bit colors. This palette is not appropriate for photos.

Customization

Colors, fonts and icons are important parts to customize your app but there are essentials rules you need to follow:

• Try to always express your brand identity through your font, color and image choices. These will help you create a unique style.
• Avoid displaying your logo in your app.
• Don’t include a launch screen.
• If you use different Typography, make sure it is legible. For more information, you can read the Typography Page.
• Avoid filling background areas with logos or brand colors.
• Use your brand color for your app’s global tint color.

Apple Watch Animation in AE

Let’s open After Effects. Here, create a new composition sized 1920 x 1080 with 3 seconds of duration and name it Apple Watch Animation.

Then, drag and drop the assets to the new composition that is provided in the exercise file

Select background.png, notification.png, App title and logo.png. Then, right click and select PreCompose to create a new composition with those elements. Let’s call the new composition Notification.

Then, edit the composition settings and make sure to change the dimensions of the composition to 551x672.

Now, organize the assets in the following order so it can be easier to work with them.

1. App title, 2. Logo, 3. Notification and 4. Background

Next, select logo.png, place the keyframes position and the Scale with the following configuration. Position: 0.10 frames | 275.5, 864.0, 0.20 frames | 275.5, 277.0, 0.27 frames | 275.5, 293.0, 1.05 frames | 275.5, 293.0 and 1.20 frames 101.8, | 99. On Scale, add two keyframes in 1.05 frames → 100% and on 1.20 frames → 40% opacity.

Let’s add some more frames for Position for the notification.png layer. For 1.05 frames | 275.5, 1010.0 and for 1.20 frames 275.5, 336.0.

Select the App title.png layer, then go to the parent section and select 2. Logo.png.

Add some opacity keyframes to the App title.png layer, following this order on 1.05 frames → 1 100% opacity and on 1.20 frames → 0% opacity.

Now, let's add Easy Ease to the keyframes. Select all the keyframes, then right click on any of them, go to Keyframes Assistant > Easy Ease.

Let's add a subtle detail to the animation. Select the first position keyframe of logo.png and open the graph editor which is the last small icon above the Stretch column. Inside the graph editor, extend influence to 75% which is the the speed entrance curve.

As you can see in the following image we have the entrance curve a little more extended. Now, let's go to the frame 1.05 and select all the keyframes from that frame for all the different layers. Then, go to the graph editor and extend the end curve to 79.67%.

Head back to the main Comp called Apple Watch Animation and let’s scale it to 55% so it can fit in the watch layer.

Then, select the alpha mask.png and in the Parent & Link section, link it to 2. notification.

Set the position of the notification to 950.0 on X axis and 543.0 on Y axis.

Lastly, select the composition named Notification and in the Track Matte option, select the option Alpha Matte "alpha mask.png".

Conclusion

Summing up, it is important that you as a designer can keep in mind that your design should constantly answer one question: What is the most important thing that the user will like to see at a brief glance? Lastly, always consider these 4 qualities: legible, concise, timely and personal.