Apple Watch App Layout Designs

Layout

Apps display the same interface on all sizes of Apple Watch, adjusting the layout as necessary. You can often use the same layout on screens that have similar areas. For example, the 40mm and 42mm screens offer approximately the same amount of space; similarly, the 41mm and 44mm screens offer about the same amount of space. The 38mm, on the other hand, offers less space, while the 45mm offers considerably more, so you may want to adjust your layout for these screens.

Diagram of a watch face showing a blue rounded rectangle on top of a red rectangle of the same dimensions, leaving only the four corners of the red rectangle visible inside the black bezel. The blue rounded rectangle measures 352 pixels wide and 430 pixels tall and represents the visible screen space on a 41 millimeter Apple Watch.

41mm (Series 7 and later)

Diagram of a watch face showing a blue rounded rectangle on top of a red rectangle of the same dimensions, leaving only the four corners of the red rectangle visible inside the black bezel. The blue rounded rectangle measures 396 pixels wide and 484 pixels tall and represents the visible screen space on a 45 millimeter Apple Watch.

45mm (Series 7 and later)

Diagram of a watch face showing a blue rounded rectangle on top of a red rectangle of the same dimensions, leaving only the four corners of the red rectangle visible inside the black bezel. The blue rounded rectangle measures 324 pixels wide and 394 pixels tall and represents the visible screen space on a 40 millimeter Apple Watch.

40mm (Series 4, 5, and 6)

Diagram of a watch face showing a blue rounded rectangle on top of a red rectangle of the same dimensions, leaving only the four corners of the red rectangle visible inside the black bezel. The blue rounded rectangle measures 368 pixels wide and 448 pixels tall and represents the visible screen space on a 44 millimeter Apple Watch.

44mm (Series 4, 5, and 6)

Diagram of a watch face showing a blue rectangle inside the black bezel. The rectangle measures 272 pixels wide and 340 pixels tall and represents the visible screen space on a 38 millimeter Apple Watch.

38mm (Series 1, 2, and 3)

Diagram of a watch face showing a blue rectangle inside the black bezel. The rectangle measures 312 pixels wide and 390 pixels tall and represents the visible screen space on a 42 millimeter Apple Watch.

42mm (Series 1, 2, and 3)

Show the same content, regardless of display size. Use relative sizing and Dynamic Type to ensure that items expand or contract naturally to fill the available space. It's also best to use the same image for all display sizes; for guidance, see Image Optimization.

Support autorotation in views people might want to show others. When people flip their wrist away, apps typically respond to the motion by sleeping the display, but in some cases it makes sense to autorotate the content. For example, a wearer might want to show an image to a friend or display a QR code to a reader. For developer guidance, see isAutorotating.

Avoid displaying too much information onscreen at the same time. People want to see the most important information instantly, so you don't want to clutter the screen with nonessential details. People can easily access secondary information by scrolling.

Screenshot of a black screen that contains a scroll bar near the Digital Crown location. A vertical double headed arrow to the left of the scroll bar indicates that the scroller moves up and down.

Create visual groupings to help people find the information they want. For example, use negative space and separator lines to place related elements and information into distinct areas.

Use the full width of the screen. Design your content to extend from one edge of the screen to the other. The Apple Watch bezel provides a natural visual padding around your content. To avoid wasting valuable space, you can also minimize the padding between elements.

A screenshot of the Workout app's main list of workouts. A callout indicates that the currently focused workout item spans the full width of the available screen area.

Avoid placing more than two or three controls side by side in your interface. As a general rule, display no more than three buttons that contain glyphs — or two buttons that contain text — in a row. Although it's usually better to let text buttons span the full width of the screen, two side-by-side buttons with short text labels can also work well, as long as the screen doesn't scroll.

Screenshot of the Stopwatch app's Hybrid screen, highlighted to show the Reset and Start buttons at the bottom of the screen. The Reset button is gray with lighter gray text and the Start button is green with black text.

Left align elements. Left-aligned text is easier to read, while vertical stacks of buttons with text labels — especially multiline labels — are often more scannable.

Screenshot of a Mail message. A vertical blue callout line near the left edge of the screen shows that the message content is left aligned.

Designing for Rounded Corners

Beginning with Apple Watch Series 4, the screen has rounded corners, which can clip content that's displayed too close to the edge. The top corners are typically blocked off by the navigation bar, and the clock and the app's title are inset to avoid the rounded corners. The system uses these insets to define margins that both SwiftUI and WatchKit use to help you lay out your content.

SwiftUI and WatchKit also respect a one-pixel boundary that the system defines at the side edges of the screen. Although text should align with the margins so that it remains legible at a glance, graphic elements and button backgrounds can extend beyond the margins and up to this one-pixel boundary. For developer guidance, see edgesIgnoringSafeArea(_:) (SwiftUI) and systemMinimumLayoutMargins (WatchKit).

40mm

44mm

As shown above, the system defines the content safe area as the region below the navigation bar and above the rounded corners at the bottom of the screen. To avoid clipping, the list rows, buttons, and other scrolling content should settle within the content safe area. For developer guidance, see safeAreaInsets (SwiftUI) and contentSafeAreaInsets (WatchKit).

When you use system containers and controls, SwiftUI and WatchKit automatically lay out and manage the contents relative to the margins and safe areas, so that your user interface appears in an optimal location on the screen.

If you create a custom layout using full-screen SpriteKit or SceneKit elements, you need to position your content according to the device's minimum layout margins and content safe areas. It's also a good idea to create your own one-pixel boundaries to avoid half-pixel aliasing at the screen edges.