Layouts
Layout patterns
Each pattern is a way to arrange a page's parts. Open one to watch its wireframe reflow from phone to desktop, then copy the idea as a brief.
- Alternating rowsRows of text and picture swap sides as the page goes down, so a long page keeps a gentle rhythm and each point gets its own moment.Phone 1 · Tablet 2 · Desktop 2 columnsSee the layout
- Card gridEqual cards in a regular grid let readers scan many similar items at once and pick the one they want.Phone 1 · Tablet 2 · Desktop 3 columnsSee the layout
- Sidebar and contentA narrow sidebar keeps the ways around the page in view while a wide main region holds the content, so readers never lose their place.Phone 1 · Tablet 2 · Desktop 2 columnsSee the layout
- Single reading columnOne narrow, centred column carries everything in order, so the reader only ever has to scroll and read.Phone 1 · Tablet 1 · Desktop 1 columnsSee the layout
- Split screenTwo halves sit side by side, one making a bold statement and the other giving the detail, so the reader gets the point and the proof together.Phone 1 · Tablet 2 · Desktop 2 columnsSee the layout
- Three columns with header and footerA header and footer frame three columns, navigation on one side, the main content in the middle and extra facts on the other, so a busy page stays orderly.Phone 1 · Tablet 2 · Desktop 3 columnsSee the layout