В конце марта съездил в Волгоград на курс Игоря Штанга «Типографика и вёрстка». Ехал за знаниями, а получил практические навыки, атмосферу и десяток новых знакомых.
Кстати, следить за анонсами новых статей можно в моём телеграм-канале. Подписывайтесь, чтобы ничего не пропустить!
На курсе усердно всё конспектировал, но понял, что без практики конспект практически бесполезен. Что-то новое вы узнаете, но самый кайф этого курса — макеты, которые собираются в авральном режиме и переделываются по комментариям Игоря.
Воспринимать курс текстом — то ещё удовольствие. Поэтому я ввожу графические перебивки со своими макетами. Сильно не пинайте, я же не дизайнер, а редактор.
В курсе 11 блоков. Привожу краткий пересказ 10 из них. На первый, «Бегство от серого прямоугольника», я не успел, зато сделал рабочий макет, который по обратной связи Игоря докрутил до вполне неплохого состояния.
Классический стиль
Приход модернизма в ХХ веке ознаменовал закат классики в дизайне. Кто-то называет классику полным отсутствие дизайна или плохим дизайном. Нас с пелёнок учат модернистскому дизайну, а о классике никто нормально не рассказывает. И это при том, что ей без малого 5 веков, а модернизму — чуть больше сотни лет.
Классическая типографика — это книги. Элементы классики используют театры, производители дорогого алкоголя, проекты по культуре и искусству.
Серебро набора. В классике считали, что набор должен быть однородным и спокойным. Картинки и неосновной текст не должны контрастировать между собой. Здесь нет супербольшого кегля. Всё старается быть однородно сереньким. Сама антиква даёт серый одномерный тон.
Большие и многословные заголовки, выделеные прописными буквами; инициалы; первое слово или несколько слов капителью; кустоды; выделения, которые не выпрыгивают из страницы (курсив и капитель); подзаголовки, выделенные только одним приёмом — всё это маркеры классического стиля.
Капитель. В кириллице с капителью всегда были проблемы — до революции её активно не использовали, а в СССР не выпускали. Сейчас всё больше шрифтов делают с капителью. Но нет её традиции употребления. Дизайнеры вставляют её по делу и нет. Правильно набирать капителью аббревиатуры.
Ось симметрии. В классике 2 оси симметрии — одна через середину набора, вторая через саму полосу. Корешковое поле уже, чем внешне. Большинство элементов просто центрировалось. Выключка по центру и выключка по формату давали несимметричные фигуры.
Выключка по центру и по формату — искусственные. Они не соответствуют природе текста. Рукопись не принимает форму прямоугольника, как не старайся. Поэтому приходится тест растягивать. Созданный в то время подвижный набор позволил набирать текст по ширине.
Большие и разные поля. Поля делали очень большими и супер неэкономичными. Считалось, что текст должен быть окружён большим полем, как картина рамкой. Сумма внутренних полей обычно равна внешнему. Благодаря этому набор зрительно не распадается.
Приподнятость. Нижнее поле всегда больше верхнего — это компенсирует гравитацию. Чтобы уравновесить композицию нижний край немного приподнимали. Такая приподнятость — особенность классики. В классической архитектуре наблюдается то же самое, что и в тексте. Больший низ делает верхние части парящими.
Боязнь пустоты. Картины Босха и Брейгеля сбалансированы по массе — здесь яблоку негде упасть. В классике законченная форма выглядит красивой. Поэтому и текст часто набирали косынкой. Это помогало избавиться от большого количества белого в конце. Две маленькие части зрительно воспринимаются меньше, чем одна большая. Пустоту занимали орнаментом, им же наполняли поля. Модернисты считали всё это лишним декорированием и призывали только работы без орнамента.
Титульные листы. Пропорции титульных листов книг обычно подбирались на глаз. Использованные тогда стили стали прародителями всей акцеденции. С титулов началась реклама — других ориентиров не было. По титулу можно определить страну и век. Первые титулы были многословными и плохо структурированными. Глядя на титул вы не понимаете, как он устроен. К XVII веку всё начинает собираться к трёхчастной форме: бокала, дерева или кубка. Крупный заголовок, подзаголовок, меньший автор. Повсеместны размазанные по высоте титулы.
Кризис классики. В XVIII заканчиваются качественные классические макеты — появляется литография и леттеринг, приходит реклама, каталоги и визитки. А принципов, по которым это всё верстать, не появляется. Рекламные принципы проникают в книги. Реклама требовала заметных и кричащих шрифтов. Используется сверхжирная и сверхконтрастная антиква. Другое направление — суперделикатная графика, которая появляется за счёт литографии. Все новые рекламные шрифты абсолютно неисторичны. На каждый шрифт навешивается очень много декора.
Классические принципы:
- Доверять глазу, а не линейке — не обязательно строить сложное построение. Важно, как это будет в итоге смотреться.
- Уделять внимание мелочам. Модернизм мыслит крупными формами, а классические гравюры максимально детализированы.
Модернизм или швейцарский стиль
Модернисты понимали, что в новых условиях старые принципы типографики перестали работать. Книжная вёрстка была простой, а рекламный текст намного сложнее по структуре. Так в начале ХХ века в Швейцарии появляется новый стиль, которому суждено стать интернациональным.
Швейцарский стиль — чётко сформулированный и однородный. Его легко повторить.
Авангард, футуризм, дадаизм. Хорошо всё, что не похоже на классику. Типографика хаоса или протеста. Часто текст такой же странный как и оформление. Сетку в авангарде не пытались скрывать и делали линейки жирнющими. Графические элементы были очень активны. Филиппо Томмазо Маринетти, Лазарь Маркович Лисицкий, Илья Михайлович Зданевич.
Баухаус. Типографика становится более функциональной и менее декоративной. Она лучше читается. Ян Чихольд в «Новой типографике» пишет, что типографика должна следовать функции. Но декоративности всё равно очень много. Нет большого акцента на смысле.
Шрифт. Массово используются гротескные шрифты без засечек. Модернисты не любили антикву.
- Гельветика — нейтральный, суперфункциональный и системный шрифт. Его сложно читать в большом наборе.
- Универс появляется в одно время с гельветикой. Создатели шрифта не хотели огранчиваться конкретным набором. Они сделали тонкую градацию по ширине и по жирности. В начале было 21 начертание. Сейчас их до сотни. Каждое начертание пронумеровано.
- Akzidenz Grotesk — гротеск старого типа.
- Сан-Франциско — шрифт, который хорошо смотрится на экране и решает конкретные задачи.
Плакаты. Швейцарский стиль запоминается плакатами. На них полностью уходит выключка по ширине. В исключительных случаях сохраняется выключка по формату. В классическом стиле заголовок был соединён с текстом, в швейцарском — заголовок отделён от текста. Швейцарцы первыми делают регулярную сетку. Появляются модульные шрифты и пиктограммы по сетке.
Контраст. Модернисты считали, что нужно выкручивать контраст на всех уровнях — крупный текст, мелкий текст, крупная картинка, мелкая картинка, контраст цвета. Для классики характерны сложные шрифтовые темы. В модернизме можно брать обычные цвета. Выделения внутри текста — жирные. Курсив использовался редко. В гротескных шрифтах нет капители. В Герамании модернисты не писали прописные буквы в начале предложения.
Контраст фотографии и текста. Особенность в том, что фотография совершенно не родственна тексту. Фотография по своей природе отличается от текста. Текст состоит из штрихов, а фотография из точек. Она ориентируется на пространство, а текст априори плоский. Фотография может быть цветной. Поэтому многие говорили, что фотографию нельзя ставить в книги. Модернисты не использовали гравюры, но применяли фотографии и абстрактные изображения.
Унификация, стандартизация, шаблонизация. Именно швейцарцы первыми использовали эти принципы. Классика любит делать всё уникальное, она исповедует нешаблонный подход к производству чего либо. Но в ХХ век нужно было делать много и быстро. С чётко спроектированной системой вам ничего не нужно придумывать, если в основе макета чётко сформулированная идея и простота производства. Можно поменять цвет плаката и картинку, и вот уже всё готово. Чтобы делать просто, нужно желать много. Лучше продумать систему заранее, чем потом придумывать всё с чистого листа.
Конструкция
Формат. Упрощённо все текстовые форматы укладываются в нормальный прямоугольник. Они не вытянутее, чем двойной квадрат. Наше зрение заточено на горизонталь, поэтому оно легко воспринимает два формата разворота как единое целое.
Поля. В начале нарисуйте прямоугольник и поля. Текст не может заходить за поля. На иллюстрации полей может и не быть. Иногда текст ставят под обрез — это не правильно. Увеличьте нижнее и правое поля — сделайте поправку на гравитацию и нечёткую правую границу текста. Боковые поля должны быть больше, чем верхнее. В левом верхнем углу макета для горизонтального формата используйте горизонтальный отступ, на вертикальном — вертикальный. Но это не точно.
Контраст полей. Можно поставить текст в середину формата, но это слабое решение. Разные поля дают конструкции баланс и сюжет. Сюжет побеждает все формальные факторы. У объекта и формата есть свои поля. Как только мы ставим объект ближе к формату, появляется напряжение. Есть более напряжённая и разреженная области. С текстом сложнее. Очень скучно, когда текст стоит в абсолютном центре с большими полями. Как только смещается к одной из сторон — появляется динамика.
Принцип модульности
Макет делится на модули без остатка. Формат делится на модули, модули на блоки, блоки на колонки, колонки на абзацы, абзацы на слова, слова на буквы.
Модули не пересекаются. Когда каждый материал упакован в свой прямоугольник, он не смешивается с соседними. В вебе то же самое, что и в газетной вёрстке, но воздуха может быть больше. Каждый блок занимает свой модуль.
Модульность — это не кирпичность.
Закрыть границы другого модуля. Нам нужно закрыть каждый прямоугольник. Допустим есть несколько колонок, у которых разная высота. Чтобы закрыть низ — можно поставить этаж ниже. Ровная верхняя граница закроет рваный край верхнего этажа. Больше ⅔ ширины воспринимаем как закрышку. Если нужно поставить рваный текст под рваный текст, то используем рамку, плашку или линейку.
Взять в рамку или поставить на плашку. Если всё ставить на плашку, то возвращаемся к кирпичам. Важна согласованность — картинка с одной стороны, текст с другой стороны. Можно дублировать шаблон с одной стороны.
Закрыть углы. Когда у вас закрыты углы, вы можете верстать материал свободнее. В самом начале в шаблоне расставьте элементы по углам. Даже мелкая колонцифра может держать весь угол. Внутри может быть сколько угодно воздуха. Не выглядит скучно, когда все элементы разные.
Коснуться каждой из сторон. Визуально пятно должно упираться во все поля формата. Это делает макет уверенным и устойчивым. Если вам говорят, что макет несуразный, то скорее всего одна из сторон не поддержана.
Собрать все элементы в центре. Мы воспринимаем такие композиции самодостаточными. Но интереснее, когда одна из сторон больше, чем другие. Пробуйте не группировать всё в одном месте и однородно распределять массу.
Другие геометрические фигуры. Сложно верстать текст в круге или треугольнике — сама фигура не соответствует природе наборного текста. Прямоугольные кусочки сложно вписать в другую форму. В круге можно расположить короткий и простой текст: буквально три строки. Так же можно расположить текст по контуру.
Сетка
Принцип модульности — не то же самое, что и модульная сетка. Сетка не делит материал по смыслу. Компоновку определяет модульность. Сетка помогает выровнять элементы. Она касается визуального компонента выравнивания.
Сначала конструкция, потом сетка. Сначала придумайте, как у вас будут располагаться элементы. А потом нарисуйте под это сетку. Нарисуйте макет, а сетка его выровнит.
Компенсируйте геометрию оптикой. Сетка — жёсткий инструмент. Там есть только вертикальные и горизонтальные линии. Круглые картинки нужно завести немного за сетку, выровнять оптически. Если плашка бледная, то текст на ней выравнивают по основному тексту, если плашка чёрная — текст выравнивают по плашке.
Комбинаторика
Одинаковое содержание в одинаковых модулях выглядит скучно. Чтобы интересно расположить его в рамках готового пространства есть 7 приёмов.
Заполнять модули не до конца. Оставьте некоторые модули пустыми, обтравите фотографии.
Оформить элементы по-разному. Разделите их цветом или шрифтом. Представьте себе однообразную структуру, в которой расставлены акценты.
Заполнить элементами разных классов или разного качества. Вставьте в каталог товаров ссылку на статью или цитату из отзыва.
Предусмотреть область, которая будет выглядет по-другому. Сетка одна, но модули объединяются по-разному.
Выйти за пределы модуля. У вас есть чёткие куски, но некоторые изображения вылетают за пределы своих модулей. Если у вас прослеживается деление на модули, то можно подумать, как заводить элементы один на другой. Если у вас «каша из элементов», то лучше в это не лезьте.
Добавить новый слой. Подчеркните особенную динамику и направление. Например, текст стоит с чётким ритмом, а картинки летают как хотят.
Соблюсти баланс порядка и хаоса. Структура должна остаться читаемой. В хорошем макете сначала думают о структуре, а потом о разнообразии.
Верстка по форме
Текст повторяет форму. Нет сетки и модульности. Текст может повторять форму изображения по одному из краёв. Мы не строим отдельные направляющие, а используем те, которые есть в картинке.
Текст ссылается на форму. Текст в своём прямоугольнике, картинка в своём прямоугольнике. Сеткой выступает сама форма. Так верстают комиксы и карты.
Текст создаёт форму. Примеры можно найти у Поллы Шер и Пола Ренда в книге «Искусство дизайнера».
Простая и сложная вёрстка
Выключка по левому краю. Всегда смотрите на правый край. Он должен быть равномерно неровным. Эстетика выключки по-левому краю именно в рваном правом крае. Он делает текст естественным. Лучше избавиться от ровного правого края, лесенок, больших очевидных форм — они обращают на себя внимание, а смысла в этом никакого нет. Избегайте совпадений частей слов — это может сбить со строки. Двухбуквенные короткие слова принято привязывать. С визуальной точки зрения мелкие штуки отпадают от строки и обращают на себя слишком много внимания. В речи мы произносим предлоги без паузы. Все пробелы одинаковые. Люди привыкли к такой выключке. На западе многие верстают без переносов. Для английского эта нормальная практика. Если у нас левая выключка, то давайте не включать переносы. Как легло, так и легло. Правда в русском языке супердлинное слово должно перенестись.
А-В-И-К-О-С-У-Я — всегда прибиваются к следующему слову. Три короткие слова нужно привязывать к предыдущему слову: «ли (ль), бы (б), же».
Выключка по центру. Так верстают короткий текст, где не так много строк. Смотрим на форму пятна. Форма должна быть лаконичной и приятной для глаза. Плохо, когда текст стал кирпичиком. Очевидные формы плохи, когда они разрастаются (у вас строк 4 или больше). В выключке по центру переносы лучше не использовать. Обращайте внимание на знаки препинания.
Выключка по формату. Главные ошибки — слишком много пробелов, слишком короткая или слишком длинная концевая строка, висячие строки в начале и конце полосы, более трёх переносов подряд, сжатие строки. Латинские тексты могли переносить достаточно вольно — поэтому там было легко выключать по формату. Студия Лебедева верстает по формату и делает это неплохо, но и там встречаются косяки. Висячие предлоги, союзы и другие короткие слова не являются ошибками при выключке по формату. Чтобы разверстать по форме, можно: 1) поменять место переноса, 2) менять трекинг до 10 (межсословные и межбуквенные пробелы) 3) изменять межсословные пробелы всего абзаца, 4) варьировать ширину символов +-2% 5) играть с шириной фрейма 6) редактировать текст (крайняя мера, если ты не редактор).
Абзац
Существует 2 типа абзацев. Классические — с абзацным отступом. Швейцарские — с отбивкой между абзацами. Их смешивать не стоит.
Абзацы можно выделять втяжкой, когда первую строку выводят на поле. В западной традиции есть пэраграф сайн — он отделяет абзацы графически.
Заголовок
Главная задача заголовка — рубрикация (навигация по тексту). Не используйте близкие по стилю и размеру заголовки. Отличие между ними должно зрительно считываться! Поменять начертание бывает лучше, чем поменять размер. Чередуйте: прописные, жирный, капитель, курсив. Положение заголовка — очень важный параметр. Если поменять положение целиком, то сильно поменяется вёрстка.
Варианты расположения заголовка: на отдельной странице, со спуском, на иллюстрации, в отдельной колонке или на полях (фонарик, маргиналия), в разрез, в подбор, с оборкой (форточкой), скрытый в тексте (в набор).
Отступы. Минимальный отступ под заголовком равен его межстрочному интервалу. От крупных кеглей лучше отходить — они отталкивают более мелкие. Важно, чтобы снизу был правильный отступ — попробуйте написать следующую воображаемую строку заголовка и выровнять по его интерлиньяжу.
Таблицы
Таблицы создают, чтобы упростить поиск и сравнение данных. Размер и форму таблицы определяют её данные. Никогда не растягивайте таблицу во весь формат. Если вы знаете, что у вас будет много таблиц, то подумайте об этом на этапе проектирования и построения сетки.
Шум. Любую несложную таблицу можно сверстать без линеек и плашек вообще. Шапку можно никак не выделять или осознанно её ослабить. В вебе проще — мы видим строку, когда наводим на неё. Можно подсвечивать строку и столбец. Вертикальные линии можно убрать всегда.
Частая проблема таблиц — повторы. Можно вынести повторяющиеся данные в заголовок, шапку, боковинку, первую ячейку, примечание, основной текст. Шапку можно полностью убрать, когда заголовок и данные сами всё объясняет.
Выравнивание по левому краю. Текст всегда должен быть свёрстан по левому краю. Цифры, которые сравниваем, выравниваются по разряду. Диапазоны выравниваются по разделителю. Разнородные данные выравниваются как основной текст. Для веба самый нормальный вариант: выравнивать цифры по правому краю.
Иллюстрации
Форма иллюстраций. У некоторых фотографий нет фона. Чтобы его добавить, можно тонировать, поставить в рамку, добавить линейку или плашку. Ваша задача — восстановить прямоугольник или увести в полупрозрачность. На пинтересте фотографиии тонируются, чтобы их можно было визуально считать.
Кадрирование. Хорошее правило: «Кадрировать, пока объект не закричит». Можно смещать его от центра, тогда начнёт появляться сюжет. Произведения искусства не кадрируют.
Направление. У людей всегда появляется направление. Либо взгляд человека должен быть направлен на текст, либо внутрь разворота или страницы. Фотографии не зеркалят.
Правило доминирующего снимка. При вёрстке нескольких похожих элементов на макете (фоторепортажей) одну фотографию нужно сделать больше, чем остальные.
Линейка, рамка, плашка. Когда много иллюстраций, не понятно, куда пойти в первую очередь. Очень много дизайна и слишком мало места для данных. Когда много графических средств, получается, что каждый элемент хочет быть самым главным.
Когда оправдано использование линеек рамок и плашек:
— расставить акценты, смысловые и композиционные,
— поддержать конструкцию,
— передать стиль.
Шрифт и иллюстрация
Подобрать в одном стиле. Если вы рисуете иллюстрацию и пишете шрифт, то соответствие будет 100%. Так устроена арабская каллиграфия — шрифт превращается в картинку.
Тоновое родство. Штрихи иллюстрации и шрифта должны быть в одном диапазоне толщины. Картинки такие же по толщине, что и буквы.
Пластическое родство. Нужно обращать внимание на характер линий, соединение и окончание штрихов, скругление, форму засечек.
Курсовой проект
Игорь даёт 5 дней на курсовой проект — переверстать афишу местного театра. Я своим результатом остался не доволен. Но переделывать его я, конечно, не буду.
И напоследок мысль Игоря о визуальной составляющей дизайна
Максим Ильяхов называет визуал — «управлением вниманием». Для меня это «неравнодушное отношение к дизайну». В России входу фраза, что дизайнеры решают задачи. Важно не просто решать задачи, а делать это красиво. Увеличить продажи могут редакторы, маркетологи и менеджеры. Дизайнер же должен уметь делать красиво. Продукт обязан прилично выглядеть. Если убрать из дизайна визуальную составляющую, то его смысл потеряется. Не нравится, когда задачу дизайнера чем-то подменяют. Не надо подменять эстетические категории другими. Просто делайте красиво.
Кстати, следить за анонсами новых статей можно в моём телеграм-канале. Подписывайтесь, чтобы ничего не пропустить!
