Split Screen

Founded by Framer, Apple product pages · Print layouts, adapted for web; Framer, Apple

Philosophy

The Story

Split screen design divides the viewport — usually 50/50 or 60/40 — and uses each side for complementary content. One side might be the product in use; the other, a description. One side might be the "before" state; the other, the "after." The split itself becomes meaningful. It says: these two things are related and worth comparing directly. On mobile, the split collapses to stacked. The design challenge: each half must have enough visual weight to hold attention on its own. Too much text on one side and the balance breaks. The best split screen layouts have equal visual mass on each side — a product screenshot balanced by a bold headline, not a paragraph of body text.

Design Parameters

Best For

Notable Examples