Composition is the art of arranging elements on a page or screen so they communicate clearly and feel intentional. While the principles of design describe the goals, composition provides the structural tools — grids, alignment systems, and visual flow patterns — that bring those goals to life. Good composition is rarely accidental; it relies on long-established frameworks that help designers balance freedom with order.
One of the most enduring compositional tools is the rule of thirds, which divides a composition into a three-by-three grid. Placing key elements along the grid lines or at their intersections creates more dynamic, visually interesting compositions than centering everything in the middle. A related mathematical tool is the golden ratio, approximately \(1:1.618\), a proportion found throughout nature and used in design for naturally harmonious compositions. The golden ratio appears in the golden rectangle and the golden spiral, a logarithmic spiral that grows outward by a factor of \(1.618\) each quarter turn, both used as compositional guides for placing elements in naturally harmonious arrangements. Grid systems provide another structural foundation, with horizontal and vertical lines that organize content on a page or screen. A column grid divides the page into vertical columns separated by gutters, organizing horizontal flow. A modular grid adds horizontal rows to create a matrix of cells, giving designers precise control over both dimensions.
Alignment is the placement of elements so their edges or centers line up along a common axis, including left, right, center, and justified alignment. Proper alignment creates order, organization, and visual connection between elements. Proximity — placing related elements close together and unrelated ones farther apart — helps viewers understand relationships and hierarchy without the need for explicit labels or borders. Repetition strengthens a design by recurring across colors, fonts, shapes, and other visual elements, reinforcing brand identity and making the work feel unified. White space, also called negative space, is the empty area between and around elements. Far from being wasted, white space improves readability, creates visual hierarchy, gives elements room to breathe, and adds elegance to a composition.
Designers also study the natural reading paths of viewers to control how content is consumed. The Z-pattern describes how Western viewers scan a page with minimal text — from top-left to top-right, diagonally down to bottom-left, and finally to bottom-right, making it effective for landing pages and advertisements. The F-pattern describes the scanning behavior on content-heavy pages: users read horizontally across the top, drop down and scan a shorter horizontal stretch, and then move vertically down the left side, common on web pages and search results. Both patterns inform where designers place headlines, images, and calls to action. Other layout considerations include the concept of "above the fold," the portion of a webpage visible without scrolling, which remains prime real estate for key content, headlines, and CTAs. Optical alignment adjusts element positions so they appear aligned even when they are not mathematically so — round shapes and pointed letters often need to extend slightly beyond boundaries to look visually even. Before any of this is finalized, designers typically explore ideas through thumbnail sketches: small, quick, rough drawings used to test multiple layouts rapidly and compare options efficiently.