Foldable Apps: Design for Space, Not for Stretching the Screen
Distinguish what to keep from what to change
The basis for foldable design is the space the app can actually use, rather than the device name.
- Keep: core tasks, information priority, the user’s current navigation context
- Change: navigation placement, number of panels, content layout, and supporting information
- Also review whether a structure that shows more information when unfolded reduces the number of navigation steps.
Use the expanded screen to view related information together
Rather than stretching the mobile UI as is, place connected information across multiple panels.
- Narrow screen: after selecting an item from the list, move to the detail screen
- Wide screen: show the left-side list and the right-side details at the same time
- Set boundaries between reading and interaction
- Limit the maximum width of text, cards, and dialogs.
- Place important buttons, input fields, and main content so they do not cross the hinge.
Assign the role of space according to the folding state
The same screen can require different layouts depending on how the device is placed and used.
- Closed: focus on key information and one-handed controls that are easy to reach
- Open: show lists, details, and supporting information together to reduce navigation movement
- Half-open
- In tabletop mode, video can be placed at the top and playback controls at the bottom.
- In a book-like open form, the left and right areas can be used for reading and comparing information.
Keep work in progress going during transitions
When folding, unfolding, or rotating, keep the user’s work state even if the layout changes.
- Preserve scroll position, input values, and navigation path
- Rearrange navigation and supporting UI to fit the space
- Instead of stretching a bottom sheet wider, limit its width or switch to a side panel.
- Reflect platform-specific space criteria
- Consider size classes together with the areas occupied by system UI, the camera, and the hinge.
