Design+Code logo

Quick links

Suggested search

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. UI S13 01

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. UI S13 02

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:

UI S13 03

Design Principles

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

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. UI S13 05

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. UI S13 06

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. UI S13 07

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. UI S13 08

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: UI S13 09

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. UI S13 10

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. UI S13 11

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. UI S13 12

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. UI S13 13

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. UI S13 14

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. UI S13 15

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. UI S13 16

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. UI S13 17

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. UI S13 18

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. UI S13 19

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

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. UI S13 21

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

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 UI S13 23

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. UI S13 24

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. UI S13 25

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

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. UI S13 27

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. UI S13 28

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. UI S13 29

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%. UI S13 30

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.
UI S13 31

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

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

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

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.

Learn with videos and source files. Available to Pro subscribers only.

Purchase includes access to 50+ courses, 320+ premium tutorials, 300+ hours of videos, source files and certificates.

BACK TO

Apple Watch Faces

READ NEXT

Designing for Apple TV

Templates and source code

Download source files

Download the videos and assets to refer and learn offline without interuption.

check

Design template

check

Source code for all sections

check

Video files, ePub and subtitles

Browse all downloads

1

UI Design Aesthetic

Learn about UI design aesthetics.

3:52

2

Design for accessibility

Learn about accessibility in design.

1:59

3

Localization

Read more about the importance of localization.

1:14

4

Color Selection

Select colors for your projects

5:06

5

Pick Fonts

Select the most suitable fonts for your design.

3:35

6

Font Managers

Manage your fonts more efficiently.

2:06

7

Icon Organizer

Organize your icons in a better way.

2:59

8

UI Sound Design

Importance of sound in UI design

4:25

9

Stock Images

Find the right images for your UI

1:29

10

Image optimization

Optimize your images to improve performance.

1:46

11

Illustrations

Add illustrations to your design project

1:38

12

Realistic Mockups

Resources to add realistic mockups to your design.

2:47

13

UI 3D Assets

Work with 3D assets in your design projects

2:29

14

Introduction to Animations

Learn about basic animations in UI design.

5:09

15

UI Animation Resources

List of tools and resources for UI animation.

1:45

16

Apple Watch Faces

Create customizable watch faces for the Apple watch

2:06

17

Designing for Apple Watch

Getting started with Apple Watch Design

4:24

18

Designing for Apple TV

Learn the basics steps to design for Apple TV

1:58

19

Design for Game Center

Learn how to design for Game Center

3:43

20

Designing for CarPlay

Learn the basics of designing for CarPlay

1:37

21

Designing App Clips

Learn how to design app clips for iOS

7:05

22

Designing Widgets

Design widgets for your applications.

3:29

23

Design Systems

Create design systems for a better workflow.

1:27

24

UI Kits

Learn more about UI Kits and where to find them.

3:33

25

Prototyping Tools

Learn about prototyping tools.

3:22

26

Voice prototyping

Take a look at voice prototyping.

2:14

27

Prototyping with Code

Read more about prototyping with code.

3:01

28

Turn your Designs into Code

Learn how to turn your Designs into Code.

2:18

29

Version Control Tools

Share and synchronize your files with your team

2:12

30

Developer Handoff

Learn more about developer handoff.

1:05

31

Color Theory

Understand color theory to select the best color themes for your application.

10:35

32

Dark Interfaces

Add dark mode to your application.

3:53

33

Icons

Learn more about UI icons.

10:32

34

Background Patterns

Create beautiful background patterns.

5:41

35

Typographic Scales

Learn more about typographic scales.

2:40