Курс Игоря Штанга «Типографика и вёрстка»

Прошёл курс Игоря Штанга «Типографика и вёрстка». Мне понравилось. Было классно и интересно. Курс идёт 3 дня с 11:00 до 19:00. Кажется, что это мало, но информации столько, что нужно время, чтобы её переварить. Чтобы было понятно о чём вообще курс, вот два определения:
- Типографика — искусство оформления при помощи наборного текста.
- Вёрстка — расположение составных элементов (набранного текста, заголовков, таблиц, иллюстраций, украшений и пр.) на формате.
Самое крутое на курсе, что можно задавать вопросы. У меня было много вопросов и не всегда удавалось верно сформулировать, но Игорь помогал докопаться до сути и в итоге я получал ответ. А ещё после каждого блока теории была практика. На ней мы закрепляли материал, а потом Игорь давал обратную связь: указывал на ошибки, говорил как можно сделать лучше. Иногда прям при тебе переверстывал твой макет и ты видел, как можно сделать лучше — это очень прокачивает мышление, я прям открыл для себя много трюков.
На курсе Игорь рассказывает о классическом и швейцарском стиле. Полезно видеть, с чего начиналась и как развивалась типографика. По ходу курса я делал заметки, которые можно использовать в работе.
Этапы вёрстки макета
- Прочитать текст, чтобы понимать о чём идёт речь.
- Структурировать текст — разбить на абзацы и добавить заголовки. Чтобы проверить структурированный текст или нет, посмотри не читая, где что находиться. Если понятно, что к чему относится, то проверка пройдена.
- Сделать прототип макета — прикинуть где на макете будут расположены блоки. Для этого нарисовать поля, представь текстовые блоки в виде прямоугольников и расположить на формате.
- Оформить макет — добавить картиночки, подобрать шрифты и всё вот это.
Приёмчики против унылой вёрстки
- Набрать крупно. Когда текст становится крупнее, то акцент с содержания смещается на форму букв, и картинка выглядит поинтереснее.
- Добавить контраст в тексте, картинках и пустом пространстве. Сделав вертикальные поля больше горизонтальных или наоборот, появиться динамика и создастся напряжение. Использовать картинки разного размера и/или формата (квадратные, круглые, прямоугольные)
- Разбить на колонки.
- Подать маленькими порциями, например: списком, колонками, таблицей, таймлайном. Элементы в кусочках задают ритм.
- Активизировать фон. Собрать текст в каком-то участке макета и дать макету больше пустоты.
- Размазать текст по макету и превратить в паттер. Сделать из букв картинку.
- Выйти в третье измерение. Разложить текст на разные слои друг на друга. Сделать очень крупно и очень мелко.
- Следовать принципам модульности.
- Следовать комбинаторики.
- Сверстать по форме.
Принцип модульности
- Макет делиться на модули без остатка. Формат делиться на модули, модули на блоки, блоки на колонки, колонки на абзацы, абзацы на слова, слова на буквы.
- Модули не пересекаются.
- Модульность — это не кирпичность.
- Закрыть границы другого модуля. Если у нас три колонки разной высоты, а за ним расположен ещё текст, то может создаться ложной впечатление, что к чему относиться. Чтобы такого не случилось, используй рамку, плашку или линейку.
- Взять в рамку или поставить на плашку. Рамки и плашки помогают сделать акцент и собрать элементы вместе. Плохо когда плашки и рамки одинаковые, потому что получиться кирпично.
- Закрепить углы. Раскидать элементы по углам, чтобы было свободнее располагать остальный элементы.
- Коснуться каждой из сторон.
- Собрать все элементы в центре.
Комбинаторика
Комбинаторика нужна, когда модули заполнены равномерно. Она помогает сделать макет живее.
- Заполнять модули не до конца, например: обтравить фотографию, оставить несколько модулей пустыми.
- Оформить элементы по разному. Например, использовать разный цвет, форму или шрифт.
- Заполнить модули разным содержанием, например на однообразной странице использовать стикеры товаров. Таким образом однообразная плитка разбавится и будет повеселее.
- Объединить модули.
- Выйти за границы модуля. Если страница чётко поделена на куски, то ради живости можно завести один элемент на другой. Например, расположить картинку над или под текстом.
- Добавьте новый слой.
- Соблюдать баланс порядка и хаоса. В хорошем макете главное структура, а разнообразие на втором месте.
Сверстать по форме
Способы сверстать по форме:
- Текст повторяет форму.
- Текст ссылается на форму. Это значит, что картинка в своём прямоугольнике, а текст в своём, например как в географических картах.
- Текст создаёт форму.
О сетке
Модульная сетка ≠ Модульности. Модульная сетка это не тоже самое, что модульность. Разница в том, что сетка не делит материал по смыслу, а лишь ровняет элементы относительно друг друга.
Сначала конструкция, потом сетка. Сначала расположите элементы на макете, а потом ровняйте по сетке. Если сразу ровнять по сетке, то высока вероятность потерять на этом много времени.
Оптическое выравнивание. Чтобы выровнять круглое с прямоугольным — заведи круглый элементы немного за сетку. Так будет казаться, что элементы стоят на одной линии. Этого же касается и других фигур c торчащими концами.
Композиционные связи. Классно, когда пятна текста повторяются с пятнами на фотографии.
Если же говорить о вёрстке книг предназначенных для непрерывного чтения, то серый прямоугольник — хорошо. Правильно, когда горизонтальный отступ абзаца в 1,5 раза больше кегля.
Когда в макете стоит акцент на каждом слове, то эти акценты пропадают и мы их не замечаем.
.

Простая и сложная вёрстка
Выключка по левому краю
При такой выключке правый край должен быть равномерно рваным. Если будет под одну линию, покажеться, что ошибка, так как остальной текст будет рваным. А если будет чересчур рваным, то будет некрасиво. Предлоги: а, в, и, к, о, с, у, я — перенеси на следующую строку, так как с визуальной точки зрения они отпадают от сроки и забирают внимание. А если говорить про устную речь, то в устной речи предлоги произносяться без паузы. А есть короткие слова: ли(ль), бы(б), же (ж) — их оставь с предыдущим словом.
Выключка по формату
При такой выключке следи за общим тоном полосы, не должно быть больших пробелов и сжатости. Плохо когда остаются висячие строки в начале и в конце полосы, и больше трёх переносов в подряд. В выключке по формату приемлимо оставлять висячие предлоги и союзы.
Трюки, которые помогут сверстать по формату:
— поменять места переноса;
— поиграть с трекингом
— изменить межсловные пробелы всего абзаца
— варьировать ширину символов ±2%
— поиграть с шириной фрейма
— отредактировать текст
Выключка по центру
Применяется когда текст короткий и количество строк не больше трёх. Форма пятна должна быть простой и не перетягивать на себя внимание. Переносы лучше не использовать.
Абзац
Варианты оформления абзацев:
- С абзацным отступом по классически. Хороший абзацный отступ в 1,5 раза больше кегля основного текста. Стоит следить, чтобы последняя строчка была в 1,5 раза больше абзацного отступа;
- С отбивокй между абзацами по швейцарски.
- Делать графические обозначения абзацев без отбивок и переносов строк при помощи значков.
Не стоит смешивать два типа абзацев в одном макете, так как получится неразбериха.
Заголовок
Главная задача заголовков — выделиться и показать структуру. В хороших заголовках считываются отличия. Отличия могут быть как в размерах, так и в начертаниях.
Способы расположения заголовка:
— на отдельной странице;
— со спуском;
— на иллюстрации;
— в отдельной колонке или на полях;
— с обороткой;
— скрытый в тексте, например графическим значком.
Таблицы
Задача таблиц — упростить поиск и сравнение данных. В таблице главное содержание, то есть размер и форму определяет содержание. Компактность это ключевое слово при вёрстке таблиц. Не стоит ради украшательства растягивать таблицу на весь формат.
Стоит стремиться к избавлению линеек в таблице, так как без них становиться чище и на первый план выходят данные. Практически в любой таблице можно обойтись без вертикальных линеек, так как текст сам задаёт вертикальную линию. Если верстать таблицу в вебе, то хорошо добавить элементы интерактивности, например, выделять строку при наведении.
Повторы слов в ячейках таблицы стоит выносить в заголовок, шапку, боковину, первую ячейку, примечание или в основной текст.
Выравнивание данных
— текста по левому краю,
— цифры по разряду с табличным стилем шрифта,
— диапазоны по разделителю.
Если не знаешь, что делать с таблицей, попробуй перевернуть.
Хорошо, когда расстояниями между колонками одинаковые.
Список
Плохо использовать булеты, так как за счёт большой массы они привлекают много внимания. Вместо булетов лучше использовать:
— тире со свешиванием или без,
— врезкой без тире.
Виды списков:
1) по сортировке: упорядоченные или неупорядоченные;
2) по маркировке: нумерованные или маркированные;
3) по структуре: одноуровневые или многоуровневые.
.

Иллюстрация
Форма
Если в фотографии есть белые области, которые объединяются с фоном, то стоит добавить рамку, линейку или уход в прозрачность, чтобы такой объект не привлекал лишнего внимания и смотрелся органично.
Кадрирование
Если картинка скучная, то поможет кадрирование: увеличить, сменить акценты, поменять формат. Не обрезай мелкие части тела человека, а то будет казаться, что у него нету какой-то конечности.
Направление
Направляй взгляд или разворот тела живого объекта в сторону содержания. Зритель в большинстве случаев смотрит туда же, куда смотрят на картинке. Плохой тон — зеркалить фотографию.
Контраст
Чтобы разнообразить макет с множеством картинок, создай контраст при помощи изменения размеров и/или формы (прямоугольные, квадратные, обтравленые фотографии иллюстрации).
Линейки, рамки, плашки
Плохо использовать линейки, рамки и плашки для спасения слабой вёрстки. Лучше переверстать.
Используй линейки и плашки, чтобы:
— расставить смысловые и композиционные акценты;
— поддержать конструкцию, если материал не складывается и картинки разные;
— передать стиль.
Сочетание шрифта и иллюстрации
Хорошо, когда штрихи иллюстрации совпадают со штрихами шрифта и прослеживается взаимосвязь. Между картинкой и иллюстрацией должно быть пластическое родство: характер линии, соединения штрихов, окончания штрихов, скругления овалов, форма засечек. Всё это, в основном, применимо в логотипах.

PS Если пойдёшь на курс к Игорю или другом — пиши конспект. Лучше дословно. В процессе кажется, что всё понятно и всё запоминается, а когда проходит пару дней, садишься писать и не можешь вспомнить, что же он там говорил. Многое пришлось вспоминать, многое не вспомнилось.