Designing for iPhone Duo: 8 rules from Apple's design session

Apple’s Design for iPhone Duo session is ten minutes long and packed with guidance. These are the eight ideas worth pinning above your desk.

1. Know the four poses, but design for two size classes

Apple describes four ways people will hold iPhone Duo:

• Closed: compact and familiar, using the outer display.
• Open: the largest, most immersive display ever on an iPhone.
• Partially folded: like a book, or on a table like a laptop.
• Standing: resting on its edges, hands-free.

The key line from the session: don’t design a custom layout for each pose. Design for compact width (outer) and regular width (inner), and let the system handle the rest.

2. Controls live on the side

This is the biggest visual change. To save vertical space, toolbar buttons and controls move to the side of the display:

• Buttons at the top of a toolbar move to the top of the side strip.
• Buttons at the bottom move to the bottom of it.
• Tab bars stay at the bottom.
• Controls that are too wide, like a text button or a segmented control, stay in the navigation bar.

The only pose that keeps horizontal bars is the inner display in portrait. If there isn’t enough room, controls collapse into an overflow menu automatically.

3. Keep content clear of the controls on the outer display

Most content needs an offset so the side controls don’t cover it, and safe area insets do this for you. Immersive screens that don’t scroll can still center on the whole display, as long as nothing interactive ends up under the controls.

A good middle ground is a full-width background image or header, with scrollable content inset inside the safe area.

4. Use the inner display to show more of your app

Apple suggests three patterns for the inner display:

1. Split views that show more than one level of your app at once.
2. Two-column layouts that rearrange themselves when there’s more width.
3. Tab bar as sidebar, best for information-dense apps.

5. Let the fold push buttons aside

When iPhone Duo is partially folded, the system moves interactive elements away from the crease. This is built into sheets, alerts, menus and toolbar buttons. Text and images also shift away from the curve so they stay readable.

Scrollable content doesn’t need to avoid the fold. Only things people tap do.

6. Sheets behave differently inside and out

On the outer display, sheet controls also move to the side, and you can turn that off if it suits your content better. On the inner display, sheets use standard horizontal bars, and they slide over so they don’t rest in the fold.

7. Split View is a 50/50 split

Drag an app to the side and the inner display splits into two independent halves. The controls sit along the outer edge, so an app on the left has its controls on the left edge. Your app has to look right on either side.

8. Never tie a feature to a pose

People will open and close the phone all the time. The session asks that your hierarchy doesn’t change between the outer and inner displays, and that every feature is reachable in every pose. A hands-free tabletop layout (media on top, controls on the bottom) is a nice extra, not a replacement.

---

Next, work through the simulator checklist to test all of this before October 23.