Layout

Apps display the same interface on all sizes of Apple Watch, adjusting the layout as necessary. For example, the 40mm and 42mm screens offer approximately the same amount of space, so you can generally use the same layout on both. The 38mm, on the other hand, offers less space, while the 44mm 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 324 pixels wide and 394 pixels tall and represents the visible screen space on a 40 millimeter Apple Watch.

40mm (Series 4 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 368 pixels wide and 448 pixels tall and represents the visible screen space on a 44 millimeter Apple Watch.

44mm (Series 4 and later)

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 3 and earlier)

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 3 and earlier)

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.

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.

Screenshot of a contact's Info screen. A horizontal bar in translucent red spans the width of the screen between the navigation bar and the contact name and photo, indicating an amount of space that provides good visual separation. A similar horizontal bar of greater height appears between the bottom of the contact name and photo and the top of the button area, indicating a larger visual separation. A translucent red square appears between the Phone and Message buttons indicating an amount of space that visually separates these buttons.

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).

Diagram of a watch face showing a black 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. At the top of the black rounded rectangle, a navigation bar displays the word Title on the left and the time 10:09 on the right. Blue shading starts at the bottom of the navigation bar and extends to the bottom edge of the black rounded rectangle, indicating a content safe area that measures 146 points wide and 160 points tall. A callout indicates a vertical layout margin on both sides of the safe area that measures eight points wide.

40mm

Diagram of a watch face showing a black 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. At the top of the black rounded rectangle, a navigation bar displays the word Title on the left and the time 10:09 on the right. Blue shading starts at the bottom of the navigation bar and extends to the bottom edge of the black rounded rectangle, indicating a content safe area that measures 165 points wide and 182 points tall. A callout indicates a vertical layout margin on both sides of the safe area that measures nine and a half points wide.

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.