DuoAppsDesign an app for iPhone Duo
Rules by screen type, a proof level on every line, and demos you can play with.
Where to start
Where iPhone Duo comes from
Six iPhone formats, from 2007 to iPhone Duo, and what each one changed for app design. Every device is drawn at the same scale, from the dimensions in its tech specs, with the same generic app, drawn by us: from one era to the next, only its layout changes.
2007 · iPhone
One screen size
One screen for every app, 3.5 inches diagonally, which Apple introduced as a widescreen Multi-Touch display.
2012 · iPhone 5
Two heights
A 4-inch display, “taller, not wider,” in Apple’s words: apps now have two screen heights to fit.
2014 · iPhone 6
Two widths, and size classes
Two formats at once, iPhone 6 and iPhone 6 Plus, so two new widths; iOS 8 introduces size classes, regular and compact.
iPhone 6 tech specs · iPhone 6 Plus tech specs · What’s New in iOS 8
2017 · iPhone X
The all-screen display, and the safe area
The display covers the whole front (all-screen), gestures replace the Home button, and the safe area keeps controls clear of the rounded corners and the sensor housing.
iPhone X tech specs · Apple Newsroom, September 12, 2017 · Tech Talk “Designing for iPhone X”, 2:28
2022 · iPhone 14 Pro
The Dynamic Island
The Dynamic Island, a design that blends hardware and software and adapts in real time to alerts, notifications, and activities in progress.
iPhone 14 Pro tech specs · Apple Newsroom, September 7, 2022
2026 · iPhone Duo
Two displays
The first foldable iPhone, with two displays: apps’ navigation and controls move to the side, leaving the height to the content.
iPhone Duo tech specs · Apple Newsroom · HIG, Vertical controls
DuoApps is an open knowledge base: anyone can reuse and adapt it, with a credit to the page. About