Школа
Вёрстка

Якорные объекты

Работаю дизайнером в небольшой студии. Взяли новичка, возникла проблема, парень не видит, что у него конкретные проблемы в работе с текстом для веба. Отступы, заголовки, списки, в общем, не видит когда текст выглядит красиво, а когда нет. Как можно его поднатаскать в этом?

Сергей Краснов
23 мар 2014
👁 54209   🗩6
Вёрстка

Якорные объекты

Работаю дизайнером в небольшой студии. Взяли новичка, возникла проблема, парень не видит, что у него конкретные проблемы в работе с текстом для веба. Отступы, заголовки, списки, в общем, не видит когда текст выглядит красиво, а когда нет. Как можно его поднатаскать в этом?

Сергей Краснов
23 мар 2014
👁 54209   🗩6
А. Г.
Арт‑директор и автор учебных программ бюро
Полезно
 86
86
Непонятно
 8
8
Войдите в Бюросферу, чтобы голосовать

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Типографика в вебеМодульная сеткаЯкорные объектыГора знаний
Полезно
 86
86
Непонятно
 8
8
Войдите в Бюросферу, чтобы голосовать
Отправить
Поделиться
Поделиться
Запинить
Твитнуть

Комментарии

Правильно я усвоил?

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

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

Получается угловая привязка и не нужна?

На изображении заголовок «Привет» привязывается к одной верхней границе, а галочка привязывается к нижней. Получается, что ничего не нарушаем?

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

Дмитрий, логически не нарушаем, но визуально ведь всё выбилось. Правило придумали не ради того, чтобы было не придраться, а ради визуально годной компоновки. Сами же видите, что «Привет» и галочка выбиваются из картинки, и несоразмерны с маленькими строчками — значит, правило выравнивания по краям не работает. Лучше применить более подходящее, и в этом примере — это правило углов.

Георгий Двали

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

Анастасия Урасинова

Дмитрий, я думаю, что правило одной стороны работает, когда главный объект или связка объектов занимают визуально всю сторону. А в данном случае самые заметные части живут сами по себе. Они остаются точечными и напрашиваются на привязку к какому‑либо углу, а не к стороне.

Цель рубрики — обсуждение вопросов дизайна, веб-разработки, переговоров, редактуры и управления.
Комментарии модерируются. Мы публикуем комментарии, которые добавляют к уже сказанному новые мысли и хорошие примеры.

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