Блог Игоря Штанга

Иногда редакторы и дизайнеры слишком увлекаются и превращают текст в череду списков. С одной стороны, это вроде хорошо: разложили всё по полочкам. А с другой, верстка получается дробной и однообразной.

Рассказываю о своем опыте работы со списками на примере двух проектов — презентации и книги:

При верстке книги «Карта процесса-опыта» стояла задача не угробить мелкий текст. Его много на схемах, и он должен хорошо читаться. Фото, конечно, не передает реальный размер, но передает внешний вид набора. Самый мелкий кегль 6 пунктов:




Как достигается удобочитаемость:

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

2. Начертание я использовал обычное (regular), как в основной тексте. Для мелкого шрифта часто берут более насыщенное начертание, например, medium, — я тоже попробовал, но выглядело слишком жирно. К тому же на схемах уже есть жирные заголовки (black).

3. Трекинг самых мелких подписей увеличен на 1,5% (в Фигме), потому что мелкому шрифту нужно больше воздуха. Интерлиньяж тоже свободный — 130%. В крупном масштабе такой набор выглядит разреженным, но в реальном размере самое то.




Если вы делаете макет для бумаги, то и тестировать верстку нужно на бумаге в масштабе 1:1.

Еще одна статья на тему: Грациозная деградация текста

Сергей спрашивает:

Можно ли ставить заголовок на одинаковое расстояние от верхнего и нижнего текста? Как на этом сайте:

Отвечаю:

( Collapse )

Переделываю рекламный банер и решаю проблемы простым увеличением размера текста.

Следующая «Большая переверстка» пройдет с 11 по 30 ноября. Присоединяйтесь: vk.com/pereverstka_online

Расскажу про дизайн шаблонов и верстку динамического текста. Приходите послушать и пообщаться: designprosmotr.ru

Андрей Шапиро написал книгу о собственном методе проектирования, а я ее сверстал. Купить можно на Озоне.

Идеей для иллюстрации на обложке послужила метафора из книги, которую я подметил, когда еще читал черновик:

Как хвоя на пути движущихся муравьёв постепенно принимает форму муравейника, так и выстраиваемый нами процесс-механизм обрабатывает «материал», из которого выстраивается целевая система.

Паттерн из «иголочек» сделал сам автор, а точнее, написал алгоритм, который его сделал:




Муравьишка на задней сторонке как бы переходит из реального леса в абстракцию леса:



( Collapse )

Переделываю рекламный банер и показываю, как свести верстку к одному простому принципу.

Следующая «Большая переверстка» пройдет с 11 по 30 ноября. Присоединяйтесь: vk.com/pereverstka_online

Переверстываю рекламный банер и показываю, как организовать воздух в полупустой колонке текста.

Следующая «Большая переверстка» пройдет с 9 по 28 сентября. Присоединяйтесь: vk.com/pereverstka_online

Таблица кернинга в гайдлайнах Транспортного управления Нью-Йорка. Дизайнеры Массимо Виньелли и Боб Ноорда, 1970




В левой части таблицы указаны расстояния между буквами, в правой — между цифрами.

Что интересного:
1. Цифры в прографке набраны крупно, потому что это те данные, которые мы ищем. Ну и для красоты, конечно.

2. Толщина линеек передает структуру: тонкие разделяют ячейки, толстые — группы ячеек. Интересно, что будет, если убрать все линейки.

3. Сетка таблицы не попадает в сетку текстовых колонок, но это нормально. У таблицы свой ритм, производный от ритма данных, и его не всегда возможно связать с общей сеткой макета.

4. Ячейки квадратные, как и лист бумаги.

Больше разборов в моей группе в Телеграме: t.me/kaketosverstano
А за красивыми таблицами сюда: t.me/thisisnotatable

Следующая «Большая переверстка» пройдет с 9 по 28 сентября: vk.com/pereverstka_online

Как проходит мастер-класс:
Участники получают задания в текстовом формате, с подробной инструкцией и списком материалов для самостоятельного изучения. Вот пример задания.
↓
На выполнение практики есть два с половиной дня. Обсудить задание с другими участниками и со мной можно в групповом чате в Телеграме.
↓
Далее мы встречаемся на вебинаре и разбираем макеты. Некоторые я сразу переверстываю, по другим даю рекомендации. Вебинар длится около двух часов. Вот свежий фрагмент.
↓
Макет можно доделать и в течение мастер-класса показать мне еще несколько раз.

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