Макет размещает текст и изображения на странице или экране. Он определяет, где что находится и сколько места занимает. Макет может быть плотным или воздушным. Он может быть симметричным или асимметричным. Он может следовать сетке или выходить за её рамки. Макет определяет, как зритель воспринимает контент. Загроможденный макет перегружает. Скудный макет кажется пустым. Правильный баланс зависит от сообщения и носителя.

Принципы верстки совершенствовались на протяжении веков. Правила были установлены в полиграфическом дизайне. Поля дают контенту пространство для «дыхания». Колонки организуют текст для удобства чтения. Свободное пространство разделяет элементы и направляет взгляд. Иерархия показывает самое важное. Цифровой дизайн адаптировал эти принципы к экранам. Адаптивная верстка подстраивается под разные размеры экрана. Трехколоночная верстка для настольных компьютеров становится одноколоночной на мобильных устройствах. Контент перестраивается. Иерархия сохраняется. Верстка также влияет на удобство использования. Кнопка, расположенная там, где ожидает пользователь, нажимается. Навигационное меню в стандартном месте используется. Форма с четкими метками и логической группировкой заполняется. Верстка — это не просто эстетический элемент. Она функциональна. Она формирует поведение. Дизайнер использует верстку, чтобы направлять, информировать и убеждать. Каждое размещение — это решение. Каждое решение имеет последствия.

Принципы компоновки

• Поля — пространство вокруг содержимого.
• Столбцы — вертикальное деление текста.
• Пространство — пустые области, разделяющие элементы.
• Иерархия — порядок визуальной значимости.
• Выравнивание — элементы выравниваются вдоль общих ребер.
• Близость — связанные элементы сгруппированы вместе.

Компоновка — это расположение частей. Важны сами части. Важно и пространство между ними.