Прошёл курс Игоря Штанга «Типографика и вёрстка». Мне понравилось. Было классно и интересно. Курс идёт 3 дня с 11:00 до 19:00. Кажется, что это мало, но информации столько, что нужно время, чтобы её переварить. Чтобы было понятно о чём вообще курс, вот два определения:

1. Типографика — искусство оформления при помощи наборного текста.
2. Вёрстка — расположение составных элементов (набранного текста, заголовков, таблиц, иллюстраций, украшений и пр.) на формате.

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

На курсе Игорь рассказывает о классическом и швейцарском стиле. Полезно видеть, с чего начиналась и как развивалась типографика. По ходу курса я делал заметки, которые можно использовать в работе.

Этапы вёрстки макета

1. Прочитать текст, чтобы понимать о чём идёт речь.
2. Структурировать текст — разбить на абзацы и добавить заголовки. Чтобы проверить структурированный текст или нет, посмотри не читая, где что находиться. Если понятно, что к чему относится, то проверка пройдена.
3. Сделать прототип макета — прикинуть где на макете будут расположены блоки. Для этого нарисовать поля, представь текстовые блоки в виде прямоугольников и расположить на формате.
4. Оформить макет — добавить картиночки, подобрать шрифты и всё вот это.

Приёмчики против унылой вёрстки

1. Набрать крупно. Когда текст становится крупнее, то акцент с содержания смещается на форму букв, и картинка выглядит поинтереснее.
2. Добавить контраст в тексте, картинках и пустом пространстве. Сделав вертикальные поля больше горизонтальных или наоборот, появиться динамика и создастся напряжение. Использовать картинки разного размера и/или формата (квадратные, круглые, прямоугольные)
3. Разбить на колонки.
4. Подать маленькими порциями, например: списком, колонками, таблицей, таймлайном. Элементы в кусочках задают ритм.
5. Активизировать фон. Собрать текст в каком-то участке макета и дать макету больше пустоты.
6. Размазать текст по макету и превратить в паттер. Сделать из букв картинку.
7. Выйти в третье измерение. Разложить текст на разные слои друг на друга. Сделать очень крупно и очень мелко.
8. Следовать принципам модульности.
9. Следовать комбинаторики.
10. Сверстать по форме.

Принцип модульности

1. Макет делиться на модули без остатка. Формат делиться на модули, модули на блоки, блоки на колонки, колонки на абзацы, абзацы на слова, слова на буквы.
2. Модули не пересекаются.
3. Модульность — это не кирпичность.
4. Закрыть границы другого модуля. Если у нас три колонки разной высоты, а за ним расположен ещё текст, то может создаться ложной впечатление, что к чему относиться. Чтобы такого не случилось, используй рамку, плашку или линейку.
5. Взять в рамку или поставить на плашку. Рамки и плашки помогают сделать акцент и собрать элементы вместе. Плохо когда плашки и рамки одинаковые, потому что получиться кирпично.
6. Закрепить углы. Раскидать элементы по углам, чтобы было свободнее располагать остальный элементы.
7. Коснуться каждой из сторон.
8. Собрать все элементы в центре.

Комбинаторика

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

1. Заполнять модули не до конца, например: обтравить фотографию, оставить несколько модулей пустыми.
2. Оформить элементы по разному. Например, использовать разный цвет, форму или шрифт.
3. Заполнить модули разным содержанием, например на однообразной странице использовать стикеры товаров. Таким образом однообразная плитка разбавится и будет повеселее.
4. Объединить модули.
5. Выйти за границы модуля. Если страница чётко поделена на куски, то ради живости можно завести один элемент на другой. Например, расположить картинку над или под текстом.
6. Добавьте новый слой.
7. Соблюдать баланс порядка и хаоса. В хорошем макете главное структура, а разнообразие на втором месте.

Сверстать по форме

Способы сверстать по форме:

1. Текст повторяет форму.
2. Текст ссылается на форму. Это значит, что картинка в своём прямоугольнике, а текст в своём, например как в географических картах.
3. Текст создаёт форму.

О сетке

Модульная сетка ≠ Модульности. Модульная сетка это не тоже самое, что модульность. Разница в том, что сетка не делит материал по смыслу, а лишь ровняет элементы относительно друг друга.

Сначала конструкция, потом сетка. Сначала расположите элементы на макете, а потом ровняйте по сетке. Если сразу ровнять по сетке, то высока вероятность потерять на этом много времени.

Оптическое выравнивание. Чтобы выровнять круглое с прямоугольным — заведи круглый элементы немного за сетку. Так будет казаться, что элементы стоят на одной линии. Этого же касается и других фигур c торчащими концами.

Композиционные связи. Классно, когда пятна текста повторяются с пятнами на фотографии.

Если же говорить о вёрстке книг предназначенных для непрерывного чтения, то серый прямоугольник — хорошо. Правильно, когда горизонтальный отступ абзаца в 1,5 раза больше кегля.

Когда в макете стоит акцент на каждом слове, то эти акценты пропадают и мы их не замечаем.

.

.

Простая и сложная вёрстка

Выключка по левому краю

При такой выключке правый край должен быть равномерно рваным. Если будет под одну линию, покажеться, что ошибка, так как остальной текст будет рваным. А если будет чересчур рваным, то будет некрасиво. Предлоги: а, в, и, к, о, с, у, я — перенеси на следующую строку, так как с визуальной точки зрения они отпадают от сроки и забирают внимание. А если говорить про устную речь, то в устной речи предлоги произносяться без паузы. А есть короткие слова: ли(ль), бы(б), же (ж) — их оставь с предыдущим словом.

Выключка по формату

При такой выключке следи за общим тоном полосы, не должно быть больших пробелов и сжатости. Плохо когда остаются висячие строки в начале и в конце полосы, и больше трёх переносов в подряд. В выключке по формату приемлимо оставлять висячие предлоги и союзы.
Трюки, которые помогут сверстать по формату:
— поменять места переноса;
— поиграть с трекингом
— изменить межсловные пробелы всего абзаца
— варьировать ширину символов ±2%
— поиграть с шириной фрейма
— отредактировать текст

Выключка по центру

Применяется когда текст короткий и количество строк не больше трёх. Форма пятна должна быть простой и не перетягивать на себя внимание. Переносы лучше не использовать.

Абзац

Варианты оформления абзацев:

1. С абзацным отступом по классически. Хороший абзацный отступ в 1,5 раза больше кегля основного текста. Стоит следить, чтобы последняя строчка была в 1,5 раза больше абзацного отступа;
2. С отбивокй между абзацами по швейцарски.
3. Делать графические обозначения абзацев без отбивок и переносов строк при помощи значков.

Не стоит смешивать два типа абзацев в одном макете, так как получится неразбериха.

Заголовок

Главная задача заголовков — выделиться и показать структуру. В хороших заголовках считываются отличия. Отличия могут быть как в размерах, так и в начертаниях.
Способы расположения заголовка:
— на отдельной странице;
— со спуском;
— на иллюстрации;
— в отдельной колонке или на полях;
— с обороткой;
— скрытый в тексте, например графическим значком.

Таблицы

Задача таблиц — упростить поиск и сравнение данных. В таблице главное содержание, то есть размер и форму определяет содержание. Компактность это ключевое слово при вёрстке таблиц. Не стоит ради украшательства растягивать таблицу на весь формат.

Стоит стремиться к избавлению линеек в таблице, так как без них становиться чище и на первый план выходят данные. Практически в любой таблице можно обойтись без вертикальных линеек, так как текст сам задаёт вертикальную линию. Если верстать таблицу в вебе, то хорошо добавить элементы интерактивности, например, выделять строку при наведении.

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

Выравнивание данных

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

Если не знаешь, что делать с таблицей, попробуй перевернуть.

Хорошо, когда расстояниями между колонками одинаковые.

Список

Плохо использовать булеты, так как за счёт большой массы они привлекают много внимания. Вместо булетов лучше использовать:
— тире со свешиванием или без,
— врезкой без тире.

Виды списков:
1) по сортировке: упорядоченные или неупорядоченные;
2) по маркировке: нумерованные или маркированные;
3) по структуре: одноуровневые или многоуровневые.

.

Игорь показывает удачные пропорции сторон формата. Это может быть как книга, фотография, иллюстрация.

Иллюстрация

Форма

Если в фотографии есть белые области, которые объединяются с фоном, то стоит добавить рамку, линейку или уход в прозрачность, чтобы такой объект не привлекал лишнего внимания и смотрелся органично.

Кадрирование

Если картинка скучная, то поможет кадрирование: увеличить, сменить акценты, поменять формат. Не обрезай мелкие части тела человека, а то будет казаться, что у него нету какой-то конечности.

Направление

Направляй взгляд или разворот тела живого объекта в сторону содержания. Зритель в большинстве случаев смотрит туда же, куда смотрят на картинке. Плохой тон — зеркалить фотографию.

Контраст

Чтобы разнообразить макет с множеством картинок, создай контраст при помощи изменения размеров и/или формы (прямоугольные, квадратные, обтравленые фотографии иллюстрации).

Линейки, рамки, плашки

Плохо использовать линейки, рамки и плашки для спасения слабой вёрстки. Лучше переверстать.

Используй линейки и плашки, чтобы:
— расставить смысловые и композиционные акценты;
— поддержать конструкцию, если материал не складывается и картинки разные;
— передать стиль.

Сочетание шрифта и иллюстрации

Хорошо, когда штрихи иллюстрации совпадают со штрихами шрифта и прослеживается взаимосвязь. Между картинкой и иллюстрацией должно быть пластическое родство: характер линии, соединения штрихов, окончания штрихов, скругления овалов, форма засечек. Всё это, в основном, применимо в логотипах.

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