Apple Watch Icon and Image Design

Icon and Image Sizes

Every app needs a beautiful, memorable home screen icon that uniquelyidentifies the app to the user. Because apps on the home screen areidentified solely by their icon, your icon should be recognizable and similar toyour iOS app icon while still conveying the purpose of your app.

Icon Sizes

Home screen icons are circular and Table 20-1 lists the appropriate diameterand usage for each icon. Create your icons as full-bleed square images usingthe given dimensions. The system applies the circular mask automatically.

Table 20-1Icon sizes

Asset

Apple Watch (38mm)

Apple Watch (42mm)

Notification center icon

29 pixels

36 pixels

Long look notificationicon

80 pixels

88 pixels

Home screen iconShort Look icon

172 pixels

196 pixels

Create all of your image resources as@2ximages. There is no need toinclude non@2xresources in your Watch app bundle.
For all images and icons, the PNG format is recommended. Avoid usinginterlaced PNGs.

The standard bit depth for icons and images is 24 bits—that is, 8 bits each forred, green, and blue. You can include an 8-bit alpha channel but doing so isnot required. You can also use PNGs with indexed colors to save space inyour image files.

Home Screen Icon

The Home screen on Apple Watch is unique, yet familiar. Home Screen iconsecho those of iOS, but without accompanying text. At such a small size, theseicons must clearly identify the apps they represent. When the functionality ofan Apple Watch app is very similar to its sibling iOS app, the icon remainsvirtually the same. But when the Watch app acts as a complement orcontroller to an iOS app, the icon design differs accordingly.

For the best results, enlist the help of a professional graphic designer.

An experienced graphic designer can help you develop an overall visual stylefor your app and apply that style to all the icons and images in it.
Use universal imagery that people will easily recognize.In general, avoidfocusing on a secondary or obscure aspect of an element. For example, theMail icon uses an envelope, not a rural mailbox, a mail carrier’s bag, or a postoffice symbol.

Embrace simplicity.In particular, avoid cramming lots of different imagesinto your icon. Find a single element that captures the essence of your appand express that element in a simple, unique shape. Add details cautiously. Ifan icon’s content or shape is overly complex, the details can becomeconfusing and may appear muddy at smaller sizes.

Create an abstract interpretation of your app’s main idea.Typically, it’sbetter to interpret reality in an artistic way, because doing so lets youemphasize the aspects of the subject that you want users to notice.
Make your icon similar to the icon for your iOS app.Maintaining a similarappearance helps the user associate your Watch app with your iOS app.Create different sizes of the home screen icon for both Apple Watchdisplay sizes. You want to make sure that your icon looks great on bothApple Watch device sizes. For device-specific measurements, seeTable20-1.

Menu Images

Icons in the Force Touch menu are template images, whereby the alphachannel of the image defines the resulting shape. Color information in theimage is ignored.
With menu images, the canvas size of the image is larger than the content.The extra space around your content ensures that there is a sufficient borderbetween the edge of the menu icon and your content.

Table 21-1Table

When designing the glyphs to display in your menu images, use line weightsthat are appropriate for the device size and the complexity of the glyph. Keepline weights at a minimum of four pixels to prevent them from being illegible.

Device

Canvas size

Content size

Apple Watch (38mm)

70 pixels

46 pixels

Apple Watch (42mm)

80 pixels

54 pixels

For menu images, the PNG format is recommended. You should avoid usinginterlaced PNGs.