Layout

Layout refers to how visual design elements are organized on a page. To create effective layouts, designers consider hierarchy, balance, and other visual design principles.

Common Layouts

Standard patterns and existing products are helpful sources of inspiration for designing layouts. Common layouts use visual design and Gestalt principles.

Here are a few common web layouts:

Grid

A grid layout works well for designs that have a lot of similar elements, such as this course catalog page. There are many cards, as each represents a course. Placing the cards on a grid keeps them organized and allows users to easily scan them.

Split

A split-screen layout is a good option for dividing a page into two distinct sections. This page is divided into information (left side) and action (right side).

Single-Column

A single-column layout can work well for text-heavy pages. The article text is displayed in a wide column that takes up most of the page.