4 заметки с тегом

Дизайн

«Облик книги» Ян Чихольд

Высший принцип любой типографики — удобочитаемость. Удобочитаемость зависит от рисунка букв (шрифта), формата, полей, расстояниями между каждыми элементами.

В хорошей вёрстке книг нету индивидуальности. Только суперобложка может быть оформлена на вкус верстальщика. Суперобложка — отдельная обложка, надеваемая на переплёт или основную обложку.

Шрифт

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

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

Формат

Хороший формат опирается на продуманные пропорции: 2:3, 1,414, 3:4. Он подбирается в зависимости от цели издания. Маленькие книги должны быть узкими, чтобы было удобно держать в руке. Большие книги могут быть широкими, так как лежат на столе. Ширина книги определяется не только тем, чтобы её было удобно держать в руках, но и глубиной книжной полки. Книги шире 24 сантиметров неудобны.

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

Ширина книги определяется не только тем, чтобы её было удобно держать в руках, но и глубиной книжной полки. Книги шире 24 сантиметров неудобно хранить на полках.

Поля

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

Про симметричность. Человек внешне симметричен, но одна половина лица отличается от другой, часто даже сильно отличается, и это различие по меньшей мере делает лицо выразительным, а иногда именно эта неправильность делает его прекрасным. Морская галька радует нас больше, чем шар. Выразительность и жизнь — это движение. Неподвижная симметрия лишена напряжения и оставляет нас равнодушными. Красота требует нарушения идеальной симметрии. То, что не совсем симметрично, гораздо красивее безупречной симметрии.

Где курсив, где капитель

Курсив — это родственный антикве наклонный, обычно довольно узкий шрифт, который основан на скорописи, возникшей в эпоху гуманизма. Его функция в тексте — привлечь внимание читателя, поэтому он выделяется в строке (в основном благодаря наклону)

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

Капитель служит для выделения имён. Иногда имена набирают целиком прописными, но тогда они выделяют. К тому же если капитель сочетается с прописными, сразу становится ясно, что нужно писать прописными, а что строчными буквами. Имена и фамилии набираются прописными буквами с капителью. Составные термины, включающие имя собственное (например, «закон Ома», «рентгеновское излучение», «шекспироведение»), все же лучше набирать строчными.

Капитель всегда набирается с небольшой разрядкой; иначе ее трудно читать.

Бумага

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

Корешок

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

Интересные мысли

Типографика всем обязана традиции и конвенции. Слово traditio происходит от латинского trado («я переда») и означает «передача, вручение, предание, преподавание, учение». Слово «конвенция» происходит от convenio («я схожусь») и означает «соглашение, договор». Я употребляю это слово, как и производное от него слово «конвенционный», только в его первоначальном, а не в негативном смысле.

Инструмент конструктивной критики — знание.

Тот, кому требуется множество проб и усилий, — ещё ученик. Когда мы сами не знаем, чего хотим — дело плохо.

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

В строке должно быть от восьми до двенадцати слов, больше не нужно.

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

2018   вёрстка   Дизайн   Книги   типографика

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

Прошёл курс Игоря Штанга «Типографика и вёрстка». Мне понравилось. Было классно и интересно. Курс идёт 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 Если пойдёшь на курс к Игорю или другом — пиши конспект. Лучше дословно. В процессе кажется, что всё понятно и всё запоминается, а когда проходит пару дней, садишься писать и не можешь вспомнить, что же он там говорил. Многое пришлось вспоминать, многое не вспомнилось.

2018   вёрстка   Дизайн   курс   типографика
Ранее Ctrl + ↓