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

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

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

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

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

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

Сайты и экран­ные интер­фейсы состоят из раз­но­ка­ли­бер­ных эле­мен­тов: нави­га­ци­он­ных шапок, меню, кно­пок, ико­нок, пане­лей инстру­мен­тов, лент ново­стей, тизе­ров, форм ввода, видже­тов и пла­шек. Тек­сты выво­дятся из базы дан­ных и имеют непред­ска­зу­е­мую длину. Попытки впих­нуть совре­мен­ное экран­ное изда­ние в квад­ратно‑гнез­до­вую систему швей­цар­ских модуль­ных сеток выгля­дят натужно и фор­мально, как на сайте «Модуль­ная система».

Акку­ратно орга­ни­зо­вать инфор­ма­цию помо­гает гиб­кая модуль­ная вёрстка. Прин­цип: макет дол­жен быть «наре­зан» на акку­рат­ные непе­ре­се­ка­ю­щи­еся пря­мо­уголь­ные модули. Напри­мер, как на обложке элек­трон­ного жур­нала «Главбух».

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

Модульная вёрстка — это деление
прямоугольников

Версия дизайна сайта «Модульная система».
Элементы не попадают в ячейки сетки

Обложка электронного журнала «Главбух»

Версия дизайна сайта «Модульная система».
Элементы не попадают в ячейки сетки

Обложка электронного журнала «Главбух»

Сайты и экранные интерфейсы состоят из разнокалиберных элементов: навигационных шапок, меню, кнопок, иконок, панелей инструментов, лент новостей, тизеров, форм ввода, виджетов и плашек. Тексты выводятся из базы данных и имеют непредсказуемую длину. Попытки впихнуть современное экранное издание в квадратно‑гнездовую систему швейцарских модульных сеток выглядят натужно и формально, как на сайте «Модульная система».

Аккуратно организовать информацию помогает гибкая модульная вёрстка. Принцип: макет должен быть «нарезан» на аккуратные непересекающиеся прямоугольные модули. Например, как на обложке электронного журнала «Главбух».

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

Модульная вёрстка — это деление прямоугольников

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

Правило якорных объектов

Якорные объекты — это самые заметные объекты на странице: иллюстрации, заголовки, фактоиды, логотипы и пиктограммы. Простой абзац наборного текста тоже выступает якорным объектом, если он окружён пустотой, или контрпространством.

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

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

Правило якорных объектов

Якор­ные объ­екты — это самые замет­ные объ­екты на стра­нице: иллю­стра­ции, заго­ловки, фак­то­иды, лого­типы и пик­то­граммы. Про­стой абзац набор­ного тек­ста тоже высту­пает якор­ным объ­ек­том, если он окру­жён пусто­той, или контрпространством.

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

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

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

Якорные объекты тяготеют к одному из углов или к визуальному центру своего прямоугольника

Привязка якорных объектов очевидна, если с противоположных сторон есть «воздух»

Обратите внимание, как угловой привязке крупной галочки мешает её собственная форма

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

Общая конструкция сохранится, если соблюдать принцип модульности

Макет развалился

Заголовок и иконка стали менее контрастными, а галочка и адрес — якорными объектами

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

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

По моим наблюдениям, самая частая ошибка новичка — забыть «воздух».

У правого края флагового набора всегда должно быть дополнительное свободное пространство. Тогда «флаг» выглядит флагом — как положено.

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

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

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

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

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

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

По моим наблю­де­ниям, самая частая ошибка новичка — забыть «воздух».

У пра­вого края фла­го­вого набора все­гда должно быть допол­ни­тель­ное сво­бод­ное про­стран­ство. Тогда «флаг» выгля­дит фла­гом — как положено.

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

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

Но якор­ные объ­екты все­гда выпры­ги­вают из вёрстки. Если у них не будет точки при­вязки, макет развалится.

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

Якорные объекты тяготеют к одному из углов или к визуальному центру своего прямоугольника

Привязка якорных объектов очевидна, если с противоположных сторон есть «воздух»

Обратите внимание, как угловой привязке крупной галочки мешает её собственная форма

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

Общая конструкция сохранится, если соблюдать принцип модульности

Макет развалился

Заголовок и иконка стали менее контрастными, а галочка и адрес — якорными объектами

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

Такая при­вязка выгля­дит спокойно.

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

Такая привязка выглядит спокойно.

Хоро­шая вёрстка исполь­зует силу углов и сто­рон фор­мата. На обрат­ной сто­роне коро­бок кар­три­джей Т2 якор­ные объ­екты акти­ви­руют верх­ние углы и ниж­нюю сторону:

Т2

Якор­ные объ­екты обра­зуют иерар­хию: пер­выми заме­чают иллю­стра­ции и любые кар­тинки, затем круп­ные заго­ловки, далее лого­типы, знаки и цифры. Набор­ный текст — самый ней­траль­ный. В каче­стве упраж­не­ния пред­ла­гаю чита­те­лям само­сто­я­тельно разо­брать прин­цип якор­ных объ­ек­тов на этих примерах.

Хорошая вёрстка использует силу углов и сторон формата. На обратной стороне коробок картриджей Т2 якорные объекты активируют верхние углы и нижнюю сторону:

Т2

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

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

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

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

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

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

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

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

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

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

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

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

  • bureau.ru

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

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

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

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

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

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

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

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

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

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

  • bureau.ru

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