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