Card-style Web Layout Patterns

Card-style layouts were popularized by sites like Pinterest, Facebook, and Twitter. They have become standard on news sites and blogs, as they’re well suited to placing a lot of content on a page while keeping each piece distinct.

As the name suggests, these layouts use content blocks that resemble physical cards of various shapes and sizes. There are two primary layout formats. One layout arranges cards with equal dimensions on a grid, while the other uses a fluid layout with different size cards arranged into orderly columns but without distinct rows (like Pinterest’s layout).

Card-style layouts work well because they allow different content to be arranged in an orderly way while keeping all the pieces separate. Cards are also familiar to people because they recognize card-shaped items from the real world. They make sense psychologically and are easy for people to use even if they’re new to a website.

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.