vocab.design

layout

Split screen layout

also called split design (community), 50/50 layout (community), dual pane hero (community)

A page cut into two equal full height halves, each carrying its own message or path, with no hierarchy between them.

Cut the page down the middle, give each half its own image, headline, and button, and the layout has said something before a word is read: there are two of these, and neither one is the main one. That is the whole idea. A split screen is for a genuine fork, men and women, book a room and book a table, sign in and sign up, where picking a hero image and a single call to action would be answering a question the visitor is there to answer.

The symmetry has to be real to work. Equal widths, matching type sizes, buttons of the same weight, and images of similar density, because the moment one half is louder the layout stops being a choice and becomes a main offer with a footnote. Two halves is also the practical limit: three is a set of cards, and by four the reader is scanning a grid rather than choosing between paths. If the two things are not actually peers, a hero with a secondary action says so more honestly.

It is easy to confuse with list detail, and the difference is the relationship rather than the shape. In a list detail the two panes are bound together, and what you pick on the left decides what the right shows; in a split screen neither half knows the other exists. The same words are also used for a third thing entirely, the operating system feature that runs two applications side by side on one screen, which is a window manager’s split view rather than a page layout, so the sense is usually worth stating out loud.

At narrow widths the halves stack, and the order they stack in is a decision, not a default: the top one now reads as first choice and gets seen far more, which is the hierarchy the layout spent its whole design avoiding. Alternating which half leads, or shortening both so the second is still on the first screen, keeps the pairing from collapsing into a ranking. Watch text over imagery too, since a headline that clears contrast against a light photograph on one side often fails against a dark one on the other.

Which word?

If you wantsay
two equally weighted choices on one pagesplit screen layout
two panes where one drives the othersplit view
a run of feature blocks that would otherwise read as a listzigzag layout

Related

See also: Hero