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

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

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

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

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

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

Модули информационных сайтов обычно плотно упакованы без просветов. А миниформаты, наоборот, содержат много воздуха и дают «дышать» макету.

Авторская коллекция клише — часто употребимых шаблонов модулей, характерных для швейцарского стиля.
Многие из шаблонов работают и в зеркальном отражении

Неслучайно лаконичный и аккуратный швейцарский стиль хорошо смотрится в шапках, меню, подвалах и врезках. Во‑первых, особо больше негде развернуться.

Во‑вторых, эти элементы задают стиль сайту или электронному изданию.

Красиво организовать пространство миниформатов помогает правило якорных объектов.

Модули инфор­ма­ци­он­ных сай­тов обычно плотно упа­ко­ваны без про­све­тов. А мини­фор­маты, нао­бо­рот, содер­жат много воз­духа и дают «дышать» макету.

Авторская коллекция клише — часто употребимых шаблонов модулей, характерных для швейцарского стиля.
Многие из шаблонов работают и в зеркальном отражении

Неслу­чайно лако­нич­ный и акку­рат­ный швей­цар­ский стиль хорошо смот­рится в шап­ках, меню, под­ва­лах и врез­ках. Во‑пер­вых, особо больше негде развернуться.

Во‑вто­рых, эти эле­менты задают стиль сайту или элек­трон­ному изданию.

Кра­сиво орга­ни­зо­вать про­стран­ство мини­фор­ма­тов помо­гает пра­вило якор­ных объектов.

Авторская коллекция клише — часто употребимых шаблонов модулей, характерных для швейцарского стиля.
Многие из шаблонов работают и в зеркальном отражении

Тест

Определите по макету возможное число колонок в сетке. Макеты на иллюстрациях ко всем вопросам строго соблюдают модульную сетку и занимают целое число колонок.

Три
Четыре
Пять
Семь
Восемь
Десять

Определите по макету возможное число колонок в сетке.

Три
Четыре
Пять
Шесть
Восемь
Девять

Определите по макету возможное число колонок в сетке.

Три
Четыре
Пять
Шесть
Восемь
Десять

Определите по макету возможное число колонок в сетке.

Три
Четыре
Пять
Шесть
Восемь
Десять
Тринадцать

Определите по макету возможное число колонок в сетке.

Три
Четыре
Пять
Шесть
Семь
Восемь

Определите по макету возможное число колонок в сетке.

Три
Четыре
Пять
Шесть
Восемь
Десять

Выберите приемлемые варианты компоновки страницы без иллюстраций.

Выберите приемлемые варианты компоновки страницы c иллюстрациями.

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

Стена
Фоторама
Мозаика
Плитка
Рубрикатор
Классификатор
Лента
Фотолента

На иллюстрации скриншот страницы «Вашингтон Пост». Какую структуру она имеет?

Лента
Плитка
Рубрикатор
Фоторама
Классификатор

На иллюстрации скриншот главной страницы «Вольво». Какую структуру она имеет?

Лента
Плитка
Рубрикатор
Фоторама
Фотогалерея

Как вы оцениваете информативность листалки на этой же странице?

Высокая
Низкая

На иллюстрации скриншот страницы «Мир» на сайте Ильи Бирмана. Какую структуру она имеет?

Лента
Плитка
Рубрикатор
Фоторама
Фотогалерея
Ответьте на все вопросы теста,
чтобы узнать результат.
Результат
↺ Пересдать

Тест

Определите по макету возможное число колонок в сетке. Макеты на иллюстрациях ко всем вопросам строго соблюдают модульную сетку и занимают целое число колонок.

Три
Четыре
Пять
Семь
Восемь
Десять

Определите по макету возможное число колонок в сетке.

Три
Четыре
Пять
Шесть
Восемь
Девять

Определите по макету возможное число колонок в сетке.

Три
Четыре
Пять
Шесть
Восемь
Десять

Определите по макету возможное число колонок в сетке.

Три
Четыре
Пять
Шесть
Восемь
Десять
Тринадцать

Определите по макету возможное число колонок в сетке.

Три
Четыре
Пять
Шесть
Семь
Восемь

Определите по макету возможное число колонок в сетке.

Три
Четыре
Пять
Шесть
Восемь
Десять

Выберите приемлемые варианты компоновки страницы без иллюстраций.

Выберите приемлемые варианты компоновки страницы c иллюстрациями.

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

Стена
Фоторама
Мозаика
Плитка
Рубрикатор
Классификатор
Лента
Фотолента

На иллюстрации скриншот страницы «Вашингтон Пост». Какую структуру она имеет?

Лента
Плитка
Рубрикатор
Фоторама
Классификатор

На иллюстрации скриншот главной страницы «Вольво». Какую структуру она имеет?

Лента
Плитка
Рубрикатор
Фоторама
Фотогалерея

Как вы оцениваете информативность листалки на этой же странице?

Высокая
Низкая

На иллюстрации скриншот страницы «Мир» на сайте Ильи Бирмана. Какую структуру она имеет?

Лента
Плитка
Рубрикатор
Фоторама
Фотогалерея
Ответьте на все вопросы теста,
чтобы узнать результат.
Результат
↺ Пересдать

5
Заключение

Выход из прямоугольника

Куль­тур­ные традиции

Выход из прямоугольника

Преды­ду­щие главы посвя­щены модуль­ной вёрстке. Это была песнь во хвалу пря­мо­уголь­ни­кам — бла­го­даря им мы орга­ни­зуем, ком­по­нуем, пере­даём, рас­про­стра­няем, доно­сим, вос­при­ни­маем, упо­треб­ляем и пере­ва­ри­ваем информацию.

Но пря­мо­уголь­ник — изоб­ре­те­ние чело­века. Инфор­ма­ция о мире, кото­рую мы пере­даём с помо­щью плос­ких пря­мо­уголь­ни­ков, объ­ёмна и многомерна.

5
Заключение

Выход из прямоугольника

Культурные традиции

Выход из прямоугольника

Предыдущие главы посвящены модульной вёрстке. Это была песнь во хвалу прямоугольникам — благодаря им мы организуем, компонуем, передаём, распространяем, доносим, воспринимаем, употребляем и перевариваем информацию.

Но прямоугольник — изобретение человека. Информация о мире, которую мы передаём с помощью плоских прямоугольников, объёмна и многомерна.

С раз­ви­тием зна­ний о мире люди учи­лись пред­став­лять его в пря­мо­уголь­нике и одно­вре­менно выры­ваться из плос­ких рамок в вооб­ра­же­нии. Это изоб­ра­же­ние неболь­шой части мира — Гер­ма­нии — на гео­гра­фи­че­ской карте девят­на­дца­того века.

Дизайн карты орга­ни­зо­ван вокруг кон­ту­ров кон­ти­нента, рек и водо­ё­мов, хол­мов и гор. Здесь нет замет­ных пря­мо­уголь­ни­ков, кроме рамки самой карты. Типо­гра­фика под­чи­нена гео­гра­фии: назва­ния морей оги­бают бере­го­вую линию, рек — повто­ряют их форму, горо­дов — обо­зна­чают их положение.

Карта Германии. Адольф Стилер. Атлас всех частей света.
Гота: Юстус Пертес, 1875

С развитием знаний о мире люди учились представлять его в прямоугольнике и одновременно вырываться из плоских рамок в воображении. Это изображение небольшой части мира — Германии — на географической карте девятнадцатого века.

Дизайн карты организован вокруг контуров континента, рек и водоёмов, холмов и гор. Здесь нет заметных прямоугольников, кроме рамки самой карты. Типографика подчинена географии: названия морей огибают береговую линию, рек — повторяют их форму, городов — обозначают их положение.

Карта Германии. Адольф Стилер. Атлас всех частей света.
Гота: Юстус Пертес, 1875

Карта описывает рельеф с помощью цвета и изолиний на плоскости. Но она также выходит в третье измерение благодаря дополнительным высотным проекциям по краям карты.

Строки с названиями пиков аккуратно огибают рельеф, отклоняются от легенды, а когда нужно — прерывают её. Одним словом — выходят из прямоугольника.

Карта опи­сы­вает рельеф с помо­щью цвета и изо­ли­ний на плос­ко­сти. Но она также выхо­дит в тре­тье изме­ре­ние бла­го­даря допол­ни­тель­ным высот­ным про­ек­циям по краям карты.

Строки с назва­ни­ями пиков акку­ратно оги­бают рельеф, откло­ня­ются от легенды, а когда нужно — пре­ры­вают её. Одним сло­вом — выхо­дят из прямоугольника.

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

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

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

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

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

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

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

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

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

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

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

  • bureau.ru

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

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

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

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

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

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

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

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

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

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

  • bureau.ru

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