Watch Face

It tells time, and much more.

Watch faces represent the face of the Gear that will add value to the user's wrist. Design an appealing watch face by combining the time-telling ability of a classic wristwatch and interesting complications of a smart watch.

Overview

The watch face, the first screen a watch displays, is one of the greatest advantages of a smart watch. Users can choose different watch faces for different purposes, and can interact with the Gear in diverse ways through complications. As a watch face determines first impressions of the watch, it holds value as a fashion item too. To create a watch face that delivers useful functions of a smart watch while also serving as a good timepiece, there are several principles to keep in mind.

1
  • Design for the circle. As a watch face represents the face of the Gear, its designs should integrate with the Gear’s circular frame. You can deliver a more natural look and feel of a watch leveraging the clock metaphor the circular screen enables, or optimize your designs for the circle placing curves and round shapes around the circular frame. You can create a more compelling watch face by also taking the visual image of the bezel into account.

  • Be clear in your aim. Watch faces should have one primary aim Users will find it most attractive when your watch face fits their situation or meets their needs. Since users can choose from a wide range of watch faces, make sure that your watch face provides value to users.

  • Make it fashionable. A watch face can be used as an appealing fashion item on the user's wrist just as a classic watch does. A well-designed watch face can make users think that the watch suits them so well that they want to show it off to others. Find your own ways to make a fascinating watch face like replicating a look of an actual watch or expressing time with cute characters.

Design Types of Watch Face

Watch faces can take the shape of a traditional watch or have an entirely different look. Typically watch faces can be categorized into analog type and digital type depending on how they display time, but you can also create your own style with information and designs of your choice.

Watch Face States

The watch face has two different display states: “active” and “always-on.” The active state watch face is shown when users lift their wrist as if they look at the watch.2  Watch face in always-on states (also known as ambient mode) is literally always shown on the screen3  without specific actions, and use less battery power, so it is limited to showing just the time of day and very little else.
The two states consume different amounts of battery power and therefore there is a gap in what each state can display. Thus, we recommend that you design respectively for each state. And you can achieve better consistency when you pair up your active-state watch face with a matching always-on design.

Active States

For the active state watch face, you can freely express concepts and moods using diverse colors. You can also extend usability of your watch face beyond the simple time-telling function by including complications that provide useful information like battery level and weather, or access to app shortcuts.

Always-on States

Designed to display the time by using just a tiny amount of battery power, always-on states only show the key watch Face components, as well as the hour and minute hands. Because the display updates once every minute, it is not recommended to show seconds ticking by, or any other real-time information on an always-on state. Here are several technical points that will help you design for always-on states considering battery consumption and display constraints.

  • Color mode
    Depending on the capability of a wearable device display, two different color schemes are available for always-on states: low-bit color and high color.

    • Low-bit color mode
      In low-bit color mode, always-on states only use cyan, magenta, yellow, red, green, blue, and white colors at full brightness, with no grayscale or gradients. Images might be pixilated since low-bit color mode does not support anti-aliasing.

    • High color mode
      High color mode has no color restrictions and therefore can replicate elaborate designs of active states more closely than low bit color mode. We recommend that you design for high color mode to create a visually compelling watch face, but also note that your high color designs will be displayed in low bit color if a device does not support high color.

      4
  • On Pixel Ratio (OPR)
    As the always-on states is a low power mode, OPR (on pixel ratio) is limited to be less than 15%. OPR is the ratio of the sum of each pixel’s RGB values to the value when all pixels of the screen are white. As more pixels have RGB values or the sum of RGB values are higher, the OPR value also increases. For example, the OPR value of white(R255, G255, B255), red(R255, G0, B0), and black (R0, G0, B0) each results in 100%, 33.3%, and 0%. As the OPR value increases, the electricity consumption level goes up as well. However, even with the limit on OPR value, there is still a variety of styles available, so try out various concepts to express your creativity.

    You might hurt the visibility and quality of your watch face if you simply lower the overall brightness of the design to meet the OPR restriction. Therefore, it is recommended to use black for background both in low-bit color mode and high color mode, and your design should be tested on devices with always-on state.

    Tip

    You can check the OPR value with always-on states when Settings -> Developer options -> On Pixel Ratio is on. Developer options screen is hidden by default. To make it visible, open the Gear's Settings menu, select About device and tap the Software version five times.


  • Screen burn
    In always-on states the system moves the watch face around at regular intervals by just a few pixels in order to prevent a burn-in effect occurring on the OLED display. Be aware that design elements near the edge of a watch face can be pushed out of the display when this happens. Avoid applying high brightness and high chroma to a large block of pixels. For an analog type watch face, leave the center area empty or dark.

  • Default screens for always-on states
    If a watch face does not have a corresponding always-on state, the system provides a default one.

System Icons

Watch faces may use small system icons that display the status of a particular function or setting. Keep in mind that this top area of the screen is reserved for the system icons when you design your watch face.

Unread notifications are shown with an orange dot on the 9 o’clock position. Only one indicator is shown regardless of the number of notifications. It appears orange for regular notifications, and appears red for urgent notifications. Make sure that this is kept clearly visible on your design.




 

1 These examples are the preloaded watch face images on Gear S2 and Gear S3.
2 When Wake-up gesture is on in Gear Setting
3 When Watch always-on is on in Gear Setting
4 The examples of active states are preloaded watch face images on Gear S3. The examples of always-on states show how the watch face can be modified for always-on states.