19/09/2022
Split-screen Layouts
Technically, split-screen layouts date back to 1903, to the film Life of an American Firefighter by Edwin S. Porter. But in web UI design, split-screen layouts started gaining popularity in 2013 and really started picking up steam in 2016.
Split-screen layouts are a popular design choice when two elements need to have equal weight on a page and are often used in designs where text and an image both need to be featured prominently. Placing them side by side instead of vertically or with a text overlaying the image is a conscious design choice that can lend a sophisticated, minimalist quality. Two images placed side by side are also commonly seen, sometimes with text overlays.
Most split-screen designs are divided fairly evenly, though some are split at different ratios. (33:66 or 40:60 seem to be the most popular ratios; when a screen is divided into a smaller size than ⅓, it’s more like a sidebar than a true split-screen design.)
Split-screen designs are particularly well suited to product pages on eCommerce sites. Product images need to be prominent on these pages, but so does essential information like price, specifications, add-to-cart buttons, and product options.
