Вторая часть заметок с занятий вёрсткой на курсе Игоря Штанга.
Конструкция
Конструкция — пространственное отношение элементов. Это текстовый скелет макета. Не путаем конструкцию с сеткой. Сетка — лишь один из инструментов. Не путаем с композицией. Композиция — это ещё и цвет с фактурой.
1. Формат и поля
Работа над макетом начинается с полей. Текст по умолчанию не касается краёв формата. Нужно его определить, вот популярные:
Одни из самых распространённых:
- Квинта — обычная книга;
- Кварта — заметно более широкая книга;
- Дин — А-серия.
Дин при делении пополам даёт сам себя. Квинта и кварта дают друг друга.
Если элементы стоят хорошо, иногда проще поменять формат, чем перекомпоновать их.
Поля:
- В правой полосе книги размеры полей нарастают: левое → верхнее → правое → нижнее;
- В журналах оставляют большое верхнее для колонтитула, левое и правое делают примерно равными, нижнее — чуть больше боковых;
- На кнопках боковые поля больше верхнего и нижнего (на западе иногда сильно больше), чтобы тексту не было тесно.
Добавьте разницу в размеры полей, появится напряжение, элементы не будут болтаться где-то посередине. См. лекцию Игоря о графическом напряжении.
Плашка
Начинающие дизайнеры часто прижимают плашку к тексту. Иногда так сильно, что нарушают правило внутреннего и внешнего.
Если это не макет газеты с плотным набором, когда соседние блоки поджимают, добавляем комфортные поля:
- Почти всегда можно увеличить отступ снизу. Текст немного поднимется вверх, получится поправка на гравитацию;
- Немного добавить справа. К таким отступам люди относятся нормально;
- Иногда — добавить немного сверху и убрать слева, но это уже на вкус. Фактически, это книжная пропорция от внутреннего поля к внешнему.
Зачастую нет прямой связи плашки с форматом, поэтому нет смысла от него отталкиваться.
В вебе нижнее поле обычно увеличивают для визуальной компенсации. А ширина вообще постоянно меняется.
Поля
Они есть и у формата, и у всех объектов. Чем плотнее соприкасаются поля, тем лучше видно взаимодействие. Появляется лёгкое движение, напряжение. Для текста этого достаточно.
Поля можно задавать на глаз. Но самый понятный вариант — разделить формат на блоки по вертикали и горизонтали, сохранив пропорции блоков равными пропорции формата. См. 9-модульную схему Чихольда:
Поля будут довольно большими и подойдут разве что для книг Чихольда. Лучше увеличить количество модулей.
2. Позиционирование элементов на плоскости
Элементы не должны стоять случайно. Положение каждого по горизонтали и вертикали должно быть обосновано.
- Формат. Привязываем элементы к его центру, сторонам, углам, вертикальной и горизонтальной центральной линии;
- Сетка. Делим формат на модули, используем дополнительные направляющие, чтобы расставить весь контент. В отличие от формата сетка абстрактна. Мы не видим эти линии и поэтому чаще всего не чувствуем их;
- Форма. Привязываемся к объекту или тексту определённой формы. Фактически, связь с формой — это связь с другим элементом.
Не создавайте конструкцию на одной лишь сетке. Сетка поможет определить корректные отступы, расстояния и прочее, но не более.
3. Модульность
Принципы:
- Модули прямоугольной формы. Круг и треугольник неудобны для стыковки;
- Они не пересекаются.
Модульность ≠ кирпичность.
Способы закрыть прямоугольник:
- Закрыть границей другого модуля. Важно, чтобы она была ровной и достаточно длинной;
- Поставить на плашку или взять в рамку. Это позволит свободнее верстать внутри блока. Нельзя ставить на плашку все модули (или через один) — получатся кирпичи;
- Закрепить углы. Подходит, чтобы закрыть формат целиком. На сайтах углы обычно автоматически закрываются шапкой и подвалом. В журналах это колонтитулы. Когда углы закрыты, можно оставить сколько угодно белого;
- Коснуться каждой из сторон;
- Собрать все элементы в центре.
При нарушении модульности между элементами появляются ложные связи. Иногда этот принцип сильнее теории близости.
Можно немного зайти контентом на соседний блок.
Если нужны шаблоны (то есть мы не знаем, какие будут картинки, текст), стройте их на модульном принципе.
4. Комбинаторика
Что делать, когда много схожих элементов? Есть книжный стеллаж (сетка), как красиво расставить на нём книги и не превратить всё это в кашу или что-то скучное?
Приёмы:
- Заполнить модуль не до конца. Например, пустые блоки, разное количество текста в блоках, объекты обтравленные и на прямоугольных картинках с фоном;
- По-разному оформить. Добавить цветовые и другие отличия, которые подчеркнут смысл или будут чистой стилистикой;
- Заполнить элементами разных классов. Например, информационный блок среди перечня товаров;
- Объединить модули;
- Выйти за границы модуля. Границы прямоугольников можно пересекать, если делать это аккуратно. Нужна суперкрепкая конструкция. См. крутые решения в журналах издательского дома Марты Стюарт (есть версии для айпада);
- Добавить новый слой.
Соблюдайте баланс порядка и хаоса. Сначала — хорошая структура. Потом — разбавление её элементами свободного характера. См. поздних модернистов (1987-й год): Зигфрид Одерматт, Розмари Тисси.
Просто вывалить список может кто угодно. Важно расставить акценты, подсказать читателю, на что смотреть в первую очередь. Так можно поступать и с коммерческой целью.
5. Сетка
Книги:
- Хорошие авторы: Мюллер-Брокман, Владимир Лаптев (посложнее, чем у Мюллера-Брокмана), Аллен Херлберт;
- «Геометрия дизайна» Кимберли Элам. При этом её «Принцип сетки» рекомендовать нельзя;
- The Typographic Grid — реальные работы автора с сетками и комментариями. Для тех, кто чувствует себя уверенно.
Приводность (первоначальное значение). Вёрстка считается приводной, когда строки на лицевой стороне на просвет совпадают со строками на обороте. Свидетельствует о качественной вёрстке и печати. Строки основного текста должны совпадать на развороте и на соседних колонках. Строки дополнительного текста совпадать с ними не обязаны.
Швейцарский абзац — когда между абзацами одна пустая строка. Если отступ больше, он кратен интерлиньяжу основного текста.
Заголовок делайте кратным интерлиньяжу основного текста. Размеры картинки тоже. В сетку может не попасть подпись к картинке, это нормально. Не загоняйте в сетку таблицу, у неё свой ритм, обусловленный данными.
Если нужен мелкий кегль, возьмите половину основного. Тогда базовые линии основного и дополнительного текста будут совпадать через строку. Если слишком мелко, подберите, чтобы высота 2 строк основного текста совпадала с 3 строками дополнительного.
Средник — отступ между этажами, отделяющий блоки друг от друга. Чтобы текст ритмично прошёл через все этажи, делайте средник равным одной строке основного текста.
Сначала разрабатывается интерлиньяж, потом к нему подбирается кегль. Мюллер-Брокман рекомендует сначала определить базовые линии и уже потом строить сетку.
Основные варианты вертикального выравнивания:
- По базовой линии;
- Оптически (по верху строчных букв).
Оптически выравниваем:
- Картинки;
- Заголовки, если при выравнивании по базовой линии они подскакивают вверх. Это особенно важно, когда две колонки стоят рядом. Дмитрий Барбанель в журнале «Секрет Фирмы» (после редизайна, например, август 2011) нарушает правило близости, чтобы заголовки стояли на базовых линиях.
Вертикальное выравнивание в вебе обычно делается на глаз. У него не было металлической истории и выработавшейся практики.
12-колоночная сетка удобна тем, что её можно поделить на 3 и 4. Отступы между колонками подбираем на глаз.
Выводы:
- Сначала конструкция, потом сетка. Она подтвердит найденные решения;
- Сетку можно нарушить. Точнее, дополнить новыми направляющими, если они необходимы для определённых ситуаций.
Примеры типографики: thisisdisplay.org.
6. Вёрстка по форме
Излюбленные приёмы модернистов:
- Текст повторяет форму. Например, форма текста отзеркаливает пятна, которые есть на расположенной рядом картинке;
- Текст ссылается на форму. Поставить рядом или даже на изображение (см. каталоги Икеи). Верстать это тяжелее, но считываемость лучше. Например, выноски рядом с иллюстрацией (см. Тафти). Линии могут присутствовать в самой картинке, зацепиться можно за них (см. схемы метро). Также см. «карта без карты», где остались только подписи.
- Текст создаёт форму. Металлический набор не позволял делать плавные изгибы, но они пытались.
Примеры макетов с вёрсткой по форме смотрите у Пола Рэнда, автора книги «Хаос и форма».
Кстати, паттернизация — это уже постмодернизм.