Designing for iPhone Duo doesn’t mean you have to throw away everything you know about iPhone design. Here’s what to adapt, what to rethink, and how to make the most of the new form factor.
For years, designing for iPhone has meant working within a fairly familiar set of rules. We know where navigation usually lives, how content flows, how much space we have, and how people interact with the screen. iPhone Duo changes some of these assumptions.
It’s still an iPhone, but now it has two displays, a fold, new screen proportions, different ways of holding the device, and more ways an app can use the available space.
If you’ve already designed an iPhone app, your first instinct might be to open the design file, make the frame wider until it fits, and call it a day. It’s the quickest way to get an interface that works on the new screen, but it treats Duo as a bigger screen when it’s really a different way of using space.
In this article, I’ll look at what’s changed with iPhone Duo compared to previous iPhones and share practical advice on where you can adapt the experience and where you should rethink it to make the most of what the new design makes possible.
iPhone Duo isn’t just a bigger iPhone
Duo gives you more space, but that doesn’t mean you have one giant canvas to fill. The outer display is closer to the traditional iPhone experience, while the inner display gives apps much more room for wider layouts (see image below). The real change isn’t the pixel count. It’s that you can show connected parts of an experience at the same time.
For example, instead of showing a list and opening each item on a separate screen, the larger display can keep the list visible alongside the selected detail. The user can see where they came from, what they selected, and what they are looking at without constantly moving back and forth.
Having a larger display doesn’t mean that every element needs to become larger. Increasing the size of cards, buttons, or spacing simply to fill the available space can make an interface feel unnecessarily stretched.
Instead, use the extra space to show related content together, reveal more context, or reduce the number of steps needed to complete a task.
Navigation isn’t fixed anymore
One of the most noticeable changes on Duo is where navigation and controls can live. On the outer display, controls normally placed at the top or bottom can move to the side (see image below). Moving navigation or controls into a vertical strip can free up more room for the actual content while keeping those controls accessible.
The same idea applies to tabs, toolbars, and frequently used actions. A bottom tab bar that works well on a regular iPhone can become a vertical navigation strip when the available space calls for it.
The underlying navigation structure stays the same, even though its presentation can change to suit the available space. The goal isn’t to move things around just because you can. It’s to use the available space in a way that makes the interface easier to understand and use.
Don’t just stretch your existing UI, adapt it
The easiest trap to fall into is taking an existing iPhone layout, stretching it across the inner display, and calling it done. Apart from making the interface feel stretched, this can also create usability problems. For example, text lines can become unnecessarily long, making content harder to scan, while large empty areas can make the interface feel unbalanced.
Instead, use the additional space to create more useful relationships between elements. An app that normally shows one level of content at a time can use a split layout, keeping a list visible next to the selected item instead of making users go back and forth between screens. Apps with tabs can use the extra width to turn their navigation into a sidebar when the content calls for it.
Whatever you change, keep the information architecture consistent. Opening iPhone Duo shouldn’t feel like switching to a different version of the app. The same experience should simply get richer because there’s more room to show it.
During design reviews, I’d ask one simple question: “What should the extra space do?” If the answer is “nothing,” the experience probably hasn’t been adapted enough yet.
The fold is a constraint, not a no-go zone
The fold is one of the most important physical constraints Duo introduces. When the device is partially folded, the screen is no longer a single flat surface, so content positioned directly across the center can become harder to read or interact with.
This doesn’t mean everything needs to avoid the fold. Scrollable content like articles, feeds, lists, and documents can usually flow across the fold without causing problems. Interactive and key content is different. A button, alert, or menu may need to move if the fold makes it hard to see or tap.
The important part is deciding what can safely cross the fold and what should respond to it. One useful approach is displacement. Instead of creating a separate layout for every folding state, you move individual elements, or groups of related elements, to a better position as the device changes shape (see image below). Moving related elements together keeps their relationship clear, so the interface responds to the device’s shape without changing its functionality or hierarchy.
One flexible layout beats a separate design for every pose
iPhone Duo can be used in several positions: closed, fully open, partially folded like a book, or placed on a surface (see image below). Each position changes the amount of available space and, in some cases, how the user interacts with the device.
That doesn’t mean you need a separate design for every possible position. The better approach is to build flexible layouts that can respond to changes in size, available space, and safe areas.
Components should not depend on one exact width or position. They should be able to adapt as the available space changes. If your components already behave well in responsive layouts, much of that work will carry over to iPhone Duo.
Some positions do justify a special layout. When the device rests on a table, for example, content can use the upper half of the screen while controls sit on the lower half, which stays steady on the surface and is easier to tap. Even then, the core functionality and hierarchy should stay consistent with the other layouts.
Safe areas have become a moving target
Safe areas aren’t new, but they become more important when the available space can change so much. Cameras, system UI, side navigation, and the fold can all affect where content can comfortably sit. If your layout ignores these regions, content can end up hidden behind a camera or control, or sitting right on the fold.
Instead of designing around fixed offsets for each device state, let safe areas define the usable space and design your layouts to respond to those boundaries (see image below).
This is particularly important when navigation moves to the side. If you center content against the physical display rather than the space that is actually available to the user, the interface can look visually off-center even when the measurements are technically correct.
Good use of safe areas and flexible layouts helps the interface stay balanced as the device changes shape.
Multitasking turns the inner display into shared space
The available space on Duo can change for another reason: multitasking. On the inner display, users can have two apps open side by side (see image below). That means an app that normally has plenty of room can suddenly have only part of the display available to it.
This is another reason not to design around one fixed screen size. A layout that works when your app occupies the entire inner display should also be able to respond when the available window becomes smaller. A split layout might collapse into a single column, while navigation can move or simplify depending on how much space remains.
The goal is to make the interface work with both plenty of space and limited space without making either state feel like an afterthought.
Two displays open up a world of new possibilities
So far, we’ve looked at how existing experiences can adapt to Duo. But two displays also make entirely new interactions possible. Apps can support multiple scenes and show related content across both displays. One display can focus on the main task while the other provides supporting information or controls.
This opens up possibilities that don’t exist on a traditional iPhone. A video call, for example, can continue naturally as the device opens and closes, with the appropriate front-facing camera becoming active without requiring the user to manually switch it.
The design opportunity here is bigger than simply supporting two displays. It’s about making the transition between them feel seamless. The same principle can apply to photography, recording, video calls, and other experiences where the two displays can work together.
Instead of making users think about which display is active, the interface should make the hardware transition feel like a natural part of the experience.
Rethink the presentation, keep the experience
With all of the new behaviors iPhone Duo introduces, It’s easy to think of the outer and inner displays as two separate versions of an app. That’s not the experience you want to create. Your app should feel like one continuous experience that adapts as the device changes.
Users might open the device, close it, fold it halfway, rotate it, or open another app next to yours. The layout can change every time, but their understanding of the app shouldn’t. Navigation should stay predictable, important actions should stay available, and the information hierarchy shouldn’t change without a good reason.
The presentation is where you have room to rethink. For designers, iPhone Duo is an opportunity to question patterns we’ve taken for granted. Instead of asking how to fit an existing iPhone interface onto a new device, ask what the extra space, new navigation, and different poses let you do better.
