Applying Composition Grids in Design

Traditional column grids are common for products with a large range of material types, like magazines or newspapers. Those grids are flexible and allow to organize content in an easy-to-read format. More than that, you can manipulate the size and number of columns to create something unique, asymmetrical, and fresh. The website example uses a three-column grid with proportional widths, while the title takes up the space of all three columns, balancing out the composition.

Three-column grids provide a uniform solution — they're standard and can be applied to many websites.

Typography can help define columns. Using different weights and sizes, you can determine the order of information and create a hierarchy that can be either horizontal or vertical.^[2] 

Three-column layouts can feel dense. You can avoid it by lowering columns and creating a clear area for a header, title, or photos.

Selecting a grid on a certain degree angle or using the golden rectangle as a proportion, you can present a website in an entirely new light or from an absolutely different angle. Rotated grids display an exceptional diagonal composition and carry a sense of movement.

Modular grids, apart from columns, have rows that make organizing multiple content areas (modules) more flexible. They provide more control than what column grids can offer. They're quite popular for presenting tabular information, such as graphs, charts, tables, schedules, or forms, as well as for e-commerce sites or image galleries — think of the Instagram explore page. However, they may create a feeling of too much order and mathematical rationality.^[3]

Integrated grids are for designers who love challenges and want to add more variations to a layout. Such grids consist at least of two grid systems — one can be designed specifically for images and graphics, while the second — for typography. The example interface overlays two grids, and the overall composition looks fresh and a bit eccentric.

Traditionally, column grids use equally-sized columns that fit perfectly for uniform content with an equal level of priority. Symmetrical grids establish a sense of great order and allow for various amounts of space and image sizes. This type of grid is perfect for presenting the same information in two different languages or comparing opposite options.

Asymmetrical grids have more visual interest and feel less monotonous. You can use asymmetry to create contrast between content groups and emphasize certain elements.

Make sure asymmetry doesn't create chaos on a page and doesn't break a reading pattern. People should easily scan a page from the most critical information to the least important.

Manuscript grids are classic grids for printing, especially for continuous blocks of text, like in books, essays, or manuscripts. However, images can also be used to add more visual interest, decrease cognitive load, and simplify scanning.

Although hierarchical grids may look a bit chaotic, lack regular structuring, and don't contain repeated intervals, the layout naturally relies on a website's specific content.

Hierarchical grids place elements intuitively — the content itself defines the logical alignment and overall composition. Designers can adjust grid rows, columns, flow lines, margins, modules, etc., according to the need of the website's content.

This grid type helps navigate users through the information in the desired way, from the most vital elements to the less important ones.