Skip to main content
Samsung Developer Program

Design

This section provides important design principles and factors for your watch face app.

One of the best Gear wearable device features is its interchangeable watch faces. Users can choose watch faces based on preference, occasion, season, or even their mood. Classical clock designs may be good for formal occasions and unique designs can be used for more casual occasions or for everyday life.

Stylish designs allow users to view their device as a fashion accessory. Be creative and provide a variety of unique designs that users can enjoy. Using typographic elements for decorative purposes is a good idea. While text is not recommended to convey main ideas, typefaces can serve as design elements to make your designs look good.

Example_Watch_Faces.png

Gear Watch Face Apps and the Gear UI

When the user selects your Gear watch face app, it is displayed in the home screen in either in active state display.

Gear_Structure_Hardware.png

Gear devices have the following hardware features: two physical buttons, a bezel, and a touch-sensitive display screen.  

Your Gear watch face apps can initiate actions based on certain screen features (such as tap). Watch face apps cannot initiate actions based on the bezel and other display screen features (including swipe left, right, up, and down).

Designing Gear Watch Face Apps 

Watch faces can look like a traditional watch or have a different look entirely. Typically, watch faces can be analog or digital types, but you can create your own type.        

AnalogDigitalCustomWatchFace.png

There are two fundamental methods to design and develop your Gear watch face apps:

  • Designers without any coding experience can use the Gear Watch Designer tool to design and develop standalone watch face apps that employ the watch face features available in the tool. 
  • Developers can create more powerful watch face apps (either standalone or companion) by coding them using the native  or web Tizen OS SDK.
    For details about compatible Android devices that companion host apps can run on, see http://www.samsung.com/global/galaxy/gear-s2/device-compatibility/.

For both methods, the following factors and principles influence your watch face designs.

​Gear Platform Factors

The following Gear platform operational factors can influence the design of your Gear watch face app:

  • Can be either a standalone app or a companion app that has a companion host app (on a mobile device).
  • Users can install many Gear watch face apps, but only one app can be selected and displayed at one time.  

Gear Watch Face App Information, Display, and Actions

The following  factors can influence the design of your Gear watch face app:

  • Can get information:
    • From the Gear device (including time and other Gear platform information, and from device sensors).
    • For companion Gear watch face apps, from their companion host app running on a connected mobile device (via Samsung Accessory Protocol).
  • Can only be composed of one circular screen that cannot be extended by supporting vertical scrolling.
  • Can display time-keeping information and other data graphically and/or by text and symbols.
  • Can display watch face design(s) that support the active display state and the always-on display state (also known as the ambient display state)
  • Can initiate actions based on:
    • Code logic not in response to user input.
    • Response to the user's display screen actions (including tap and double-tap).
  • Can initiate tasks on the Gear device (such as opening a Gear app or a Gear widget).
  • Can redirect users to any Android app running on a mobile device (such as a phone) connected to the Gear device.

Watch Face Display States

Under certain conditions, your users' Gear device can be in the active display state or in the always-on display state. Display state conditions can be determined by the user's device configuration settings, movement sensor readings, and user input. Newer Gear devices support a high-bit color always-on state. Older Gear devices support a low-bit color always-on state.
GWF_Display_States.png

Your watch face app must provide an active state watch face design and may or may not provide an always-on state watch face design.  

  • Active Watch Face Design
    • High-power, rich-data watch face design that is displayed when the Gear device is in the active display state (for example, after the user lifts their wrists to look at the watch).
    • Intended to use a larger amount of battery power.
    • Watch face data can be updated once every second, which enables higher resolution data, such as second time info.
    • Can express concepts and moods using diverse colors and display additional information, such as battery level, weather info, and app shortcuts.
  • Always-on Watch Face Design 
    • Low-power, key-data watch face design that is displayed when the Gear device is in the always-on display state (for example, after screen timeout).
    • Intended to use a small amount of battery power.
    • Watch face data can be updated once every minute, which restricts data that can be displayed (for example, not displaying second time info).

If your watch face app has designs for both display states, the suitable watch face design will be displayed.  

If your watch face app provides only an active design:

  • When the device is in the active state, your active design will be displayed.
  • When the device is in the always-on state:
    • If your active design is an analog watch face, the Gear default analog watch face will be displayed.
    • If your active design is a digital watch face, the Gear default digital watch face will be displayed. 

Gear Watch Face App Design Principles

Because of the differences between the active and always-on display states, it is recommended that you design separate watches for both display states. You can achieve design consistency for your active and always-on watch face designs.  

The following principles apply to both active and always-on watch face designs.

Design_for_Circle.png

Design for the circle

Design your watch faces for the Gear device circular frame.

Deliver the natural look and feel of a watch by leveraging the clock metaphor that the circular screen enables, or optimize your designs for the circle by placing curves and round shapes around the circular frame.

Consider creating a compelling watch face by using the visual image of the bezel.

Clear_Purpose_Image.png

Have a clear purpose

Each watch face should have one primary purpose.

Users can choose from a wide range of watch faces; ensure your watch face provides a particular value.

Users are attracted to a watch face that fits their situation and meets their needs.

Target_Demo.png

Design for target demographic

Eighty percent of Gear S2 users are males between 20 and 49 years old. Due to the larger Gear S3 device, the percentage is even higher.

Very_Fashionable.png

Make it fashionable

A watch face, like a classic watch, can be an appealing fashion item. 

Find your own ways to make a fascinating watch face, such as replicating a look of an actual watch or expressing the time with unique characters.

Keep_It_Simple.png

Simple

A watch face is a single-page app.

Although you can add a lot of functionality, keep it as simple as possible to take advantage of the single-screen design.

Outdoor_Use.png

Design for outdoor use

Wearable devices are designed primarily for outdoor use. Your best designs and content may be useless if they are not visible outdoors.

Use dark-colored themes.

Ensure good contrast.

SystemIcons.png

System icon display

The top area of watch faces can display small system icons for the status of a particular function or setting.

When your design uses system icons, make sure the top area is reserved and properly displays them.

When set by the user, unread notifications are indicated by an orange (regular notifications) or a red (urgent) dot at the 9 o’clock position in the watch face.

Only one indicator is shown regardless of the number of notifications.
Ensure that unread notification indicators are clearly visible on your designs.

The following principles apply only to active watch face design.

Active_Content_Update_Design.png

Watch Content Update

Watch face content can be updated every second. 

Active_OPR_Design.png

On-Pixel Ratio

Watch face design On-Pixel Ratio (OPR) is not restricted.

The following principles apply only to always-on watch face design.

AlwaysOn_Content_Update_Design.png

Watch Content Update

Watch face content can be updated every minute. Therefore, your always-on watch face cannot display a second hand and/or seconds information.

ActiveAlwaysOnStates.PNG

Color Mode

Depending on the capability of the device display, two different color schemes are available for the always-on state watch face designs:

  • Low-bit color display (older Gear devices)—Supports only cyan, magenta, yellow, red, green, blue, and white colors at full brightness, with no grayscale or gradients.
    Note: Images may be pixilated because anti-aliasing is not supported.

  • High-color display (newer Gear devices)—No color restrictions. You can more closely replicate your active state designs.

We recommend that you initially design for high-color mode and create a visually compelling watch face, and then create a matching design that meets low-color mode restrictions.

Note: High-color designs will be displayed in low-bit color by devices that do not support high-color mode.

OnPixelRatio.PNG

 

OnPixelRatio2.PNG

On-Pixel Ratio

Because always-on is a low power mode, OPR is limited to 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. OPR increases as more pixels have RGB values and/or the sum of RGB values are higher. For example, the OPR value of white (R255, G255, B255), red (R255, G0, B0), and black (R0, G0, B0) results in 100%, 33.3%, and 0%, respectively.

As OPR increases, electricity consumption goes up. However, even with the OPR limit, there are still many styles available.

If you simply lower the overall brightness of the design to meet the OPR restriction, you may hurt the visibility and quality of your watch face. Instead, we recommend that you use a black background both in low-bit color mode and high-color mode, and you test your design on devices that are set to always-on state.

ScreenBurnAlwaysOn.png

Screen burn-in

Avoid burn-in of the OLED display:

  • By NOT applying high brightness and high chroma to a large block of pixels.
  • In analog type watch faces, by leaving the center area empty or dark.

In the always-on state, the Gear platform moves the watch face around at regular intervals by just a few pixels in order to prevent burn-in.

Caution: When this happens, design elements near the edge of a watch face can be pushed out of the display.

DefaultScreensforAlwaysOnStates.PNG

Default always-on screens

If your watch face app does not provide an always-on design, the Gear platform will display a default watch face when the device is in the always-on display state.

Watch Face Examples

Some popular watch faces include:

3rd Animated Everything Watch Crosswind Racing Chronograph Watch DSS Hygeia Movado Sapphire
All In One! Cyan Digital Pro K1 24H Galaxy watch face Samsung Black
Bloomberg Cyber Watch Pro Jeweler Casual 24h Sport Timex Blue
CNN Watch Face for Gear S2 Dark Magic Digital Lux Gold Watch Skul

Gear Watch Face App Resources  

Overview      
  Gear S2 Device Introduction Gear S2 models, designs, bands, functions, compatible Android smartphones, How To guides, and specifications http://www.samsung.com/global/galaxy/gear-s2/
       
Design Factors and Tools    
  Watch Face Design Learn about watch face states, system icons, and design guidelines http://developer.samsung.com/gear/design/home-structure/watch-face
  Gear Device Design  Addition aspects of the Tizen wearable UI: glanceable, context-rich, fast and responsive, and attractive http://developer.samsung.com/gear/design
Development      
  Develop Lifecycle Phase Introduction to developing your Gear watch face apps using the Gear Watch Designer Tool or the native Tizen OS Gear_Wearables/Watch_Face_Apps/Develop

     

    • Was this article helpful?