Сергей Краснов
24 марта 2014

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



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

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

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

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


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


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


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


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

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

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


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


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


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


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

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


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


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


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

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

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

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

P. P. S.

Открыт набор в Школу стажёров до 28 ноября или пока есть свободные места. Занятия с 30 января.

 

Поделиться

Комментарии

Андрей Вечтомов
24 марта 2014

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

Александр Ким
19 июня 2014

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

Дмитрий Беляков
19 июня 2015

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

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

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

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

Эдуард Сафронский
18 января 2016

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


Цель рубрики — обсуждение вопросов дизайна всех видов, текста в дизайне и взаимоотношений дизайнеров с клиентами.

Мы публикуем комментарии, которые добавляют к уже сказанному новые мысли и хорошие примеры. Мы ожидаем, что такие комментарии составят около 20% от общего числа.

Решение о публикации принимается один раз; мы не имеем возможности комментировать или пересматривать свое решение, хотя оно может быть ошибочно. Уже опубликованные комментарии могут быть удалены через некоторое время, если без них обсуждение не становится менее ценным или интересным.

Вот такой веб 2.0.

8 Сделали страницу для обучающего сервиса по безопасности. Как навести порядок? Вторая часть




Недавно всплыло

Как организовать личный рост? 1 3 Уместно ли травить леску перед выступлением? 1 Как работать со слабомотивированными кадрами. Как мотивировать 1



© 2007—2016

Запрещённые слова
Пишите: artgorbunov@artgorbunov.ru