Артём!
Точка, линия и прямоугольник — примитивы вёрстки, которые составляют геометрию любой страницы.
Точка •
Идеальному точечному объекту соответствует круг — самая эгоистичная фигура на свете. Круг имеет собственный центр и мгновенно привлекает внимание:
Но круг не любит конкуренции, его стоит использовать ограниченно и с осторожностью. Новый интерфейс Бейскемпа атакует кругами:
В вёрстке применимы любые точечные объекты: отдельные буквы и цифры, знаки, логотипы, пиктограммы. Они имеют разнообразную форму, но в отличие от линий и прямоугольников, «центростремительны». У точечного объекта один фокус внимания, он создаёт на странице акцент.
Обтравленные, то есть вырезанные из фона, изображения не имеют чёткой прямоугольной формы и тоже привлекают внимание. На полосе оглавления «Афиши‑Еды» роль точек играют крупные номера страниц в левой колонке, кружок‑фактоид справа сверху, фотографии на белом фоне справа и внизу:
Но даже на прямоугольных фотографиях лица и другие важные объекты выступают самостоятельными силовыми точками. Обратите внимание на лицо продавца, курицу и знак на фотографии рынка — по сути, они полноценно участвуют в вёрстке.
Заметность объекта‑точки зависит от его размера, плотности, контраста к фону, окружающего свободного пространства. И, конечно, всегда измеряется относительно соседних элементов.
Точечные объекты в вёрстке часто выступают в качестве якорных объектов, тяготеют к углам и краям своих модулей:
Линия _
В геометрии точки составляют прямую линию. Линия в типографике — это строка, второй важнейший примитив.
Строка — самый удобный, читабельный, лаконичный, скромный и спокойный элемент вёрстки. Большая удача, если объекты собираются в строку — ей всегда найдётся место в макете.
Логотип, в свою очередь, выступает точкой.
Адрес компании «Я расту» занял две строки внизу бланка и освободил всё место наверху для логотипа:
Логотип, в свою очередь, выступает точкой.
Строка — один из способов «впихнуть невпихуемое», например, срочное объявление или временный блок на сайте. Реклама на Гугле:
И выборы мэра на Яндексе:
Отдельная строка поперёк макета из края в край обычно выглядит несуразно. Как якорный объект строка лучше всего чувствует себя прижатой к верху или низу модуля. Неслучайно шапка и подвал сайта часто имеют форму строк.
Строка отлично подходит для организации меню и панелей инструментов:
Неоднородная строка должна следовать правилу якорных объектов. Строка одномерна, поэтому якоря располагаются слева и справа:
Или в центре, как в газетных колонтитулах и меню Айфона:
См. также о выравнивании элементов строк
Бирка на картридже Т2 организована в строку с двумя якорями — логотипом слева и артикулом справа:
См. также о выравнивании элементов строк
Прямоугольник ▭
Прямоугольник — третий примитив вёрстки.
Информационные носители — экран, бумага, рекламный щит, — имеют прямоугольную форму. Прямоугольник — самая технологичная фигура, способная делиться на другие прямоугольники без отходов.
Все модули макета должны иметь прямоугольную форму и составлять вместе общий прямоугольник страницы или экрана, которым они ограничены.
Простейшие примеры прямоугольного модуля — абзац текста, иллюстрация или элемент интерфейса. Но прямоугольник — универсальный контейнер для любых объектов — точечных, строчных и прямоугольных:
Модульная вёрстка — это поиск наиболее удачной компоновки прямоугольника. Продолжим поиски в следующих советах.
P. S. Это был понедельничный совет о вёрстке и типографике в вебе. Хотите знать всё об интерлиньяжах, полях, отступах, кеглях, выравниваниях и модульных сетках? Присылайте вопросы.