Designing for Apple Watch
Add to favorites
Getting started with Apple Watch Design

UI Design Handbook
1
UI Design Aesthetic
3:52
2
Design for accessibility
1:59
3
Localization
1:14
4
Color Selection
5:06
5
Pick Fonts
3:35
6
Font Managers
2:06
7
Icon Organizer
2:59
8
UI Sound Design
4:25
9
Stock Images
1:29
10
Image optimization
1:46
11
Illustrations
1:38
12
Realistic Mockups
2:47
13
UI 3D Assets
2:29
14
Introduction to Animations
5:09
15
UI Animation Resources
1:45
16
Apple Watch Faces
2:06
17
Designing for Apple Watch
4:24
18
Designing for Apple TV
1:58
19
Design for Game Center
3:43
20
Designing for CarPlay
1:37
21
Designing App Clips
7:05
22
Designing Widgets
3:29
23
Design Systems
1:27
24
UI Kits
3:33
25
Prototyping Tools
3:22
26
Voice prototyping
2:14
27
Prototyping with Code
3:01
28
Turn your Designs into Code
2:18
29
Version Control Tools
2:12
30
Developer Handoff
1:05
31
Color Theory
10:35
32
Dark Interfaces
3:53
33
Icons
10:32
34
Background Patterns
5:41
35
Typographic Scales
2:40
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.
- 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.
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.
Templates and source code
Download source files
Download the videos and assets to refer and learn offline without interuption.
Design template
Source code for all sections
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
Meet the instructor
We all try to be consistent with our way of teaching step-by-step, providing source files and prioritizing design in our courses.
Daniel Nisttahuz
Senior Product Designer at Design+Code
Motion Designer @Design+Code
7 courses - 12 hours

UX Design Handbook
Learn about design thinking, with exercises. Free tutorials for learning user experience design.
2 hrs

UI Design Handbook
A comprehensive guide to the best tips and tricks for UI design. Free tutorials for learning user interface design.
2 hrs

Create a Promo Video in After Effects
In this course we will show you how to create a promo video using After Effects.
2 hrs

Animating in Principle
Learn how to animate interactive user interfaces from Figma to Principle. Get to design the app flow for multiple screens, interactions, and animations. At the end of the course, you will have a beautiful prototype that you can share with stakeholders.
1 hrs

Video Editing in ScreenFlow
Learn different techniques, transitions actions and effects to edit a video using Screeflow
1 hrs

Motion Design in After Effects
Learn animation and motion design with After Effects
3 hrs

Learn iOS 11 Design
Learn colors, typography and layout for iOS 8
1 hrs