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