Design Openbook

9 Page Layout Names

What are the names of common web page layouts? Common layouts include Hero section, Bento grid, Split screen, Card grid, Sidebar layout, Magazine layout, Dashboard, Z-pattern and Full bleed.

"Lay it out nicely" tells an AI nothing. Name the layout and the results come out similar every time.

Terms and previews

Tap a preview to pause it; tap again to play.

  1. Hero section

    The first area at the top of a page, with a large headline and the main button

  2. Bento grid

    A grid of different-sized cells fitted together like a lunch box

  3. Split screen

    The screen divided left and right, with text and image side by side

  4. Card grid

    Same-size cards repeated in several columns

  5. Sidebar layout

    A fixed menu on one side, content on the rest

  6. Magazine layout

    One large article mixed with several small ones, like a magazine

  7. Dashboard

    An admin screen that gathers number cards, charts and tables on one page

  8. Z-pattern

    A layout where the eye moves top-left, top-right, bottom-left, bottom-right

  9. Full bleed

    An image or band that fills the screen edge to edge with no margin

How to use it

  • Name the areas in order from top to bottom, and use only one layout name per area.
  • Write the number of columns (2 or 3) and the target screen (desktop or mobile) together.
  • Say up front that everything stacks in one column on mobile. Without it, the AI sometimes adds horizontal scrolling.

Prompts to copy

Landing page

Build a landing page.
1. Top: Hero section. One-line headline, one-line description, one main button.
2. Below: Card grid, 3 columns. Each card has a title and a two-line description, no icons.
3. Below: Split screen. Text on the left, a product screenshot on the right.
4. At screen widths of 400px or less, stack everything in one column. No horizontal scrolling.

Source posts: @uxwoodytips

All cards (27)