Пра­ви­ло якор­ных объектов

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Источник