Артём
21 апреля 2014

В программе по типографике Школы стажёров есть пункт: «Модуль. Точка, линия и прямоугольник, знак, строка и абзац. Выравнивание». О чём идёт речь?



Артём!

Точка, линия и прямоугольник — примитивы вёрстки, которые составляют геометрию любой страницы.

Точка •

Идеальному точечному объекту соответствует круг — самая эгоистичная фигура на свете. Круг имеет собственный центр и мгновенно привлекает внимание:


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


В вёрстке применимы любые точечные объекты: отдельные буквы и цифры, знаки, логотипы, пиктограммы. Они имеют разнообразную форму, но в отличие от линий и прямоугольников, «центростремительны». У точечного объекта один фокус внимания, он создаёт на странице акцент.

Обтравленные, то есть вырезанные из фона, изображения не имеют чёткой прямоугольной формы и тоже привлекают внимание. На полосе оглавления «Афиши-Еды» роль точек играют крупные номера страниц в левой колонке, кружок-фактоид справа сверху, фотографии на белом фоне справа и внизу:


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

Заметность объекта-точки зависит от его размера, плотности, контраста к фону, окружающего свободного пространства. И, конечно, всегда измеряется относительно соседних элементов.

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


Линия _

В геометрии точки составляют прямую линию. Линия в типографике — это строка, второй важнейший примитив.

Строка — самый удобный, читабельный, лаконичный, скромный и спокойный элемент вёрстки. Большая удача, если объекты собираются в строку — ей всегда найдётся место в макете.

Адрес компании «Я расту» занял две строки внизу бланка и освободил всё место наверху для логотипа:


Строка — один из способов «впихнуть невпихуемое», например, срочное объявление или временный блок на сайте. Реклама на Гугле:

Логотип, в свою очередь, выступает точкой.

И выборы мэра на Яндексе:

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

Строка отлично подходит для организации меню и панелей инструментов:

Неоднородная строка должна следовать правилу якорных объектов. Строка одномерна, поэтому якоря располагаются слева и справа:


Или в центре, как в газетных колонтитулах и меню Айфона:


Бирка на картридже Т2 организована в строку с двумя якорями — логотипом слева и артикулом справа:


Прямоугольник

Прямоугольник — третий примитив вёрстки.

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

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

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

См. также о выравнивании элементов строк

Модульная вёрстка — это поиск наиболее удачной компоновки прямоугольника. Продолжим поиски в следующих советах.

P. S.

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

P. P. S.

Дата следующего набора в Школу стажёров пока неизвестна.

 
Мы напишем вам, когда будет открыт набор. Без спама.

Поделиться

Комментарии

Евгений Решетнёв
25 апреля 2014

«Но круг не любит конкуренции». Не очень понял, что это значит. Что не так с новым Бейскемпом? Что принципиально изменится, если вместо кругов нарисовать прямоугольники, например?


4 мая 2014

Евгений!

Дизайн станет спокойнее, а вместо кругов зритель начнёт видеть лица.


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

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

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

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

Cверстал одностраничный плеер. Вторая часть 3 2




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

Как же мне сделать систему, удобную и понятную для конечного пользователя?

2
Расскажите об обратной связи в интерфейсе 1 Я бы покрасил стены новой рабочей студии белой краской. А коллега хочет клеить обои 3 Как флексить. Отступить от идеала 2