Сегодня поднатаскаем новичка правилом якорных объектов.

Якорные объекты — это самые заметные объекты на странице: иллюстрации, заголовки, фактоиды, логотипы и пиктограммы. Простой абзац наборного текста тоже выступает якорным объектом, если он окружён пустотой, или контрпространством.

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

Правило гласит, что любой якорный объект должен тяготеть или располагаться в одном из углов или в визуальном центре своего прямоугольника:

Визуальный центр располагается выше геометрического для подсознательной компенсации гравитации

Визуальный центр располагается выше геометрического для подсознательной компенсации гравитации

Каждый из этих прямоугольников годится:

Принцип требует, чтобы привязка к силовой точке была очевидной. Для этого с противоположных сторон от якорного объекта должны быть «воздух» контрпространства либо менее плотные и заметные объекты:

По моим наблюдениям, самая частая ошибка новичка — забыть «антивоздух»:

Обратите внимание, как угловой привязке крупной галочки мешает её собственная форма.

У правого края флагового набора всегда должен быть дополнительный воздух. Тогда «флаг» выглядит флагом — как положено.

В жизни редко приходится верстать страницу из одного объекта. Второстепенные объекты модуля пристраиваются к якорным и иногда даже слегка сдвигают их из точек привязки:

Объекты нанизываются друг на друга, как бусы. Общая конструкция сохранится, если соблюдать принцип модульности, то есть выравнивать объекты друг с другом по ширине и высоте и сохранять прямоугольную форму модулей:

Но якорные объекты всегда выпрыгивают из вёрстки. Если у них не будет точки привязки, макет развалится:

Объект может неожиданно стать якорным, то есть более заметным, не только при увеличении размеров, но и при смене цвета:

Галочка потеряла привязку, а адрес съехал вправо.

Якорный объект может быть привязан не к точке, а к одной из сторон прямоугольника:

Такая привязка выглядит спокойно:

Хорошая вёрстка использует силу углов и сторон формата. На обратной стороне коробок картриджей Т2 якорные объекты активируют верхние углы и нижнюю сторону:

Якорные объекты образуют иерархию: первыми замечают иллюстрации и любые картинки, затем крупные заголовки, далее логотипы, знаки и цифры. Наборный текст — самый нейтральный.

В качестве упражнения предлагаю уважаемым советчикам самостоятельно разобрать принцип якорных объектов на следующих примерах:

P. S. Это был понедельничный совет о вёрстке и типографике в вебе. Хотите знать всё об интерлиньяжах, полях, отступах, кеглях, выравниваниях и модульных сетках? Присылайте вопросы.

Типографика в вебеМодульная сеткаЯкорные объектыГора знаний
Отправить
Поделиться
Запинить

Рекомендуем другие советы