Артём Гор­бу­нов

Типографика и вёрстка

🔍 Начните печатать, чтобы искать по книге или перейти к нужной странице по номеру

Удобно листать не только прокруткой, но и клавишами‑стрелками:

 
между важными местами
Shift
между
разворотами

Моему деду — Валерию Горбунову, писателю, газетчику и остроумному человеку

Моему деду — Валерию Горбунову, писателю, газетчику и остроумному человеку

Артём Гор­бу­нов

Типографика и вёрстка

Изда­тель­ство Бюро Гор­бу­нова
2015
Артём Горбунов

Типографика и вёрстка

Издательство Бюро Горбунова
2015
удк 655.262
ббк 85.15
г67
Гор­бу­нов А. С.
г67
Типо­гра­фика и вёрстка. —
М.: Изд‑во Бюро Гор­бу­нова, 2015
ISBN 978‑5‑9907024‑0‑0

Пер­вая книга Изда­тель­ства Дизайн‑бюро Артёма Гор­бу­нова — прак­ти­че­ское руко­вод­ство по типо­гра­фике и вёрстке с акцен­том на маке­ти­ро­ва­нии для экрана. Учеб­ник пред­на­зна­чен для дизай­не­ров, редак­то­ров и разработчиков.

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

«Типо­гра­фика и вёрстка» после­до­ва­тельно отве­чает на вопрос как. Автор вво­дит прин­ципы модуль­но­сти и якор­ных объ­ек­тов, пра­вило внут­рен­него и внеш­него. Затем шаг за шагом наглядно объ­яс­няет, как добиться акку­рат­ной и плот­ной вёрстки сай­тов, сер­ви­сов и СМИ.

УДК 655.262
ББК 85.15
ISBN 978‑5‑9907024‑0‑0
© Изда­тель­ство
Бюро Гор­бу­нова, 2015

Оглавление

    Основы 4

    Базо­вые эле­менты 34

    Модули 74

    Стра­ницы 115

    Заклю­че­ние 155

удк 655.262
ббк 85.15
г67
г67
Горбунов А. С.
Типографика и вёрстка. —
М.: Изд‑во Бюро Горбунова, 2015
ISBN 978‑5‑9907024‑0‑0

Первая книга Издательства Дизайн‑бюро Артёма Горбунова — практическое руководство по типографике и вёрстке с акцентом на макетировании для экрана. Учебник предназначен для дизайнеров, редакторов и разработчиков.

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

«Типографика и вёрстка» последовательно отвечает на вопрос как. Автор вводит принципы модульности и якорных объектов, правило внутреннего и внешнего. Затем шаг за шагом наглядно объясняет, как добиться аккуратной и плотной вёрстки сайтов, сервисов и СМИ.

УДК 655.262
ББК 85.15
ISBN 978‑5‑9907024‑0‑0
© Издательство
Бюро Горбунова, 2015

Оглавление

    Основы 4

    Базовые элементы 34

    Модули 74

    Страницы 115

    Заключение 155

Скрыто 80 разворотов

Спецакции на сайте «КМ/Ч»

Сайт банка «Возрождение»

Ленте необязательно иметь вертикальную форму. Короткая лента может вытянуться в несколько колонок.

Или даже занять колонками горизонтальный «этаж» на странице.

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

В бумажных газетах с суперплотной модульной вёрсткой высота колонок идеально равна

Ленте необя­за­тельно иметь вер­ти­каль­ную форму. Корот­кая лента может вытя­нуться в несколько колонок.

Или даже занять колон­ками гори­зон­таль­ный «этаж» на странице.

В бумажных газетах с суперплотной модульной вёрсткой высота колонок идеально равна

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

Спецакции на сайте «КМ/Ч»

Сайт банка «Возрождение»

Рубрикатор в «Системе Главбух»

Би‑би‑си

Новости банка «Траст»

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

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

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

Рубрикатор в «Системе Главбух»

Би‑би‑си

Новости банка «Траст»

По мере услож­не­ния струк­туры лента может быть раз­бита подзаголовками.

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

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

хорошо

хуже

сомнительно

Текст с иллюстрациями

Иллюстрация лучше всего чувствует себя наверху вертикального текстового блока.

Иллюстрация под заголовком отделяет текст от заголовка и прерывает чтение. При этом иллюстрация заметнее раньше текста, и читателю придётся прыгать от неё взглядом вверх‑вниз к заголовку и тексту.

Иллюстрация внизу блока делает его тяжеловесным и «двухполярным» — ведь теперь у него два якорных объекта, которые тянут его в разные стороны: заголовок и иллюстрация. Это создаёт риск, что читатель свяжет картинку с другим блоком, следующим ниже. Такая конструкция может сработать в спокойном не перегруженном дизайне.

Текст с иллюстрациями

Иллю­стра­ция лучше всего чув­ствует себя наверху вер­ти­каль­ного тек­сто­вого блока.

Иллю­стра­ция под заго­лов­ком отде­ляет текст от заго­ловка и пре­ры­вает чте­ние. При этом иллю­стра­ция замет­нее раньше тек­ста, и чита­телю при­дётся пры­гать от неё взгля­дом вверх‑вниз к заго­ловку и тексту.

Иллю­стра­ция внизу блока делает его тяже­ло­вес­ным и «двух­по­ляр­ным» — ведь теперь у него два якор­ных объ­екта, кото­рые тянут его в раз­ные сто­роны: заго­ло­вок и иллю­стра­ция. Это создаёт риск, что чита­тель свя­жет кар­тинку с дру­гим бло­ком, сле­ду­ю­щим ниже. Такая кон­струк­ция может сра­бо­тать в спо­кой­ном не пере­гру­жен­ном дизайне.

хорошо

хуже

сомнительно

Иллюстрация

Заголовок

Текст

Cсылки

Я предлагаю дизайнерам запомнить каноническую конструкцию вертикального текстового модуля.

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

Иллюстрация

Заголовок

Текст

Cсылки

Я пред­ла­гаю дизай­не­рам запом­нить кано­ни­че­скую кон­струк­цию вер­ти­каль­ного тек­сто­вого модуля.

Она соот­вет­ствует есте­ствен­ному порядку чте­ния: заме­тили иллю­стра­цию, про­чи­тали заго­ло­вок, заин­те­ре­со­ва­лись тек­стом, решили, куда перейти по ссылкам.

Если тек­сто­вый блок содер­жит одну ссылку, для ком­пакт­но­сти её стоит объ­еди­нить с заго­лов­ком. Тогда иллю­стра­ция тоже должна стать «кли­ка­бель­ной» и рабо­тать вме­сте с тек­сто­вой ссыл­кой. По закону Фиттса это сде­лает блок гораздо удоб­нее для нажатия.

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

Если текстовый блок содержит одну ссылку, для компактности её стоит объединить с заголовком. Тогда иллюстрация тоже должна стать «кликабельной» и работать вместе с текстовой ссылкой. По закону Фиттса это сделает блок гораздо удобнее для нажатия.

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

Скрыто 86 разворотов

Гор­бу­нов Артём Сергеевич

Типо­гра­фика и вёрстка

  • Aвтор и арт‑дирек­тор Артём Горбунов

  • Дизай­нер Алек­сандр Кан

  • Фото­граф Вла­ди­мир Колпаков

  • Кал­ли­граф Анна Данилова

  • Мет­ран­паж и соав­тор тестов
    Сер­гей Фролов

  • Раз­ра­бот­чики Рустам Кул­ма­тов,
    Васи­лий Полов­нёв
    и Андрей Ерес

  • Книга набрана шриф­тами
    «Бюро­се­риф» и «Бюросанс»

  • Дизайн‑бюро Артёма Гор­бу­нова
    Большая Новодмитровская улица,
    дом 36, стро­е­ние 2
    Москва, Рос­сия, 127015

  • bureau.ru

Горбунов Артём Сергеевич

Типографика и вёрстка

  • Aвтор и арт‑директор Артём Горбунов

  • Дизайнер Александр Кан

  • Фотограф Владимир Колпаков

  • Каллиграф Анна Данилова

  • Метранпаж и соавтор тестов
    Сергей Фролов

  • Разработчики Рустам Кулматов,
    Василий Половнёв
    и Андрей Ерес

  • Книга набрана шрифтами
    «Бюросериф» и «Бюросанс»

  • Дизайн‑бюро Артёма Горбунова
    Большая Новодмитровская улица,
    дом 36, строение 2
    Москва, Россия, 127015

  • bureau.ru

Закладки
Добавьте закладки
Ничего не нашлось