Most Apple Watch icons will be natural extensions of their iOS siblings as a WatchKit app complements your iOS app, it doesn’t replace it. As such we must realize that when creating an icon for this platform, we’re potentially starting out with a lot of decisions already made for us. However as iconists it’s also important that we recognize the new environments our icons will live in and the new ways users will interact with them. The Apple Watch takes something that we’re familiar with and puts it in a distinctly new frame and environment. I have created a new template that helps you explore these new dimensions and environments– giving you a better idea of how concepts scale and fit. Let’s look at some things to keep in mind when creating your Apple Watch Icon. Members can also just go right ahead and download the template.
It’s Round
The first thing you’ll immediately notice is that Apple Watch icons are round. Gone is the squircle, replaced by a circle canvas. This new form has a lot of implications for concepts that previously took more generous advantage of the rounded cornered form on iOS. But for most icons following Apple’s classic iOS icon grid and with a proper center weight, it won’t be a big change. It might make sense though, to rethink the scale of objects within the canvas. Here’s an example of how our new app Breaking could be re-rendered for Apple Watch.
New Grid
With the new shape also comes a new grid. Radial lines within a polygon shape intersected by diagonal slices creates a new guide better suited for distributing weight within the circle. I have included this in the template and if you only do one thing when creating watch assets from your iOS icon, then make sure it’s to check how your existing concept works within this new grid. It’ll be a great guide for most people who just need to scale their core shapes.
Icon Fluidity
Apple Watch home screen icons are displayed in a fluid hexagonal grid that flows by as you swipe the screen or turn the digital crown. This is an important change in how our icons are treated on the platform. For years we’ve been used to seeing our artwork in static grids on home screens or in the app store. You always knew exactly at what pixel size your icon would be displayed at in a given context. This is being changed on the watch. Studying the deliverables in the Apple Watch Human Interface Guideline and then taking a closer look at a screenshot of the home screen it becomes immediately clear that those sizes are rendered on the fly and doesn’t correlate to any one specific dimension you’ve bundled with your app. From what I can tell, there’s at least 5 differently sized icons on the home screen at any given time (not counting animations between states). The center icon is slightly larger surrounded by 6 icons that are marginally smaller. These are in turn surrounded by smaller icons at the top and bottom and even smaller icons towards the left and right edges. I took a pixel ruler to a screenshot of the home screen on a 38mm watch and this is what I came up with.
Why is this important? Knowing how our icons are rendered on the device is a vital piece of knowledge when we’re trying to ascertain how our concept or execution feels on the platform – the more exact a representation we can create in our tools, the better we’ll be able to control the outcome.
There have always been a gap between working on an icon in a canvas in Photoshop and then experiencing that icon on the device. There are tools like Skala that attempt to bridge that gap, but that sense of knowing how well the concept you’re staring at on your 27″ monitor will work on the iPhone or iPad has been something we’ve had to instinctively train ourselves in. With the Apple Watch that gap is being made wider as the platform more fluidly juggles our little creations around.
Size & Consistency
Scalability and legibility is now more important than ever. Because of the limited size of the canvas and the scale of which everything is displayed, the challenge of creating something that reads well on the screen and clearly conveys the purpose of your app is now even more pronounced than it ever was on previous devices. Home screen icons are shown without accompanying text and are therefore identified solely by their icon. Understanding these new restrictions and how they manifest themselves on both the 38mm and the 42mm devices are key to creating a great icon for the platform. Here’s some key points.
- Stay true to your iOS icon and keep the design consistent. Apple suggests that when the functionality of a WatchKit app is very similar to its sibling iOS app, the icon remains virtually the same. But when the WatchKit app acts as a complement or controller to an iOS app, the icon design could differ accordingly.
- Embrace simplicity and cut away everything that isn’t absolutely necessary to identify your app. Add details cautiously. This has always been a core pillar of icon design, but on the watch the training wheels are off and the line which something becomes muddy or confusing is much easier to cross.
About the Apple Watch Template
The template I have put together does exactly what you’ve come to expect from the rest of the resources on applypixels.com – you’ll edit a 1024×1024 pixel smartobject that will then automatically scale to the 8 sizes currently associated with WatchKit app bundle (6 for the watch itself and 2 for the iOS companion app). Editing the smart object will also populate 3 separate examples of the icon inside the interface in different contexts; The home screen, a short look and a long look notification. These are based on the current version of the design resources Apple have given us. As usual the template comes bundled with actions that lets you do one click exporting of all the sizes in both full bleed square (what you need to bundle with your app) and circle-masked variants.
When you set out to create your Apple Watch home screen icon you’ll find that it all feels both very familiar and also oddly unique. The goal remains unchanged: you want to create a beautiful and memorable icon that uniquely identifies the app to the user and the tools that you’re using to do that is largely the same as they’ve always been. However, an even greater responsibility is placed on the icon to stand on its own and work in contexts with changing sizes and no accompanying text. Hopefully this template will equip you to better handle that challenge. Let’s make some cool icons for this watch!
