На прошлых выходных прошёл курс Игоря Штанга «Типографика и вёрстка» о том, как собрать макет (одностраничный формат, разворот). Решил поделиться своими заметками с занятий.
Игорь просил не публиковать презентацию, почти полностью состоящую из примеров, поэтому я подобрал другие примеры из пинтереста Игоря.
Бегство от «серого прямоугольника»
Серый прямоугольник — это текст произвольного размера, который нам прислал заказчик. Это не похоже на дизайн.
Чтобы избавиться от серого прямоугольника:
- Читаем текст и выясняем, о чём он;
- Определяем формат или жанр;
- Уточняем контекст: кто, где и зачем будет его читать.
Есть формальные приёмы по превращению его во что-то, похожее на дизайн.
1. Набрать крупно, увеличить кегль
Простой и дешёвый (в хорошем смысле) приём. Помним, что:
- Без контрастных мелких элементов не будет смотреться.
- Нужен шрифт, который хорош в крупном кегле. Verdana и Georgia создавались для других целей и не сработают. Они будут выглядеть топорно.
Серый прямоугольник разделяется на строчки, получается чередование чёрного и белого.
Ещё можно:
- Крупный текст сделать фоном;
- Крупно набрать какую-то отдельную часть, иногда массивный заголовок спасает весь макет.
2. Разбить на колонки
Такое формальное разделение текста полезно для лонгридов, книг. Например, книжную страницу формата А4 можно разделить на 2 колонки. Что-то из основного текста иногда размещают в дополнительной колонке.
В результате образуется пространство между блоками, появляется горизонтальный и вертикальный ритм. Макет выглядит динамичнее.
1−2 колонки — книги, 3−4 — журналы, больше 4 колонок — газеты. В айпаде есть тема с колонками (см. iBooks в ландшафтной ориентации), в вебе — нет.
В вебе текст делят на колонки по смыслу. Количество колонок часто нарастает сверху вниз. Основной блок занимает всю ширину, второстепенный делится на колонки. Свёрстанное на полный формат мы воспринимаем как главное, первое и важное. Чем чаще ритм, тем больше нам кажется, что это дополнительная, служебная информация.
Важно, чтобы ритм не совпадал на соседних этажах. Даже если они расположены через этаж, сложно избавиться от связи.
3. Подать мелкими порциями
Разбить текст на блоки, одинаковые по структуре и (примерно) по объёму. Расположить их в строку или столбец. Главное — удобство чтения.
Чтобы обозначить последовательность, можно набрать крупные цифры.
4. Активизировать фон
Плотно локализовать текст, оставив место для фона или иллюстрации. См. Typographische Monatsblätter.
Инвертирование — превращение текста в рамку, когда основным содержанием становится пустое пространство. Для таких решений нужен определённый заказчик. См. работы итальянского модерниста Фронзони, это типографика на грани искусства.
5. Превратить в паттерн
Размазать текст по задуманному принципу. На определённом этапе текст превращается в картинку. Текст в нормальном виде обычно дублируют рядом.
Можно превратить текст в картинку в формате фильтров фотошопа.
6. Выйти в третье измерение
Типографика — это плоская тема. Можно получить визуальные (информационные) слои, расположив объекты на разных плоскостях.
Добиться этого проще всего цветом и наложением текста. Или без цвета — совместить крупный текст и мелкие блоки. В теории крупный массивный объект мы воспринимаем как находящийся ближе к нам. Мелкие блоки смешиваются с фоном и оказываются визуально ближе к нему.
В книгах это редкий приём. Например, «Поэма для трёх голосов» Роберта Брингхерста.
