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