🔍 Начните печатать, чтобы искать по книге или перейти к нужной странице по номеру
Удобно листать не только прокруткой, но и клавишами‑стрелками:
Первая книга Издательства Дизайн‑бюро Артёма Горбунова — практическое руководство по типографике и вёрстке с акцентом на макетировании для экрана. Учебник предназначен для дизайнеров, редакторов и разработчиков.
К сожалению, из многочисленных книг о типографике и модульных сетках остаётся непонятно, как именно собрать выразительный макет с прочной конструкцией. В лучшем случае дизайнеру остаётся выуживать крупицы смысла и копировать удачные примеры.
«Типографика и вёрстка» последовательно отвечает на вопрос как. Автор вводит принципы модульности и якорных объектов, правило внутреннего и внешнего. Затем шаг за шагом наглядно объясняет, как добиться аккуратной и плотной вёрстки сайтов, сервисов и СМИ.
Основы 4
Базовые элементы 34
Модули 74
Страницы 115
Заключение 155
Первая книга Издательства Дизайн‑бюро Артёма Горбунова — практическое руководство по типографике и вёрстке с акцентом на макетировании для экрана. Учебник предназначен для дизайнеров, редакторов и разработчиков.
К сожалению, из многочисленных книг о типографике и модульных сетках остаётся непонятно, как именно собрать выразительный макет с прочной конструкцией. В лучшем случае дизайнеру остаётся выуживать крупицы смысла и копировать удачные примеры.
«Типографика и вёрстка» последовательно отвечает на вопрос как. Автор вводит принципы модульности и якорных объектов, правило внутреннего и внешнего. Затем шаг за шагом наглядно объясняет, как добиться аккуратной и плотной вёрстки сайтов, сервисов и СМИ.
Основы 4
Базовые элементы 34
Модули 74
Страницы 115
Заключение 155
Сайты и экранные интерфейсы состоят из разнокалиберных элементов: навигационных шапок, меню, кнопок, иконок, панелей инструментов, лент новостей, тизеров, форм ввода, виджетов и плашек. Тексты выводятся из базы данных и имеют непредсказуемую длину. Попытки впихнуть современное экранное издание в квадратно‑гнездовую систему швейцарских модульных сеток выглядят натужно и формально, как на сайте «Модульная система».
Аккуратно организовать информацию помогает гибкая модульная вёрстка. Принцип: макет должен быть «нарезан» на аккуратные непересекающиеся прямоугольные модули. Например, как на обложке электронного журнала «Главбух».
Модули не должны пересекаться и налезать друг на друга. Они должны иметь прямоугольную форму, согласовываться друг с другом по ширине и высоте и составлять вместе общий прямоугольник страницы или экрана. Необязательно полностью заполнять модули информацией — главное, чтобы прямоугольники читались. В вёрстке полноправно участвует пустота, или контрпространство, которое также должно иметь простую прямоугольную форму. Элементы вёрстки в модулях должны следовать правилу якорных объектов.
Модульная вёрстка — это деление
прямоугольников
Версия дизайна сайта «Модульная система».
Элементы не попадают в ячейки сетки
Обложка электронного журнала «Главбух»
Версия дизайна сайта «Модульная система».
Элементы не попадают в ячейки сетки
Обложка электронного журнала «Главбух»
Сайты и экранные интерфейсы состоят из разнокалиберных элементов: навигационных шапок, меню, кнопок, иконок, панелей инструментов, лент новостей, тизеров, форм ввода, виджетов и плашек. Тексты выводятся из базы данных и имеют непредсказуемую длину. Попытки впихнуть современное экранное издание в квадратно‑гнездовую систему швейцарских модульных сеток выглядят натужно и формально, как на сайте «Модульная система».
Аккуратно организовать информацию помогает гибкая модульная вёрстка. Принцип: макет должен быть «нарезан» на аккуратные непересекающиеся прямоугольные модули. Например, как на обложке электронного журнала «Главбух».
Модули не должны пересекаться и налезать друг на друга. Они должны иметь прямоугольную форму, согласовываться друг с другом по ширине и высоте и составлять вместе общий прямоугольник страницы или экрана. Необязательно полностью заполнять модули информацией — главное, чтобы прямоугольники читались. В вёрстке полноправно участвует пустота, или контрпространство, которое также должно иметь простую прямоугольную форму. Элементы вёрстки в модулях должны следовать правилу якорных объектов.
Модульная вёрстка — это деление прямоугольников
Визуальный центр выше геометрического для подсознательной компенсации гравитации
Якорные объекты — это самые заметные объекты на странице: иллюстрации, заголовки, фактоиды, логотипы и пиктограммы. Простой абзац наборного текста тоже выступает якорным объектом, если он окружён пустотой, или контрпространством.
Прямоугольник — базовая фигура модульной вёрстки. Все модули макета должны иметь прямоугольную форму и составлять вместе общий прямоугольник страницы или экрана, которым они ограничены.
Правило гласит, что любой якорный объект должен тяготеть или располагаться в одном из углов или в визуальном центре своего прямоугольника.
Якорные объекты — это самые заметные объекты на странице: иллюстрации, заголовки, фактоиды, логотипы и пиктограммы. Простой абзац наборного текста тоже выступает якорным объектом, если он окружён пустотой, или контрпространством.
Прямоугольник — базовая фигура модульной вёрстки. Все модули макета должны иметь прямоугольную форму и составлять вместе общий прямоугольник страницы или экрана, которым они ограничены.
Правило гласит, что любой якорный объект должен тяготеть или располагаться в одном из углов или в визуальном центре своего прямоугольника.
Визуальный центр выше геометрического для подсознательной компенсации гравитации
Якорные объекты тяготеют к одному из углов или к визуальному центру своего прямоугольника
Привязка якорных объектов очевидна, если с противоположных сторон есть «воздух»
Обратите внимание, как угловой привязке крупной галочки мешает её собственная форма
Второстепенные объекты модуля пристраиваются к якорным и сдвигают их из точек привязки
Общая конструкция сохранится, если соблюдать принцип модульности
Макет развалился
Заголовок и иконка стали менее контрастными, а галочка и адрес — якорными объектами
Каждый из показанных здесь прямоугольников годится.
Принцип требует, чтобы привязка к силовой точке была очевидной. Для этого с противоположных сторон от якорного объекта должны быть «воздух» контрпространства либо менее плотные и заметные объекты.
По моим наблюдениям, самая частая ошибка новичка — забыть «воздух».
У правого края флагового набора всегда должно быть дополнительное свободное пространство. Тогда «флаг» выглядит флагом — как положено.
В жизни редко приходится верстать страницу из одного объекта. Второстепенные объекты модуля пристраиваются к якорным и иногда даже слегка сдвигают их из точек привязки.
Объекты нанизываются друг на друга, как бусы. Общая конструкция сохранится, если соблюдать принцип модульности, то есть выравнивать объекты друг с другом по ширине и высоте и сохранять прямоугольную форму модулей.
Но якорные объекты всегда выпрыгивают из вёрстки. Если у них не будет точки привязки, макет развалится.
Объект может неожиданно стать якорным, то есть более заметным, не только при увеличении размеров, но и при смене цвета.
Каждый из показанных здесь прямоугольников годится.
Принцип требует, чтобы привязка к силовой точке была очевидной. Для этого с противоположных сторон от якорного объекта должны быть «воздух» контрпространства либо менее плотные и заметные объекты.
По моим наблюдениям, самая частая ошибка новичка — забыть «воздух».
У правого края флагового набора всегда должно быть дополнительное свободное пространство. Тогда «флаг» выглядит флагом — как положено.
В жизни редко приходится верстать страницу из одного объекта. Второстепенные объекты модуля пристраиваются к якорным и иногда даже слегка сдвигают их из точек привязки.
Объекты нанизываются друг на друга, как бусы. Общая конструкция сохранится, если соблюдать принцип модульности, то есть выравнивать объекты друг с другом по ширине и высоте и сохранять прямоугольную форму модулей.
Но якорные объекты всегда выпрыгивают из вёрстки. Если у них не будет точки привязки, макет развалится.
Объект может неожиданно стать якорным, то есть более заметным, не только при увеличении размеров, но и при смене цвета.
Якорные объекты тяготеют к одному из углов или к визуальному центру своего прямоугольника
Привязка якорных объектов очевидна, если с противоположных сторон есть «воздух»
Обратите внимание, как угловой привязке крупной галочки мешает её собственная форма
Второстепенные объекты модуля пристраиваются к якорным и сдвигают их из точек привязки
Общая конструкция сохранится, если соблюдать принцип модульности
Макет развалился
Заголовок и иконка стали менее контрастными, а галочка и адрес — якорными объектами
Якорный объект может быть привязан не к точке, а к одной из сторон прямоугольника.
Такая привязка выглядит спокойно.
Якорный объект может быть привязан не к точке, а к одной из сторон прямоугольника.
Такая привязка выглядит спокойно.
Хорошая вёрстка использует силу углов и сторон формата. На обратной стороне коробок картриджей Т2 якорные объекты активируют верхние углы и нижнюю сторону:
Якорные объекты образуют иерархию: первыми замечают иллюстрации и любые картинки, затем крупные заголовки, далее логотипы, знаки и цифры. Наборный текст — самый нейтральный. В качестве упражнения предлагаю читателям самостоятельно разобрать принцип якорных объектов на этих примерах.
Хорошая вёрстка использует силу углов и сторон формата. На обратной стороне коробок картриджей Т2 якорные объекты активируют верхние углы и нижнюю сторону:
Якорные объекты образуют иерархию: первыми замечают иллюстрации и любые картинки, затем крупные заголовки, далее логотипы, знаки и цифры. Наборный текст — самый нейтральный. В качестве упражнения предлагаю читателям самостоятельно разобрать принцип якорных объектов на этих примерах.
Горбунов Артём Сергеевич
Типографика и вёрстка
Aвтор и арт‑директор Артём Горбунов
Дизайнер Александр Кан
Фотограф Владимир Колпаков
Каллиграф Анна Данилова
Метранпаж и соавтор тестов
Сергей Фролов
Разработчики Рустам Кулматов,
Василий Половнёв
и Андрей Ерес
Книга набрана шрифтами
«Бюросериф» и «Бюросанс»
Дизайн‑бюро Артёма Горбунова
дом 36, строение 2
Москва, Россия, 127015
Горбунов Артём Сергеевич
Типографика и вёрстка
Aвтор и арт‑директор Артём Горбунов
Дизайнер Александр Кан
Фотограф Владимир Колпаков
Каллиграф Анна Данилова
Метранпаж и соавтор тестов
Сергей Фролов
Разработчики Рустам Кулматов,
Василий Половнёв
и Андрей Ерес
Книга набрана шрифтами
«Бюросериф» и «Бюросанс»
Дизайн‑бюро Артёма Горбунова
дом 36, строение 2
Москва, Россия, 127015