Apple Watch App-Design Concepts

Much like an iPhone app, you can think of the content of your Apple Watch app one screen at a time, but, of course, the watch screen is much smaller. Here you see an example of a screen you might design for a stopwatch feature.

Every screen on Apple Watch automatically scrolls vertically to fit content that exceeds the screen size; the user can either pan with a finger or turn the Digital Crown, a grooved button on the side of the watch that rotates to accommodate scrolling and other user input, much like a crown on a traditional wristwatch. Each screen can have a title at the top, tinted to match your app’s main color. A stark black background is common, though you can change it. Then there are two labels, followed by some buttons. Because of the small screen size, buttons take up a large portion of the screen. You may notice that they go edge to edge, and that’s intentional. The bezel of the device adds a black border to every screen, and the margin on the edges is built in, so your designs should stretch as far as possible. The background color of the buttons helps them stand out—bold colors look great on the watch screen.

This is just one screen, and your app will have many. Organizing them is simple, as we’ll discuss in a later chapter about transitioning between them. The most common way to have many screens in one app is to use a paged layout. Page-indicator dots at the bottom will inform your users that they can swipe between screens, giving them quick access to all of your features.

When the user presses the screen a bit harder than with a normal tap (called a Force Touch in Apple parlance), you can display a contextual menu with additional actions. This is a good place for less-common actions that you want to make available in your app but that you don’t necessarily want to take up screen space for. They look like the screen shown here.

One thing you’ll notice is that the colors of the app below show through. This transparency (a key element of iOS 7’s redesign) is apparent in Apple Watch apps as well, giving the user a sense of spatial awareness as your app moves from screen to screen.

As you’ll see, you can implement many user-interface elements (including images) to create amazing interfaces on these small screens.