Design guidelines

This project is no longer being supported and will not get any further updates.

Follow these guidelines when you’re designing the UI for your SmartWatch 2 app. This way, you ensure the optimal user experience for your app.

The following sections describe:

  • Icon design for SmartWatches*
  • Host application for SmartWatches*
  • Host app icon dimensions for SmartWatches*
  • Icon overview for SmartWatch 2
  • Design guidelines for buttons for SmartWatch 2
  • Design guidelines for widgets for SmartWatch 2

*These guidelines apply to both SmartWatch 2 and the original SmartWatch.

Icon design for Sony SmartWatches

These are general guidelines for creating icons for the original SmartWatch and SmartWatch 2 apps:

  • An icon should be simple and easy to understand.
  • An icon should be in balance with the surrounding icons and not stand out.
  • Avoid combining many different colors; maximum three is preferable.
Examples of SmartWatch icons.

Examples of SmartWatch icons.

For additional reference, see the Android application icon guidelines.

Host application for SmartWatches

The host application handles all interaction with the accessory. There is one host application for each Smart Accessory. The hardware unit communicates through Bluetooth with a host application that runs on the phone. The host application, together with the accessory software, controls what is shown on the hardware.

Host application icon

The host application icon is shown in the list of applications displayed inside the host application from within Smart Connect. When the user views the list of installed Smart Extensions applications, this is the icon that will be displayed. For best design practices, you should follow the same guidelines as outlined in the Android application icon guidelines as for Launcher icons.

Example of a host application icon.

Example of a host application icon.

Host app icon dimensions for SmartWatches

This section contains recommendations for icon design and size of the host app icon. You can see the differences between actual icon size and icon design area for each screen below. This helps you to be consistent with icon sizes in other applications. All icons should be in .png format.

HOSTAPP_ICON_URI 

Icon size Recommended icon design area
 96×96 px (xhdpi), color  HostAppIconURI_xhdpi
 72×72 px (hdpi), color  HostAppIconURI_hdpi
 48×48 px (mdpi), color  HostAppIconURI_mdpi
 36×36 px (ldpi), color  HostAppIconURI_ldpi

Icon overview for SmartWatch 2

This section describes the context of the icons to be displayed on SmartWatch 2.

Icons needed in the application view for SmartWatch 2

The app icon appears in the home screen on the SmartWatch 2.

Example of an app extension icon.

Example of an app icon.

The new event notification is shown in the status bar, on the app icon as a badge, and as a rich notification for a few seconds if you are in clock mode.

SW2_BadgeIcon

Example of a badge icon.

The level of information to be shown in a rich notification can be set by the user.  For example, in the email shown below, you can choose to either just show an icon, show an icon with the name of the sender, or show an icon with the name of the sender, the subject, and a snippet of the email body.  This can be set using flags in the Notification API.

Example of levels of information that can be set by the user.

Example of levels of information that can be set by the user.

EXTENSION_48PX_ICON_URI

Icon size Recommended icon design area
48×48 px, color

Note: Icon is the same size as mdpi.

Ext48pxIconURI

Design guidelines for buttons for SmartWatch 2

For SmartWatch 2, there are two types of buttons, horizontal screen buttons and actions buttons. Action buttons are accessed by clicking the actions button or by a long press on, for example, a list item.Design guidelines for buttons for SmartWatch 2

The icons on horizontal buttons should be no more than 24px in height. The icons on action buttons should be no more than 40×40 px in size.

Examples of horizontal and action buttons.

Examples of horizontal and action buttons.

Design guidelines for widgets for SmartWatches

The following table provides information on SmartWatch 2 design elements and corresponding guidelines.

Widget design element Guidelines
Dimensions
  • Widgets on SmartWatch 2 are placed in 5×5 grid.
  • Grid cell size: width: 42 px; height: 34 px
  • Recommended padding around widget: 3 px from each side.
Colors
  • When defining widget layout, in addition to basic resources, you can provide extra resources with optimized assets for no-touch mode and offline mode. If you don’t provide these extra resources, they will be generated automatically from the basic resources by converting to 4 shades of gray for the low power state and 2 shades of gray (black and dark-gray) for the offline state.
  • We don’t recommend using color gradients in any asset as the automatic conversion should have bad graphical effect.
No-touch mode
  • When the SmartWatch 2 backlight is off, the widget is displayed using 4 shades of gray and the user is not able to evoke touch events.
Offline mode
  • In offline mode, there is no Bluetooth connection. Developed widgets (which are not preloaded) are not able to react to touch input.
  • You can provide alternative layouts for widget offline state to optimize the layout colors, but avoid showing “offline” messages.
  • Rather than showing offline messages, instead show last known information, which will be automatically grayed-out in offline state (for example: last known temperature for weather widget) or just a blank widget. It’s not nice to have the watchface filled with widgets with error and offline messages.
Empty state
  • Provide blank widget for empty states of widgets. For example, the Alarm widget should be blank when no alarm is set, to avoid a potentially unnecessarily busy and crowded watch face. As another example, the new events widget should be blank if there are no new events (instead of saying 0 events).