The layout field guide

UI layout patterns, made visual.

Learn how 12 common patterns organize content, direct attention, and help people find their way. Start with a figure, then explore when and how to use each one.

  1. 01Read the figure
  2. 02Understand the trade-off
  3. 03Adapt the structure
Layout anatomyPattern 01
Two-column Layout: structure diagramOne primary reading area, one supporting rail. 1: Primary column. The wider region carries the article, results, or main task. 2: Supporting rail. Filters, related information, or an index stay secondary. 3: Shared navigation. A common header keeps both columns within one page context.010203

One primary reading area, one supporting rail.

  1. 01
    Primary column
  2. 02
    Supporting rail
  3. 03
    Shared navigation

Structure & grids

Decide how content shares the page: its columns, containers, and relative weight.

6 patterns
Two-column Layout: structure diagramOne primary reading area, one supporting rail. Primary column. The wider region carries the article, results, or main task. Supporting rail. Filters, related information, or an index stay secondary. Shared navigation. A common header keeps both columns within one page context.

01Layout pattern

Two-column Layout

Divides the page into a wide main content area and a narrower sidebar, creating clear information hierarchy with a primary reading path and supporting context.

  • Blogs
  • SaaS pages
Split Screen Layout: structure diagramTwo equally weighted panels, with a clear relationship. First panel. A message, first choice, or primary task occupies one half. Second panel. A contrasting choice or complementary visual occupies the other half. Shared frame. Navigation and alignment make the two halves feel like one experience.

02Layout pattern

Split Screen Layout

Pairs two equally weighted panels to compare choices or connect a primary task with a complementary message or visual.

  • Portfolios
  • product comparisons
Asymmetrical Layout: structure diagramUnequal shapes can still create a balanced composition. Dominant region. One element establishes the visual anchor and entry point. Counterweight. A smaller or offset region balances the dominant element. Intentional space. Unoccupied areas separate elements and preserve the composition.

03Layout pattern

Asymmetrical Layout

Uses deliberate imbalance — unequal columns, overlapping elements, and offset grids — to create tension and visual energy that symmetric layouts cannot achieve.

  • Creative agencies
  • portfolio showcases
Card or Block Layout: structure diagramRepeat a useful content unit within a consistent grid. Repeatable unit. Every card uses the same order for its important information. Consistent gutter. Regular gaps distinguish items without adding visual noise. Aligned grid. Shared tracks make the collection easy to scan and compare.

04Layout pattern

Card or Block Layout

Organizes discrete content units into a scannable grid. Each card is self-contained — its own visual boundary, hierarchy, and action — making information easy to compare and browse.

  • Dashboards
  • directories
Masonry Layout: structure diagramLet variable-height items share a compact visual collection. Variable heights. Different content proportions remain visible instead of using one fixed crop. Column packing. Items occupy available column space without rigid shared rows. Reading order. The illustrated A–F sequence flows down each column in a CSS-columns implementation.ABCDEF

05Layout pattern

Masonry Layout

Arranges variable-height items in columns, preserving their proportions and creating a compact collection for visual discovery.

  • Galleries
  • portfolios
Magazine Layout: structure diagramGive one story priority, then organize supporting stories around it. Lead story. The largest region establishes the main editorial priority. Secondary stories. Smaller features offer useful alternative entry points. Briefs. Compact links add breadth while keeping the hierarchy clear.

06Layout pattern

Magazine Layout

Arranges multiple stories in a deliberate editorial hierarchy — one dominant lead story, secondary features, and tertiary briefs — so readers instantly know what matters most.

  • News portals
  • content hubs

Attention & reading

Give the page a clear entry point and help people find what matters next.

3 patterns
Featured Image or Video Layout: structure diagramUse one strong visual as the entry point into the page. Lead media. A relevant visual establishes the subject and its atmosphere. Readable message. The heading and action remain clear against or beside the media. Content continuation. The following section gives the visitor a clear place to continue.

07Layout pattern

Featured Image or Video Layout

Uses a large image or video as the main entry point, supported by a readable message and a clear next step.

  • Hero sections
  • product launches
F-Shape Layout: structure diagramSupport scanning with clear openings and strong left-edge anchors. Initial scan. A clear opening helps people understand the subject quickly. Follow-up scan. A meaningful subheading creates another useful entry point. Left-edge anchors. Descriptive headings and early words help people locate relevant sections.

08Layout pattern

F-Shape Layout

Supports scanning on text-heavy pages with a clear opening, meaningful subheadings, and useful anchors along the start of the reading area.

  • Articles
  • news sites
Z-Shape Layout: structure diagramArrange a few strong focal points into a clear visual sequence. Upper entry points. Brand and navigation establish the page context. Visual connection. The central message or image connects the opening to the next step. Clear destination. A prominent lower action gives the composition a useful ending.

09Layout pattern

Z-Shape Layout

Connects a small set of focal points across an opening row, a central message, and a clear lower action on a sparse, left-to-right page.

  • Landing pages
  • marketing sites

Interaction & disclosure

Let a useful control reveal, compare, or change the content people see.

1 pattern
Interactive Layout: structure diagramConnect a useful control to a clear, visible change in content. Clear control. The input communicates what can be selected, opened, or adjusted. Changed content. A predictable region updates or reveals relevant information. State feedback. Selection, progress, or an expanded state makes the result understandable.

12Layout pattern

Interactive Layout

Connects a clear control to a visible content change so people can explore a product, comparison, or story at their own pace.

  • Product showcases
  • comparison tools

Combine patterns around the task.

A page can use a card grid, fixed navigation, and a media-led introduction together. Choose the structure for the content relationship, then give it a visual style.

Explore visual styles