Watch faces may express distinct styles while displaying useful and actionable data.
A range of watch face styles
Watch faces may engage users in interactions that create delightful and informative user experiences.
Interactions can change aesthetics, reveal new information, and open activities.
Wear OS by Google devices provide a digital canvas to reimagine ways to tell time. Wear OS also lets you integrate data on watch faces for a higher level of personalization and contextual relevance.
Glanceability is the single most important principle to consider. Watch face designs should deliver a unique expression of time and related data. Experiment with bold, minimal, and expressive design directions that are highly readable at a variety of distances and while your user is moving their body.
The watch face displays the amount of time remaining until the user’s next meeting.
In addition to the clock hands, the watch face uses different shades of red to display the time.
Wear OS devices come in different shapes and sizes. Consider both square and round faces and different display sizes to optimize a certain format. These guidelines help your concepts align across devices.
Ideally, the visual functionality of the watch face works for both round and square formats. However, other design concepts require different executions for square and round screens.
The visual functionality of the watch face is flexible enough to work well in either
format without any adjustment.
Try using a common set of colors, line weights, shading, and other design elements to draw a visual connection between your square and round versions.
The overall appearance of square and round can be appropriately customized while still
feeling like part of the same visual system.
Some of your concepts will naturally take the shape of an analog clock, like a center dial with hour and minute hands.
Try extending your designs into the extra space of the exposed corners of a square format.
Wear OS devices operate in two main modes: always-on and active. Take both modes into account when designing watch faces. Generally, if your watch face design looks great in always-on mode with the display dimmed (also known as ambient), it will look even better in active mode with the display fully up and interactive. The opposite is not always true.
When the user moves their wrist to glance at their watch, or touches the display, the screen goes into active mode. Your design can use full color with fluid animation in this mode.
Watch in active mode
Always-on mode helps the device conserve power. Your design should make clear to the user that the screen is in always-on mode. The background color scheme is limited to black, white, and grays. Your watch face may use some color elements on screens that support it if it is clear that the device is in always-on mode. As a rule of thumb, use color elements for up to 5% of total pixels. In this mode, the screen is only updated once every minute. Only show hours and minutes in always-on mode; do not show seconds, it will look like time has stopped. A notification appears on the watch face when the device switches to always-on mode.
Watch in always-on mode
Wear OS devices feature a variety of screen technologies, each with their own advantages and considerations. When designing the always-on mode display for your watch face, consider how it affects battery life and screen burn-in on some screens. Configure your watch face to display different always-on designs depending on the kind of screen available on the device.
Always-on mode allows your app to stay open when the device display is dimmed, without compromising the battery. In always-on mode, the number of lit pixels on the display is drastically reduced, all interactivity is disabled, and the display switches to power-saving mode.
Read more about designing for the always-on screen.
For analog watch face designs, hollow out the center where the hands meet to avoid pixel burn-in in this mode.
To keep critical aspects of your watch face designs from being obscured, include Wear OS UI elements in your designs. These elements show the watch status and display notifications from services on the user's phone.
Indicators show users the status of the watch, such as battery usage and airplane mode.
Before choosing one of the fixed locations to place the indicator, consider how it will display on the watch face. Locate indicators on the top or center of the screen if the designs use large peek cards. If the status icons or the hotword appears on the bottom of the screen, the system forces the watch face to display small peek cards. If the edge of the watch face contains strong visual elements, such as ticks or numbers, place the indicators on the center of the screen.
This indicator shows battery usage and connectivity.
Your watch face can show users contextually relevant data and highlight it by changing styles and colors in your design.
What do you want users to know after they glance at your design? The first step in designing a data-integrated watch face is to define a user outcome based on available data. Generate a strong concept or outcome that is supported by real user needs. Then, determine how to obtain the required data.
Watch face showing goal accomplishment of 5000 steps
Your watch face concept may include use of data beyond time, such as weather, a calendar, and fitness data. Consider integrating data creatively through the lens of time, instead of using a time-based watch face with just an extra data overlay.
For example, instead of designing a weather-related watch face as a clock with an overlay of current temperature in degrees, design a watch face that describes how the temperature will change over the course of the day.
Wear 2.0 offers a whole new way to integrate data on your watch faces. Read more about Watch face complications.
Watch face showing how temperature changes during the day
Once you solidify a concept or desired goal, begin visualizing your watch face. The strongest designs are highly glanceable and deliver a unique expression of data.
To find one main message, identify the most important supporting data point. For instance, instead of showing an entire month of calendar events, display only the next upcoming event.
Watch face design showing an abstract representation of glanceable data
Make sure your approach begins with insight into the needs and expectations of users.
Your watch face can respond to a single-tap gesture from the user, as long as there’s not another UI element that also responds to that gesture. Some possible use cases for interacting with the watch face include:
Only single taps are available. This restriction is important to maintain clear and consistent system interactions and to make watch face interactions as simple as possible. Neither you nor the user should think of watch faces as full-fledged apps. Figure 1 summarizes the categories of gestures and their uses.
As a rule, watch face interaction should be lightweight, with the user completing their desired action within one or two touches.
If you want to cause a simple state change on the watch face, such as a purely aesthetic change, you can use the entire canvas of the watch face as the tap target.
For a more significant change or action, like launching an activity or sending a message to a friend, keep targets smaller, between 48-90 dpi, to avoid false-positive taps. There should be a gap between targets of at least 8-16 dpi. For an optimized tappable experience, display a maximum of 7 to 9 targets at once.
You can also use different regions of the screen to trigger different changes to the watch face. For example, tapping on the entire canvas could toggle states for the entire face. Tapping a specific target could produce an inline display of information related to the target. Last, tapping outside the target could restore the watch face to its default state.
Provide visual feedback when the user’s finger taps down on the watch face. The tap event does not trigger until the user lifts their finger, but visual feedback on tap helps indicate that the system has received the touch, and also helps the user know where the tap landed.
Warning: Do not immediately launch a UI on tap. A UI that you launch on tap conflicts with gestures for interacting with system UI elements including the watch face picker, notification stream, settings shade, and app launcher.
Visual feedback acknowledges the user’s touch and shows where the touch lands.
Here are some examples of approaches for interactive watch faces:
The watch face color changes upon tap.
Weather symbols change from clouds and sun to temperatures in Farenheit upon tap.
The UI element changes color upon tap.
Show more details upon tap.
The Wear OS companion app gives the user access to all installed watch faces.
Watch face
Watch face settings
All available watch faces are accessible from the Wear OS companion app or from your bundled third party app. There is no need for a standalone launcher icon for Wear OS watch faces.
Install your watch faces directly on the watch, not leaving any footprint on the phone. This option is recommended if you don’t rely on the phone’s sensors or data for your watch face, or if you are not bundling your watch faces with a phone-side app.