Design for iPhone Duo

Source: Design for iPhone Duo (Apple Developer) · 10 min 45s

By Marcos and Vince, Apple's design team.

iPhone Duo is a device you can hold, prop on a table like a laptop, fold like a book, or stand on its edge. The design goal: one app that feels like a single experience across every pose — not six custom layouts. The core idea is refreshingly simple.

Controls move to the side

Closed, the outer display is wider and shorter than a traditional iPhone. To maximize vertical space for content and keep things thumb-reachable, controls relocate to the right edge — your tab bar, toolbars, back button, status bar, and the (now vertically expanding) Dynamic Island. Content gets an uninterrupted area on the left.

The same applies to the inner display. The only pose that keeps horizontal bars is the inner display in portrait, where there's room for plenty of vertical content.

You rarely build this by hand. If your app uses standard components:

• Top toolbar buttons → top of the side column
• Bottom toolbar buttons → bottom of the side column
• Tab bar → stays bottom-aligned
• Too-wide items (text buttons, segmented controls) → stay in the nav bar automatically

If there's not enough room, app controls collapse into an overflow menu.

The fold is a natural divider

When you fold the device like a book, content automatically moves away from the curve:

• Text and images shift off the curve for readability.
• Buttons and interactive elements move to the sides — easier to target, and the curve becomes a layout divider.
• The system nudges interactive elements away from the fold across sheets, alerts, menus, and toolbar buttons. Use system components to get fold-avoidance for free.
• Scrollable content doesn't need to avoid the curve.

Design for two size classes

You don't need per-pose designs. Target just:

• Compact width (outer display)
• Regular width (inner display)

Avoid fixed widths and screen-tied metrics. Build with layout margins and horizontal safe-area insets, and your app adapts automatically. (Optional: a hands-free pose layout — media on top, tappable controls on a stable base at the bottom — is worth considering since people will set Duo down on tables.)

Asymmetric layers

With controls on one side, most of your layout is now asymmetric:

• Offset content so it isn't hidden behind the side controls — aligning to horizontal safe-area insets does this automatically. Use it for scrollable, control-bearing UI.
• Center some UI deliberately for immersive, non-scrolling, highly visual surfaces — but only if interactive elements won't be blocked by the right-side controls.
• Mix both: a full-width background image/header with an inset scrollable foreground — just keep every interactive element inside the scrollable area.

Inner display: don't stretch, restructure

An iPhone app stretched wide looks wrong. Instead pick from these patterns, keeping the same hierarchy and functionality inside and out (people open and close Duo constantly — never gate features behind a pose):

• Split views — surface multiple levels of your hierarchy at once (via NavigationSplitView / UISplitViewController).
• Two-column content — like Music: a vertically stacked layout reflows into two columns when horizontal space appears.
• Tab bar → sidebar — for information-dense apps (e.g. Health), present the tab bar as a sidebar on the inner display.

Sheets

• Outer display: sheet controls go to the side by default; you can disable the vertical bar (e.g. single-button sheets), in which case sheets stop short of the front camera.
• Inner display: horizontal bars (landscape and portrait).
• Partially folded: sheets slide away from the fold so they don't rest in the curve.

The takeaway: your iPhone app is closer than you think. Resizability + using system components gets you most of the way. The rest of the series covers the engineering (adaptive layouts, screens & scenes, vertical bars, and camera).