After much anticipation, Apple have finally announced that “The Apple Watch is here”. Although Apple are not divulging how many they have sold, it is rumoured that around one million units were purchased in its first weekend on sale. Apple describe the watch as their most personal device yet.
In their own words:
“To make the best use of its size and location on your wrist, Apple Watch has all-new interactions and technologies. They let you do familiar things more quickly and conveniently. As well as some things that simply weren’t possible before. So using it is a whole new experience. One that’s more personal than ever.”
With its astounding popularity, there is no doubt that developers will be busy creating apps for the watch, and as with any app, an icon is required. Luckily (as you would expect) Apple provide clear and concise guidelines on how to create the icon for your app. With the watch, there are some differences to previous devices, so we’ve put together a quick guide on what you need to know.
Apple Watch dimensions
The first thing you need to know is that there are two types of screen size – 38mm and 42mm with corresponding working areas of 272px x 340px and 312px x 390px.
Apple have designed two sizes to accommodate different sized wrists, and the watch is available in left or right hand configurations.
The icon shape
The major difference with the Apple watch app icons is the that the icons are circular, and there are no text titles shown underneath them. The circular shape allows icons to cluster more effectively on the display, and removes the grid-like feel of square icons in such a small space.
Although the icons on the watch display are circular, they have to be uploaded as normal rectangular images – the system automatically generates a circular mask to fit over them.
Icon types and sizes
To prepare your app for launch you will need to create the following apple watch icon sizes:
So, lets look at these icons in more detail.
The Home Screen icon – 80px x 80px
The Home Screen icon appears with other icons in a concentric grouping. The ‘Digital Crown’ device located on the side of the watch is used to scroll through the group of icons. The currently selected icon is always the one at the centre of the screen.
Your icon design should be simple, recognisable and the same design as your iOS app icon, so it can be easily identified within the cluster of brightly coloured circular icons! The Short-Look icon size is 80px x 80px.
Short-Look notification icon – 172px x 172px and 196px x 196px
The Short-Look icon appears briefly, giving the wearer just enough time to see what the notification is. The icon is displayed along with the app title, and displays only for a few seconds. If the screen is tapped, the Long-Look notification is triggered. Short-Look notifications disappear when the hand is lowered away from view.
These are the largest icon sizes for your app, at 172px x 172px and 196px x 196px.
Long-Look notification icon – 80px x 80px and 88px x 88px
Long-Look notifications display more information on screen from an app, such as message text and action buttons. Developers can customise the content of the notification and add up to four action buttons. As with Short-Look notifications, they disappear when the hand is lowered away from view.
Icon sizes are 80px x 80px and 88px x 88px
Notification Center icons
You will also need two small apple watch icon sizes (for both types of screen) to display in the Notification Center. Notification Center icons are displayed at 48x48px ( for 38mm) watch and 55×55 px (for 42mm).
App Store icon 1024px x 1024px
The final icon required is for the App Store. This icon is used in your App Store listing and should be supplied as a 72dpi PNG or high quality JPG at 1024px x 1024px. If the icon is supplied as a PNG file it should not contain any alpha transparency.
The icon will be automatically rendered in smaller icon sizes from the original large format, so it is important not to have very fine details in your icon design, otherwise this may be lost when the icon is rendered at very small sizes.
Apple also recommends:
- Do not use a black background for the icon design because the Apple Watch background is black
- Do not use alpha transparency in PNG images
- Do not use the ‘interlace’ option for PNG images
At Creative Freedom we can provide a design service for all Apple Watch icon sizes, so if you are developing an app, please get in touch with us to discuss your requirements.
Need help designing your Apple Watch icon?
If you're designing an app for Apple Watch, you know it has to look great
We design icons for everything!