UI Layout Patterns

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

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.

Structures content to match how users actually scan screens — two strong horizontal bands at the top, then a left-weighted vertical strip for continued reading.

Leads with a large, immersive visual — image or video — that communicates mood and context before a single word is read. Content below the fold is secondary to the initial visual impact.

Makes the UI itself part of the content — sliders, carousels, tabs, and live controls that let users explore rather than just read. Engagement replaces passive consumption.

Anchors the navigation bar to the top of the viewport so it remains accessible as users scroll through long pages — reducing friction for multi-section sites.

Conceals navigation behind a trigger icon to maximize content area — the entire screen becomes the canvas, with UI chrome revealed only on demand.

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

Packs content cards of varying heights into columns without uniform row heights — eliminating whitespace gaps and creating a dense, browsable grid perfect for visual content.

Splits the viewport into two equal halves with distinct visual identities, forcing a clear choice or presenting a strong contrast between two ideas.

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.

Guides the eye in a deliberate Z-path across the page — logo top-left, CTA top-right, visual bottom-left, CTA bottom-right — optimized for conversion-focused pages.