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

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

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

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

 
между важными местами
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

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

В матрице из текстовых блоков направление чтения не так очевидно и предсказуемо.

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

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

Если «сломать» выравнивание, текст снова объединится в колонки.

В мат­рице из тек­сто­вых бло­ков направ­ле­ние чте­ния не так оче­видно и предсказуемо.

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

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

Если «сло­мать» вырав­ни­ва­ние, текст снова объ­еди­нится в колонки.

так себе

лучше

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

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

так себе

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

лучше

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

Положение иллюстрации относительно текста тоже задаёт направление.

Текстовый блок со сложной структурой недостаточно «упаковать» в прямоугольник, чтобы отделить от остальной страницы. Модуль не должен изнутри «раздираться» на части противоречивыми направлениями чтения.

Так себе

«Траектория» взгляда должна описывать простую линию без непредсказуемых поворотов.

Лучше

Поло­же­ние иллю­стра­ции отно­си­тельно тек­ста тоже задаёт направление.

Так себе

Так себе

Лучше

Тек­сто­вый блок со слож­ной струк­ту­рой недо­ста­точно «упа­ко­вать» в пря­мо­уголь­ник, чтобы отде­лить от осталь­ной стра­ницы. Модуль не дол­жен изнутри «раз­ди­раться» на части про­ти­во­ре­чи­выми направ­ле­ни­ями чтения.

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

Фрагмент сайта «БФМ»

Фрагмент сайта «БФМ»

Учебная работа стажёра

Учебная работа стажёра

В модульной вёрстке связанные элементы согласованы по ширине и высоте, и благодаря этому визуально объединяются в прямоугольный модуль.

Верно и обратное: случайное выравнивание создаёт новый псевдомодуль.

Новостной блок имеет вид шахматной доски: статьи справа подозрительно связались с крупной фотографией Кудрина, а заголовок заметки о нём — с авторской колонкой Дениса Самсонова.

На макете плаката подпись к верхней иллюстрации с процентами — «В России совершается 49% абортов» — выровнена по верху изображения рекламируемого презерватива, а слоган — по низу. Эти две надписи и изображение упаковки образуют модуль, и фраза об абортах увязывается с товаром. Как будто это презервативы во всём виноваты.

В модуль­ной вёрстке свя­зан­ные эле­менты согла­со­ваны по ширине и высоте, и бла­го­даря этому визу­ально объ­еди­ня­ются в пря­мо­уголь­ный модуль.

Верно и обрат­ное: слу­чай­ное вырав­ни­ва­ние создаёт новый псевдомодуль.

Новост­ной блок имеет вид шах­мат­ной доски: ста­тьи справа подо­зри­тельно свя­за­лись с круп­ной фото­гра­фией Куд­рина, а заго­ло­вок заметки о нём — с автор­ской колон­кой Дениса Самсонова.

На макете пла­ката под­пись к верх­ней иллю­стра­ции с про­цен­тами — «В Рос­сии совер­ша­ется 49% абор­тов» — выров­нена по верху изоб­ра­же­ния рекла­ми­ру­е­мого пре­зер­ва­тива, а сло­ган — по низу. Эти две над­писи и изоб­ра­же­ние упа­ковки обра­зуют модуль, и фраза об абор­тах увя­зы­ва­ется с това­ром. Как будто это пре­зер­ва­тивы во всём виноваты.

Фрагмент сайта «БФМ»

Фрагмент сайта «БФМ»

Учебная работа стажёра

Учебная работа стажёра

Модульная вёрстка — это деление на прямоугольники. Модули не должны пересекаться, наползать и перекрывать друг друга, если это не сознательный стилистический ход.

Макет меню содержит слишком много элементов и выглядит плохо. Элементы случайно выравниваются и зрительно объединяются в пересекающиеся псевдомодули.

Обратите внимание, как блок кнопки «Получить доступ» выравнивается сверху с надписями «Айфон» и «Андроид», а снизу — со строкой меню в левой части. В итоге две не связанные строки объединились в псевдомодуль, который пересекается с блоком новостей слева сверху.

Красноватым показаны области пересечения.

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

Правила модульной вёрстки

  • Модуль имеет форму прямоугольника или формирует его антипространством.

  • Внутренние элементы модуля согласованы по направлению чтения.

  • Выравнивание ширины, высоты и положения элементов создаёт новый модуль (или псевдомодуль).

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

  • Соседние модули не должны вводить читателя в заблуждение.

Модуль­ная вёрстка — это деле­ние на пря­мо­уголь­ники. Модули не должны пере­се­каться, напол­зать и пере­кры­вать друг друга, если это не созна­тель­ный сти­ли­сти­че­ский ход.

Макет меню содер­жит слиш­ком много эле­мен­тов и выгля­дит плохо. Эле­менты слу­чайно вырав­ни­ва­ются и зри­тельно объ­еди­ня­ются в пере­се­ка­ю­щи­еся псевдомодули.

Обра­тите вни­ма­ние, как блок кнопки «Полу­чить доступ» вырав­ни­ва­ется сверху с над­пи­сями «Айфон» и «Андроид», а снизу — со стро­кой меню в левой части. В итоге две не свя­зан­ные строки объ­еди­ни­лись в псев­до­мо­дуль, кото­рый пере­се­ка­ется с бло­ком ново­стей слева сверху.

Крас­но­ва­тым пока­заны обла­сти пересечения.

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

Пра­вила модуль­ной вёрстки

  • Модуль имеет форму пря­мо­уголь­ника или фор­ми­рует его антипространством.

  • Внут­рен­ние эле­менты модуля согла­со­ваны по направ­ле­нию чтения.

  • Вырав­ни­ва­ние ширины, высоты и поло­же­ния эле­мен­тов создаёт новый модуль (или псевдомодуль).

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

  • Сосед­ние модули не должны вво­дить чита­теля в заблуждение.

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

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

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

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

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

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

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

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

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

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

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

  • bureau.ru

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

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

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

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

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

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

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

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

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

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

  • bureau.ru

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