Система сеток делит страницу на столбцы и строки, которые определяют расположение контента. Она упорядочивает макет. Швейцарский дизайнер Йозеф Мюллер-Брокманн кодифицировал принципы сеток в 1960-х годах, и его книга «Системы сеток в графическом дизайне» до сих пор остается стандартным справочником. Газеты, журналы и веб-сайты используют сетки, хотя и по-разному.

Типичная сетка имеет столбцы, промежутки и поля. Столбцы содержат контент. Промежутки разделяют столбцы. Поля обрамляют страницу. 12-колоночная сетка распространена в интернете, поскольку она равномерно делится на половины, трети, четверти и шестые части. Дизайнеры могут использовать несколько столбцов для более широкого контента или один столбец для узкого текста. Сетка не диктует дизайн. Она предоставляет структуру, которой дизайнер может следовать, изменять или нарушать по своему усмотрению.

Компоненты сетки

• Столбцы: вертикальные полосы для отображения контента.
• Водосточные желоба: зазоры между колоннами.
• Поля: внешние края макета.
• Базовая сетка: горизонтальные линии для выравнивания текста.

Нарушение сетки может быть очень эффективным. Изображение, занимающее всю площадь кадра и игнорирующее колонны, привлекает внимание именно потому, что нарушает структуру. Но такое нарушение срабатывает только в том случае, если сетка достаточно прочная, чтобы её можно было ощутить.