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

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

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

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

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

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

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

Хорошо

Вертикальная фотография занимает высоту двух горизонтальных и выделяется размером

Мы рас­смот­рели ком­по­новку доми­ни­ру­ю­щих и вспо­мо­га­тель­ных иллю­стра­ций вер­ти­каль­ных и гори­зон­таль­ных про­пор­ций. Все при­меры под­хо­дят и для квад­рат­ных картинок.

Назад к вертикалям. Лента «Майспейса»

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

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

Хорошо

Вертикальная фотография занимает высоту двух горизонтальных и выделяется размером

Мы рассмотрели компоновку доминирующих и вспомогательных иллюстраций вертикальных и горизонтальных пропорций. Все примеры подходят и для квадратных картинок.

Назад к вертикалям. Лента «Майспейса»

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

Тест

Какой форме текста соответствует схема направления чтения?

Одноколоночной
Двухколоночной
Трёхколоночной
Многоколоночной
Любой

На иллюстрации скриншот сайта «Известий». Какие проблемы вёрстки вы видите?

Нарушен принцип модульности
Ссылки и подписи соседних новостей в ленте стоят слишком близко друг к другу
«Левая подмышка» в ленте: иллюстрация отделяет заголовок от начала текста
Обтекание иллюстрации текстом справа в ленте

На иллюстрации скриншот «Коммерсанта». Какие проблемы вёрстки вы видите?

Иллюстрация отделяет заголовок от начала текста
Иллюстрация с рекламой в ленте слева разбивает новости
Иллюстрация сбоку от заголовка недопустима в правой ленте
Иллюстрация с сидениями разбивает статью пополам: читатель может подумать, что статья закончилась
Комментарии и статья разделены модулем других новостей и стоят далеко друг от друга

Какие варианты компоновки вам кажутся более удачными?

Выберите приемлемые варианты компоновки доминирующей и вспомогательной иллюстраций.

Ответьте на все вопросы теста,
чтобы узнать результат.
Результат
↺ Пересдать

Тест

Какой форме текста соответствует схема направления чтения?

Одноколоночной
Двухколоночной
Трёхколоночной
Многоколоночной
Любой

На иллюстрации скриншот сайта «Известий». Какие проблемы вёрстки вы видите?

Нарушен принцип модульности
Ссылки и подписи соседних новостей в ленте стоят слишком близко друг к другу
«Левая подмышка» в ленте: иллюстрация отделяет заголовок от начала текста
Обтекание иллюстрации текстом справа в ленте

На иллюстрации скриншот «Коммерсанта». Какие проблемы вёрстки вы видите?

Иллюстрация отделяет заголовок от начала текста
Иллюстрация с рекламой в ленте слева разбивает новости
Иллюстрация сбоку от заголовка недопустима в правой ленте
Иллюстрация с сидениями разбивает статью пополам: читатель может подумать, что статья закончилась
Комментарии и статья разделены модулем других новостей и стоят далеко друг от друга

Какие варианты компоновки вам кажутся более удачными?

Выберите приемлемые варианты компоновки доминирующей и вспомогательной иллюстраций.

Ответьте на все вопросы теста, чтобы узнать результат.
Результат
↺ Пересдать

4
Страницы

С модуль­ной сеткой

Без иллюстраций

С иллюстрациями

Тек­сто­вая страница

Глав­ная страница

Ушки, цитаты, фак­то­иды, врезки

4
Страницы

С модульной сеткой

Без иллюстраций

С иллюстрациями

Текстовая страница

Главная страница

Ушки, цитаты, фактоиды, врезки

С модульной сеткой

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

Без сетки

С модульной сеткой

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

Без сетки

Но стра­ница, для кото­рой преду­смот­рена сетка, как пра­вило, выгля­дит более цельной:

Сетка
с четырьмя колонками

Модуль­ная стра­ни­ца с четы­рёх­ко­ло­ноч­ной сеткой

Но страница, для которой предусмотрена сетка, как правило, выглядит более цельной:

Сетка с четырьмя колонками

Модуль­ная стра­ни­ца с четы­рёх­ко­ло­ноч­ной сеткой

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

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

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

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

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

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

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

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

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

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

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

  • bureau.ru

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

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

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

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

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

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

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

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

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

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

  • bureau.ru

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